Configuración

Los ajustes de todo el sitio van en onedocs.config.ts, en la raíz del proyecto. Pasa el objeto exportado a DocsLayout, HomePage y createMetadata, que lo leen. La ubicación del contenido se define en source.config.ts, no aquí (consulta Primeros pasos).

Configuración básica

import { defineConfig } from "onedocs/config";

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

Eso es lo mínimo. Todo lo demás es opcional.

Ejemplo completo

Los iconos de funciones son elementos React, así que el archivo de configuración que los use debe ser un archivo .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" }],
  },
});

Opciones

title (obligatorio)

El nombre de tu sitio. La barra de navegación lo muestra si no se define logo; createMetadata lo usa como título de página predeterminado y en la plantilla %s | Title; además, la página de inicio lo usa como título principal y en la línea de copyright del pie de página.

title: "My Project"

description

Descripción breve. createMetadata la usa como metadescripción y la página de inicio la muestra debajo del título principal si no se define homepage.hero.description.

description: "Documentation for My Project"

logo

Sustituye el título en la barra de navegación. Usa una ruta única o variantes claras y oscuras; la imagen tiene 24 px de alto y usa title como texto alternativo.

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

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

icon

El favicon se configura mediante createMetadata. Las variantes claras y oscuras se sirven con consultas de medios prefers-color-scheme.

icon: "/icon.png"

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

nav

Configuración de la barra de navegación, utilizada por DocsLayout y 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

El contenido destacado y la cuadrícula de funciones que muestra 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 se representa tal como se proporciona, así que pasa un elemento como un icono lucide-react. Una cadena como "rocket" se muestra como texto.

Dos opciones más para el contenido destacado sustituyen partes del diseño predeterminado:

• hero.left sustituye el título, la descripción, el bloque de instalación y el botón por tu propio contenido. Recibe un nodo React o una función que devuelva uno.
• hero.right ocupa la mitad derecha del contenido destacado. Se oculta por debajo del punto de quiebre lg.

pie

Enlaces e iconos de redes sociales en el pie de página de HomePage, junto a la línea de copyright. Ambos se abren en una pestaña nueva.

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

Cada enlace social usa label como nombre accesible.

Opciones que aún no tienen efecto

OnedocsConfig también define los tipos de docs, theme y i18n, y defineConfig completa los valores predeterminados de docs.dir y theme.darkMode, pero ningún código de Onedocs los lee (#2). Configurarlos no cambia nada:

• docs.dir: la carpeta de contenido es el dir que pasas a defineDocs en source.config.ts.
• theme.primaryColor y theme.darkMode: los colores provienen del tema Fumadocs UI que importa el ajuste preestablecido de CSS; los modos claro y oscuro provienen de Fumadocs UI RootProvider.
• i18n: Onedocs no admite varios idiomas.

TypeScript

El asistente defineConfig ofrece autocompletado completo:

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

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

export default defineConfig(config);

defineConfig devuelve el objeto que pasas, además de los valores predeterminados no utilizados de docs y theme descritos arriba.