Content

Each MDX file in your content collection is a page, and the sidebar lists them for you. Callouts, code block titles, tabs and other syntax work as in Fumadocs Markdown.

PagesCopy Anchor Link

The URL of a page comes from its file path:

To put pages under a prefix like /docs, see Multiple Collections.

FrontmatterCopy Anchor Link

---
title: Getting Started # required, the main heading of the page
description: Install and run the app. # below the title, and in the page metadata
icon: Rocket # a Lucide icon name for the sidebar
full: true # use the full width
---

## Install

Start the body at `##`, since `title` is the main heading.

To resolve icon names, add the Lucide plugin of Fumadocs:

import { lucideIconsPlugin } from "fumadocs-core/source/plugins/lucide-icons"; 

export default createPress(content, {
  loaderPlugins: [lucideIconsPlugin()], 
});

To add fields, extend the schema.

LinksCopy Anchor Link

Link to another page with its file path. Fumapress resolves it to the URL of that page:

Read the [install guide](./guide/install.mdx).

Last Modified DateCopy Anchor Link

Show the date of the last commit on each page. The sitemap and RSS feed also use this date.

press({
  lastModified: true, 
});

SidebarCopy Anchor Link

The sidebar lists your files by name. Add a meta.json next to them to set the order and labels:

{
  "pages": ["index", "---Guides---", "getting-started", "guide"]
}

See Page Slugs and Page Tree for separators, links, root folders and other syntax.

ComponentsCopy Anchor Link

import defaultMdxComponents from "fumadocs-ui/mdx";
import { Tab, Tabs } from "fumadocs-ui/components/tabs";
import type { MDXComponents } from "mdx/types";

export default {
  ...defaultMdxComponents,
  Tab,
  Tabs,
} satisfies MDXComponents;

export default defineConfig({
  integrations: [
    press({ components: "./src/components/mdx.tsx" }), 
  ],
});

<Tabs items={["npm", "pnpm"]}>
  <Tab value="npm">Install with npm.</Tab>
  <Tab value="pnpm">Install with pnpm.</Tab>
</Tabs>

Rules for MDX ComponentsCopy Anchor Link

The content of a page is a separate React island, so:

• Props must be serializable, since components hydrate by name. <Chart data={[1, 2]} /> runs in the browser, and <Chart onClick={() => {}} /> renders on the server only.
• Providers from your layout aren't available in the content. Add a wrapper to the MDX components instead.
• Imports are also loaded in the browser, so don't import server-only code.

MDX Components per CollectionCopy Anchor Link

press({
  components: "./src/components/mdx.tsx",
  collections: {
    docs: { dir: "content/docs" },
    blog: { dir: "content/blog", components: "./src/components/blog-mdx.tsx" }, 
  },
});

Custom LinksCopy Anchor Link

Fumapress resolves relative links before your a component receives them, so your component only renders the link.

import type { ComponentProps } from "react";

export function DocsLink(props: ComponentProps<"a">) {
  const external = props.href?.startsWith("http");

  return <a {...props} target={external ? "_blank" : undefined} />;
}

Components per PageCopy Anchor Link

List the content renderer yourself, with components as a function of the page. They go over the components of your module:

import { contentSourcePlugin } from "@fumapress/astro/plugins/content-source";
import { Mermaid } from "./src/components/mermaid";

createPress(content).plugins(
  contentSourcePlugin({
    components: (page) => (page.path.startsWith("guides/") ? { Mermaid } : {}),
  }),
);

page has the types of your content, and the rules for MDX components apply to these components too. The plugins of the Notion, Sanity and Obsidian sources take components as a function too.

Images and FilesCopy Anchor Link

Files in public/ are copied to the build as they are. public/screenshot.png is available at /screenshot.png. For a favicon, reference it from head.

Reference images from Markdown with an absolute path:

![A preview of the editor](/screenshot.png)

On custom pages, use Astro Images.

---
import { Image } from "astro:assets";
import screenshot from "../assets/screenshot.png";
---

<Image src={screenshot} alt="A preview of the editor" />