MDX Collection
Compile Markdown/MDX into JavaScript files.
Usage
import { defineConfig } from "fuma-content/config";
import { mdxCollection } from "fuma-content/collections/mdx";
import { z } from "zod";
const docs = mdxCollection({
dir: "content",
// optional: define frontmatter schema (Standard Schema compatible)
frontmatter: z.object({
title: z.string(),
}),
// optional: MDX options
options: () => ({
jsxImportSource: "react",
}),
});
export default defineConfig({
collections: { docs },
});It generates:
<name>.ts: server-side access to compiled properties.<name>.browser.ts: client-side access, with framework integrations for React.js.
import { docs } from "content/docs";
for (const file of docs.list()) {
const id = file.id;
// compiled properties & typed frontmatter
const { frontmatter, ...rest } = file.compiled;
}
function Page({ id }: { id: string }) {
const file = docs.get(id);
if (!file) return;
// default refers to the content body renderer
// you can render it directly in React Server Component
const { default: MDX } = file.compiled;
return (
<div className="prose">
<MDX
// MDX Components
components={{
h1: (props) => <h1 {...props} className="text-4xl" />,
}}
/>
</div>
);
}Post Process
You can store build-time properties and access them at runtime.
processedMarkdown: the processed Markdown content, useful for generating content for LLM.mdast: the processed MDAST, useful for runtime AST analysis.linkReferences: extract link references (e.g. href), useful for reference analysis.
import { defineConfig } from "fuma-content/config";
import { mdxCollection } from "fuma-content/collections/mdx";
import { z } from "zod";
const docs = mdxCollection({
dir: "content",
postprocess: {
processedMarkdown: true,
// or
processedMarkdown: { as: "markdownContent" },
mdast: true,
// or
mdast: { as: "ast" },
linkReferences: true,
// or
linkReferences: { as: "links" },
},
});Fuma Content will generate types automatically.