Fumadocs

Configuration

Fumadocs is pre-configured in BOB. All content under the content/docs_content directory will be used to generate documentation.

To ensure the pages are in the proper order, you can use meta.json to specify additional options:

{
  "title": "Tutorials",
  "pages": [
    "local_development",
    "authorization",
    "seo",
    "analytics",
    "customer_support",
    "fumadocs"
  ],
  "defaultOpen": false
}

This file must be placed inside the folder you want to configure. By default, each index.mdx file is opened when clicking on a folder in the sidebar tree.

To add custom components and use them in .mdx files, you need to declare them in /app/(app)/(docs)/mdx-components.tsx. Simply import the component you want to use and assign it a label:

export function useMDXComponents(components: MDXComponents): MDXComponents {
    return {
        ...components, // Merging existing components with the newly defined ones.
        BusinessTipsCallout: BusinessTipsCallout, // Registering the custom BusinessTipsCallout component.
        ...
    }
}

Metadata

Each document should include a title and description. The title is used as an <h1> heading, and the description is used as a meta description. Start each document with the following frontmatter:

---
title: Fumadocs
description: How to set up Fumadocs in the boilerplate.
---

For more details on page rendering, see: /app/(app)/(docs)/docs/[[...slug]]/page.tsx