CreaRack-SL

Visor de informes Markdown — /informes/ver/<carpeta>--<nombre>

Vista limpiaEditar
Funcionalidadactivecreado Tue Jul 21#workspace#informes#markdown#astro#rendering#ui#feature

Descripción

Nuevo visor de informes Markdown en el hub /informes. Los archivos .md del directorio public/informes/<carpeta>/ se renderizan dinámicamente en rutas de tipo /informes/ver/<carpeta>--<nombre> con estilo consistente del workspace (patrón equivalente a /supercontext/reports).

Previamente, solo se soportaban informes .html en el hub. Esta feature amplía el soporte a Markdown, automatizando:

  • Escaneo de .md en el build (alongside .html)
  • Extracción de título del primer encabezado #
  • Extracción de fecha del nombre del archivo (patrón YYYY-MM-DD)
  • Renderización con marked en una página Astro dinámica

Componente principal: /informes/ver/[slug].astro

Ubicación: src/pages/informes/ver/[slug].astro

Funcionalidad:

  • Rutas dinámicas: generadas con getStaticPaths() durante build, una por cada .md en public/informes/.
  • Parámetro slug: formato <carpeta>--<nombre> (ej. reportes--auditoria-2026).
  • Props: recibe dir (carpeta) y file (nombre del archivo .md).

Lectura y renderización

1. Lee archivo: `public/informes/<dir>/<file>`
2. Parsea con marked.parse() → HTML
3. Extrae título: regex sobre primer `^# ` del markdown
4. Extrae fecha: regex sobre patrón `YYYY-MM-DD` en el nombre
5. Renderiza en SecondaryLayout con estilo global .report-body

Estilos globales

Clase .report-body define:

  • Tipografía: h1–h4 con escalas, h2 subrayado con border-bottom
  • Párrafos y listas con spacing consistente
  • Links en var(--accent, #2962ff) con hover
  • <code> inline con fondo overlay y padding
  • <pre> con bg elevated y border suave
  • Blockquotes con border-left y color muted
  • Tablas con collapse + bordes soft
  • Imágenes responsive (max-width: 100%)

Componentes auxiliares

  • SecondaryLayout: layout secundario que envuelve el contenido (mismo usado en /supercontext/reports).
  • Botón “Ver raw”: enlace a /informes/<dir>/<file> para descargar markdown original.
  • Migajas: breadcrumb “Volver a Informes” con estilo de link muted.

Cambio en el escáner: src/pages/informes.astro

La página de listado (/informes) ahora:

  1. Acepta extensiones: reconoce tanto .html como .md (antes solo .html)
  2. Rutas diferenciadas:
    • .html → /informes/<carpeta>/<archivo>.html (servido crudo)
    • .md → /informes/ver/<carpeta>--<nombre> (renderizado dinámico)
  3. Extracción de título:
    • .html: parsea <title> tag
    • .md: regex ^#\s+(.+)$ (primer encabezado)
  4. Slug canónico: siempre el nombre sin extensión (.md o .html)

Flujo de build

Verificado en local (commit message):

  • ✅ Build con archivo .md de prueba → hub genera entry + visor renderiza OK
  • ✅ Build sin archivos .md → ruta latente, build completa (2171 páginas)

Estructura de datos en el hub

La sección /informes del hub lista informes bajo estructura:

informes:
  - tipo: <carpeta o TIPO_POR_CARPETA[carpeta]>
    titulo: <extraído de <title> o # >
    slug: <nombre sin ext>
    fecha: <extraído del nombre si patrón YYYY-MM-DD>
    ruta: </informes/... o /informes/ver/...>
    sinRegistrar: true

Ejemplo con .md:

{
  "tipo": "reportes",
  "titulo": "Auditoría Integral 2026",
  "slug": "auditoria-integral-2026",
  "fecha": "2026-04-15",
  "ruta": "/informes/ver/reportes--auditoria-integral-2026",
  "sinRegistrar": true
}

Véase también

  • [[feature—workspace—informes-deliberaciones]]
  • [[concept—cns—markdown-render-pattern]]
  • [[entity—workspace—component—secondary-layout]]
  • [[workspace—informes]]
Inicio
Yo