Minor doc edit for Drawer, Modal, Toast instruction

skeletonlabs · Aug 9, 2023 · 2eea63b · 2eea63b
1 parent 0907f39
commit 2eea63b
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 14 deletions.
diff --git a/sites/skeleton.dev/src/routes/(inner)/utilities/drawers/+page.svelte b/sites/skeleton.dev/src/routes/(inner)/utilities/drawers/+page.svelte
@@ -79,9 +79,14 @@
 					</div>
 			</svelte:fragment>
 			<svelte:fragment slot="source">
-				<p>Implement a single instance of the drawer component in your app's root layout above the App Shell (if present).</p>
+				<!-- prettier-ignore -->
+				<p>
+					Implement the following in the root layout of your application. This is required only once when implementing Skeleton's Drawer, Modal, or Toast features, and will prevent known issues with <a class="anchor" href="https://github.com/skeletonlabs/skeleton/wiki/SvelteKit-SSR-Warning" target="_blank">SvelteKit SSR</a>.
+				</p>
 				<CodeBlock language="ts" code={`import { initializeStores } from '@skeletonlabs/skeleton';\n\ninitializeStores();`} />
+				<p>Implement a single instance of the drawer component in your app's root layout, above the App Shell (if present).</p>
 				<CodeBlock language="html" code={`<Drawer />\n\n<!-- <AppShell>...</AppShell> -->`} />
+				<p>We'll cover triggering this feature on-demand in the documentation below.</p>
 			</svelte:fragment>
 		</DocsPreview>
 	</svelte:fragment>

diff --git a/sites/skeleton.dev/src/routes/(inner)/utilities/modals/+page.svelte b/sites/skeleton.dev/src/routes/(inner)/utilities/modals/+page.svelte
@@ -149,7 +149,10 @@
 				<button class="btn variant-filled" on:click={modalDemo}>Show Modal</button>
 			</svelte:fragment>
 			<svelte:fragment slot="source">
-				<p>In your app's root layout, import the Modal component and the store initializer function.</p>
+				<!-- prettier-ignore -->
+				<p>
+					Implement the following in the root layout of your application. This is required only once when implementing Skeleton's Drawer, Modal, or Toast features, and will prevent known issues with <a class="anchor" href="https://github.com/skeletonlabs/skeleton/wiki/SvelteKit-SSR-Warning" target="_blank">SvelteKit SSR</a>.
+				</p>
 				<CodeBlock
 					language="typescript"
 					code={`
@@ -158,15 +161,9 @@ import { Modal, initializeStores } from "@skeletonlabs/skeleton";
 initializeStores();
 `}
 				/>
-				<p>Add a single instance of the Modal component above the App Shell (if present).</p>
-				<CodeBlock
-					language="html"
-					code={`
-<Modal />
-
-<!-- <AppShell>...</AppShell> -->
-`}
-				/>
+				<p>Implement a single instance of the modal component in your app's root layout, above the App Shell (if present).</p>
+				<CodeBlock language="html" code={`<Modal />\n\n<!-- <AppShell>...</AppShell> -->`} />
+				<p>We'll cover triggering this feature on-demand in the documentation below.</p>
 			</svelte:fragment>
 		</DocsPreview>
 	</svelte:fragment>

diff --git a/sites/skeleton.dev/src/routes/(inner)/utilities/toasts/+page.svelte b/sites/skeleton.dev/src/routes/(inner)/utilities/toasts/+page.svelte
@@ -141,12 +141,14 @@
 				</div>
 			</svelte:fragment>
 			<svelte:fragment slot="source">
+				<!-- prettier-ignore -->
 				<p>
-					Import and add a single instance of the Toast component in your app's root layout. Since this is in global scope it will be
-					possible to reuse this feature throughout your entire application.
+					Implement the following in the root layout of your application. This is required only once when implementing Skeleton's Drawer, Modal, or Toast features, and will prevent known issues with <a class="anchor" href="https://github.com/skeletonlabs/skeleton/wiki/SvelteKit-SSR-Warning" target="_blank">SvelteKit SSR</a>.
 				</p>
 				<CodeBlock language="ts" code={`import { initializeStores } from '@skeletonlabs/skeleton';\n\ninitializeStores();`} />
-				<CodeBlock language="html" code={`<Toast />`} />
+				<p>Implement a single instance of the toast component in your app's root layout, above the App Shell (if present).</p>
+				<CodeBlock language="html" code={`<Toast />\n\n<!-- <AppShell>...</AppShell> -->`} />
+				<p>We'll cover triggering this feature on-demand in the documentation below.</p>
 			</svelte:fragment>
 		</DocsPreview>
 	</svelte:fragment>