Skip to content

Commit

Permalink
v3 Docs - Structure and Layout Improvements (#3099)
Browse files Browse the repository at this point in the history
endigo9740 authored Jan 18, 2025
1 parent 225473e commit dc98fa1
Showing 27 changed files with 268 additions and 175 deletions.
12 changes: 6 additions & 6 deletions sites/next.skeleton.dev/src/components/docs/Drawer.astro
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
import { Menu as IconMenu, X as IconClose } from 'lucide-react';
// import Lightswitch from './Lightswitch.astro';
// import ThemeSwitch from './ThemeSwitch.astro';
import ThemeSwitch from './ThemeSwitch.astro';
import Lightswitch from './Lightswitch.astro';
interface DrawerProps {
navigation?: {
@@ -15,7 +15,7 @@ interface DrawerProps {
const {
navigation = [],
base = 'xl:hidden preset-filled-surface-100-900 shadow-xl fixed top-0 left-0 bottom-0 z-50 w-[320px] p-4 pb-24 space-y-10 overflow-y-auto transition-transform duration-100 -translate-x-[320px]',
base = 'xl:hidden preset-filled-surface-100-900 shadow-xl fixed top-0 left-0 bottom-0 h-screen z-50 w-[320px] p-4 pb-24 space-y-10 overflow-y-auto transition-transform duration-100 -translate-x-[320px]',
classes = ''
}: DrawerProps = Astro.props;
---
@@ -30,10 +30,10 @@ const {
</button>
</header>
<!-- Theme / Lightswitch -->
<!-- <div class="grid grid-cols-[1fr_auto] gap-4 items-center">
<div class="grid grid-cols-[1fr_auto] gap-4 items-center">
<ThemeSwitch />
<Lightswitch />
</div> -->
</div>
<!-- Navigation -->
<nav class="flex flex-col gap-2">
<span class="font-bold capitalize">Navigate</span>
@@ -57,7 +57,7 @@ const {

<script is:inline>
const elemDrawer = document.querySelector('#drawer');
const elemTriggersList = document.querySelectorAll('[data-drawer-toggle], #drawer button, #drawer a');
const elemTriggersList = document.querySelectorAll('[data-drawer-toggle], #drawer a');

// For each toggleable element
elemTriggersList.forEach((elem) => {
4 changes: 3 additions & 1 deletion sites/next.skeleton.dev/src/components/docs/Footer.astro
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
---
import { Icon } from 'astro-icon/components';
import { socialLinks } from 'src/stores/social-links';
const { classList = 'p-4' } = Astro.props;
---

<footer class="border-surface-500/20 bg-surface-50-950 border-t-[1px] p-4 xl:p-10">
<footer class:list={['border-t-[1px] border-surface-500/20', classList]}>
<div class="container mx-auto flex flex-col xl:flex-row justify-between items-center gap-4">
<div class="flex items-center gap-4">
<!-- <Icon name="skeleton" size={20} /> -->
9 changes: 6 additions & 3 deletions sites/next.skeleton.dev/src/components/docs/Header.astro
Original file line number Diff line number Diff line change
@@ -17,9 +17,12 @@ const coreLinks = [
];
---

<!-- Header -->
<header class="border-surface-500/20 bg-surface-50-950 w-full border-b-[1px] p-4 py-3 xl:px-10">
<div class="container mx-auto grid max-w-screen-2xl grid-cols-[auto_1fr_auto] xl:grid-cols-[1fr_auto_1fr] items-center gap-4">
<header
class="sticky top-0 z-50 border-b-[1px] border-surface-500/20 bg-surface-50/90 dark:bg-surface-950/90 backdrop-blur w-full h-[70px] flex items-center"
>
<div
class="container mx-auto grid max-w-screen-2xl grid-cols-[auto_1fr_auto] xl:grid-cols-[1fr_auto_1fr] items-center gap-4 px-4 xl:px-10"
>
<!-- Left -->
<div class="flex items-center justify-start gap-6">
<!-- Mobile Nav Drawer -->
9 changes: 5 additions & 4 deletions sites/next.skeleton.dev/src/components/docs/Lightswitch.astro
Original file line number Diff line number Diff line change
@@ -5,11 +5,11 @@
import { SunMoon } from 'lucide-react';
---

<button id="lightswitch" class="btn hover:preset-tonal" title="Toggle dark mode.">
<button data-lightswitch class="btn hover:preset-tonal" title="Toggle dark mode.">
<SunMoon size={24} />
</button>

<script is:inline>
<script>
const darkMode = (() => {
if (typeof localStorage !== 'undefined' && localStorage.getItem('darkMode')) {
return localStorage.getItem('darkMode');
@@ -26,7 +26,7 @@ import { SunMoon } from 'lucide-react';
document.documentElement.classList.add('dark');
}

window.localStorage.setItem('darkMode', darkMode);
window.localStorage.setItem('darkMode', String(darkMode));

const handleToggleClick = () => {
const element = document.documentElement;
@@ -36,5 +36,6 @@ import { SunMoon } from 'lucide-react';
localStorage.setItem('darkMode', isDark ? 'dark' : 'light');
};

document.getElementById('lightswitch').addEventListener('click', handleToggleClick);
const elemsLightswitch = document.querySelectorAll('[data-lightswitch]');
elemsLightswitch.forEach((ls) => ls.addEventListener('click', handleToggleClick));
</script>
23 changes: 16 additions & 7 deletions sites/next.skeleton.dev/src/components/docs/Navigation.astro
Original file line number Diff line number Diff line change
@@ -2,6 +2,9 @@
import type { CollectionEntry } from 'astro:content';
import { getCollection } from 'astro:content';
const pathname = new URL(Astro.request.url).pathname;
const currentPath = pathname.replace('/docs', '').slice(1) + '/';
interface Props {
classList?: string;
}
@@ -55,16 +58,22 @@ const navigation = {
};
---

<aside class="type-scale-2 space-y-10 overflow-y-auto" class:list={[classList]}>
<aside class="type-scale-2 space-y-10 overflow-y-auto pr-4" class:list={[classList]}>
{
Object.entries(navigation).map(([key, pages]) => (
<nav class="flex flex-col gap-2">
<span class="font-bold capitalize">{key.replace('-', ' ')}</span>
{pages.map((page) => (
<a class="anchor" href={`/docs/${page.slug}`} title={page.data.title}>
{page.data.title}
</a>
))}
<span class="font-bold capitalize ml-2">{key.replace('-', ' ')}</span>
<ul class="flex flex-col gap-1">
{pages.map((page) => (
<a
class={`px-2 py-1 rounded ${currentPath.includes(page.slug.replace('meta', '')) ? 'preset-tonal' : 'anchor'}`}
href={`/docs/${page.slug}`}
title={page.data.title}
>
{page.data.title}
</a>
))}
</ul>
</nav>
))
}
51 changes: 40 additions & 11 deletions sites/next.skeleton.dev/src/components/docs/Preview.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,12 @@
import React from 'react';

type PreviewProps = { selected: 'preview' | 'code'; preview: React.ReactNode; code: React.ReactNode };
type PreviewProps = {
selected: 'preview' | 'code' | 'codeReact' | 'codeSvelte';
preview: React.ReactNode;
code: React.ReactNode;
codeReact: React.ReactNode;
codeSvelte: React.ReactNode;
};

/** Create preview/code tabs for showcasing features. */
export const Preview: React.FC<PreviewProps> = (props) => {
@@ -14,21 +20,44 @@ export const Preview: React.FC<PreviewProps> = (props) => {
}

return (
// TODO: fix this top margin due to generate script tags
<div className="mt-4 space-y-4">
{/* Tabs */}
<nav className="border-b-[1px] border-surface-200-800 flex gap-4">
<button className={`${cTab} ${selectedClass('preview')}`} onClick={() => setSelected('preview')}>
<span className={`${cTabControl}`}>Preview</span>
</button>
<button className={`${cTab} ${selectedClass('code')}`} onClick={() => setSelected('code')}>
<span className={`${cTabControl}`}>Code</span>
</button>
{/* Tab: Preview */}
{props.preview && (
<button className={`${cTab} ${selectedClass('preview')}`} onClick={() => setSelected('preview')}>
<span className={`${cTabControl}`}>Preview</span>
</button>
)}
{/* Tab: Code (generic) */}
{props.code && (
<button className={`${cTab} ${selectedClass('code')}`} onClick={() => setSelected('code')}>
<span className={`${cTabControl}`}>{props.codeReact || props.codeSvelte ? 'Generic' : 'Code'}</span>
</button>
)}
{/* Tab: Code (React) */}
{props.codeReact && (
<button className={`${cTab} ${selectedClass('codeReact')}`} onClick={() => setSelected('codeReact')}>
<span className={`${cTabControl}`}>React</span>
</button>
)}
{/* Tab: Code (Svelte) */}
{props.codeSvelte && (
<button className={`${cTab} ${selectedClass('codeSvelte')}`} onClick={() => setSelected('codeSvelte')}>
<span className={`${cTabControl}`}>Svelte</span>
</button>
)}
</nav>
{/* Panel: Preview */}
<div className={`card-enhanced flex justify-center items-center p-8 ${selected !== 'preview' && '!hidden'}`}>{props.preview}</div>
{/* Panel: Codeblock */}
<div className={`w-full max-w-full ${selected === 'code' ? 'block' : 'hidden'}`}>{props.code}</div>
<div className={`card-enhanced flex justify-center items-center p-8 ${props.preview && selected === 'preview' ? 'block' : 'hidden'}`}>
{props.preview}
</div>
{/* Panel: Code (Generic) */}
<div className={`w-full max-w-full ${props.code && selected === 'code' ? 'block' : 'hidden'}`}>{props.code}</div>
{/* Panel: Code (React) */}
<div className={`w-full max-w-full ${props.codeReact && selected === 'codeReact' ? 'block' : 'hidden'}`}>{props.codeReact}</div>
{/* Panel: Code (Svelte) */}
<div className={`w-full max-w-full ${props.codeSvelte && selected === 'codeSvelte' ? 'block' : 'hidden'}`}>{props.codeSvelte}</div>
</div>
);
};
2 changes: 1 addition & 1 deletion sites/next.skeleton.dev/src/components/docs/Search.svelte
Original file line number Diff line number Diff line change
@@ -124,7 +124,7 @@
<button
onclick={() => openDialog()}
type="button"
class="btn preset-tonal preset-outlined-surface-200-800 hover:preset-tonal w-full xl:w-auto justify-start"
class="btn preset-tonal-surface preset-outlined-surface-200-800 hover:preset-tonal w-full xl:w-auto justify-start"
>
<IconSearch class="size-4 opacity-60" />
<span class="opacity-60">Search...</span>
16 changes: 8 additions & 8 deletions sites/next.skeleton.dev/src/components/docs/ThemeList.astro
Original file line number Diff line number Diff line change
@@ -10,15 +10,15 @@ import * as themes from '@skeletonlabs/skeleton/themes';
class="w-full bg-surface-50-950 p-4 preset-outlined-surface-100-900 !ring-[1px] hover:preset-outlined-surface-800-200 rounded-md grid grid-cols-[auto_1fr_auto] items-center gap-4"
>
<span>{values.metadata.emoji}</span>
<h3 class="h6 text-left !text-surface-950-50">{key}</h3>
<h3 class="font-bold font-sans text-left !text-surface-950-50">{key}</h3>
<div class="flex justify-center items-center -space-x-1">
<div class="aspect-square w-5 bg-primary-500 border-[1px] border-black/10 rounded-full" />
<div class="aspect-square w-5 bg-secondary-500 border-[1px] border-black/10 rounded-full" />
<div class="aspect-square w-5 bg-tertiary-500 border-[1px] border-black/10 rounded-full" />
<div class="aspect-square w-5 bg-success-500 border-[1px] border-black/10 rounded-full" />
<div class="aspect-square w-5 bg-warning-500 border-[1px] border-black/10 rounded-full" />
<div class="aspect-square w-5 bg-error-500 border-[1px] border-black/10 rounded-full" />
<div class="aspect-square w-5 bg-surface-500 border-[1px] border-black/10 rounded-full" />
<div class="aspect-square w-4 bg-primary-500 border-[1px] border-black/10 rounded-full" />
<div class="aspect-square w-4 bg-secondary-500 border-[1px] border-black/10 rounded-full" />
<div class="aspect-square w-4 bg-tertiary-500 border-[1px] border-black/10 rounded-full" />
<div class="aspect-square w-4 bg-success-500 border-[1px] border-black/10 rounded-full" />
<div class="aspect-square w-4 bg-warning-500 border-[1px] border-black/10 rounded-full" />
<div class="aspect-square w-4 bg-error-500 border-[1px] border-black/10 rounded-full" />
<div class="aspect-square w-4 bg-surface-500 border-[1px] border-black/10 rounded-full" />
</div>
</button>
))
44 changes: 26 additions & 18 deletions sites/next.skeleton.dev/src/components/docs/ThemeSwitch.astro
Original file line number Diff line number Diff line change
@@ -14,7 +14,7 @@ function capitalizeFirstLetter(text: string) {
<div class="input-group-cell">
<Palette size={18} />
</div>
<select id="themesList">
<select data-theme-list>
<!-- Loop and generate theme list automatically -->
{
Object.keys(themes).map((themeName) => (
@@ -26,26 +26,34 @@ function capitalizeFirstLetter(text: string) {
</select>
</div>

<script is:inline>
const elemSelect = document.getElementById('themesList');
<script>
const elemSelect = document.querySelectorAll('[data-theme-list]');
const lsTheme = localStorage.getItem('theme') || 'cerberus';

// Init
elemSelect.value = lsTheme;
setBodyAttr(lsTheme);
if (elemSelect) {
// Init
elemSelect.forEach((es: any) => (es.value = lsTheme));
setBodyAttr(lsTheme);

// Change Handler
function onChangeHandler(event: any) {
const selectedTheme = event.target.value;
document.body.classList.add('transition-all');
document.body.classList.add('duration-200');
document.body.dataset.theme = selectedTheme;
setBodyAttr(selectedTheme);
localStorage.setItem('theme', selectedTheme);
setTimeout(() => {
document.body.classList.remove('transition-all');
document.body.classList.remove('duration-200');
}, 200);
}

// Change Handler
function onChangeHandler(event) {
const selectedTheme = event.target.value;
document.body.dataset.theme = selectedTheme;
setBodyAttr(selectedTheme);
localStorage.setItem('theme', selectedTheme);
}
function setBodyAttr(theme: any) {
document.body.dataset.theme = theme;
}

function setBodyAttr(theme) {
document.body.dataset.theme = theme;
// Listeners
elemSelect.forEach((es: any) => es.addEventListener('change', onChangeHandler));
}

// Listeners
elemSelect.addEventListener('change', onChangeHandler);
</script>
2 changes: 1 addition & 1 deletion sites/next.skeleton.dev/src/components/mdx/Heading2.astro
Original file line number Diff line number Diff line change
@@ -2,4 +2,4 @@
const props = Astro.props;
---

<h2 class="h2" {...props}><slot /></h2>
<h2 class="h2 scroll-header" {...props}><slot /></h2>
2 changes: 1 addition & 1 deletion sites/next.skeleton.dev/src/components/mdx/Heading3.astro
Original file line number Diff line number Diff line change
@@ -2,4 +2,4 @@
const props = Astro.props;
---

<h3 class="h3" {...props}><slot /></h3>
<h3 class="h3 scroll-header" {...props}><slot /></h3>
2 changes: 1 addition & 1 deletion sites/next.skeleton.dev/src/components/mdx/Heading4.astro
Original file line number Diff line number Diff line change
@@ -2,4 +2,4 @@
const props = Astro.props;
---

<h3 class="h3" {...props}><slot /></h3>
<h3 class="h3 scroll-header" {...props}><slot /></h3>
2 changes: 1 addition & 1 deletion sites/next.skeleton.dev/src/components/mdx/Heading5.astro
Original file line number Diff line number Diff line change
@@ -2,4 +2,4 @@
const props = Astro.props;
---

<h5 class="h5" {...props}><slot /></h5>
<h5 class="h5 scroll-header" {...props}><slot /></h5>
2 changes: 1 addition & 1 deletion sites/next.skeleton.dev/src/components/mdx/Heading6.astro
Original file line number Diff line number Diff line change
@@ -2,4 +2,4 @@
const props = Astro.props;
---

<h6 class="h6" {...props}><slot /></h6>
<h6 class="h6 scroll-header" {...props}><slot /></h6>
14 changes: 7 additions & 7 deletions sites/next.skeleton.dev/src/content/docs/design/themes.mdx
Original file line number Diff line number Diff line change
@@ -30,9 +30,9 @@ import * as themes from '@skeletonlabs/skeleton/themes';

Optionally you can choose to generate a custom theme to adapt to your app's unique design aesthetic. Skeleton provides a powerful but easy to use theme generator to make to enable this.

<figure class="card-filled-enhanced flex justify-center p-8">
<a href="https://themes.skeleton.dev/" target="_blank" class="btn preset-filled">
Theme Generator &rarr;
<figure class="linker">
<a href="https://themes.skeleton.dev/" target="_blank" class="linker-item">
Theme Generator
</a>
</figure>

@@ -145,13 +145,13 @@ Background images are also supported, including CSS mesh gradients. By using the

Use Mesher to quickly and easily generate custom mesh gradients.

<figure class="card-filled-enhanced flex justify-center p-8">
<figure class="linker">
<a
class="btn preset-filled"
href="https://csshero.org/mesher/"
target="_blank"
>
Mesher by CSS Hero &rarr;
Mesher by CSS Hero
</a>
</figure>

@@ -162,13 +162,13 @@ Use Mesher to quickly and easily generate custom mesh gradients.

Skeleton recommends the use of [Fontsource](https://fontsource.org/) for installing and managing custom fonts.

<figure class="card-filled-enhanced flex justify-center p-8">
<figure class="linker">
<a
class="btn preset-filled"
href="https://fontsource.org/"
target="_blank"
>
Browse Fontsource &rarr;
Browse Fontsource
</a>
</figure>

Original file line number Diff line number Diff line change
@@ -19,8 +19,8 @@ The Skeleton Figma UI Kit has been designed in coordination between [Bohdan Karp

> Maintainer Note: this will be made available alongside the stable release of Skeleton v3.
<figure class="card-filled-enhanced flex justify-center p-8">
<button type="button" class="btn preset-filled" disabled>
<figure class="linker">
<button type="button" class="linker-item" disabled>
Coming Soon!
</button>
</figure>
Loading

0 comments on commit dc98fa1

Please sign in to comment.