Vista limpia /wiki/[slug]/raw — lectura sin chrome del workspace

Funcionalidadactivecreado Mon May 18#wiki #workspace #astro #frontend #ux #mermaid #print #cloudflare

Qué es

La vista limpia es una ruta alternativa para cualquier artículo wiki del workspace. Se accede añadiendo /raw al final de la URL normal: /wiki/<slug>/raw. Abre el artículo en una pestaña nueva sin el chrome habitual del workspace (sidebar, header global, TOC fijo, BottomNav), dejando solo el contenido en prosa con una toolbar mínima propia.

Implementada en el commit 178de79 (PR #48, 2026-05-18).

Motivación

Problema	Solución aportada
Los diagramas Mermaid anchos quedaban parcialmente tapados por el TOC fijo lateral (footgun aceptado en PR #47)	En `/raw` no hay TOC; el diagrama usa el 100 % del contenedor (980 px max)
Lectura larga con sidebar distrae	Vista sin sidebar ni header global
Necesidad de imprimir o exportar a PDF	Toolbar con botón “Imprimir” + `@media print` que convierte a blanco/negro y oculta controles
Compartir enlace directo al artículo entre los 3 miembros del equipo	URL canónica `/wiki/<slug>/raw` estable y sin estado de sesión

Archivos involucrados

Archivo	Cambio
`src/pages/wiki/[...slug]/raw.astro`	Nuevo — ruta `/wiki/<slug>/raw`. Layout mínimo con `AppLayout` (fuentes + theme + prose.css), sin `SecondaryLayout`/`ShellChrome`/`Sidebar`/`BottomNav`. Genera una `/raw` estática por cada entrada wiki via `getStaticPaths`.
`src/pages/wiki/[...slug].astro`	Modificado — botón «Vista limpia» añadido junto a «Editar» en la cabecera del artículo. Abre `/wiki/<slug>/raw` con `target="_blank"`.
`public/search-index.json`	Regenerado (sin cambios funcionales explícitos).

Comportamiento de `raw.astro`

Layout

Usa AppLayout directamente, saltándose SecondaryLayout. AppLayout carga fuentes, variables CSS de tema y prose.css. El resultado es un DOM mínimo sin <aside>, <nav> ni overlays.

Estructura visual

┌────────────────────────────────────────────────────┐
│ [Volver a la wiki]              [Imprimir]         │  ← .raw-toolbar
├────────────────────────────────────────────────────┤
│                                                    │
│  <h1> Título del artículo </h1>                    │
│  <article class="prose"> …contenido… </article>   │  ← .raw-article
│                                                    │
└────────────────────────────────────────────────────┘
                                        [Subir ↑]    ← .raw-top (fixed)

Ancho máximo: 980 px, centrado, padding 32px 24px 96px.
Botón “Volver a la wiki” → /wiki/<slug> (la ruta normal).
Botón “Imprimir” → window.print().
Botón “Subir” → scrollTo({top:0, behavior:'smooth'}), posición fixed esquina inferior derecha.

Mermaid client-side

Idéntico al [...slug].astro base: detecta presencia de pre.mermaid antes de importar la librería (lazy import). Tema dark con variables CSS propias para evitar flash de fondo blanco. Los SVG se limitan a max-width: 100% del contenedor (no de la viewport completa).

`@media print`

Elemento	Comportamiento en impresión
`body`	`background: white; color: black`
`.raw-toolbar`, `.raw-top`	`display: none`
`.raw-wiki`	`max-width: 100%; padding: 0`
Links `<a>`	`color: #1d4ed8` (azul accesible)
Mermaid SVG	`max-width: 100% !important`

`getStaticPaths`

export async function getStaticPaths() {
  const entries = await getCollection('wiki');
  return entries.map((entry) => ({
    params: { slug: entry.data.slug || entry.id.replace(/\.md$/, '') },
    props: { entry },
  }));
}

Astro 6 permite un segmento literal (/raw) después de un rest param ([...slug]). Cada artículo wiki genera automáticamente su ruta /raw en build estático.

Botón «Vista limpia» en la página normal

En [...slug].astro, el botón «Editar» pasa a ir acompañado por «Vista limpia»:

const rawUrl = `/wiki/${slug}/raw`;

<div class="flex gap-2">
  <a href={rawUrl} target="_blank" rel="noopener" …>Vista limpia</a>
  <a href={editUrl} …>Editar</a>
</div>

El target="_blank" + rel="noopener" es intencional: el usuario mantiene su contexto en la wiki normal mientras abre la vista limpia en paralelo.

Decisiones de diseño y trade-offs

AppLayout en lugar de layout propio: reutiliza carga de fuentes y variables CSS de tema sin duplicar lógica. El coste es que AppLayout puede cargar JS global mínimo, pero es aceptable.
Segmento literal /raw tras rest param: característica de Astro 6 — no funcionaría en Astro 4/5 sin adaptaciones. Documentado en el commit como dependencia implícita.
Mermaid lazy-loaded: el import('mermaid') solo ocurre si hay al menos un pre.mermaid en el artículo, evitando ~200 KB extra en artículos de texto puro.
Sin TOC propio: decisión explícita. La vista limpia prioriza espacio horizontal para diagramas. Para artículos muy largos el botón «Subir» cubre la necesidad mínima de navegación vertical.
Footgun de diagramas anchos: el PR #47 aceptó el trade-off de que el TOC fijo tape parcialmente diagramas Mermaid en la vista normal. Esta feature es la válvula de escape: /raw elimina el TOC y da anchura completa.

Casos de uso confirmados

Diagramas de red o arquitectura anchos — abrir en /raw da 980 px limpios.
Lectura profunda de runbooks — sin sidebar que distraiga.
Exportar a PDF — imprimir desde el navegador con estilos @media print.
Enlace de referencia en Slack/Discord interno — URL estable por artículo.

Véase también

[[workspace—que-es-workspace]]

Referenciado desde

Features Workspace Index