svelte-markdoc-preprocess
Guide
Guide

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.

---
title: My Blog Post
description: This is a blog post and it is awesome.
date: 2021-01-01
---

# My Blog Post

...
+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.

In the markdoc.config.json configuration file point to the schema file:

[
    {
        "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.

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;
                },
            },
        },
    },
});