Fumadocs MDX

Fumadocs MDX compiles MDX files in your project, and its pages render without a plugin. See its docs for collection options.

Setup

New sites already include it. To add it yourself:

Install

npm i fumadocs-mdx

Configure

import { defineConfig } from "vite";
import tailwindcss from "@tailwindcss/vite";
import press from "fumapress/vite";
import { fumadocsMdx } from "fumadocs-mdx/vite";

export default defineConfig({
  plugins: [press(), fumadocsMdx(), tailwindcss()],
});

Keep processed Markdown

Turn on includeProcessedMarkdown. The llms.txt plugin is on by default, and reads the text of pages from the processed Markdown.

Frontmatter

pageSchema accepts the standard fields. Extend it to add fields:

press.config.tsx

import { pageSchema } from "fumapress/schema";
import { defineDocs } from "fumadocs-mdx/macro";
import { z } from "zod";

const docs = defineDocs({
  dir: "content",
  docs: {
    schema: pageSchema.extend({
      // the creation date, read by the blog and RSS plugins
      date: z.coerce.date().optional(),
      level: z.enum(["beginner", "advanced"]),
    }),
  },
});

Your fields are typed on page.data in ui.renderPage.

Multiple Sources

Pass an object to host docs, a blog and other content on one site. baseDir puts each source under a URL prefix:

press.config.tsx

import { createPress } from "fumapress";
import { defineDocs } from "fumadocs-mdx/macro";
import { blogPlugin } from "@fumapress/blog";
import { blogPageSchema } from "@fumapress/blog/schema";

const docs = defineDocs({ dir: "content/docs" });
const blog = defineDocs({ dir: "content/blog", docs: { schema: blogPageSchema } });

export const app = createPress({
  docs: docs.toFumadocsSource({ baseDir: "docs" }),
  blog: blog.toFumadocsSource({ baseDir: "blog" }),
}).plugins(blogPlugin({ source: "blog" }));

export default app;

Now content/docs/index.mdx is at /docs, and content/blog/hello.mdx is at /blog/hello. Layouts and plugins refer to each source by its key.

All sources share one page tree. To show one source at a time in the sidebar, make its folder a root folder:

content/docs/meta.json

{
  "title": "Documentation",
  "root": true
}

Fumadocs MDX

SetupCopy Anchor Link

InstallCopy Anchor Link

ConfigureCopy Anchor Link

FrontmatterCopy Anchor Link

Multiple SourcesCopy Anchor Link

On this page

Setup

Install

Configure

Frontmatter

Multiple Sources