# Configuration

URL: https://whitepaper.designervenkat.online/docs/coding-tutorials/configuration
Markdown: https://whitepaper.designervenkat.online/llms.mdx/docs/coding-tutorials/configuration
Site: White Papers - Designer Venkat
Author: Designer Venkat
Language: en

Site title, navigation, theme colors, and search behavior — everything that customizes how the docs feel.





Most of the site's behavior is controlled by three files. Once you know what each one owns, customization is straightforward.

## Where things live [#where-things-live]

<Files>
  <Folder name="app">
    <File name="layout.tsx" />

    <File name="globals.css" />

    <Folder name="docs">
      <File name="layout.tsx" />

      <Folder name="[[...slug]]">
        <File name="page.tsx" />
      </Folder>
    </Folder>
  </Folder>

  <Folder name="lib">
    <File name="source.ts" />

    <File name="layout.shared.ts" />
  </Folder>

  <Folder name="content/docs">
    <File name="meta.json" />

    <File name="index.mdx" />
  </Folder>

  <File name="source.config.ts" />
</Files>

## Site title and navigation [#site-title-and-navigation]

Edit `lib/layout.shared.ts` — this is the single source of truth for the brand title, nav links, and footer.

```ts title="lib/layout.shared.ts"
export const baseOptions = {
  nav: {
    title: "nxt-whitepapers",
  },
  links: [
    { text: "GitHub", url: "https://github.com/your-org/nxt-whitepapers" },
  ],
};
```

The `nav.title` shows in the top-left of both the docs sidebar and any home pages you add.

## Theme colors [#theme-colors]

Fumadocs uses CSS variables for color — primary, background, foreground, muted, and so on. To match the brand, override them in `app/globals.css`:

```css title="app/globals.css"
:root {
  --brand-blue-300: #93c5fd;
  --brand-sky-500: #0ea5e9;
  --gradient-primary: linear-gradient(
    to bottom,
    var(--brand-blue-300),
    var(--brand-sky-500)
  );
  --color-fd-primary: var(--brand-sky-500);
}
```

<Callout title="Why OKLCH?">
  OKLCH is perceptually uniform — same lightness value reads as the same
  brightness across hues. HSL fakes this and tends to produce muddier mid-tones.
  If you prefer HSL, both formats work; just be consistent across light and dark
  variants.
</Callout>

## Sidebar order [#sidebar-order]

The order of pages in the sidebar comes from `meta.json` files. Each folder can have one:

```json title="content/docs/meta.json"
{
  "pages": [
    "index",
    "ai-machine-learning",
    "coding-tutorials",
    "security",
    "ui-ux",
    "performances"
  ]
}
```

* `"index"` and `"ai-machine-learning"` are file/folder names (no extension)
* `"---Label---"` becomes a section divider with the given text

<Callout type="warn">
  Pages not listed in `meta.json` are appended to the end in alphabetical order.
  To hide a page, prefix the filename with `_` — Fumadocs ignores those.
</Callout>

## Search [#search]

Search is configured in `app/api/search/route.ts`. It uses Fumadocs' `advanced` mode, which indexes headings and body text:

```ts title="app/api/search/route.ts"
import { source } from "@/lib/source";
import { createSearchAPI } from "fumadocs-core/search/server";

export const { GET } = createSearchAPI("advanced", {
  indexes: source.getPages().map((page) => ({
    title: page.data.title,
    structuredData: page.data.structuredData,
    id: page.url,
    url: page.url,
  })),
});
```

Switch to `"simple"` if you only want to match titles — faster, less useful.

## Feedback collector [#feedback-collector]

The thumbs-up/thumbs-down widget at the bottom of every page is wired in `app/docs/[[...slug]]/page.tsx`. Right now it `console.log`s the response; replace the server action body with a fetch to your analytics endpoint.

<Tabs items="[&#x22;Console&#x22;, &#x22;PostHog&#x22;, &#x22;Custom endpoint&#x22;]">
  <Tab value="Console">
    ```ts onSendAction=
    {async (feedback) => {
      "use server";
      console.log("[feedback]", feedback);
      return {};
    }}
    ```
  </Tab>

  <Tab value="PostHog">
    ```ts onSendAction=
    {async (feedback) => {
      "use server";
      await posthog.capture("docs_feedback", feedback);
      return {};
    }}
    ```
  </Tab>

  <Tab value="Custom endpoint">
    ```ts onSendAction=
    {async (feedback) => {
      "use server";
      await fetch("https://api.example.com/feedback", {
        method: "POST",
        body: JSON.stringify(feedback),
      });
      return {};
    }}
    ```
  </Tab>
</Tabs>