fix docs

apps/demo/src/routes/+layout.svelte

@@ -1,12 +1,18 @@
+<script>
+    import { dev } from "$app/environment";
+</script>
+
 <header>
     <nav>
         <h1>svelte-markdoc-preprocess</h1>
-            <a href="/">usage</a> / 
-            <a href="/svelte">svelte</a> / 
-            <a href="/components">components</a> / 
-            <a href="/markdown">markdown</a>
+        <a href="/">home</a> /
+        <a href="/docs">docs</a>
+		{#if dev}
+			/ <a href="/playground">playground</a>
+		{/if}
     </nav>
 </header>
+
 <main>
     <slot />
 </main>

apps/demo/src/routes/+page.markdoc

@@ -1,100 +1,11 @@
-This is a [Svelte](https://svelte.dev) preprocessor that allows you to use Markdoc.
+This library brings the power of [Markdoc](https://markdoc.dev/) right into your [Svelte](https://svelte.dev) applications! 
 
-## Usage
-
-Install the package:
-
-```bash
-npm i -D svelte-markdoc-preprocess
-```
-
-Add the preprocessor and new extensions to your `svelte.config.js`:
-```js
-import { markdoc } from 'svelte-markdoc-preprocess';
-
-const config = {
-    preprocess: [
-        vitePreprocess(),
-        markdoc({
-            layouts: {
-                default: join(
-                    dirname(fileURLToPath(import.meta.url)),
-                    './src/lib/Layout.svelte'
-                )
-            }
-        })
-    ],
-    extensions: ['.markdoc', '.svelte'],
-};
-```
-
-And use them like this:
-
-```md
-<!-- +page.markdoc -->
-
-# I am a heading
-
-I am a paragraph with **bold** words. But you can also use Svelte Components:
-```
-
-## Layouts
-
-You can define layouts in the `markdoc` options.
-
-```js
-// svelte.config.js
-markdoc({
-    layouts: {
-        default: join(
-            dirname(fileURLToPath(import.meta.url)),
-            './src/lib/Layout.svelte'
-        ),
-        some_other_layout:join(
-            dirname(fileURLToPath(import.meta.url)),
-            './src/lib/SomeOtherLayout.svelte'
-        )
-    }
-})
-```
-
-Layout files are basically Svelte components with a slot.
-
-
-```html
-<!-- ./src/lib/Layout.svelte -->
-<nav>
-    ...
-</nav>
-<slot />
-```
-
-And use them in using the `layout` key in frontmatter. If no layout is defined with frontmatter, the default layout will be used.
-
-```md
-<!-- +page.markdoc -->
----
-layout: some_other_layout
----
-
-# some other content
-```
-
-## Components
-
-You can export components from your used layout and use them in your Markdoc files.
-
-```html
-<!-- ./src/lib/Layout.svelte -->
-<script context="module">
-    export { default as Addition } from './Addition.svelte';
-</script>
-
-<slot />
-```
-
-You can use the components from a layout file like this `{% addition a=4 b=6 %}`.
+## Features
+- **Markdoc**: Use the full power of Markdoc in your Svelte applications.
+- **Components**: Access your Svelte components directly as Markdoc tags. No individual imports or configurations required.
+- **Layouts**: Add a default and also named layouts.
+- **Flexibility**: Configure Markdoc to your needs.
 
 ## Experimental
 
-This is totally experimental for now, please don't use it *yet*. Even if you're a brave one.
+This is totally experimental for now, please don't use it *yet*. Unless you're a brave one.

apps/demo/src/routes/docs/+page.markdoc

@@ -0,0 +1,94 @@
+## Usage
+
+Install the package:
+
+```bash
+npm i -D svelte-markdoc-preprocess
+```
+
+Add the preprocessor and new extensions to your `svelte.config.js`:
+```js
+import { markdoc } from 'svelte-markdoc-preprocess';
+
+const config = {
+    preprocess: [
+        vitePreprocess(),
+        markdoc({
+            layouts: {
+                default: join(
+                    dirname(fileURLToPath(import.meta.url)),
+                    './src/lib/Layout.svelte'
+                )
+            }
+        })
+    ],
+    extensions: ['.markdoc', '.svelte'],
+};
+```
+
+And use them like this:
+
+```md
+<!-- +page.markdoc -->
+
+# I am a heading
+
+I am a paragraph with **bold** words. But you can also use Svelte Components:
+```
+
+## Layouts
+
+You can define layouts in the `markdoc` options.
+
+```js
+// svelte.config.js
+markdoc({
+    layouts: {
+        default: join(
+            dirname(fileURLToPath(import.meta.url)),
+            './src/lib/Layout.svelte'
+        ),
+        some_other_layout:join(
+            dirname(fileURLToPath(import.meta.url)),
+            './src/lib/SomeOtherLayout.svelte'
+        )
+    }
+})
+```
+
+Layout files are basically Svelte components with a slot.
+
+
+```html
+<!-- ./src/lib/Layout.svelte -->
+<nav>
+    ...
+</nav>
+<slot />
+```
+
+And use them in using the `layout` key in frontmatter. If no layout is defined with frontmatter, the default layout will be used.
+
+```md
+<!-- +page.markdoc -->
+---
+layout: some_other_layout
+---
+
+# some other content
+```
+
+## Components
+
+You can export components from your used layout and use them in your Markdoc files.
+
+```html
+<!-- ./src/lib/Layout.svelte -->
+<script context="module">
+    export { default as Addition } from './Addition.svelte';
+</script>
+
+<slot />
+```
+
+You can use the components from a layout file like this `{% addition a=4 b=6 %}`.

apps/demo/src/routes/playground/+layout.svelte

@@ -0,0 +1,6 @@
+<nav>
+    <a href="/playground/components">components</a> /
+    <a href="/playground/markdown">markdown</a>
+</nav>
+
+<slot />

apps/demo/src/routes/playground/+page.server.js

@@ -0,0 +1,5 @@
+import { redirect } from '@sveltejs/kit';
+
+export function load() {
+    throw redirect(307, '/playground/components');
+}