### Install fumadocs-preview locally

Source: https://github.com/fuma-nama/fumadocs/blob/dev/apps/docs/content/docs/cli/preview.mdx

Install the preview tool as a dev dependency for local configuration and custom setup.

```npm
npm install fumadocs-preview -D
```

--------------------------------

### Install FlexSearch

Source: https://github.com/fuma-nama/fumadocs/blob/dev/apps/docs/content/docs/headless/search/flexsearch.mdx

Install the FlexSearch library using npm.

```bash
npm install flexsearch
```

--------------------------------

### Install Dependencies

Source: https://github.com/fuma-nama/fumadocs/blob/dev/apps/docs/content/docs/(framework)/integrations/openapi/index.mdx

Install the necessary packages for OpenAPI integration and syntax highlighting.

```bash
npm i fumadocs-openapi shiki
```

--------------------------------

### Create Tanstack Start Search API

Source: https://github.com/fuma-nama/fumadocs/blob/dev/apps/docs/content/docs/headless/search/orama.mdx

Configure the search API for a Tanstack Start project. This example defines the server handler for the GET request within the route.

```typescript
import { createFileRoute } from '@tanstack/react-router';
import { source } from '@/lib/source';
import { createSearchAPI } from 'fumadocs-core/search/server';

const server = createSearchAPI('advanced', {
  language: 'english',
  indexes: source.getPages().map((page) => ({
    title: page.data.title,
    description: page.data.description,
    url: page.url,
    id: page.url,
    structuredData: page.data.structuredData,
  })),
});

export const Route = createFileRoute('/api/search')({
  server: {
    handlers: {
      GET: async ({ request }) => server.GET(request),
    },
  },
});
```

--------------------------------

### Tanstack Start Example: Server Payload for Client Rendering

Source: https://github.com/fuma-nama/fumadocs/blob/dev/apps/docs/content/docs/(framework)/integrations/content/local-md.mdx

Demonstrates how to compile Markdown on the server and pass the serialized AST to the client for rendering in a non-RSC environment.

```tsx
import { createFileRoute, notFound } from '@tanstack/react-router';
import { DocsLayout } from 'fumadocs-ui/layouts/docs';
import { createServerFn } from '@tanstack/react-start';
import { getSource } from '@/lib/source';
import { DocsBody, DocsPage } from 'fumadocs-ui/layouts/docs/page';
import { useFumadocsLoader } from 'fumadocs-core/source/client';
import { useMemo } from 'react';
import { useMDXComponents } from '@/components/mdx';
import { rendererFromSerialized } from '@fumadocs/local-md/client';

export const Route = createFileRoute('/docs/$')({
  component: Page,
  loader: async ({ params }) => {
    const slugs = params._splat?.split('/') ?? [];
    return serverLoader({ data: slugs });
  },
});

const serverLoader = createServerFn({
  method: 'GET',
})
  .validator((slugs: string[]) => slugs)
  .handler(async ({ data: slugs }) => {
    const source = await getSource();
    const page = source.getPage(slugs);
    if (!page) throw notFound();

    // compile
    const { serialize } = await page.data.load();

    return {
      frontmatter: page.data.frontmatter,
      // [!code highlight] pass it to payload
      render: serialize(),
      // ... 
    };
  });

function Page() {
  const { pageTree, frontmatter, render } = useFumadocsLoader(Route.useLoaderData());
  // [!code highlight:2] render under sync mode
  const renderer = useMemo(() => rendererFromSerialized(render), [render]);
  const { body, toc } = renderer.renderSync(useMDXComponents());

  return (
    <DocsLayout tree={pageTree}>
      <DocsPage toc={toc}>
        {/* ... */}
        <DocsBody>{body}</DocsBody>
      </DocsPage>
    </DocsLayout>
  );
}
```

--------------------------------

### Install Fumadocs dependencies

Source: https://github.com/fuma-nama/fumadocs/blob/dev/apps/docs/content/docs/(framework)/manual-installation/next.mdx

Install the essential Fumadocs UI and Core packages using the npm package manager.

```bash
npm i fumadocs-ui fumadocs-core
```

--------------------------------

### Start Development Server

Source: https://github.com/fuma-nama/fumadocs/blob/dev/examples/waku/README.md

Executes the development script to start a local server for the Waku application. This command supports npm, pnpm, and yarn package managers.

```bash
npm run dev
# or
pnpm dev
# or
yarn dev
```

--------------------------------

### Create MDX Content File

Source: https://github.com/fuma-nama/fumadocs/blob/dev/apps/docs/content/docs/(framework)/manual-installation/next.mdx

A basic example of an MDX file with frontmatter and markdown content used as a documentation page.

```mdx
---
title: Hello World
---

## Introduction

I love Anime.
```

--------------------------------

### Install AsyncAPI Packages

Source: https://github.com/fuma-nama/fumadocs/blob/dev/apps/docs/content/docs/(framework)/integrations/asyncapi/index.mdx

Install the necessary packages for AsyncAPI integration and syntax highlighting.

```npm
npm i @fumadocs/asyncapi shiki
```

--------------------------------

### Install @fumadocs/local-md

Source: https://github.com/fuma-nama/fumadocs/blob/dev/apps/docs/content/docs/(framework)/integrations/content/local-md.mdx

Install the @fumadocs/local-md package along with Shiki for syntax highlighting. Shiki needs to be externalized by the bundler.

```bash
@fumadocs/local-md shiki
```

--------------------------------

### Install Fumadocs Core package

Source: https://github.com/fuma-nama/fumadocs/blob/dev/apps/docs/content/docs/headless/index.mdx

This snippet demonstrates how to install the `fumadocs-core` package using a package manager. This package is the foundation for building documentation with server-side functions and headless components, and it has no external dependencies.

```shell
fumadocs-core
```

--------------------------------

### Install fumadocs-core and fumadocs-ui

Source: https://github.com/fuma-nama/fumadocs/blob/dev/examples/stackblitz/content/docs/test.mdx

Use this command to install the necessary fumadocs packages.

```npm
npm i fumadocs-core fumadocs-ui
```

--------------------------------

### Install Translation Toolkit

Source: https://github.com/fuma-nama/fumadocs/blob/dev/apps/docs/content/docs/ui/translations.mdx

Install the necessary toolkit for handling translations in Fumadocs.

```bash
npm i @fuma-translate/react
```

--------------------------------

### Install Mixedbread CLI

Source: https://github.com/fuma-nama/fumadocs/blob/dev/apps/docs/content/docs/headless/search/mixedbread.mdx

Install the Mixedbread CLI as a development dependency.

```bash
npm install @mixedbread/cli -D
# or
yarn add @mixedbread/cli --dev
# or
pnpm add @mixedbread/cli -D
```

--------------------------------

### Generate `llms-full.txt` (Tanstack Start)

Source: https://github.com/fuma-nama/fumadocs/blob/dev/apps/docs/content/docs/(framework)/integrations/llms.mdx

Implements the GET handler for the `/llms-full.txt` route using Tanstack Start, returning the full text content of all pages.

```typescript
import { createFileRoute } from '@tanstack/react-router';
import { source } from '@/lib/source';
import { getLLMText } from '@/lib/get-llm-text';

export const Route = createFileRoute('/llms-full.txt')({
  server: {
    handlers: {
      GET: async () => {
        const scan = source.getPages().map(getLLMText);
        const scanned = await Promise.all(scan);
        return new Response(scanned.join('\n\n'));
      },
    },
  },
});
```

--------------------------------

### Hello World Console Log

Source: https://github.com/fuma-nama/fumadocs/blob/dev/examples/stackblitz/content/docs/index.mdx

A basic TypeScript example demonstrating a console log. This is often used as a starting point for new projects.

```typescript
console.log('Hello World');
```

--------------------------------

### Log Hello World to Console in JavaScript

Source: https://github.com/fuma-nama/fumadocs/blob/dev/examples/astro/content/docs/index.mdx

A basic JavaScript command used to output the string 'Hello World' to the console. This serves as a fundamental example for verifying script execution and environment setup.

```javascript
console.log('Hello World');
```

--------------------------------

### Tanstack Start Browser Collection Integration

Source: https://github.com/fuma-nama/fumadocs/blob/dev/apps/docs/content/docs/mdx/entry/browser.mdx

Shows how to integrate browser collections with Tanstack Start for server-side rendering and client-side hydration. This example defines a route loader and a client loader for rendering MDX content.

```tsx
import { createFileRoute, notFound } from '@tanstack/react-router';
import { createServerFn } from '@tanstack/react-start';
import { source } from '@/lib/source';
import browserCollections from 'collections/browser';

export const Route = createFileRoute('/docs/$')({
  component: Page,
  loader: async ({ params }) => {
    const data = await loader({ data: params._splat?.split('/') ?? [] });
    await clientLoader.preload(data.path);
    return data;
  },
});

const loader = createServerFn({
  method: 'GET',
})
  .validator((slugs: string[]) => slugs)
  .handler(async ({ data: slugs }) => {
    const page = source.getPage(slugs);
    if (!page) throw notFound();

    return {
      path: page.path,
    };
  });

const clientLoader = browserCollections.docs.createClientLoader({
  component({ frontmatter, default: MDX }) {
    return (
      <div className="prose">
        <h1>{frontmatter.title}</h1>
        <MDX />
      </div>
    );
  },
});

function Page() {
  const data = Route.useLoaderData();

  return clientLoader.useContent(data.path);
}
```

--------------------------------

### Configure Root Route with Fumadocs Provider

Source: https://github.com/fuma-nama/fumadocs/blob/dev/apps/docs/content/docs/(framework)/manual-installation/tanstack-start.mdx

Wrap your Tanstack Start application with the RootProvider in the __root.tsx file to enable Fumadocs context and UI components across your app.

```tsx
import { createRootRoute, HeadContent, Outlet, Scripts } from '@tanstack/react-router';
import * as React from 'react';
import { RootProvider } from 'fumadocs-ui/provider/tanstack';

export const Route = createRootRoute({
  component: RootComponent,
});

function RootComponent() {
  return (
    <RootDocument>
      <Outlet />
    </RootDocument>
  );
}

function RootDocument({ children }: { children: React.ReactNode }) {
  return (
    <html suppressHydrationWarning>
      <head>
        <HeadContent />
      </head>
      <body className="flex flex-col min-h-screen">
        <RootProvider>{children}</RootProvider>
        <Scripts />
      </body>
    </html>
  );
}
```

--------------------------------

### Install Takumi Image Response Package

Source: https://github.com/fuma-nama/fumadocs/blob/dev/apps/docs/content/docs/(framework)/integrations/og/takumi.mdx

Install the `@takumi-rs/image-response` package using npm.

```npm
npm install @takumi-rs/image-response
```

--------------------------------

### Install fumadocs-core and fumadocs-ui with npm

Source: https://github.com/fuma-nama/fumadocs/blob/dev/examples/tanstack-start-min/content/docs/test.mdx

Use this command to install the core and UI packages for Fumadocs.

```npm
npm i fumadocs-core fumadocs-ui
```

--------------------------------

### Usage of package-install code blocks

Source: https://github.com/fuma-nama/fumadocs/blob/dev/apps/docs/content/docs/headless/mdx/install.mdx

Create code blocks using the 'package-install' language identifier. You can provide just the package name or a full install command.

```mdx
```package-install
my-package
```

```package-install
npm i my-package -D
```
```

--------------------------------

### Install Feedback with Fumadocs CLI

Source: https://github.com/fuma-nama/fumadocs/blob/dev/apps/docs/content/docs/(framework)/integrations/feedback.mdx

Install the feedback integration using the Fumadocs command-line interface.

```npm
npx @fumadocs/cli@latest add feedback
```

--------------------------------

### Install Twoslash Dependencies

Source: https://github.com/fuma-nama/fumadocs/blob/dev/apps/docs/content/docs/(framework)/markdown/twoslash.mdx

Install the necessary packages for Twoslash integration into your project.

```shell
fumadocs-twoslash twoslash
```

--------------------------------

### Install FlexSearch Types

Source: https://github.com/fuma-nama/fumadocs/blob/dev/apps/docs/content/docs/headless/search/flexsearch.mdx

Install the FlexSearch type definitions for TypeScript projects.

```bash
npm install @types/flexsearch -D
```

--------------------------------

### Install Fumadocs Story

Source: https://github.com/fuma-nama/fumadocs/blob/dev/apps/docs/content/docs/(framework)/integrations/story/next.mdx

Install the Fumadocs Story package using npm.

```bash
npm i @fumadocs/story
```

--------------------------------

### Install Language Pack

Source: https://github.com/fuma-nama/fumadocs/blob/dev/apps/docs/content/docs/ui/translations.mdx

Install the language pack package using npm.

```bash
npm i @fumadocs/language
```

--------------------------------

### Install MDX Remote package

Source: https://github.com/fuma-nama/fumadocs/blob/dev/apps/docs/content/docs/(framework)/integrations/content/mdx-remote.mdx

Install the @fumadocs/mdx-remote package as a dependency.

```bash
@fumadocs/mdx-remote
```

--------------------------------

### Install Sanity Content Loader

Source: https://github.com/fuma-nama/fumadocs/blob/dev/apps/docs/content/docs/(framework)/integrations/content/sanity.mdx

Install the necessary package to enable content loading from Sanity.

```bash
npm i @fumadocs/sanity
```

--------------------------------

### Install @scalar/api-client-react

Source: https://github.com/fuma-nama/fumadocs/blob/dev/apps/docs/content/blog/v15.mdx

Install the @scalar/api-client-react package to integrate Scalar API Client into your project.

```package-install
@scalar/api-client-react
```

--------------------------------

### Local MD Setup and Loader

Source: https://github.com/fuma-nama/fumadocs/blob/dev/apps/docs/content/docs/(framework)/integrations/content/local-md.mdx

Replaces Fumadocs MDX setup with @fumadocs/local-md, including dynamic loading and development server.

```typescript
import { dynamicLoader } from 'fumadocs-core/source/dynamic';
import { localMd } from '@fumadocs/local-md';

const docs = localMd({
  dir: 'content/docs',
});

if (process.env.NODE_ENV === 'development') {
  void docs.devServer();
}

const docsLoader = dynamicLoader(docs.dynamicSource(), {
  baseUrl: '/docs',
});

export async function getSource() {
  return docsLoader.get();
}
```

--------------------------------

### Install Shiki for Dynamic Mode

Source: https://github.com/fuma-nama/fumadocs/blob/dev/apps/docs/content/docs/mdx/async.mdx

It is recommended to install and externalize shiki when using dynamic mode for on-demand compilation.

```npm
npm i shiki
```

--------------------------------

### Configure Nitro/TanStack Start for Takumi Image Response

Source: https://github.com/fuma-nama/fumadocs/blob/dev/apps/docs/content/docs/(framework)/integrations/og/takumi.mdx

Define external packages and trace includes for `@takumi-rs/core` in `vite.config.ts` when using Nitro or TanStack Start.

```ts
import { defineConfig } from 'vite';
// [!code ++]
import takumiPackageJson from '@takumi-rs/core/package.json' with { type: 'json' };

export default defineConfig({
  nitro: {
    externals: {
      // [!code ++:2]
      external: ['@takumi-rs/core'],
      traceInclude: Object.keys(takumiPackageJson.optionalDependencies),
    },
  },
});
```

--------------------------------

### Create an Example Fumadocs MDX Document

Source: https://github.com/fuma-nama/fumadocs/blob/dev/apps/docs/content/docs/(framework)/manual-installation/react-router.mdx

This MDX snippet provides a basic example of a Fumadocs document. It includes frontmatter for the title and simple Markdown content, demonstrating how to structure your documentation files within the `content/docs` directory for Fumadocs to render.

```mdx
---
title: Hello World
---

I love Fumadocs
```

--------------------------------

### Example Client Component

Source: https://github.com/fuma-nama/fumadocs/blob/dev/apps/docs/content/docs/(framework)/integrations/story/next.mdx

An example of a client component that can be used in a Fumadocs Story. Ensure it's marked with 'use client'.

```tsx
'use client';

export interface MyComponentProps {
  title?: string;
}

export function MyComponent({ title }: MyComponentProps) {
  return <p>{title}</p>;
}
```

--------------------------------

### Basic DocsLayout Setup

Source: https://github.com/fuma-nama/fumadocs/blob/dev/apps/docs/content/docs/ui/layouts/docs.mdx

Import and render DocsLayout with baseOptions and a page tree. Pass children to render page content.

```tsx
import { DocsLayout } from 'fumadocs-ui/layouts/docs';
import { baseOptions } from '@/lib/layout.shared';
import type { ReactNode } from 'react';

export default function Layout({ children }: { children: ReactNode }) {
  return (
    <DocsLayout {...baseOptions()} tree={tree}>
      {children}
    </DocsLayout>
  );
}
```

--------------------------------

### Create New Fumadocs Application

Source: https://github.com/fuma-nama/fumadocs/blob/dev/apps/docs/content/blog/v15-2.mdx

Command to initialize a new Fumadocs application using pnpm. This is useful for trying out new features or setting up a new project, such as the React Router example mentioned in the text, providing a quick way to get started.

```bash
pnpm create fumadocs-app
```

--------------------------------

### Pre-rendering optimization: before and after comparison

Source: https://github.com/fuma-nama/fumadocs/blob/dev/apps/docs/content/docs/(framework)/integrations/content/custom.mdx

Demonstrates the performance difference between fetching content on each build request versus cloning the repository once and reading files locally. Use local file reads instead of repeated API calls to avoid rate limiting.

```text
/docs/* -> GET github.com
/docs/introduction -> GET github.com
/docs/my-page -> GET github.com
Error: API Ratelimit
```

```text
start -> git clone
/docs/* -> ls
/docs/introduction -> read file
/docs/my-page -> read file
```

--------------------------------

### Generate `llms.txt` Index (Tanstack Start)

Source: https://github.com/fuma-nama/fumadocs/blob/dev/apps/docs/content/docs/(framework)/integrations/llms.mdx

Implements the GET handler for the `/llms.txt` route using Tanstack Start, returning an index of all pages.

```typescript
import { createFileRoute } from '@tanstack/react-router';
import { source } from '@/lib/source';
import { llms } from 'fumadocs-core/source';

export const Route = createFileRoute('/llms.txt')({
  server: {
    handlers: {
      GET() {
        return new Response(llms(source).index());
      },
    },
  },
});
```

--------------------------------

### Run Development Server

Source: https://github.com/fuma-nama/fumadocs/blob/dev/apps/docs/content/docs/(framework)/index.mdx

Start the development server to preview your Fumadocs application locally. Access it at http://localhost:3000/docs.

```npm
npm run dev
```

--------------------------------

### Basic Docs Layout Setup

Source: https://github.com/fuma-nama/fumadocs/blob/dev/apps/docs/content/docs/(framework)/integrations/content/local-md.mdx

Set up a basic layout component to fetch and display documentation content using `getSource` and `DocsLayout`.

```tsx
import { getSource } from '@/lib/source';
import { DocsLayout } from 'fumadocs-ui/layouts/docs';

export default async function Layout({ children }: LayoutProps<'/docs'>) {
  const docs = await getSource();

  return <DocsLayout tree={docs.getPageTree()}>{children}</DocsLayout>;
}
```

--------------------------------

### Run Development Server

Source: https://github.com/fuma-nama/fumadocs/blob/dev/packages/create-app/template/tanstack-start/README.md

Commands to start the development server for the application using npm, pnpm, or yarn.

```bash
npm run dev
# or
pnpm dev
# or
yarn dev
```

--------------------------------

### Create AsyncAPIPage Component

Source: https://github.com/fuma-nama/fumadocs/blob/dev/apps/docs/content/docs/(framework)/integrations/asyncapi/api-page.mdx

Basic setup for the AsyncAPIPage component. This is the entry point for rendering AsyncAPI documentation.

```tsx
'use client';
import { createAsyncAPIPage } from '@fumadocs/asyncapi/ui';

export const AsyncAPIPage = createAsyncAPIPage({
  // config
});
```

--------------------------------

### Run Development Server

Source: https://github.com/fuma-nama/fumadocs/blob/dev/examples/stackblitz/README.md

Commands to start the development server for a Waku project using npm, pnpm, or yarn.

```bash
npm run dev
```

```bash
pnpm dev
```

```bash
yarn dev
```

--------------------------------

### Expose RSS Feed via Tanstack Start File Route

Source: https://github.com/fuma-nama/fumadocs/blob/dev/apps/docs/content/docs/(framework)/guides/rss.mdx

Create a Tanstack Start file-based route for serving the RSS feed. Uses the createFileRoute API with a GET handler that returns the RSS feed as a Response, with the filename pattern 'rss[.]xml.ts' mapping to the /rss.xml endpoint.

```typescript
import { createFileRoute } from '@tanstack/react-router';
import { getRSS } from '@/lib/rss';

export const Route = createFileRoute('/rss.xml')({
  server: {
    handlers: {
      GET: async () => new Response(getRSS()),
    },
  },
});
```

--------------------------------

### Print Hello World in TypeScript

Source: https://github.com/fuma-nama/fumadocs/blob/dev/examples/next-min/content/docs/index.mdx

A basic example of logging a message to the console using TypeScript.

```ts
console.log("Hello World")
```

--------------------------------

### Configure Route Recognition and Prerendering for Static JSON

Source: https://github.com/fuma-nama/fumadocs/blob/dev/apps/docs/content/docs/headless/search/.static-route-example.mdx

These examples demonstrate how to configure route recognition and prerendering for the `static.json` endpoint in React Router and Tanstack Start. For React Router, it involves adding the route to the main route configuration array. For Tanstack Start, the Vite configuration is updated to enable prerendering for the specific path, ensuring the static file is generated during the build process.

```typescript
import { route, type RouteConfig } from '@react-router/dev/routes';

export default [
  route('static.json', 'routes/static.ts'),
] satisfies RouteConfig;
```

```typescript
import { tanstackStart } from '@tanstack/react-start/plugin/vite';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [
    // ...
    tanstackStart({
      prerender: {
        enabled: true,
      },
      pages: [{ path: '/static.json' }],
    }),
  ],
});
```

--------------------------------

### Server and Client Loaders for AsyncAPI Pages

Source: https://github.com/fuma-nama/fumadocs/blob/dev/apps/docs/content/docs/(framework)/integrations/asyncapi/index.mdx

This example demonstrates how to set up server and client loaders to fetch and render AsyncAPI page data. It handles both 'docs' and 'asyncapi' page types.

```tsx
import { createFileRoute, notFound } from '@tanstack/react-router';
import { DocsLayout } from 'fumadocs-ui/layouts/docs';
import { createServerFn } from '@tanstack/react-start';
import { source } from '@/lib/source';
import browserCollections from 'collections/browser';
import { DocsBody, DocsDescription, DocsPage, DocsTitle } from 'fumadocs-ui/layouts/docs/page';
import { useFumadocsLoader } from 'fumadocs-core/source/client';
import { type ReactNode, Suspense } from 'react';
import { AsyncAPIPage } from '@/components/api-page';

export const Route = createFileRoute('/docs/$')({
  component: Page,
  loader: async ({ params }) => {
    const slugs = params._splat?.split('/') ?? [];
    const data = await serverLoader({ data: slugs });

    // Fumadocs MDX: only preload content for normal pages [!code highlight:3]
    if (data.type === 'docs') {
      await clientLoader.preload(data.path);
    }
    return data;
  },
});

const serverLoader = createServerFn({
  method: 'GET',
})
  .validator((slugs: string[]) => slugs)
  .handler(async ({ data: slugs }) => {
    const page = source.getPage(slugs);
    if (!page) throw notFound();

    const pageTree = await source.serializePageTree(source.getPageTree());
    // different result for AsyncAPI pages [!code ++:9]
    if (page.type === 'asyncapi') {
      return {
        type: 'asyncapi',
        title: page.data.title,
        description: page.data.description,
        pageTree,
        props: page.data.getAsyncAPIPageProps(),
      };
    }

    return {
      type: 'docs',
      path: page.path,
      pageTree,
      // ...
    };
  });

const clientLoader = browserCollections.docs.createClientLoader({
  component(pageData, props) {
    // ...
  },
});

function Page() {
  const page = useFumadocsLoader(Route.useLoaderData());
  let content: ReactNode;

  // render AsyncAPI page content [!code ++:11]
  if (page.type === 'asyncapi') {
    content = (
      <DocsPage full>
        <DocsTitle>{page.title}</DocsTitle>
        <DocsDescription>{page.description}</DocsDescription>
        <DocsBody>
          {/* pass the payload data */}
          <AsyncAPIPage {...page.props} />
        </DocsBody>
      </DocsPage>
    );
  } else {
    content = clientLoader.useContent(page.path, page);
  }

  return (
    <DocsLayout tree={page.pageTree}>
      <Suspense>{content}</Suspense>
    </DocsLayout>
  );
}
```

--------------------------------

### Next.js Docker Deployment Configuration

Source: https://github.com/fuma-nama/fumadocs/blob/dev/apps/docs/content/docs/(framework)/deploying/index.mdx

Multi-stage Docker configuration for deploying Fumadocs with Next.js. Includes dependency installation, build optimization, and production runtime setup. Requires source.config.ts and next.config.js files in the WORKDIR for MDX configuration access during builds.

```dockerfile
# syntax=docker.io/docker/dockerfile:1

FROM node:18-alpine AS base

# Install dependencies only when needed
FROM base AS deps
# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
RUN apk add --no-cache libc6-compat
WORKDIR /app

# Install dependencies based on the preferred package manager
COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* .npmrc* source.config.ts next.config.* ./
RUN \
  if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
  elif [ -f package-lock.json ]; then npm ci; \
  elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm i --frozen-lockfile; \
  else echo "Lockfile not found." && exit 1; \
  fi


# Rebuild the source code only when needed
FROM base AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .

# Next.js collects completely anonymous telemetry data about general usage.
# Learn more here: https://nextjs.org/telemetry
# Uncomment the following line in case you want to disable telemetry during the build.
# ENV NEXT_TELEMETRY_DISABLED=1

RUN \
  if [ -f yarn.lock ]; then yarn run build; \
  elif [ -f package-lock.json ]; then npm run build; \
  elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm run build; \
  else echo "Lockfile not found." && exit 1; \
  fi

# Production image, copy all the files and run next
FROM base AS runner
WORKDIR /app

ENV NODE_ENV=production
# Uncomment the following line in case you want to disable telemetry during runtime.
# ENV NEXT_TELEMETRY_DISABLED=1

RUN addgroup --system --gid 1001 nodejs
RUN adduser --system --uid 1001 nextjs

COPY --from=builder /app/public ./public

# Automatically leverage output traces to reduce image size
# https://nextjs.org/docs/advanced-features/output-file-tracing
COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static

USER nextjs

EXPOSE 3000

ENV PORT=3000

# server.js is created by next build from the standalone output
# https://nextjs.org/docs/pages/api-reference/config/next-config-js/output
ENV HOSTNAME="0.0.0.0"
CMD ["node", "server.js"]
```

--------------------------------

### Create First MDX File

Source: https://github.com/fuma-nama/fumadocs/blob/dev/apps/docs/content/docs/(framework)/index.mdx

Example of creating a basic MDX file within the 'docs' folder to serve as your first content page.

```mdx
---
title: Hello World
---

## Yo what's up
```

--------------------------------

### Basic Tabs Usage in MDX with Explicit Values

Source: https://github.com/fuma-nama/fumadocs/blob/dev/apps/docs/content/docs/ui/components/tabs.mdx

This MDX example illustrates the fundamental usage of the `Tabs` component. It defines a set of items for the tabs and uses individual `Tab` components, each explicitly specifying its `value` property. This setup ensures that each tab is uniquely identified and can be selected.

```mdx
<Tabs items={['Javascript', 'Rust']}>
  <Tab value="Javascript">Javascript is weird</Tab>
  <Tab value="Rust">Rust is fast</Tab>
</Tabs>
```

--------------------------------

### Configure Fumadocs MDX Server Runtime in TypeScript

Source: https://github.com/fuma-nama/fumadocs/blob/dev/packages/mdx/test/fixtures/index-dynamic.output.md

This snippet demonstrates how to initialize the `server` runtime from `fumadocs-mdx`. It configures the server-side documentation processing by extending the `DocData` type to include `extractedReferences` for blog content, which is useful for analyzing inter-page relationships. This setup is typically used for server-rendered documentation.

```typescript
// @ts-nocheck
import { server } from 'fumadocs-mdx/runtime/server';
import type * as Config from './config';

const create = server<typeof Config, import("fumadocs-mdx/runtime/types").InternalTypeConfig & {
  DocData: {
    blogs: {
      /**
       * extracted references (e.g. hrefs, paths), useful for analyzing relationships between pages.
       */
      extractedReferences: import("fumadocs-mdx").ExtractedReference[];
    },
  }
}>({"doc":{"passthroughs":["extractedReferences"]}});
```

--------------------------------

### Example Blog Post Content (MDX)

Source: https://github.com/fuma-nama/fumadocs/blob/dev/apps/docs/content/blog/make-a-blog.mdx

Provides a minimal example of an MDX file for a blog post, demonstrating the required frontmatter structure. It includes properties like `title`, `author`, and `date`, which are validated against the `blogPosts` collection schema. This serves as a template for creating new blog entries under the `content/blog` directory.

```mdx
---
title: Hello World
author: Fuma Nama
date: 2024-12-15
---
```

--------------------------------

### Server and Client Loaders for OpenAPI Pages

Source: https://github.com/fuma-nama/fumadocs/blob/dev/apps/docs/content/docs/(framework)/integrations/openapi/index.mdx

This example demonstrates how to set up server and client loaders in Tanstack Router to handle both regular documentation pages and OpenAPI pages. It shows how to fetch and pass necessary data, including OpenAPI-specific props, to the client.

```tsx
import { createFileRoute, notFound } from '@tanstack/react-router';
import { DocsLayout } from 'fumadocs-ui/layouts/docs';
import { createServerFn } from '@tanstack/react-start';
import { source } from '@/lib/source';
import browserCollections from 'collections/browser';
import { DocsBody, DocsDescription, DocsPage, DocsTitle } from 'fumadocs-ui/layouts/docs/page';
import { useFumadocsLoader } from 'fumadocs-core/source/client';
import { type ReactNode, Suspense } from 'react';
import { OpenAPIPage } from '@/components/api-page';

export const Route = createFileRoute('/docs/$')({
  component: Page,
  loader: async ({ params }) => {
    const slugs = params._splat?.split('/') ?? [];
    const data = await serverLoader({ data: slugs });

    // Fumadocs MDX: only preload content for normal pages [!code highlight:3]
    if (data.type === 'docs') {
      await clientLoader.preload(data.path);
    }
    return data;
  },
});

const serverLoader = createServerFn({
  method: 'GET',
})
  .validator((slugs: string[]) => slugs)
  .handler(async ({ data: slugs }) => {
    const page = source.getPage(slugs);
    if (!page) throw notFound();

    const pageTree = await source.serializePageTree(source.getPageTree());
    // different result for OpenAPI pages [!code ++:9]
    if (page.type === 'openapi') {
      return {
        type: 'openapi',
        title: page.data.title,
        description: page.data.description,
        pageTree,
        props: page.data.getOpenAPIPageProps(),
      };
    }

    return {
      type: 'docs',
      path: page.path,
      pageTree,
      // ...
    };
  });

const clientLoader = browserCollections.docs.createClientLoader({
  component(pageData, props) {
    // ...
  },
});

function Page() {
  const page = useFumadocsLoader(Route.useLoaderData());
  let content: ReactNode;

  // render OpenAPI page content [!code ++:11]
  if (page.type === 'openapi') {
    content = (
      <DocsPage full>
        <DocsTitle>{page.title}</DocsTitle>
        <DocsDescription>{page.description}</DocsDescription>
        <DocsBody>
          {/* pass the payload data */}
          <OpenAPIPage {...page.props} />
        </DocsBody>
      </DocsPage>
    );
  } else {
    content = clientLoader.useContent(page.path, page);
  }

  return (
    <DocsLayout tree={page.pageTree}>
      <Suspense>{content}</Suspense>
    </DocsLayout>
  );
}
```

--------------------------------

### Get special event

Source: https://github.com/fuma-nama/fumadocs/blob/dev/packages/openapi/test/out/museum-per-tag.md

Get details about a special event.

```APIDOC
## GET /special-events/{eventId}

### Description
Get details about a special event.

### Method
GET

### Endpoint
/special-events/{eventId}

#### Path Parameters
- **eventId** (string) - Required - The ID of the event to retrieve.
```

--------------------------------

### Initialize fumadocs-preview config

Source: https://github.com/fuma-nama/fumadocs/blob/dev/apps/docs/content/docs/cli/preview.mdx

Generate a configuration file for fumadocs-preview after local installation to customize tool behavior.

```npm
npx fumadocs-preview init
```

--------------------------------

### Configure Server-side MDX Collections with Fumadocs

Source: https://github.com/fuma-nama/fumadocs/blob/dev/packages/mdx/test/fixtures/index-workspace.output.md

This TypeScript code demonstrates how to configure server-side MDX collections using `fumadocs-mdx/runtime/server`. It initializes a server instance and defines document collections by either statically importing MDX files or using lazy imports for frontmatter. This setup is suitable for pre-building content or when content paths are known at build time.

```typescript
// @ts-nocheck
import * as __fd_glob_1 from "./generate-index/folder/test.mdx?collection=docs"
import * as __fd_glob_0 from "./generate-index/index.mdx?collection=docs"
import { server } from 'fumadocs-mdx/runtime/server';
import type * as Config from './config';

const create = server<typeof Config, import("fumadocs-mdx/runtime/types").InternalTypeConfig & {
  DocData: {
  }
}>({"doc":{"passthroughs":["extractedReferences"]}});

export const docs = await create.doc("docs", "packages/mdx/test/fixtures/generate-index", {"index.mdx": __fd_glob_0, "folder/test.mdx": __fd_glob_1, });
```

```typescript
// @ts-nocheck
import { frontmatter as __fd_glob_1 } from "../generate-index-2/test/test.mdx?collection=docs&only=frontmatter&workspace=test"
import { frontmatter as __fd_glob_0 } from "../generate-index-2/index.mdx?collection=docs&only=frontmatter&workspace=test"
import { server } from 'fumadocs-mdx/runtime/server';
import type * as Config from '../config';

const create = server<typeof Config, import("fumadocs-mdx/runtime/types").InternalTypeConfig & {
  DocData: {
  }
}>({"doc":{"passthroughs":["extractedReferences"]}});

export const docs = await create.docLazy("docs", "packages/mdx/test/fixtures/generate-index-2", {"index.mdx": __fd_glob_0, "test/test.mdx": __fd_glob_1, }, {"index.mdx": () => import("../generate-index-2/index.mdx?collection=docs&workspace=test"), "test/test.mdx": () => import("../generate-index-2/test/test.mdx?collection=docs&workspace=test"), });
```

--------------------------------

### Run fumadocs-preview with npx

Source: https://github.com/fuma-nama/fumadocs/blob/dev/apps/docs/content/docs/cli/preview.mdx

Execute the preview tool directly on a content directory without installation. Replace 'dir/to/content' with your actual Markdown directory path.

```npm
npx fumadocs-preview dir/to/content
```

--------------------------------

### Get museum hours

Source: https://github.com/fuma-nama/fumadocs/blob/dev/packages/openapi/test/out/museum-per-tag.md

Get upcoming museum operating hours

```APIDOC
## GET /museum-hours

### Description
Get upcoming museum operating hours

### Method
GET

### Endpoint
/museum-hours
```

--------------------------------

### Get special event

Source: https://github.com/fuma-nama/fumadocs/blob/dev/packages/openapi/test/out/museum+petstore.md

Get details about a specific special event.

```APIDOC
## GET /special-events/{eventId}

### Description
Get details about a special event.

### Method
GET

### Endpoint
/special-events/{eventId}

### Parameters
#### Path Parameters
- **eventId** (string) - Required - The ID of the special event
```

--------------------------------

### Create Fumadocs App with npx, pnpm, or yarn

Source: https://github.com/fuma-nama/fumadocs/blob/dev/packages/create-app/README.md

Use one of these commands to initialize a new Fumadocs project. Choose the command based on your preferred package manager.

```bash
npx create-fumadocs-app
```

```bash
pnpm create fumadocs-app
```

```bash
yarn create fumadocs-app
```

--------------------------------

### Define Static JSON File Path for Various Frameworks

Source: https://github.com/fuma-nama/fumadocs/blob/dev/apps/docs/content/docs/headless/search/.static-route-output.mdx

This snippet demonstrates how to define the `filePath` variable, which points to the pre-rendered `static.json` file. The exact path varies depending on the JavaScript framework or build setup used, such as Next.js, Tanstack Start, React Router, or Waku. This variable is crucial for locating static content generated during the build process.

```typescript
const filePath = '.next/server/app/static.json.body';
```

```typescript
const filePath = '.output/public/static.json';
```

```typescript
const filePath = 'build/client/static.json';
```

```typescript
const filePath = 'dist/public/static.json';
```

--------------------------------

### Sync Documentation with Mixedbread CLI

Source: https://github.com/fuma-nama/fumadocs/blob/dev/apps/docs/content/docs/headless/search/mixedbread.mdx

Sync your documentation content to a Mixedbread store using the CLI. Replace YOUR_STORE_ID and the path with your actual store ID and documentation directory.

```bash
mxbai vs sync YOUR_STORE_ID "./content/docs"
```

--------------------------------

### Basic MDX Syntax Example

Source: https://github.com/fuma-nama/fumadocs/blob/dev/apps/docs/content/docs/(framework)/markdown/index.mdx

Illustrates common MDX elements including component imports, headings, text formatting, lists, blockquotes, images, and tables.

```mdx
import { Component } from './component';

<Component name="Hello" />

## Heading

### Heading

#### Heading

Hello World, **Bold**, _Italic_, ~~Hidden~~

1. First
2. Second
3. Third

- Item 1
- Item 2

> Quote here

![alt](/image.png)

| Table | Description |
| ----- | ----------- |
| Hello | World       |
```

--------------------------------

### Configure Fumadocs Core framework provider for React applications

Source: https://github.com/fuma-nama/fumadocs/blob/dev/apps/docs/content/docs/headless/index.mdx

These code examples illustrate how to integrate Fumadocs Core by wrapping your application's root component with the appropriate framework provider. This step is essential for enabling core functionalities and components within specific React.js frameworks like Next.js, React Router, Tanstack Start/Router, and Waku. The provider typically takes `children` as a prop to render your application's content.

```tsx
import type { ReactNode } from 'react';
import { NextProvider } from 'fumadocs-core/framework/next';

export function RootLayout({ children }: { children: ReactNode }) {
  // or if you're using Fumadocs UI, use `<RootProvider />`
  return <NextProvider>{children}</NextProvider>;
}
```

```tsx
import type { ReactNode } from 'react';
import { ReactRouterProvider } from 'fumadocs-core/framework/react-router';

export function Root({ children }: { children: ReactNode }) {
  return <ReactRouterProvider>{children}</ReactRouterProvider>;
}
```

```tsx
import type { ReactNode } from 'react';
import { TanstackProvider } from 'fumadocs-core/framework/tanstack';

export function Root({ children }: { children: ReactNode }) {
  return <TanstackProvider>{children}</TanstackProvider>;
}
```

```tsx
import type { ReactNode } from 'react';
import { WakuProvider } from 'fumadocs-core/framework/waku';

export function Root({ children }: { children: ReactNode }) {
  return <WakuProvider>{children}</WakuProvider>;
}
```

--------------------------------

### Update postInstall() Signature

Source: https://github.com/fuma-nama/fumadocs/blob/dev/apps/docs/content/blog/mdx-v14.mdx

The `postInstall()` function now accepts framework plugin options as an object, allowing for more customizable properties.

```typescript
import { postInstall } from 'fumadocs-mdx/next';
// or
import { postInstall } from 'fumadocs-mdx/vite';

postInstall('source.config.ts');
```

```typescript
import { postInstall } from 'fumadocs-mdx/next';
// or
import { postInstall } from 'fumadocs-mdx/vite';

postInstall({ configPath: 'source.config.ts' });
```

--------------------------------

### Install Orama Package

Source: https://github.com/fuma-nama/fumadocs/blob/dev/apps/docs/content/docs/(framework)/search/orama.mdx

Install the Orama package using your preferred package manager.

```shell
@orama/orama
```

--------------------------------

### Create Root Folder with meta.json

Source: https://github.com/fuma-nama/fumadocs/blob/dev/apps/docs/content/docs/ui/layouts/docs.mdx

Define a root folder for layout tabs by creating a meta.json file with title, description, and root flag.

```json
{
  "title": "Name of Folder",
  "description": "The description of root folder (optional)",
  "root": true
}
```

--------------------------------

### Get Node Page and Meta

Source: https://github.com/fuma-nama/fumadocs/blob/dev/apps/docs/content/docs/headless/source-api/index.mdx

Utility functions to retrieve the original page or meta file from a page tree node. `getNodePage` gets the page file, and `getNodeMeta` gets the folder's meta file.

```typescript
import { source } from '@/lib/source';

source.getNodePage(pageNode);
source.getNodeMeta(folderNode);
```

--------------------------------

### RootProvider setup for Waku

Source: https://github.com/fuma-nama/fumadocs/blob/dev/apps/docs/content/docs/ui/layouts/root-provider.mdx

Import and wrap children with RootProvider in a Waku layout component.

```jsx
import { RootProvider } from 'fumadocs-ui/provider/waku';

export default function Layout({ children }) {
  return (
    <html lang="en">
      <body>
        <RootProvider>{children}</RootProvider>
      </body>
    </html>
  );
}
```

--------------------------------

### Create AsyncAPI Server with File Path Input

Source: https://github.com/fuma-nama/fumadocs/blob/dev/apps/docs/content/docs/(framework)/integrations/asyncapi/server.mdx

Use this snippet to initialize the AsyncAPI server with schemas loaded from local file paths. Ensure the file path is correctly specified.

```typescript
import { createAsyncAPI } from '@fumadocs/asyncapi/server';

export const asyncapi = createAsyncAPI({
  input: ['./streetlights.yaml'],
});
```

--------------------------------

### Install Fumadocs MDX for Next.js

Source: https://github.com/fuma-nama/fumadocs/blob/dev/apps/docs/content/docs/mdx/(integrations)/next.mdx

Install the necessary packages for using Fumadocs MDX with a Next.js application.

```npm
npm i fumadocs-mdx fumadocs-core @types/mdx
```

--------------------------------

### Create Api

Source: https://github.com/fuma-nama/fumadocs/blob/dev/packages/openapi/test/out/unkey-per-file.md

Creates a new API configuration. Use this POST request to set up a new API within the Unkey system.

```APIDOC
## POST /v1/apis.createApi

### Description
Creates a new API configuration.

### Method
POST

### Endpoint
/v1/apis.createApi
```

--------------------------------

### Install Fumadocs CLI

Source: https://github.com/fuma-nama/fumadocs/blob/dev/apps/docs/content/blog/v14.mdx

Install the Fumadocs CLI as a development dependency to manage Fumadocs UI components.

```bash
npm install @fumadocs/cli --save-dev
```

--------------------------------

### RootProvider setup for Tanstack

Source: https://github.com/fuma-nama/fumadocs/blob/dev/apps/docs/content/docs/ui/layouts/root-provider.mdx

Import RootProvider from Tanstack provider and include HeadContent and Scripts components for proper hydration.

```jsx
import {
  HeadContent,
  Scripts,
} from '@tanstack/react-router';
import { RootProvider } from 'fumadocs-ui/provider/tanstack';

function RootDocument({ children }: { children: React.ReactNode }) {
  return (
    <html suppressHydrationWarning>
      <head>
        <HeadContent />
      </head>
      <body className="flex flex-col min-h-screen">
        <RootProvider>{children}</RootProvider>
        <Scripts />
      </body>
    </html>
  );
}
```

--------------------------------

### Install mono preset for next/og via Fumadocs CLI

Source: https://github.com/fuma-nama/fumadocs/blob/dev/apps/docs/content/docs/(framework)/integrations/og/next.mdx

Add alternative OG image styles using Fumadocs CLI. The mono preset provides a different visual style for generated metadata images.

```bash
npx @fumadocs/cli@latest add og/mono
```

--------------------------------

### Fumadocs MDX Source Loader

Source: https://github.com/fuma-nama/fumadocs/blob/dev/apps/docs/content/docs/(framework)/integrations/content/local-md.mdx

Example of setting up the source loader with Fumadocs MDX.

```typescript
import { docs } from 'collections/server';
import { loader } from 'fumadocs-core/source';

export const source = loader({
  baseUrl: '/docs',
  source: docs.toFumadocsSource(),
});
```

--------------------------------

### Get Api

Source: https://github.com/fuma-nama/fumadocs/blob/dev/packages/openapi/test/out/unkey-per-file.md

Retrieves details for a specific API. This GET request is used to fetch API configuration information.

```APIDOC
## GET /v1/apis.getApi

### Description
Retrieves details for a specific API.

### Method
GET

### Endpoint
/v1/apis.getApi
```

--------------------------------

### Get Verifications

Source: https://github.com/fuma-nama/fumadocs/blob/dev/packages/openapi/test/out/unkey-per-file.md

Retrieves a list of verifications associated with API keys. This GET request provides verification history.

```APIDOC
## GET /v1/keys.getVerifications

### Description
Retrieves a list of verifications associated with API keys.

### Method
GET

### Endpoint
/v1/keys.getVerifications
```

--------------------------------

### Create Blog Post Index Page in Next.js (TypeScript/React)

Source: https://github.com/fuma-nama/fumadocs/blob/dev/apps/docs/content/blog/make-a-blog.mdx

Implements the main index page for displaying a list of blog posts. It fetches all pages from the `blog` source using `blog.getPages()` and renders them as a grid of links. Each link navigates to a specific blog post, displaying its title and description, with styling provided by Tailwind CSS.

```typescript
import Link from 'next/link';
import { blog } from '@/lib/source';

export default function Home() {
  const posts = blog.getPages();

  return (
    <main className="flex-1 w-full max-w-[1400px] mx-auto px-4 py-8">
      <h1 className="text-4xl font-bold mb-8">Latest Blog Posts</h1>
      <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
        {posts.map((post) => (
          <Link
            key={post.url}
            href={post.url}
            className="block bg-fd-secondary rounded-lg shadow-md overflow-hidden p-6"
          >
            <h2 className="text-xl font-semibold mb-2">{post.data.title}</h2>
            <p className="mb-4">{post.data.description}</p>
          </Link>
        ))}
      </div>
    </main>
  );
}
```

--------------------------------

### Hello World console log in TypeScript

Source: https://github.com/fuma-nama/fumadocs/blob/dev/examples/tanstack-start-local-md/content/docs/index.mdx

Basic TypeScript example logging a greeting message to the console.

```typescript
console.log('Hello World');
```

--------------------------------

### Get All Pages

Source: https://github.com/fuma-nama/fumadocs/blob/dev/apps/docs/content/docs/headless/source-api/index.mdx

Retrieves a list of all available pages. Optionally, a specific locale can be provided to get pages only for that language.

```typescript
import { source } from '@/lib/source';

// from any locale
source.getPages();

// for a specific locale
source.getPages('locale');
```

--------------------------------

### Install Orama Tokenizers for Special Languages

Source: https://github.com/fuma-nama/fumadocs/blob/dev/apps/docs/content/docs/headless/search/orama.mdx

Install the `@orama/tokenizers` package to handle special languages like Chinese and Japanese.

```bash
npm i @orama/tokenizers
```

--------------------------------

### Install Fumadocs MDX dependencies

Source: https://github.com/fuma-nama/fumadocs/blob/dev/apps/docs/content/docs/mdx/(integrations)/vite.mdx

Install the required packages for Fumadocs MDX, including the core library and MDX types.

```npm
npm i fumadocs-mdx fumadocs-core @types/mdx
```

--------------------------------

### Basic OpenAPI Server Configuration

Source: https://github.com/fuma-nama/fumadocs/blob/dev/apps/docs/content/docs/(framework)/integrations/openapi/server.mdx

Configure the OpenAPI server with file paths as input. Ensure the input paths are correct for schema resolution.

```ts
import { createOpenAPI } from 'fumadocs-openapi/server';

export const openapi = createOpenAPI({
  input: ['./unkey.json'],
});
```

--------------------------------

### Install fumadocs-typescript Package

Source: https://github.com/fuma-nama/fumadocs/blob/dev/apps/docs/content/docs/(framework)/integrations/(docgen)/typescript.mdx

Install the fumadocs-typescript package to enable TypeScript documentation generation capabilities.

```bash
npm install fumadocs-typescript
```

--------------------------------

### Enable Persistent Package Manager Selection

Source: https://github.com/fuma-nama/fumadocs/blob/dev/apps/docs/content/docs/headless/mdx/install.mdx

Configure the remarkInstall plugin with persistence options to remember the user's preferred package manager across different pages using a unique ID.

```typescript
import { remarkInstall } from 'fumadocs-docgen';
import { defineConfig } from 'fumadocs-mdx/config';

const remarkInstallOptions = {
  persist: {
    id: 'some-id',
  },
};

export default defineConfig({
  mdxOptions: {
    remarkPlugins: [[remarkInstall, remarkInstallOptions]],
  },
});
```

```typescript
import { compile } from '@mdx-js/mdx';
import { remarkInstall } from 'fumadocs-docgen';

const remarkInstallOptions = {
  persist: {
    id: 'some-id',
  },
};

await compile('...', {
  remarkPlugins: [[remarkInstall, remarkInstallOptions]],
});
```

--------------------------------

### Initialize and Use Headless Search Server

Source: https://github.com/fuma-nama/fumadocs/blob/dev/apps/docs/content/docs/headless/search/orama.mdx

Initialize the advanced search server and perform a search query. Ensure you pass the necessary indexes during initialization. Search queries can optionally specify locale and tag.

```typescript
import { initAdvancedSearch } from 'fumadocs-core/search/server';

const server = initAdvancedSearch({
  // you still have to pass indexes
});

server.search('query', {
  // you can specify `locale` and `tag` here
});
```

--------------------------------

### Create a Client Component Story

Source: https://github.com/fuma-nama/fumadocs/blob/dev/apps/docs/content/docs/(framework)/integrations/story/next.mdx

Define your first story using the `defineStory` function. The `Component` prop must be a client component, and `args` should contain default props.

```tsx
import { defineStory } from '@/lib/story';
import { MyComponent } from './my-component';

export const story = defineStory({
  // the passed component must be a client component
  Component: MyComponent,
  args: {
    // default props (recommended)
    initial: {},
  },
});
```

--------------------------------

### Get Page by Slugs

Source: https://github.com/fuma-nama/fumadocs/blob/dev/apps/docs/content/docs/headless/source-api/index.mdx

Retrieves a specific page using its slugs. An optional locale can be provided to get the page for a particular language.

```typescript
import { source } from '@/lib/source';

source.getPage(['slug', 'of', 'page']);

// with i18n
source.getPage(['slug', 'of', 'page'], 'locale');
```

--------------------------------

### Package.json Build Script

Source: https://github.com/fuma-nama/fumadocs/blob/dev/apps/docs/content/docs/headless/search/algolia.mdx

Integrates the content syncing script into the build process by adding it to the 'build' script in package.json.

```json
{
  "scripts": {
    "build": "... && bun ./scripts/sync-content.ts"
  }
}
```