Interactivos y mobiliario
Una demo de canvas en vivo y el contrato que hay detrás, y luego los componentes silenciosos que enmarcan cada nota — los que llevas viendo desde la primera página.
§3.1DemoMount, en vivo
El reparto de trabajo es el habitual del paquete: el marcado del montaje (escenario, slot de controles, slot de leyenda) viene en el paquete; el módulo de la demo y su cargador pertenecen al sitio. Este sitio guarda su cargador en src/lib/demo-loader.ts y llama a mountAllDemos() una sola vez desde el layout; la llamada corre en cada página, pero el chunk de un módulo de demo solo se descarga en las páginas que llevan un montaje [data-demo].
Una demo que toma entrada de puntero sobre su canvas pasa interactive — el escenario reclama entonces los gestos táctiles y muestra una cruz de puntería. Esta es pasiva (solo renderiza), así que deja el flag apagado y deslizar el dedo sobre el canvas sigue desplazando la página. Dibuja la interferencia de ondas de dos fuentes con el token de tinta de la propia página, así que sigue al tema:
Dos fuentes puntuales emiten ondas circulares; donde cresta encuentra cresta la tinta se encharca, donde cresta encuentra valle el papel asoma. Cambia el tema — la demo vuelve a entintarse con los tokens vivos.
El contrato del módulo es un único export por defecto, mount(ctx), que devuelve una función de limpieza; el cargador resuelve ids de módulo como waves/interference como el sitio prefiera (aquí, con import.meta.glob).
§3.2Mobiliario de página
Los componentes restantes enmarcan una nota en lugar de llenarla:
Heroabre una nota: kicker, título de exhibición, una entradilla que pasa por el pipeline de Markdown completo, una línea de meta y untocLabelopcional que añade al sidebar una fila de «introducción» sin numerar. Eltitledel frontmatter sigue siendo el canónico corto para el<title>y las tarjetas; el del hero puede ser largo.PartHeroabre un capítulo de un hub — la propia cabecera de esta página. Su kicker nunca se teclea: la ruta le pasa el rótulo «Parte III · …» del capítulo comoprops.partLabel.Partdivide una nota larga de una sola página en partes; el preset de numeración lo convierte en las filas de grupo tipo «PARTE II · Fundamentos» del sidebar. El muestrario está cortado así.HubCardy.hub-gridson las tarjetas de portada de un hub;.pathes su caja de ruta de lectura — ambas cosas en la visión general de esta galería.LocalTocrenderiza una lista de saltos dentro de la página; acepta las dos formas de ToC que producen los dos presets de numeración y se oculta por debajo de un mínimo configurable. Abajo, en vivo, sobre el ToC de este mismo capítulo.SidebarMemorymantiene un sidebar con scroll donde el lector lo dejó entre cargas de página, y centra el elemento actual ([aria-current="page"]por defecto) siempre que fuera a quedar fuera de la vista. Colócalo dentro de la caja de scroll del sidebar, después del marcado de navegación; corre antes del primer pintado, así que el sidebar nunca parpadea arriba del todo. El sidebar de esta demo lo lleva.LineageSvgenmarca un SVG sin palabras — un árbol de linaje, una taxonomía — como tarjeta; un diagrama con palabras es unFlowDiagram, abajo.PageFooteres la letra pequeña al pie de una nota — la línea bajo cada nota de aquí.- Las piezas de exploración viven en el capítulo de wiki; el lado Markdown de la galería es el muestrario.
§3.3LocalToc y FlowDiagram, en vivo
LocalToc alimentado con el ToC de build de esta misma página — los mismos datos que consume el sidebar, entregados a la nota como props.toc:
La misma figura como FlowDiagram: las cajas son HTML que se ajusta a sus palabras, las flechas se miden tras el diseño, así que nada se sale de su caja con ninguna fuente:
§3.4FlowDiagram — cajas del tamaño de sus palabras
Un diagrama que lleva palabras es un FlowDiagram (o un bloque mermaid). Un <svg> posicionado a mano con <text> se dibuja contra una fuente y se rompe con la siguiente más ancha — y cada sitio renderiza con la suya; LineageSvg queda para SVG sin texto que una fuente pueda deformar. La especificación son datos: cols, nodes (col / row / span, un tone, lines, un tag, ghost para una nota punteada, mono para rutas), edges (label, dashed, off para un enlace roto), lanes y heads opcionales:
Los carriles etiquetan las filas y dibujan los separadores; un tone colorea el borde y la etiqueta de una caja; la etiqueta de una línea se omite cuando el hueco es más estrecho que las palabras.
§3.5Mobiliario sin componente
Unas cuantas piezas son clases planas de base.css, para sitios que las renderizan desde su propio layout o las escriben como HTML dentro de la prosa:
| Clase | Qué es |
|---|---|
.page-head + .kicker, .page-desc, .page-date | una cabecera de página movida por el frontmatter (kicker, h1, descripción, fecha) que renderiza un layout en lugar de un <Hero> |
.banner, .banner-fallback | un aviso de una línea bajo la cabecera; la variante fallback es la apagada |
.page-foot | un pie de letra pequeña a dos columnas (slot izquierdo, slot derecho) |
.speak | la glosa en lenguaje llano bajo un título de análisis profundo; su rótulo es --speak-label |
.path + .title, .route, .arrow | una caja de ruta de lectura en un hub |
.ref-tag | una pequeña etiqueta monoespaciada en una lista de referencias (un venue, un año) |
.tag, .tag.teal / .mustard / .violet | las insignias de las tarjetas de artículos, usables en cualquier parte |
.measured + .measured-head, .measured-body, .measured-pane (.doc), .measured-tag | la tarjeta de comparación entre lo documentado y lo medido: una barra de título verde azulado maciza sobre dos paneles, el panel .doc con la afirmación y el otro con la medición — una silueta distinta de la de cualquier callout |
.paper .idea-label | el pequeño rótulo en mayúsculas de la idea clave dentro del cuerpo de una PaperCard, p. ej. <span class="idea-label">Idea clave</span> |