Manuales (VitePress)

Aplica a frontend-manual-tecnico y frontend-manual-de-usuario. Ambos son sitios estáticos generados con VitePress a partir de archivos Markdown.

Estructura

<manual>/
├── .vitepress/
│   ├── config.mjs         # Configuración del sitio: título, búsqueda, nav, sidebar
│   ├── rutas/ | sidebars/ # Sidebar de cada sección (un archivo .js por sección)
│   └── theme/             # Tema: extiende el tema por defecto y agrega CSS (pantalla e impresión)
├── docs/                  # Contenido (srcDir)
│   ├── index.md           # Página de inicio
│   ├── <seccion>/         # Una carpeta por sección: index.md + páginas numeradas
│   ├── consolidado/       # Páginas que reúnen secciones para exportar a PDF
│   └── public/            # Archivos servidos tal cual (logo, imágenes)
├── Dockerfile · nginx.conf
└── package.json · pnpm-lock.yaml · pnpm-workspace.yaml

Manual	Carpeta de sidebars
frontend-manual-tecnico	.vitepress/rutas/
frontend-manual-de-usuario	.vitepress/sidebars/

Dependencias

Paquete	Versión	Uso
vitepress	2.0.0-alpha.17	Generador del sitio
mermaid	^12.2.0	Diagramas en bloques ```mermaid
vitepress-plugin-mermaid	^2.0.17	Integración de Mermaid con VitePress (withMermaid en config.mjs)

Agregar una sección (manual técnico)

1. Crear docs/<seccion>/index.md y las páginas numeradas (01-<tema>.md, 02-<tema>.md, …).

2. Crear .vitepress/rutas/<seccion>.js exportando el sidebar:

   const PATH_BASE = '/<seccion>';
   
   export const RUTAS_<SECCION> = [
     {
       link: `${PATH_BASE}/`,
       text: 'Título de la sección',
       items: [{ text: 'Página 1', link: `${PATH_BASE}/01-<tema>` }],
     },
   ];

3. Importarlo en .vitepress/config.mjs y registrarlo en themeConfig.sidebar con la clave '/<seccion>/'.

4. Agregar la tarjeta en features de docs/index.md.

5. Incluir las páginas en la exportación de docs/consolidado/.

Ejecución local

corepack enable pnpm
pnpm install
pnpm run docs:dev      # servidor de desarrollo
pnpm run docs:build    # genera .vitepress/dist
pnpm run docs:preview  # sirve el build

VitePress valida los enlaces internos durante docs:build: un enlace roto hace fallar el build (y el pipeline).