# 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](https://onedocs.inline0.dev/es/docs/getting-started)).

## Configuración básica

```ts title="onedocs.config.ts"
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`:

```tsx title="onedocs.config.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.

```ts
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`.

```ts
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.

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

```ts
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`.

```ts
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`.

```tsx
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.

```tsx
// 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](https://github.com/inline0/onedocs/issues/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:

```ts
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.