Configurazione

Le impostazioni globali del sito si trovano in onedocs.config.ts nella radice del progetto. Passate l'oggetto esportato a DocsLayout, HomePage e createMetadata, che lo leggono. La posizione dei contenuti si imposta in source.config.ts, non qui (vedi Introduzione).

Configurazione di base

import { defineConfig } from "onedocs/config";

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

Questo è il minimo indispensabile. Tutto il resto è facoltativo.

Esempio completo

Le icone delle funzionalità sono elementi React, quindi una configurazione che le usa deve essere un file .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" }],
  },
});

Opzioni

title (obbligatorio)

Il nome del sito. La barra di navigazione lo mostra se non è impostato logo; createMetadata lo usa come titolo predefinito della pagina e nel modello %s | Title; la home page lo usa come titolo principale e nella riga del copyright del piè di pagina.

title: "My Project"

description

Descrizione breve. createMetadata la usa come meta description, mentre la home page la mostra sotto il titolo principale se homepage.hero.description non è impostato.

description: "Documentation for My Project"

logo

Sostituisce il titolo nella barra di navigazione. Usate un solo percorso oppure varianti chiare e scure; l'immagine è alta 24 px e usa title come testo alternativo.

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

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

icon

La favicon, impostata tramite createMetadata. Le varianti chiare e scure vengono servite con media query prefers-color-scheme.

icon: "/icon.png"

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

nav

Configurazione della barra di navigazione, usata da DocsLayout e 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 sezione principale e la griglia delle funzionalità che HomePage visualizza.

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 viene visualizzato così com'è, quindi passate un elemento come un'icona lucide-react. Una stringa come "rocket" viene mostrata come testo.

Altre due opzioni per la sezione principale sostituiscono parti di quella predefinita:

• hero.left sostituisce titolo, descrizione, blocco di installazione e pulsante con contenuti personalizzati. Accetta un nodo React o una funzione che ne restituisce uno.
• hero.right occupa la metà destra della sezione principale. È nascosto sotto il punto di interruzione lg.

footer

Collegamenti e icone social nel piè di pagina HomePage, accanto alla riga del copyright. Entrambi si aprono in una nuova scheda.

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

Ogni collegamento social usa label come nome accessibile.

Opzioni che per ora non hanno effetto

OnedocsConfig tipizza anche docs, theme e i18n, mentre defineConfig definisce i valori predefiniti di docs.dir e theme.darkMode, ma nessun codice Onedocs li legge (#2). Impostarli non cambia nulla:

• docs.dir: la cartella dei contenuti è dir che passate a defineDocs in source.config.ts.
• theme.primaryColor e theme.darkMode: i colori provengono dal tema Fumadocs UI importato dal preset CSS, mentre le modalità chiara e scura provengono da Fumadocs UI's RootProvider.
• i18n: Onedocs non supporta più lingue.

TypeScript

L'helper defineConfig offre il completamento automatico completo:

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

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

export default defineConfig(config);

defineConfig restituisce l'oggetto passato, oltre ai valori predefiniti inutilizzati di docs e theme descritti sopra.