Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 21 additions & 0 deletions apps/documentation/docia.config.ts
Original file line number Diff line number Diff line change
@@ -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',
},
};
21 changes: 21 additions & 0 deletions apps/documentation/docs/README.md
Original file line number Diff line number Diff line change
@@ -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)
15 changes: 15 additions & 0 deletions apps/documentation/docs/SUMMARY.md
Original file line number Diff line number Diff line change
@@ -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)
7 changes: 0 additions & 7 deletions apps/documentation/docs/_meta.json

This file was deleted.

38 changes: 38 additions & 0 deletions apps/documentation/docs/advanced/content-indexing.md
Original file line number Diff line number Diff line change
@@ -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 };
}
```
15 changes: 15 additions & 0 deletions apps/documentation/docs/advanced/highlighting.md
Original file line number Diff line number Diff line change
@@ -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 `<pre data-language="${language}"><code>${code}</code></pre>`;
},
});
```

The function receives `(code, language)` and must return an HTML string.
25 changes: 25 additions & 0 deletions apps/documentation/docs/advanced/markdoc-config.md
Original file line number Diff line number Diff line change
@@ -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
20 changes: 20 additions & 0 deletions apps/documentation/docs/advanced/vscode-schema.md
Original file line number Diff line number Diff line change
@@ -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
}
}
]
```
1 change: 0 additions & 1 deletion apps/documentation/docs/guide/_meta.json

This file was deleted.

86 changes: 0 additions & 86 deletions apps/documentation/docs/guide/advanced.md

This file was deleted.

Loading