From b6e96b2f473998572cb4da8713f8dabe114ec0ad Mon Sep 17 00:00:00 2001 From: Torsten Dittmann Date: Sun, 20 Aug 2023 15:19:56 +0200 Subject: [PATCH] docs: support for partials --- apps/demo/src/lib/Layout.svelte | 7 ---- apps/demo/src/lib/Nodes.svelte | 4 +- apps/demo/src/lib/Tags.svelte | 4 ++ apps/demo/src/lib/Test.svelte | 2 - apps/demo/src/lib/index.ts | 4 -- .../Alternative.svelte} | 0 apps/demo/src/lib/layouts/Default.svelte | 1 + apps/demo/src/lib/{ => nodes}/Fence.svelte | 0 apps/demo/src/lib/{ => nodes}/Heading.svelte | 0 apps/demo/src/lib/{ => tags}/Addition.svelte | 7 +--- apps/demo/src/lib/{ => tags}/Multiply.svelte | 0 apps/demo/src/partials/nested/file.md | 3 ++ apps/demo/src/partials/test.md | 3 ++ apps/demo/src/partials/variable.md | 3 ++ apps/demo/src/routes/+layout.svelte | 1 + apps/demo/src/routes/partials/+page.markdoc | 38 +++++++++++++++++++ .../playground/components/+page.markdoc | 13 +++++-- apps/demo/svelte.config.js | 17 ++++----- package-lock.json | 2 +- 19 files changed, 74 insertions(+), 35 deletions(-) delete mode 100644 apps/demo/src/lib/Layout.svelte create mode 100644 apps/demo/src/lib/Tags.svelte delete mode 100644 apps/demo/src/lib/Test.svelte delete mode 100644 apps/demo/src/lib/index.ts rename apps/demo/src/lib/{LayoutAlternative.svelte => layouts/Alternative.svelte} (100%) create mode 100644 apps/demo/src/lib/layouts/Default.svelte rename apps/demo/src/lib/{ => nodes}/Fence.svelte (100%) rename apps/demo/src/lib/{ => nodes}/Heading.svelte (100%) rename apps/demo/src/lib/{ => tags}/Addition.svelte (53%) rename apps/demo/src/lib/{ => tags}/Multiply.svelte (100%) create mode 100644 apps/demo/src/partials/nested/file.md create mode 100644 apps/demo/src/partials/test.md create mode 100644 apps/demo/src/partials/variable.md create mode 100644 apps/demo/src/routes/partials/+page.markdoc diff --git a/apps/demo/src/lib/Layout.svelte b/apps/demo/src/lib/Layout.svelte deleted file mode 100644 index c7f23e4..0000000 --- a/apps/demo/src/lib/Layout.svelte +++ /dev/null @@ -1,7 +0,0 @@ - - - diff --git a/apps/demo/src/lib/Nodes.svelte b/apps/demo/src/lib/Nodes.svelte index 8998004..c1d1b8e 100644 --- a/apps/demo/src/lib/Nodes.svelte +++ b/apps/demo/src/lib/Nodes.svelte @@ -1,4 +1,4 @@ \ No newline at end of file diff --git a/apps/demo/src/lib/Tags.svelte b/apps/demo/src/lib/Tags.svelte new file mode 100644 index 0000000..4f8d7d5 --- /dev/null +++ b/apps/demo/src/lib/Tags.svelte @@ -0,0 +1,4 @@ + \ No newline at end of file diff --git a/apps/demo/src/lib/Test.svelte b/apps/demo/src/lib/Test.svelte deleted file mode 100644 index 1a93655..0000000 --- a/apps/demo/src/lib/Test.svelte +++ /dev/null @@ -1,2 +0,0 @@ -Test -

diff --git a/apps/demo/src/lib/index.ts b/apps/demo/src/lib/index.ts deleted file mode 100644 index 2315ed7..0000000 --- a/apps/demo/src/lib/index.ts +++ /dev/null @@ -1,4 +0,0 @@ -// place files you want to import through the `$lib` alias in this folder. - -export { default as Addition } from './Addition.svelte'; -export { default as Test } from './Test.svelte'; diff --git a/apps/demo/src/lib/LayoutAlternative.svelte b/apps/demo/src/lib/layouts/Alternative.svelte similarity index 100% rename from apps/demo/src/lib/LayoutAlternative.svelte rename to apps/demo/src/lib/layouts/Alternative.svelte diff --git a/apps/demo/src/lib/layouts/Default.svelte b/apps/demo/src/lib/layouts/Default.svelte new file mode 100644 index 0000000..4fa864c --- /dev/null +++ b/apps/demo/src/lib/layouts/Default.svelte @@ -0,0 +1 @@ + diff --git a/apps/demo/src/lib/Fence.svelte b/apps/demo/src/lib/nodes/Fence.svelte similarity index 100% rename from apps/demo/src/lib/Fence.svelte rename to apps/demo/src/lib/nodes/Fence.svelte diff --git a/apps/demo/src/lib/Heading.svelte b/apps/demo/src/lib/nodes/Heading.svelte similarity index 100% rename from apps/demo/src/lib/Heading.svelte rename to apps/demo/src/lib/nodes/Heading.svelte diff --git a/apps/demo/src/lib/Addition.svelte b/apps/demo/src/lib/tags/Addition.svelte similarity index 53% rename from apps/demo/src/lib/Addition.svelte rename to apps/demo/src/lib/tags/Addition.svelte index ab4a7e2..e124c45 100644 --- a/apps/demo/src/lib/Addition.svelte +++ b/apps/demo/src/lib/tags/Addition.svelte @@ -7,14 +7,9 @@ * @type {number} */ export let b; - - /** - * @type {number} - */ - export let c = 0; Addition

- {a} + {b} = {Number(a) + Number(b) + Number(c)} + {a} + {b} = {Number(a) + Number(b)}

diff --git a/apps/demo/src/lib/Multiply.svelte b/apps/demo/src/lib/tags/Multiply.svelte similarity index 100% rename from apps/demo/src/lib/Multiply.svelte rename to apps/demo/src/lib/tags/Multiply.svelte diff --git a/apps/demo/src/partials/nested/file.md b/apps/demo/src/partials/nested/file.md new file mode 100644 index 0000000..7a515e9 --- /dev/null +++ b/apps/demo/src/partials/nested/file.md @@ -0,0 +1,3 @@ +### Nested + +I am a nested partial. diff --git a/apps/demo/src/partials/test.md b/apps/demo/src/partials/test.md new file mode 100644 index 0000000..d2675f1 --- /dev/null +++ b/apps/demo/src/partials/test.md @@ -0,0 +1,3 @@ +### Partial + +I am a partial. diff --git a/apps/demo/src/partials/variable.md b/apps/demo/src/partials/variable.md new file mode 100644 index 0000000..08142ca --- /dev/null +++ b/apps/demo/src/partials/variable.md @@ -0,0 +1,3 @@ +### Partial with variable + +{% $name %} diff --git a/apps/demo/src/routes/+layout.svelte b/apps/demo/src/routes/+layout.svelte index 71c4a0b..10a9e33 100644 --- a/apps/demo/src/routes/+layout.svelte +++ b/apps/demo/src/routes/+layout.svelte @@ -10,6 +10,7 @@ nodes | tags | layouts | + partials | advanced | github {#if dev} diff --git a/apps/demo/src/routes/partials/+page.markdoc b/apps/demo/src/routes/partials/+page.markdoc new file mode 100644 index 0000000..6813fdd --- /dev/null +++ b/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 + +# My header +``` + +Here's an example of including the `header.md` file as a partial. + +```md + +{% partial file="header.md" /%} +``` + +### Passing variables + +Partials are like any other tags, so you can pass variables as attributes to them such as: + +```md + +{% partial file="header.md" variables={name: "My header name"} /%} +``` + +and access the variables as you would in a regular Markdoc document: + +```md + +# {% $name %} +``` diff --git a/apps/demo/src/routes/playground/components/+page.markdoc b/apps/demo/src/routes/playground/components/+page.markdoc index 4e20b3b..1327cc2 100644 --- a/apps/demo/src/routes/playground/components/+page.markdoc +++ b/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."} /%} diff --git a/apps/demo/svelte.config.js b/apps/demo/svelte.config.js index ebfd21f..965821c 100644 --- a/apps/demo/svelte.config.js +++ b/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'), }, }), ], diff --git a/package-lock.json b/package-lock.json index 51b00ad..e707d85 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6007,7 +6007,7 @@ }, "packages/process": { "name": "svelte-markdoc-preprocess", - "version": "0.1.2", + "version": "0.1.4", "license": "MIT", "dependencies": { "@markdoc/markdoc": "^0.3.0",