mdx-collections-svelte

MDX Collections Svelte

An easy way to create collections of markdown pages in SvelteKit.

• 🪵 CHANGELOG
• 📦 NPM

Example

$lib/collections.ts:

import {
    useTypedCollections,
    type ImportGlobMarkdownMap,
} from "mdx-collections-svelte"
import { z } from "mdx-collections-svelte/zod"

/**
 * All markdown pages.
 *
 * Paths that contain (`_`) in their name are ignored to avoid conflict between pages and components.
 *
 * [Glob Import](https://vite.dev/guide/features.html#glob-import).
 */
export const pages = import.meta.glob(
    [
        "/src/content/*/**/*.md",
        "!/src/content/*/**/_*/*.md", // ignored
        "!/src/content/*/**/_*.md", // ignored
    ],
    { eager: true },
) satisfies ImportGlobMarkdownMap

const postsSchema = z.object({
    title: z.string().min(1),
    description: z.string().min(1),
})

const productsSchema = z.object({
    title: z.string().min(1),
    price: z.number().min(1),
})

export const collections = useTypedCollections(pages, {
    posts: postsSchema,
    products: productsSchema,
})

posts/+page.ts:

import { collections } from "$lib/collections.js"

export const load = async () => {
    const allPosts = collections.getEntries("posts") // You'll get type suggestions.
    const helloWorldPost = collections.getEntry("hello-world") // You'll get type suggestions.
    return { allPosts, helloWorldPost }
}

Empty frontmatter

Use this schema if you don't use frontmatter for a collection.

z.object({}).default({})