Layouts

You can define layouts in the markdoc options.

// svelte.config.js
import { dirname, join } from 'path';
import { fileURLToPath } from 'url';

markdoc({
    layouts: {
        default: join(
            dirname(fileURLToPath(import.meta.url)),
            './src/lib/Layout.svelte'
        )
    }
})

Layout files are basically Svelte components with a slot. The default slot is used for all files.

<!-- ./src/lib/Layout.svelte -->
<nav>
    ...
</nav>

<slot />

Named

If you want to use a named layout for a specific file, you can specify it in the frontmatter.

// svelte.config.js
import { dirname, join } from 'path';
import { fileURLToPath } from 'url';

markdoc({
    layouts: {
        default: join(
            dirname(fileURLToPath(import.meta.url)),
            './src/lib/Layout.svelte'
        ),
        some_other_layout: join(
            dirname(fileURLToPath(import.meta.url)),
            './src/lib/SomeOtherLayout.svelte'
        )
    }
})

<!-- +page.markdoc -->
---
layout: some_other_layout
---

# some other content

Props

Layouts will be passed the frontmatter as props from the Markdoc file.

<!-- ./src/lib/Layout.svelte -->
<script>
    export let title;
    export let description;
</script>

<svelte:head>
    <title>{title}</title>
    <meta name="description" content={description} />
</svelte:head>

<!-- +page.markdoc -->
---
title: Lorem ipsum
description: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
---