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).

Grundeinrichtung

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:

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.

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.

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.

// 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.

icon: "/icon.png"

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

nav

Konfiguration der Navigationsleiste, verwendet von DocsLayout und HomePage.

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.

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.

// 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). 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:

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.