diff --git a/apps/documentation/docia.config.ts b/apps/documentation/docia.config.ts
new file mode 100644
index 0000000..92f04f9
--- /dev/null
+++ b/apps/documentation/docia.config.ts
@@ -0,0 +1,21 @@
+export default {
+ srcDir: 'docs',
+ outDir: 'doc_build',
+ publicDir: 'docs/public',
+ basePath: '/',
+ prettyUrls: true,
+ site: {
+ title: 'Svelte Markdoc',
+ description:
+ 'Bring the power of Markdoc right into your Svelte applications!',
+ language: 'en',
+ url: 'https://svelte-markdoc-preprocess.pages.dev',
+ socials: {
+ github:
+ 'https://github.com/TorstenDittmann/svelte-markdoc-preprocess',
+ x: 'https://x.com/DittmannTorsten',
+ },
+ githubEditBaseUrl:
+ 'https://github.com/TorstenDittmann/svelte-markdoc-preprocess/edit/main/apps/documentation/docs',
+ },
+};
diff --git a/apps/documentation/docs/README.md b/apps/documentation/docs/README.md
new file mode 100644
index 0000000..93d4f1b
--- /dev/null
+++ b/apps/documentation/docs/README.md
@@ -0,0 +1,21 @@
+# Svelte Markdoc Preprocess
+
+Bring the power of Markdoc right into your Svelte applications.
+
+`svelte-markdoc-preprocess` lets you author content in Markdoc while rendering with Svelte and SvelteKit.
+
+## Highlights
+
+- Works with Svelte and SvelteKit
+- Use Svelte components as Markdoc nodes and tags
+- Configure reusable layouts for pages
+- Auto-load partial files from a directory
+- TypeScript-friendly setup
+- Markdoc schema generation for VS Code support
+
+## Quick links
+
+- [Quickstart](/guide/install/)
+- [Configuration](/guide/configuration/)
+- [Advanced](/advanced/content-indexing/)
+- [GitHub](https://github.com/TorstenDittmann/svelte-markdoc-preprocess)
diff --git a/apps/documentation/docs/SUMMARY.md b/apps/documentation/docs/SUMMARY.md
new file mode 100644
index 0000000..677748f
--- /dev/null
+++ b/apps/documentation/docs/SUMMARY.md
@@ -0,0 +1,15 @@
+# Summary
+
+- [Introduction](README.md)
+- [Quickstart](guide/install.md)
+- Guide
+ - [Configuration](guide/configuration.md)
+ - [Nodes](guide/nodes.md)
+ - [Tags](guide/tags.md)
+ - [Layouts](guide/layouts.md)
+ - [Partials](guide/partials.md)
+- Advanced
+ - [Indexing](advanced/content-indexing.md)
+ - [VS Code schema](advanced/vscode-schema.md)
+ - [Markdoc config](advanced/markdoc-config.md)
+ - [Code highlighting](advanced/highlighting.md)
diff --git a/apps/documentation/docs/_meta.json b/apps/documentation/docs/_meta.json
deleted file mode 100644
index 5acd1f2..0000000
--- a/apps/documentation/docs/_meta.json
+++ /dev/null
@@ -1,7 +0,0 @@
-[
- {
- "text": "Guide",
- "link": "/guide/install",
- "activeMatch": "/guide/"
- }
-]
diff --git a/apps/documentation/docs/advanced/content-indexing.md b/apps/documentation/docs/advanced/content-indexing.md
new file mode 100644
index 0000000..066cde5
--- /dev/null
+++ b/apps/documentation/docs/advanced/content-indexing.md
@@ -0,0 +1,38 @@
+# Indexing
+
+Each `.markdoc` file exports `frontmatter`, so you can build content lists (for example blog indexes) from `load` functions.
+
+```md title="src/routes/blog/hello.markdoc"
+---
+title: My Blog Post
+description: This post explains how indexing works.
+date: 2026-01-01
+---
+
+# My Blog Post
+```
+
+```ts title="src/routes/blog/+page.server.ts"
+export function load() {
+ const modules = import.meta.glob('./*.markdoc', {
+ eager: true,
+ });
+
+ const posts = Object.entries(modules).map(([filepath, module]) => {
+ const { frontmatter } = module as {
+ frontmatter: {
+ title: string;
+ description?: string;
+ date?: string;
+ };
+ };
+
+ return {
+ slug: filepath.replace('./', '').replace('.markdoc', ''),
+ ...frontmatter,
+ };
+ });
+
+ return { posts };
+}
+```
diff --git a/apps/documentation/docs/advanced/highlighting.md b/apps/documentation/docs/advanced/highlighting.md
new file mode 100644
index 0000000..223e0f3
--- /dev/null
+++ b/apps/documentation/docs/advanced/highlighting.md
@@ -0,0 +1,15 @@
+# Add custom code highlighting
+
+Use `highlighter` to transform fenced code blocks before rendering.
+
+```js title="svelte.config.js"
+import { markdoc } from 'svelte-markdoc-preprocess';
+
+markdoc({
+ highlighter: async (code, language) => {
+ return `${code}
`;
+ },
+});
+```
+
+The function receives `(code, language)` and must return an HTML string.
diff --git a/apps/documentation/docs/advanced/markdoc-config.md b/apps/documentation/docs/advanced/markdoc-config.md
new file mode 100644
index 0000000..f496eda
--- /dev/null
+++ b/apps/documentation/docs/advanced/markdoc-config.md
@@ -0,0 +1,25 @@
+# Pass custom Markdoc config
+
+Use the `config` option to pass options directly to Markdoc.
+
+```js title="svelte.config.js"
+import { markdoc } from 'svelte-markdoc-preprocess';
+
+markdoc({
+ config: {
+ variables: {
+ company: 'Acme',
+ },
+ functions: {
+ includes: {
+ transform(parameters) {
+ const [array, value] = Object.values(parameters);
+ return Array.isArray(array) ? array.includes(value) : false;
+ },
+ },
+ },
+ },
+});
+```
+
+Refer to the Markdoc config reference for all available options: https://markdoc.dev/docs/config#options
diff --git a/apps/documentation/docs/advanced/vscode-schema.md b/apps/documentation/docs/advanced/vscode-schema.md
new file mode 100644
index 0000000..d922912
--- /dev/null
+++ b/apps/documentation/docs/advanced/vscode-schema.md
@@ -0,0 +1,20 @@
+# Visual Studio Code schema support
+
+With `generateSchema: true` (default), the preprocessor writes `.svelte-kit/markdoc_schema.js`.
+
+You can point the official [Markdoc VS Code extension](https://marketplace.visualstudio.com/items?itemName=Stripe.markdoc-language-support) to that file in `markdoc.config.json`:
+
+```json title="markdoc.config.json"
+[
+ {
+ "id": "my-site",
+ "path": "src/routes",
+ "schema": {
+ "path": ".svelte-kit/markdoc_schema.js",
+ "type": "esm",
+ "property": "default",
+ "watch": true
+ }
+ }
+]
+```
diff --git a/apps/documentation/docs/guide/_meta.json b/apps/documentation/docs/guide/_meta.json
deleted file mode 100644
index db0256e..0000000
--- a/apps/documentation/docs/guide/_meta.json
+++ /dev/null
@@ -1 +0,0 @@
-["install", "configuration", "nodes", "tags", "layouts", "partials", "advanced"]
diff --git a/apps/documentation/docs/guide/advanced.md b/apps/documentation/docs/guide/advanced.md
deleted file mode 100644
index ed046ff..0000000
--- a/apps/documentation/docs/guide/advanced.md
+++ /dev/null
@@ -1,86 +0,0 @@
-# Advanced
-
-## Display lists of pages
-
-If you want to get a list of all .markdoc files in a directory, for example in a blog you want to list all posts, you can use the `import.meta.glob` function.
-
-```md
----
-title: My Blog Post
-description: This is a blog post and it is awesome.
-date: 2021-01-01
----
-
-# My Blog Post
-
-...
-```
-
-```js title="+page.server.js"
-export function load() {
- const modules = import.meta.glob('./blog/*.markdoc', {
- eager: true,
- });
-
- const posts = Object.entries(modules).map(([filepath, module]) => {
- const { frontmatter } = module;
- return {
- filepath,
- title: frontmatter.title,
- description: frontmatter.description,
- date: frontmatter.date,
- };
- });
-
- return {
- posts,
- };
-}
-```
-
-## Visual Studio Code `experimental`
-
-The preprocessor automatically generates a schema file at `.svelte-kit/markdoc_schema.js` which can be used with the official [Visual Studio Code Extension](https://marketplace.visualstudio.com/items?itemName=Stripe.markdoc-language-support).
-
-In the `markdoc.config.json` [configuration file](https://github.com/markdoc/language-server#configuration-quickstart) point to the schema file:
-
-```json
-[
- {
- "id": "my-site",
- "path": "docs/content",
- "schema": {
- "path": ".svelte-kit/markdoc_schema.js",
- "type": "esm",
- "property": "default",
- "watch": true
- }
- }
-]
-```
-
-## Markdoc configuration
-
-You can configure the underlying Markdoc compiler by passing a [configuration object](https://markdoc.dev/docs/config#options).
-
-```js title="svelte.config.js"
-markdoc({
- config: {
- variables: {
- name: 'Dr. Mark',
- frontmatter: {
- title: 'Configuration options',
- },
- },
- functions: {
- includes: {
- transform(parameters, config) {
- const [array, value] = Object.values(parameters);
-
- return Array.isArray(array) ? array.includes(value) : false;
- },
- },
- },
- },
-});
-```
diff --git a/apps/documentation/docs/guide/configuration.md b/apps/documentation/docs/guide/configuration.md
index fb1c93c..292c825 100644
--- a/apps/documentation/docs/guide/configuration.md
+++ b/apps/documentation/docs/guide/configuration.md
@@ -1,82 +1,117 @@
# Configuration
-You can pass the configuration to the preprocessor in the `svelte.config.js` like this:
+Pass options to `markdoc(...)` inside your `svelte.config.js`.
```js title="svelte.config.js"
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
import { markdoc } from 'svelte-markdoc-preprocess';
+/** @type {import('@sveltejs/kit').Config} */
const config = {
preprocess: [
vitePreprocess(),
markdoc({
- // configuration here
+ // options here
}),
],
+ extensions: ['.markdoc', '.svelte'],
};
+
+export default config;
```
## Options
-#### `extensions`
+### `extensions`
+
+**Type:** `string[]`
+
+**Default:** `['.markdoc', '.mdoc', '.markdown', '.md']`
+
+File extensions to process with Markdoc.
+
+### `nodes`
+
+**Type:** `string | null`
+
+**Default:** `null`
+
+Absolute path to a `.svelte` file that exports node components from `