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

Basisinstellingen

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:

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.

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.

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.

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

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.

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.

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.

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

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.