Fumadocs MDX
Adapter for Fumadocs MDX.
Installation
The adapter is included in fumapress, install Fumadocs MDX as a dependency:
npm i fumadocs-mdxSetup
Fumadocs MDX needs three pieces of configuration:
- The Vite plugin.
- A
source.config.tsfile for collections. - The Fumapress adapter in
press.config.tsx.
import { defineConfig } from "waku/config";
import tailwindcss from "@tailwindcss/vite";
import press from "fumapress/vite";
import mdx from "fumadocs-mdx/vite";
export default defineConfig({
vite: {
plugins: [
press(),
mdx(),
tailwindcss(),
],
},
});Run npm run dev to generate .source/server and start writing content under your collection directory.
Options
The adapter only handle body rendering, see the Fumadocs MDX documentation for other available configurations.
MDX Components
By default, fumadocsMdx() renders pages with Fumadocs UI's built-in MDX components.
Override getMdxComponents to add custom components:
import { defineConfig } from "fumapress";
import { docs } from "./.source/server";
import { fumadocsMdx } from "fumapress/adapters/mdx";
import defaultMdxComponents, { createRelativeLink } from "fumadocs-ui/mdx";
import { TypeTable } from "fumadocs-ui/components/type-table";
export default defineConfig({
content: docs.toFumadocsSource(),
}).adapters(
fumadocsMdx({
async getMdxComponents(page) {
const source = await this.getLoader();
return {
...defaultMdxComponents,
TypeTable,
a: createRelativeLink(source, page),
};
},
}),
);Last updated on