NEXT Onboarding Revised (#2895)

skeletonlabs · Oct 23, 2024 · c026279 · c026279
1 parent 0b76da3
commit c026279
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 35 deletions.
diff --git a/sites/next.skeleton.dev/src/content/docs/get-started/installation/nextjs.mdx b/sites/next.skeleton.dev/src/content/docs/get-started/installation/nextjs.mdx
@@ -1,7 +1,7 @@
 ---
 layout: '@layouts/LayoutDoc.astro'
 title: Next.js
-description: Install and configure Next.js.
+description: Install and configure Skeleton for Next.js.
 order: 0
 ---
 
@@ -12,33 +12,30 @@ import ProcessStep from '@components/docs/ProcessStep.astro';
 
 {/* --- */}
 
-<div class="card preset-tonal-error grid grid-cols-1 items-center gap-4 p-8 py-6 lg:grid-cols-[1fr_auto]">
-	<p>
-		WARNING: This will install an early preview build of Skeleton v3. Please be aware that some features may be missing, incomplete, or
-		non-functional at this time. Report bugs and issues to GitHub or Discord.
-	</p>
+<div class="card preset-outlined-error-500 preset-tonal-error p-8 space-y-8">
+	<p>WARNING: The following guide will install the <u>Skeleton v3 Beta</u> using the Next.js CLI. Please be aware that some features may be missing, incomplete, or non-functional at this time. Please report bugs and issues on GitHub or Discord.</p>
 </div>
 
 <Process>
     <ProcessStep step="1">
         ## Create a Project
-        Start by creating a new project using `create-next-app`:
+        Start by creating a new project using `create-next-app` (the Next.js CLI):
         ```console
         npm create next-app@latest my-skeleton-app --typescript --tailwind --eslint
         cd my-skeleton-app
         ```
     </ProcessStep>
     <ProcessStep step="2">
         ## Install Skeleton
-        Install the Skeleton core and Skeleton React packages.
+        Install the Skeleton core and Svelte component packages.
         ```console
         npm i -D @skeletonlabs/skeleton@next @skeletonlabs/skeleton-react@next
         ```
     </ProcessStep>
     <ProcessStep step="4">
         ## Configure Tailwind
         Open `tailwind.config` in the root of your project and make these changes:
-        ```js title="tailwind.config" {3-5, 13, 19-21}
+        ```js title="tailwind.config" {3-5, 13, 19-22}
         import type { Config } from 'tailwindcss';
 
         import { join } from "path";
@@ -58,6 +55,7 @@ import ProcessStep from '@components/docs/ProcessStep.astro';
             },
             plugins: [
                 skeleton({
+                    // NOTE: each theme included will be added to your CSS bundle
                     themes: [ themes.cerberus, themes.rose ]
                 })
             ]
@@ -72,8 +70,11 @@ import ProcessStep from '@components/docs/ProcessStep.astro';
         ```
     </ProcessStep>
     <ProcessStep step="check">
-        ## Ready
-        You're now ready to begin using Skeleton.
+        ## Done
+        Start the dev server using the following command.
+		```console
+		npm run dev
+        ```
     </ProcessStep>
 
 </Process>
diff --git a/sites/next.skeleton.dev/src/content/docs/get-started/installation/sveltekit.mdx b/sites/next.skeleton.dev/src/content/docs/get-started/installation/sveltekit.mdx
@@ -1,7 +1,7 @@
 ---
 layout: '@layouts/LayoutDoc.astro'
 title: SvelteKit
-description: Install and configure SvelteKit.
+description: Install and configure Skeleton for SvelteKit.
 order: 10
 ---
 
@@ -12,47 +12,36 @@ import ProcessStep from '@components/docs/ProcessStep.astro';
 
 {/* --- */}
 
-<div class="card preset-tonal-error grid grid-cols-1 items-center gap-4 p-8 py-6 lg:grid-cols-[1fr_auto]">
-	<p>
-		WARNING: This will install an early preview build of Skeleton v3 using Svelte 5. Please be aware that some features may be missing,
-		incomplete, or non-functional at this time. Report bugs and issues to GitHub or Discord.
-	</p>
+<div class="card preset-outlined-error-500 preset-tonal-error p-8 space-y-8">
+	<p>WARNING: The following guide will install the <u>Skeleton v3 Beta</u> using the Svelte CLI. Please be aware that some features may be missing, incomplete, or non-functional at this time. Please report bugs and issues on GitHub or Discord.</p>
 </div>
 
 <Process>
     <ProcessStep step="1">
         ## Create a Project
-        Start by creating a new Svelte 5 project using `create-svelte`:
+        Start by creating a new Svelte 5 project using `sv` (the Svelte CLI):
+		> NOTE: make sure to select `tailwind` when prompted!
         ```console
-        npm create svelte@latest my-skeleton-app
-            - Addtional Options > Svelte 5 Preview (required!)
-        cd my-skeleton-app
-        npm install
+        npx sv create my-skeleton-app
+		cd my-skeleton-app
+		npm install
         ```
     </ProcessStep>
     <ProcessStep step="2">
         ## Install Skeleton
-        Install the Skeleton core and Skeleton Svelte packages.
+        Install the Skeleton core and Svelte component packages.
         ```console
         npm i -D @skeletonlabs/skeleton@next @skeletonlabs/skeleton-svelte@next
         ```
     </ProcessStep>
     <ProcessStep step="3">
-        ## Install Tailwind
-        Install Tailwind using [Svelte-Add](https://svelte-add.com/) to automate the process.
-        ```console
-        npx svelte-add@latest tailwindcss --tailwindcss-typography false
-        ```
-        > NOTE: if you see "something went wrong", everything will work as expected. Please proceed to the next step.
-    </ProcessStep>
-    <ProcessStep step="4">
         ## Configure Tailwind
         You may optionally install the `@types/node` package to prevent LSP errors in your Tailwind config.
         ```console
         npm i --save-dev @types/node
         ```
         Open `tailwind.config` in the root of your project and make these changes:
-        ```js title="tailwind.config" {3-5, 11, 17-19}
+        ```js title="tailwind.config" {3-5, 11, 17-20}
         import type { Config } from 'tailwindcss';
 
         import { join } from 'path';
@@ -70,22 +59,26 @@ import ProcessStep from '@components/docs/ProcessStep.astro';
             },
             plugins: [
                 skeleton({
+                    // NOTE: each theme included will be added to your CSS bundle
                     themes: [ themes.cerberus, themes.rose ]
                 })
             ]
         }
         ```
     </ProcessStep>
-    <ProcessStep step="5">
+    <ProcessStep step="4">
         ## Set Active Theme
         Open `/src/app.html`, then set the `data-theme` attribute on the body to define the active theme.
         ```html title="app.html"
         <body data-theme="cerberus">...</body>
         ```
     </ProcessStep>
     <ProcessStep step="check">
-        ## Ready
-        You're now ready to begin using Skeleton.
+        ## Done
+        Start the dev server using the following command.
+		```console
+		npm run dev
+        ```
     </ProcessStep>
 
 </Process>