docs: support for partials

apps/demo/src/lib/Nodes.svelte

@@ -1,4 +1,4 @@
 <script context="module">
-    export { default as Heading } from './Heading.svelte';
-    export { default as Fence } from './Fence.svelte';
+    export { default as Heading } from './nodes/Heading.svelte';
+    export { default as Fence } from './nodes/Fence.svelte';
 </script>

apps/demo/src/lib/Tags.svelte

@@ -0,0 +1,4 @@
+<script context="module">
+    export { default as Addition } from './tags/Addition.svelte';
+    export { default as Multiply } from './tags/Multiply.svelte';
+</script>

apps/demo/src/lib/layouts/Default.svelte

@@ -0,0 +1 @@
+<slot />

apps/demo/src/lib/Addition.svelte → apps/demo/src/lib/tags/Addition.svelte

@@ -7,14 +7,9 @@
      * @type {number}
      */
     export let b;
-
-    /**
-     * @type {number}
-     */
-    export let c = 0;
 </script>
 
 <b>Addition</b>
 <p>
-    <b>{a}</b> + <b>{b}</b> = <b>{Number(a) + Number(b) + Number(c)}</b>
+    <b>{a}</b> + <b>{b}</b> = <b>{Number(a) + Number(b)}</b>
 </p>

apps/demo/src/partials/nested/file.md

@@ -0,0 +1,3 @@
+### Nested
+
+I am a nested partial.

apps/demo/src/partials/test.md

@@ -0,0 +1,3 @@
+### Partial
+
+I am a partial.

apps/demo/src/partials/variable.md

@@ -0,0 +1,3 @@
+### Partial with variable
+
+{% $name %}

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

@@ -10,6 +10,7 @@
         <a href="/nodes">nodes</a> |
         <a href="/tags">tags</a> |
         <a href="/layouts">layouts</a> |
+        <a href="/partials">partials</a> |
         <a href="/advanced">advanced</a> |
         <a target="_blank" href="https://github.com/TorstenDittmann/svelte-markdoc-preprocess">github</a>
 		{#if dev}

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

@@ -0,0 +1,38 @@
+## Partials
+
+You pass a directory to the configuration and it will automatically load all files to be used as [partials](https://markdoc.dev/docs/partials).
+
+```js
+// svelte.config.js
+markdoc({
+    partials: join(dirname(fileURLToPath(import.meta.url)), './src/lib/partials'),
+})
+```
+
+```md
+<!-- ./src/lib/partials/header.md -->
+# My header
+```
+
+Here's an example of including the `header.md` file as a partial.
+
+```md
+<!-- ./src/routes/+page.markdoc -->
+{% partial file="header.md" /%}
+```
+
+### Passing variables
+
+Partials are like any other tags, so you can pass variables as attributes to them such as:
+
+```md
+<!-- ./src/routes/+page.markdoc -->
+{% partial file="header.md" variables={name: "My header name"} /%}
+```
+
+and access the variables as you would in a regular Markdoc document:
+
+```md
+<!-- ./src/lib/partials/header.md -->
+# {% $name %}
+```

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

@@ -1,6 +1,11 @@
-{% mytest %}
-I am slot content.
-{% /mytest %}
+{% addition a=4 b=4 /%}
 
-{% addition a=4 b=6 /%}
 {% multiply a=3 b=8 /%}
+
+{% partial file="test.md" /%}
+
+{% partial file="nested/file.md" /%}
+
+{% partial
+   file="variable.md"
+   variables={name: "I am passed to a variable."} /%}

apps/demo/svelte.config.js

@@ -4,8 +4,9 @@ import { dirname, join } from 'path';
 import { fileURLToPath } from 'url';
 import { markdoc } from 'svelte-markdoc-preprocess';
 
-const layout = join(dirname(fileURLToPath(import.meta.url)), './src/lib/Layout.svelte');
-const nodes = join(dirname(fileURLToPath(import.meta.url)), './src/lib/Nodes.svelte');
+function absoulute(file) {
+    return join(dirname(fileURLToPath(import.meta.url)), file);
+}
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
@@ -14,14 +15,12 @@ const config = {
     preprocess: [
         vitePreprocess(),
         markdoc({
-            tags: layout,
-            nodes,
+            tags: absoulute('./src/lib/Tags.svelte'),
+            nodes: absoulute('./src/lib/Nodes.svelte'),
+            partials: absoulute('./src/partials'),
             layouts: {
-                default: layout,
-                alternative: join(
-                    dirname(fileURLToPath(import.meta.url)),
-                    './src/lib/LayoutAlternative.svelte',
-                ),
+                default: absoulute('./src/lib/layouts/Default.svelte'),
+                alternative: absoulute('./src/lib/layouts/Alternative.svelte'),
             },
         }),
     ],