Skip to content

Commit

Permalink
Modernize v2 Docs and Onboarding (#3177)
Browse files Browse the repository at this point in the history
endigo9740 authored Jan 28, 2025

Verified

This commit was signed with the committer’s verified signature.
1 parent 04cf8e0 commit c61d16e
Showing 21 changed files with 347 additions and 502 deletions.
6 changes: 3 additions & 3 deletions sites/skeleton.dev/src/lib/links.ts
Original file line number Diff line number Diff line change
@@ -116,16 +116,14 @@ export const menuNavLinks: Record<string, Array<{ title: string; list: List }>>
{ href: '/components/file-buttons', label: 'File Buttons', keywords: 'upload, form, input, file, media' },
{ href: '/components/file-dropzone', label: 'File Dropzone', keywords: 'upload, form, input, file, media, drag, drop' },
{ href: '/components/input-chips', label: 'Input Chips', keywords: 'multi, multiple, select, tags, form, validation' },
{ href: '/components/listboxes', label: 'Listboxes', keywords: 'list, select, multi, multiple' },
{ href: '/components/paginators', label: 'Paginators', keywords: 'nav, navigation, table, data, list' },
{ href: '/components/progress-bars', label: 'Progress Bars', keywords: 'meter, track, indeterminate, determinate, min, max' },
{ href: '/components/progress-radials', label: 'Progress Radials', keywords: 'meter, track, indeterminate, determinate, spin' },
{ href: '/components/ratings', label: 'Ratings', keywords: 'rating, rate, ratings, bar, star' },
{ href: '/components/radio-groups', label: 'Radio Groups', keywords: 'input, form, select, selection' },
{ href: '/components/range-sliders', label: 'Range Sliders', keywords: 'value, min, max, step,, tick, input, form' },
{ href: '/components/slide-toggles', label: 'Slide Toggles', keywords: 'check, checkbox, toggle, input, form' },
{ href: '/components/tabs', label: 'Tabs', keywords: 'select, selection, panel' },
{ href: '/components/tree-views', label: 'Tree Views', keywords: 'tree, view, node' }
{ href: '/components/tabs', label: 'Tabs', keywords: 'select, selection, panel' }
]
},
// Deprecated
@@ -138,7 +136,9 @@ export const menuNavLinks: Record<string, Array<{ title: string; list: List }>>
keywords: 'layout, header, footer, sidebar, page, content',
badge: 'Deprecated'
},
{ href: '/components/listboxes', label: 'Listboxes', keywords: 'list, select, multi, multiple', badge: 'Deprecated' },
{ href: '/components/tables', label: 'Tables', keywords: 'data, entry', badge: 'Deprecated' },
{ href: '/components/tree-views', label: 'Tree Views', keywords: 'tree, view, node', badge: 'Deprecated' },
{ href: '/components/steppers', label: 'Steppers', keywords: 'intro, onboard, onboarding, form, progress', badge: 'Deprecated' }
]
}
Original file line number Diff line number Diff line change
@@ -43,11 +43,11 @@
<h3 class="h3" data-toc-ignore>Deprecated</h3>
<!-- prettier-ignore -->
<p>
This feature is being phased out as we transition to <a class="underline" href="https://github.com/skeletonlabs/skeleton/discussions/2375" target="_blank">Skeleton v3</a>. This component will remain functional for all 2.x releases. However, we recommend you migrate to <a class="underline" href="https://skeleton.dev/docs/guides/layouts" target="_blank">custom layouts</a> as soon as possible. While this guide is provided for Skeleton v3, the only prerequisite is Tailwind. Which means you can use these techniques today!
This feature is being phased out as we transition to Skeleton v3. It will remain functional for all 2.x releases. Please review our generic layout guide for alternative instructions.
</p>
</div>
<div class="alert-actions">
<a class="btn variant-filled" href="https://skeleton.dev/docs/guides/layouts" target="_blank">Layout Guide</a>
<a class="btn variant-filled" href="https://next.skeleton.dev/docs/guides/layouts" target="_blank">View Guide</a>
</div>
</aside>
<div class="space-y-2">
Original file line number Diff line number Diff line change
@@ -36,6 +36,14 @@
<DocsShell {settings}>
<!-- Slot: Sandbox -->
<svelte:fragment slot="sandbox">
<!-- Alert -->
<aside class="alert variant-ghost-error">
<i class="fa-solid fa-triangle-exclamation text-4xl"></i>
<div class="alert-message" data-toc-ignore>
<h3 class="h3" data-toc-ignore>Deprecated</h3>
<p>This feature is being phased out as we transition to Skeleton v3. It will remain functional for all 2.x releases.</p>
</div>
</aside>
<DocsPreview>
<svelte:fragment slot="preview">
<div class="w-full max-w-[480px] card p-4 text-token">
Original file line number Diff line number Diff line change
@@ -65,11 +65,11 @@
<h3 class="h3" data-toc-ignore>Deprecated</h3>
<!-- prettier-ignore -->
<p>
This feature is being phased out as we transition to <a class="underline" href="https://github.com/skeletonlabs/skeleton/discussions/2375" target="_blank">Skeleton v3</a>. This will remain functional for all 2.x releases. Expect a dedicated v3 alternative as soon as possible.
This feature is being phased out as we transition to Skeleton v3. It will remain functional for all 2.x releases. Please review our generic guide for creating your own stepper.
</p>
</div>
<div class="alert-actions">
<a class="btn variant-filled" href="https://github.com/skeletonlabs/skeleton/issues/1780" target="_blank"> Learn More </a>
<a class="btn variant-filled" href="https://next.skeleton.dev/docs/guides/cookbook/stepper" target="_blank">View Guide</a>
</div>
</aside>
<!-- Preview -->
Original file line number Diff line number Diff line change
@@ -77,12 +77,9 @@
<h3 class="h3" data-toc-ignore>Deprecated</h3>
<!-- prettier-ignore -->
<p>
This feature is being phased out as transition to <a class="underline" href="https://github.com/skeletonlabs/skeleton/discussions/2375" target="_blank">Skeleton v3</a>. This will remain functional for all 2.x releases, but recommend you migrate to <a class="underline" href="/elements/tables">table elements</a> as soon as possible.
This feature is being phased out as we transition to Skeleton v3. It will remain functional for all 2.x releases. Please migrate to <a class="underline" href="/elements/tables">table elements</a> as soon as possible.
</p>
</div>
<div class="alert-actions">
<a class="btn variant-filled" href="https://github.com/skeletonlabs/skeleton/issues/2388" target="_blank"> Learn More </a>
</div>
</aside>
<DocsPreview>
<svelte:fragment slot="preview">
Original file line number Diff line number Diff line change
@@ -80,6 +80,20 @@
<DocsShell {settings}>
<!-- Slot: Sandbox -->
<svelte:fragment slot="sandbox">
<!-- Alert -->
<aside class="alert variant-ghost-error">
<i class="fa-solid fa-triangle-exclamation text-4xl"></i>
<div class="alert-message" data-toc-ignore>
<h3 class="h3" data-toc-ignore>Deprecated</h3>
<!-- prettier-ignore -->
<p>
This feature will remain function in Skeleton 2.x, but be temporarily unavailable in Skeleton v3. If you rely on this feature, please consider a third-party alternative.
</p>
</div>
<div class="alert-actions">
<a class="btn variant-filled" href="https://github.com/skeletonlabs/skeleton/issues/2358#issuecomment-2313215789" target="_blank">Learn More</a>
</div>
</aside>
<DocsPreview regionFooter="text-center">
<svelte:fragment slot="preview">
<div class="w-full max-w-[480px] card p-4 text-token">
Original file line number Diff line number Diff line change
@@ -40,7 +40,7 @@
<CodeBlock
language="ts"
code={`
// tailwind.config.[ts|js|cjs]\n
// tailwind.config\n
module.exports = {
darkMode: 'selector', // <--
// ...
@@ -72,7 +72,7 @@ module.exports = {
<CodeBlock
language="ts"
code={`
// tailwind.config.[ts|js|cjs]\n
// tailwind.config\n
module.exports = {
darkMode: 'media', // <--
// ...
Original file line number Diff line number Diff line change
@@ -29,7 +29,7 @@
Generate your theme above, copy the source code, then paste this into a new file in the root of your project with a distinct name, such as: <code class="code">my-custom-theme.[ts|js]</code>. If you opt for the Javascript format, make sure to strip out any Typescript type information.
</p>
<!-- Instruction -->
<p>Open <code class="code">tailwind.config.[ts|js|cjs]</code> found in the root of your project, and import your custom theme.</p>
<p>Open <code class="code">tailwind.config</code> found in the root of your project, and import your custom theme.</p>
<CodeBlock language="ts" code={`import { myCustomTheme } from './my-custom-theme'`} />
<p>Within this file, register your custom theme via the Skeleton Tailwind plugin settings.</p>
<CodeBlock
93 changes: 77 additions & 16 deletions sites/skeleton.dev/src/routes/(inner)/docs/get-started/+page.svelte
Original file line number Diff line number Diff line change
@@ -1,27 +1,88 @@
<script lang="ts">
import LayoutPage from '$lib/layouts/LayoutPage/LayoutPage.svelte';
// Stores
import { storeOnboardMethod } from '$lib/stores/stores';
// Components
import { TabGroup, Tab } from '@skeletonlabs/skeleton';
// Section Components
import SectionInstall from './SectionInstall.svelte';
import SectionSkeleton from './SectionSkeleton.svelte';
import SectionTailwind from './SectionTailwind.svelte';
import SectionThemes from './SectionThemes.svelte';
import SectionCli from './SectionCli.svelte';
import SectionManual from './SectionManual.svelte';
</script>

<LayoutPage>
<header class="space-y-4">
<h1 class="h1">Get Started</h1>
<!-- prettier-ignore -->
<p>
We recommend at least moderate experience with <a class="anchor" href="https://svelte.dev/tutorial/svelte/welcome-to-svelte" target="_blank" rel="noreferrer">Svelte</a>, <a class="anchor" href="https://learn.svelte.dev/tutorial/welcome-to-svelte" target="_blank" rel="noreferrer">SvelteKit</a>, and <a class="anchor" href="https://tailwindcss.com/docs/utility-first" target="_blank" rel="noreferrer">Tailwind CSS</a> before you proceed.
</p>
<aside class="alert variant-ghost">
<i class="fa-solid fa-triangle-exclamation"></i>
<p>Please be aware that Skeleton only supports <u>SvelteKit applications</u> at this time.</p>
</aside>
<p>Learn how to scaffold a new Skeleton project.</p>
</header>
<hr />
<SectionInstall />
<SectionSkeleton />
<SectionTailwind />
<SectionThemes />
<section class="space-y-4">
<h2 class="h2">Requirements</h2>
<p>Moderate experience with the following tooling is required before using Skeleton.</p>
<div class="table-container">
<table class="table table-hover">
<thead>
<tr>
<th>Tooling</th>
<th>Max Version</th>
<th>More Information</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="https://svelte.dev/" target="_blank" class="anchor">SvelteKit</a></td>
<td>v2</td>
<td>Additional frameworks coming in <a href="https://next.skeleton.dev/docs/get-started/installation" target="_blank" class="anchor">future versions</a>.</td>
</tr>
<tr>
<td><a href="https://svelte.dev/" target="_blank" class="anchor">Svelte</a></td>
<td>v4</td>
<td>
<a href="https://github.com/skeletonlabs/skeleton/discussions/2887" target="_blank" class="anchor">Svelte 5</a> is supported with some known issues.
</td>
</tr>
<tr>
<td><a href="https://v3.tailwindcss.com/" target="_blank" class="anchor">Taiwlind</a></td>
<td>v3</td>
<td>
<a href="https://tailwindcss.com/blog/tailwindcss-v4" target="_blank" class="anchor">Tailwind v4</a> is not supported by this version of Skeleton.
</td>
</tr>
</tbody>
</table>
</div>
</section>
<hr />
<section class="space-y-4">
<h2 class="h2">Create Your Project</h2>
<TabGroup regionPanel="space-y-4">
<!-- Tabs -->
<Tab bind:group={$storeOnboardMethod} name="cli" value="cli">Skeleton CLI (recommended)</Tab>
<Tab bind:group={$storeOnboardMethod} name="manual" value="manual">Manual Installation</Tab>
<!-- Panel -->
<svelte:fragment slot="panel">
{#if $storeOnboardMethod === 'cli'}
<SectionCli />
{:else}
<SectionManual />
{/if}
</svelte:fragment>
</TabGroup>
</section>
<hr class="hr">
<section class="space-y-4">
<!-- Dark Mode -->
<div class="card variant-glass p-4">
<div class="!flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0 md:space-x-4">
<p>Learn how to configure your application for dark mode.</p>
<a class="btn variant-filled-secondary" href="/docs/dark-mode">Dark Mode &rarr;</a>
</div>
</div>
<!-- Theme Customization -->
<div class="card variant-glass p-4">
<div class="!flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0 md:space-x-4">
<p>Learn how to create or extend themes.</p>
<a class="btn variant-filled-secondary" href="/docs/themes">Themes &rarr;</a>
</div>
</div>
</section>
</LayoutPage>
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
<script lang="ts">
import { CodeBlock } from '@skeletonlabs/skeleton';
</script>

<!-- xxx -->
<section class="space-y-4">
<p>
The easiest way to get started is using <code class="code">create-skeleton-app</code>.
</p>
<CodeBlock
language="shell"
code={`
npm create skeleton-app@latest my-skeleton-app
- Enable Typescript when prompted (recommended)
cd my-skeleton-app
`}
/>
<p>This CLI will automate the following:</p>
<ul class="list-inside list-disc space-y-2">
<li>The Skeleton Tailwind plugin and Component packages will be installed.</li>
<li>Tailwind v3 will be automatically installed and setup.</li>
<li>Basic Skeleton and Tailwind configuration be handled for you.</li>
<li>Any prompted settings and add-ons be applied.</li>
</ul>
</section>

This file was deleted.

Loading

0 comments on commit c61d16e

Please sign in to comment.