Visor de informes con motor visual de la wiki

Descripción

El visor de informes markdown (/informes/ver/[slug]) ahora reutiliza el mismo motor visual que la wiki (DocsLayout + prose). Esto proporciona consistencia visual y mejora la navegación dentro de documentos largos.

Cambios visuales

Antes

• Layout: SecondaryLayout (genérico, sin TOC)
• Estilo: CSS manual al componente
• Metadata: badge simple + fecha en línea
• Navegación: solo botón “Volver” + “Ver raw”

Después

• Layout: DocsLayout (mismo que /wiki/[...slug])
• Estilo: clases prose prose-invert, badges wiki-style
• Metadata: badges alineadas (tipo + fecha formateada)
• Navegación:
  • Breadcrumbs (Informes > Título)
  • Panel lateral fijo (>1400px) con:
    • Botón “Ver raw”
    • Tabla de contenidos dinámico si hay ≥3 headings (h2/h3)
    • Anclas navegables en headings

Implementación

Motor de renderizado

• Cambio de marked.parse() → new Marked() con renderer custom
• Inyecta atributo id en cada heading (h2 y h3)
• Genera slugs de heading con normalización NFD (diacríticos)
• Deduplica ids idénticos (heading, heading-1, heading-2, …)

Generador de TOC

function slugifyHeading(text: string): string {
  // Normalización: lowercase + NFD + sin acentos + solo alfanuméricos
  return text
    .toLowerCase()
    .normalize('NFD')
    .replace(/[\u0300-\u036f]/g, '')
    .replace(/[^a-z0-9\s-]/g, '')
    .trim()
    .replace(/\s+/g, '-');
}

• Recopila headings h2/h3 con profundidad durante el render
• Solo muestra TOC si headings.length ≥ 3
• Links a #${heading.slug} desde el panel lateral

Estilos

• Badges: wiki-badge + wiki-badge-type (color + border con acento)
• Panel TOC: posicionado fijo, backdrop-blur, max-height scrollable
• Responsive: panel oculto en pantallas ≤1400px
• Variables CSS: reutiliza tema wiki (--color-border, --color-card, --color-accent, etc.)

Archivos modificados

• src/pages/informes/ver/[slug].astro — +90 LOC (lógica TOC, nuevo layout, estilos)

Verified

• ✅ Build 2174 páginas sin errores
• ✅ TypeCheck OK

Véase también

• [[entity—src—layout—docs-layout]]
• [[concept—ux—consistencia-visual]]
• [[feature—wiki—toc-flotante]]
• [[concept—frontend—markdown-render]]
• [[entity—src—page—informes-hub]]