-
-
Notifications
You must be signed in to change notification settings - Fork 332
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Loading status checks…
Modernize v2 Docs and Onboarding (#3177)
1 parent
04cf8e0
commit c61d16e
Showing
21 changed files
with
347 additions
and
502 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
93 changes: 77 additions & 16 deletions
93
sites/skeleton.dev/src/routes/(inner)/docs/get-started/+page.svelte
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 →</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 →</a> | ||
</div> | ||
</div> | ||
</section> | ||
</LayoutPage> |
25 changes: 25 additions & 0 deletions
25
sites/skeleton.dev/src/routes/(inner)/docs/get-started/SectionCli.svelte
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
45 changes: 0 additions & 45 deletions
45
sites/skeleton.dev/src/routes/(inner)/docs/get-started/SectionInstall.svelte
This file was deleted.
Oops, something went wrong.
Oops, something went wrong.