# Configuratie

Sitebrede instellingen staan in `onedocs.config.ts` in de hoofdmap van uw project. Geef het geëxporteerde object door aan `DocsLayout`, `HomePage` en `createMetadata`, die het uitlezen. De locatie van uw content stelt u in `source.config.ts` in, niet hier (zie [Aan de slag](https://onedocs.inline0.dev/nl/docs/getting-started)).

## Basisinstellingen

```ts title="onedocs.config.ts"
import { defineConfig } from "onedocs/config";

export default defineConfig({
  title: "My Project",
  description: "Documentation for My Project",
});
```

Dat is het minimum. Al het andere is optioneel.

## Volledig voorbeeld

Functiepictogrammen zijn React-elementen, dus een configuratie die ze gebruikt, moet een `.tsx`-bestand zijn:

```tsx title="onedocs.config.tsx"
import { defineConfig } from "onedocs/config";
import { Rocket, Zap } from "lucide-react";

export default defineConfig({
  title: "My Project",
  description: "Documentation for My Project",

  // Logo (string or light/dark variants)
  logo: "/logo.svg",
  // logo: { light: "/logo-light.svg", dark: "/logo-dark.svg" },

  // Favicon (string or light/dark variants), used by createMetadata
  icon: "/icon.png",

  // Navigation bar
  nav: {
    links: [
      { label: "Blog", href: "/blog" },
      { label: "Changelog", href: "/changelog" },
    ],
    github: "username/repo",
  },

  // Homepage
  homepage: {
    hero: {
      title: "My Project",
      description: "Documentation that ships with the code",
      cta: { label: "Get Started", href: "/docs" },
    },
    features: [
      {
        title: "Fast",
        description: "Static pages built by Next.js",
        icon: <Zap className="size-5 text-fd-primary" />,
      },
      {
        title: "Simple",
        description: "Write markdown, get docs",
        icon: <Rocket className="size-5 text-fd-primary" />,
      },
    ],
  },

  // Homepage footer
  footer: {
    links: [{ label: "License", href: "https://github.com/username/repo/blob/main/LICENSE" }],
  },
});
```

## Opties

### titel (vereist)

De naam van uw site. De navigatiebalk toont deze wanneer er geen `logo` is ingesteld; `createMetadata` gebruikt de naam als standaardpaginatitel en in het `%s | Title`-sjabloon; de startpagina gebruikt deze als herotitel en in de auteursrechtregel in de voettekst.

```ts
title: "My Project"
```

### beschrijving

Korte beschrijving. `createMetadata` gebruikt deze als metabeschrijving, en de startpagina toont deze onder de herotitel wanneer `homepage.hero.description` niet is ingesteld.

```ts
description: "Documentation for My Project"
```

### logo

Vervangt de titel in de navigatiebalk. Gebruik één pad of lichte en donkere varianten; de afbeelding is 24 px hoog en gebruikt `title` als alternatieve tekst.

```ts
// Single logo
logo: "/logo.svg"

// Light/dark mode
logo: {
  light: "/logo-light.svg",
  dark: "/logo-dark.svg"
}
```

### Pictogram

Het favicon, ingesteld via `createMetadata`. Lichte en donkere varianten worden weergegeven met `prefers-color-scheme`-mediaquery's.

```ts
icon: "/icon.png"

// Light/dark mode
icon: {
  light: "/icon-light.png",
  dark: "/icon-dark.png"
}
```

### navigatie

Configuratie van de navigatiebalk, gebruikt door `DocsLayout` en `HomePage`.

```ts
nav: {
  // Extra links in the navbar
  links: [
    { label: "Blog", href: "/blog" },
    { label: "API", href: "/api" },
  ],

  // GitHub repo as "owner/name" (adds an icon link to https://github.com/owner/name)
  github: "username/repo",
}
```

### startpagina

De hero en het functierooster die `HomePage` rendert.

```tsx
homepage: {
  hero: {
    title: "My Project",        // Defaults to config.title
    description: "Description", // Defaults to config.description
    cta: {
      label: "Get Started",     // Default: "Get Started"
      href: "/docs",            // Default: "/docs"
    },
  },
  features: [
    {
      title: "Feature 1",
      description: "Description of feature 1",
      icon: <Rocket className="size-5" />, // Optional React element
    },
  ],
}
```

`icon` wordt weergegeven zoals opgegeven, dus geef een element door, zoals een pictogram van `lucide-react`. Een tekenreeks zoals `"rocket"` wordt als tekst weergegeven.

Twee extra hero-opties vervangen delen van de standaardhero:

- `hero.left` vervangt de titel, beschrijving, het installatieblok en de knop door uw eigen inhoud. Accepteert een React-node of een functie die er een teruggeeft.
- `hero.right` vult de rechterhelft van de hero. Deze wordt verborgen onder het `lg`-breekpunt.

### footer

Links en sociale pictogrammen in de voettekst van `HomePage`, naast de auteursrechtregel. Beide worden in een nieuw tabblad geopend.

```tsx
// import { GitHubIcon } from "onedocs";
footer: {
  links: [{ label: "Privacy", href: "/privacy" }],
  socials: [
    { label: "GitHub", href: "https://github.com/username/repo", icon: <GitHubIcon /> },
  ],
}
```

Elke sociale link gebruikt `label` als toegankelijke naam.

## Opties die nog geen effect hebben

`OnedocsConfig` definieert ook de types van `docs`, `theme` en `i18n`, en `defineConfig` vult de standaardwaarden van `docs.dir` en `theme.darkMode` in, maar geen code van Onedocs leest ze uit ([#2](https://github.com/inline0/onedocs/issues/2)). Instellen ervan verandert niets:

- `docs.dir`: de map met content is de `dir` die u doorgeeft aan `defineDocs` in `source.config.ts`.
- `theme.primaryColor` en `theme.darkMode`: de kleuren komen uit het thema Fumadocs UI dat de preset CSS importeert, en de lichte en donkere modus komen uit de `RootProvider` van Fumadocs UI.
- `i18n`: Onedocs ondersteunt geen meerdere talen.

## TypeScript

De helper `defineConfig` biedt volledige automatische aanvulling:

```ts
import { defineConfig, type OnedocsConfig } from "onedocs/config";

const config: OnedocsConfig = {
  title: "My Project",
};

export default defineConfig(config);
```

`defineConfig` retourneert het object dat u doorgeeft, plus de ongebruikte standaardwaarden `docs` en `theme` die hierboven zijn beschreven.