Docs Layout

Overview

Use the docs layout for documentation pages with sidebar navigation, page title, description, table of contents, view options, and last updated time.

Fumapress uses this layout by default, so you only need to configure it when you want to customize the renderer.

Config

Define the layout and pass it through renderPage.

import { defineConfig } from "fumapress";
import { createDocsLayoutPage } from "fumapress/layouts/docs";

const DocsLayout = createDocsLayoutPage<typeof config.$context>();

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

export default config;

Customize what the layout renders with the render option:

import { defineConfig } from "fumapress";
import { createDocsLayoutPage } from "fumapress/layouts/docs";

const DocsLayout = createDocsLayoutPage<typeof config.$context>({
  async render(page) {
    return {
      pageProps: {
        tableOfContent: {
          style: "clerk",
        },
      },
    };
  },
});

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

export default config;

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