ReferenciaComponentesPerenneactualizado 2026.083 min de lectura
Visión generalParte II · Wiki y exploración
Parte II · Wiki y exploración

Wiki y exploración

Todo lo de este capítulo corre en vivo en este sitio: las estanterías de la portada están hechas de NoteCard, sus filas de facetas son un FacetNav, la franja de metadatos sobre este texto es una TaxonomyLine y la pequeña constelación del sidebar es un LocalGraph. Todos son componentes de pura presentación — el sitio resuelve su registro y les pasa datos listos para mostrar. Los ayudantes de resolución vienen en el paquete como createTaxonomy y createBacklinks (la mecánica en el paquete, el significado en el sitio).

§2.1La vinculación, en tres líneas

src/lib/taxonomy.ts (toda la vinculación de este sitio)
import { createTaxonomy } from 'astro-inkstone/lib/taxonomy';
import { DOMAINS, KINDS, STATUSES } from '../content/notes/_meta/taxonomy';

export const { getWikiUnits, groupByKind, groupByDomain, groupByPrimaryDomain, tagIndex, resolveTaxonomy } =
  createTaxonomy({ kinds: KINDS, domains: DOMAINS, statuses: STATUSES },
    { collection: 'notes', locales: [{ code: 'zh', prefix: 'zh/' }], primary: 'en' });

El registro (_meta/taxonomy.ts) es datos puros dentro del árbol de contenido: tipos, dominios con sus tonos, estados con el color de su punto, cada uno con un rótulo en inglés y otro en chino. Añade allí un valor, etiqueta una nota con él y todas las páginas de exploración lo recogen — las rutas están parametrizadas por valor.

§2.2La estantería y sus tokens

Las páginas de exploración viven sobre un segundo fondo: browse.css les da el papel cálido, la cabecera con serif, la regla de dos puntos de la estantería y la cuadrícula de tarjetas, todo a través de los tokens --wb-* — la mitad de estantería de la paleta de dos contextos. Una página entra en el contexto con una sola clase, wb-root, en su body; dentro, los tokens del chrome se reasignan para que la misma barra de navegación se asiente sobre cualquiera de los dos fondos.

§2.3NoteCard

Una tarjeta recibe datos listos para mostrar — rótulos resueltos, tonos, una fecha ya formateada, enlaces a los espejos. Las tarjetas viven en la estantería, así que la muestra se asienta en un retal del contexto de exploración (.wb-root.wb-inset) incrustado en esta columna de lectura:

  • Referencia2026.08
    El muestrario

    Cada elemento del pipeline de Markdown actúa una vez en esta página.

    PipelinePerenneEN
  • Referencia3 chapters2026.08
    El conjunto de componentes

    Un recorrido en tres capítulos por todos los componentes incluidos — y una demostración de hub en vivo.

    Hero · HubCard · Stats — el mobiliario de hub, sobre el propio hub

§2.4FacetNav

El índice de exploración multidimensional — tipos, dominios (con sus tonos), etiquetas destacadas, todo como enlaces-píldora prerenderizados:

Los rótulos de fila también son props, con valores por defecto en inglés — el ejemplo de arriba pasa labels={{ kind: 'Tipo', domain: 'Dominio', tag: 'Etiquetas', all: 'Todas →' }}, lo mismo que pasan las páginas de facetas en español de este sitio; nada más cambia.

§2.5TaxonomyLine, KindBadge, StatusDot, DomainChip

La franja de metadatos de una línea a la cabeza de una nota ensambla los tres átomos de insignia; cada uno también se usa por separado:

PatrónDiseñoEn crecimientoupdated 2026.08

Los átomos por su cuenta, dentro de una línea corrida: una insignia de tipo Guía, un chip de dominio Pipeline y un punto de estado Perenne.

El panel de «menciones enlazadas» bajo cada nota de este jardín lo calcula el createBacklinks del paquete — el propio resolutor de wikilinks del motor, invertido en un índice destino ← orígenes, fragmentos de contexto incluidos. Aquí con datos de ejemplo inline:

Baja al pie de esta página para ver el de verdad — este capítulo es, él mismo, destino de wikilinks.

§2.7LocalGraph

El mismo índice responde una segunda pregunta — ¿qué hay a un salto de aquí? — y index.localGraph(id, titleOf) la devuelve como una lista de vecinos, primero los entrantes. El componente los dibuja sobre una elipse alrededor de la nota, los entrantes con trazo continuo y los salientes con trazo discontinuo; un vecino puede traer su propio color (una segunda colección, por ejemplo). Aquí al ancho de la columna, con datos de ejemplo; el de verdad está en el sidebar de cada nota que tiene enlaces:

Títulos, secciones y cuerpo del texto, en este idioma.
    ↑↓ · Enter · Escastro-inkstone