Pular para o conteúdo

Configuração

Ver como Markdown Editar no GitHub Documentação em 7b38e05

As configurações do site ficam em onedocs.config.ts na raiz do projeto. Passe o objeto exportado para DocsLayout, HomePage e createMetadata, que o leem. O local do conteúdo é definido em source.config.ts, não aqui (consulte Primeiros passos).

Configuração básica

TypeScript
import { defineConfig } from "onedocs/config";

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

Isso é o mínimo necessário. Todo o resto é opcional.

Exemplo completo

Os ícones dos recursos são elementos React, então uma configuração que os usa precisa estar em um arquivo .tsx:

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" }],
  },
});

Opções

title (obrigatório)

O nome do seu site. A barra de navegação o exibe quando nenhum logo é definido, createMetadata o usa como título padrão da página e no modelo %s | Title, e a página inicial o usa como título da seção principal e na linha de direitos autorais do rodapé.

TypeScript
title: "My Project"

description

Descrição curta. createMetadata a usa como metadescrição, e a página inicial a exibe abaixo do título da seção principal quando homepage.hero.description não está definido.

TypeScript
description: "Documentation for My Project"

Substitui o título na barra de navegação. Use um único caminho ou variantes clara e escura; a imagem tem 24 px de altura e usa title como texto alternativo.

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

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

ícone

O ícone do site, definido por createMetadata. As variantes clara e escura são fornecidas por meio de consultas de mídia prefers-color-scheme.

TypeScript
icon: "/icon.png"

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

Configuração da barra de navegação, usada por DocsLayout e HomePage.

TypeScript
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

A seção principal e a grade de recursos renderizadas por 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 é renderizado como fornecido, então passe um elemento como um ícone lucide-react. Uma string como "rocket" é exibida como texto.

Mais duas opções da seção principal substituem partes do conteúdo padrão:

  • hero.left substitui o título, a descrição, o bloco de instalação e o botão pelo seu próprio conteúdo. Recebe um nó React ou uma função que retorna um.
  • hero.right preenche a metade direita da seção principal. Fica oculto abaixo do ponto de interrupção lg.

Links e ícones sociais no rodapé HomePage, ao lado da linha de direitos autorais. Ambos abrem em uma nova aba.

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

Cada link social usa label como nome acessível.

Opções que ainda não têm efeito

OnedocsConfig também tipa docs, theme e i18n, e defineConfig preenche os valores padrão de docs.dir e theme.darkMode, mas nenhum código de Onedocs os lê (#2). Defini-los não muda nada:

  • docs.dir: a pasta de conteúdo é o dir que você passa para defineDocs em source.config.ts.
  • theme.primaryColor e theme.darkMode: as cores vêm do tema Fumadocs UI, importado pela predefinição CSS, e os modos claro e escuro vêm de Fumadocs UIRootProvider.
  • i18n: Onedocs não oferece suporte a vários idiomas.

TypeScript

O auxiliar defineConfig oferece preenchimento automático completo:

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

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

export default defineConfig(config);

defineConfig retorna o objeto que você passa, além dos valores padrão não utilizados de docs e theme descritos acima.