Configuration

Les paramètres propres à tout le site se trouvent dans onedocs.config.ts, à la racine de votre projet. Transmettez l’objet exporté à DocsLayout, HomePage et createMetadata, qui le lisent. L’emplacement du contenu est défini dans source.config.ts, pas ici (voir Bien démarrer).

Configuration de base

import { defineConfig } from "onedocs/config";

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

C’est le minimum requis. Tout le reste est facultatif.

Exemple complet

Les icônes de fonctionnalité sont des éléments React ; un fichier de configuration qui les utilise doit donc être un fichier .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" }],
  },
});

Options

title (obligatoire)

Nom de votre site. La barre de navigation l’affiche si aucun logo n’est défini ; createMetadata l’utilise comme titre de page par défaut et dans le modèle %s | Title ; la page d’accueil l’utilise comme titre de la bannière et dans la ligne de copyright du pied de page.

title: "My Project"

description

Brève description. createMetadata l’utilise comme méta-description, et la page d’accueil l’affiche sous le titre de la bannière si homepage.hero.description n’est pas défini.

description: "Documentation for My Project"

logo

Remplace le titre dans la barre de navigation. Utilisez un chemin unique ou des variantes claire et sombre ; l’image fait 24 px de haut et utilise title comme texte alternatif.

// Single logo
logo: "/logo.svg"

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

icon

L’icône de favori, définie via createMetadata. Les variantes claire et sombre sont servies avec des requêtes média prefers-color-scheme.

icon: "/icon.png"

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

nav

Configuration de la barre de navigation utilisée par DocsLayout et 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

La bannière et la grille de fonctionnalités rendues par HomePage.

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 est rendu tel quel ; transmettez donc un élément tel qu’une icône lucide-react. Une chaîne comme "rocket" est affichée sous forme de texte.

Deux autres options de bannière remplacent certaines parties de la bannière par défaut :

• hero.left remplace le titre, la description, le bloc d’installation et le bouton par votre propre contenu. Accepte un nœud React ou une fonction qui en renvoie un.
• hero.right occupe la moitié droite de la bannière. Elle est masquée sous le seuil lg.

pied de page

Liens et icônes de réseaux sociaux dans le pied de page HomePage, à côté de la ligne de copyright. Les deux s’ouvrent dans un nouvel onglet.

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

Chaque lien vers un réseau social utilise label comme nom accessible.

Options sans effet pour le moment

OnedocsConfig définit aussi les types de docs, theme et i18n, et defineConfig renseigne les valeurs par défaut de docs.dir et theme.darkMode, mais aucun code Onedocs ne les lit (#2). Les définir ne change rien :

• docs.dir : le dossier de contenu correspond au dir transmis à defineDocs dans source.config.ts.
• theme.primaryColor et theme.darkMode : les couleurs proviennent du thème Fumadocs UI importé par le préréglage CSS ; les modes clair et sombre proviennent de Fumadocs UI et de son RootProvider.
• i18n : Onedocs ne prend pas en charge plusieurs langues.

TypeScript

L’assistant defineConfig fournit une autocomplétion complète :

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

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

export default defineConfig(config);

defineConfig renvoie l’objet transmis, ainsi que les valeurs par défaut inutilisées docs et theme décrites ci-dessus.