CreaRack-SL

Visor de informes con motor visual de la wiki

Vista limpiaEditar
Funcionalidadactivecreado Tue Jul 21#informes#ux#visual#astro#markdown#frontend#wiki#docsLayout

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]]
Inicio
Yo