Notebook Layout

Overview

Use the notebook layout for reference pages that should keep docs features, but use the notebook appearance from Fumadocs UI.

It is a good fit for API references, generated content, or dense technical pages where the notebook style is easier to scan than the default docs page.

Config

Define the layout and pass it through renderPage.

press.config.tsx

import { defineConfig } from "fumapress";
import { createNotebookLayoutPage } from "fumapress/layouts/notebook";

const NotebookLayout = createNotebookLayoutPage<typeof config.$context>();

const config = defineConfig({
  // ...
  renderPage: (props) => <NotebookLayout {...props} />,
});

export default config;

The notebook layout accepts the same kind of render option as the docs layout:

press.config.tsx

import { defineConfig } from "fumapress";
import { createNotebookLayoutPage } from "fumapress/layouts/notebook";

const NotebookLayout = createNotebookLayoutPage<typeof config.$context>({
  async render(page) {
    let pageTree = (await this.getLoader()).getPageTree(page.locale);

    return {
      layoutProps: {
        tree: pageTree,
      },
      pageProps: {
        full: true,
      },
    };
  },
});

const config = defineConfig({
  // ...
  renderPage: (props) => <NotebookLayout {...props} />,
});

export default config;

The render function can return page props, layout props, markdown URL, last modified date, or a custom body.

Notebook Layout

Overview

Config

On this page