# Konfiguration

Websiteweite Einstellungen gehören in `onedocs.config.ts` im Stammverzeichnis deines Projekts. Übergib das exportierte Objekt an `DocsLayout`, `HomePage` und `createMetadata`, die es auslesen. Wo deine Inhalte liegen, legst du in `source.config.ts` fest, nicht hier (siehe [Erste Schritte](https://onedocs.inline0.dev/de/docs/getting-started)).

## Grundeinrichtung

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

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

Das ist das Minimum. Alles andere ist optional.

## Vollständiges Beispiel

Feature-Icons sind React-Elemente. Eine Konfiguration, die sie verwendet, muss daher eine `.tsx`-Datei sein:

```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" }],
  },
});
```

## Optionen

### title (erforderlich)

Der Name deiner Website. Die Navigationsleiste zeigt ihn an, wenn kein `logo` festgelegt ist. `createMetadata` verwendet ihn als Standardseitentitel und in der `%s | Title`-Vorlage. Auf der Startseite dient er als Hero-Titel und erscheint in der Copyright-Zeile der Fußzeile.

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

### description

Kurzbeschreibung. `createMetadata` verwendet sie für die Meta-Beschreibung. Auf der Startseite wird sie unter dem Hero-Titel angezeigt, wenn `homepage.hero.description` nicht festgelegt ist.

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

### logo

Ersetzt den Titel in der Navigationsleiste. Verwende einen einzelnen Pfad oder Varianten für helles und dunkles Design. Das Bild ist 24 px hoch und verwendet `title` als Alternativtext.

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

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

### icon

Das Favicon wird über `createMetadata` festgelegt. Varianten für helles und dunkles Design werden mithilfe von `prefers-color-scheme`-Media-Queries ausgeliefert.

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

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

### nav

Konfiguration der Navigationsleiste, verwendet von `DocsLayout` und `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",
}
```

### homepage

Hero-Bereich und Feature-Raster, 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` wird unverändert gerendert. Übergib also ein Element wie etwa ein `lucide-react`-Icon. Ein String wie `"rocket"` wird als Text ausgegeben.

Zwei weitere Hero-Optionen ersetzen Teile des Standard-Hero-Bereichs:

- `hero.left` ersetzt Titel, Beschreibung, Installationsblock und Button durch eigene Inhalte. Erwartet wird ein React-Knoten oder eine Funktion, die einen solchen zurückgibt.
- `hero.right` füllt die rechte Hälfte des Hero-Bereichs. Unterhalb des `lg`-Breakpoints wird es ausgeblendet.

### footer

Links und Social-Media-Icons in der Fußzeile von `HomePage`, neben der Copyright-Zeile. Beide werden in einem neuen Tab geöffnet.

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

Jeder Social-Media-Link verwendet `label` als barrierefreien Namen.

## Optionen, die noch keine Wirkung haben

`OnedocsConfig` typisiert außerdem `docs`, `theme` und `i18n`. `defineConfig` ergänzt die Standardwerte für `docs.dir` und `theme.darkMode`. Onedocs-Code liest diese Werte jedoch nicht aus ([#2](https://github.com/inline0/onedocs/issues/2)). Ihre Festlegung ändert nichts:

- `docs.dir`: Der Inhaltsordner ist das `dir`, das du in `source.config.ts` an `defineDocs` übergibst.
- `theme.primaryColor` und `theme.darkMode`: Die Farben stammen aus dem Fumadocs-UI-Theme, das das CSS-Preset importiert. Der helle und der dunkle Modus stammen aus dem Fumadocs-UI-`RootProvider`.
- `i18n`: Onedocs unterstützt keine Mehrsprachigkeit.

## TypeScript

Der `defineConfig`-Helper bietet dir vollständige Autovervollständigung:

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

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

export default defineConfig(config);
```

`defineConfig` gibt das übergebene Objekt sowie die oben beschriebenen ungenutzten Standardwerte `docs` und `theme` zurück.