Documentation Features

Fumadocs-powered documentation with source-backed search, Markdown, and content gating.

Overview

Documentation is powered by Fumadocs with:

MDX content with components
Full-text search (Orama)
Source-backed Copy Markdown
Content gating for premium docs

Content Structure

src/content/
├── docs/
│   ├── index.mdx
│   ├── meta.json
│   ├── getting-started/
│   │   ├── index.mdx
│   │   └── meta.json
│   └── features/
│       └── ...
└── blogs/
    └── ...

Writing Pages

Frontmatter

---
title: Page Title
description: Brief description for SEO.
---

Your content here...

Control page order in meta.json:

{
  "title": "Section Name",
  "pages": ["index", "installation", "configuration"]
}

MDX Components

Callouts

import { Callout } from "fumadocs-ui/components/callout";

<Callout type="info">Helpful information here.</Callout>

<Callout type="warn">Warning message.</Callout>

Cards

import { Cards, Card } from "fumadocs-ui/components/card";

<Cards>
  <Card title="Title" href="/path" description="Description" />
</Cards>

Steps

import { Steps, Step } from "fumadocs-ui/components/steps";

<Steps>
<Step>
### Step One
Content for step one.
</Step>

<Step>
### Step Two
Content for step two.
</Step>
</Steps>

Code Blocks

```typescript title="example.ts"
const hello = "world";
```

With line highlighting:

```typescript {2-3}
const a = 1;
const b = 2; // highlighted
const c = 3; // highlighted
```

Search

Search is powered by Orama and works automatically.

API Endpoint

src/api/app.ts

apiApp.get("/search", async (c) => {
  const response = await search.GET(c.req.raw);

  if (!response.ok) {
    return response;
  }

  const results = await response.json();
  return Response.json(omitGatedSearchResults(results, gatedPageUrls), {
    status: response.status,
  });
});

Content Gating

Gate premium content behind purchases:

src/content/docs/premium-guide.mdx

---
title: Premium Guide
description: A guide for paying customers.
gated: true
---

Users without persisted purchase access see a paywall. To gate a whole folder, add slug segments to the implemented gatedPaths list. See Content Gating for both patterns.

Building

Generate static docs:

bun run build

The build process:

Compiles MDX to React
Generates search index
Creates static pages

Content Gating - Premium content setup
Project Structure - Content location

Was this page helpful?