RiferimentoComponentiSempreverdeaggiornato 2026.083 min di lettura
HubParte II · Wiki e navigazione
Parte II · Wiki e navigazione

Wiki e navigazione

Tutto ciò che sta in questo capitolo gira dal vivo su questo sito: gli scaffali della pagina principale sono fatti di NoteCard, le sue righe a faccette sono un FacetNav, la striscia di metadati sopra questo testo è una TaxonomyLine e la piccola costellazione nella sidebar è un LocalGraph. Sono tutti componenti puramente presentazionali — il sito risolve il proprio registro e passa dati pronti da mostrare. Gli helper di risoluzione viaggiano nel pacchetto come createTaxonomy e createBacklinks (la meccanica nel pacchetto, il significato nel sito).

§2.1Il collegamento, in tre righe

src/lib/taxonomy.ts (tutto il collegamento di questo sito)
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' });

Il registro (_meta/taxonomy.ts) è puro dato nell’albero dei contenuti: i tipi, gli ambiti con i loro toni, gli stati con i colori dei punti, ciascuno con le proprie etichette da mostrare. Aggiungi lì un valore, etichettaci una nota, e ogni pagina di navigazione lo raccoglie — le rotte sono parametrizzate sui valori.

§2.2Lo scaffale e i suoi token

Le pagine di navigazione vivono su un secondo fondo: browse.css dà loro la carta calda, la testata serif, la riga da due punti dello scaffale e la griglia di carte, tutto attraverso i token --wb-* — la metà scaffale della tavolozza a due contesti. Una pagina entra nel contesto con una sola classe, wb-root, sul body; al suo interno i token del chrome vengono rimappati, così la stessa barra di navigazione siede su entrambi i fondi.

§2.3NoteCard

Una carta riceve dati pronti da mostrare — etichette risolte, toni, una data già formattata, link ai mirror. Le carte vivono sullo scaffale, quindi l’esempio siede in un ritaglio del contesto di navigazione (.wb-root.wb-inset) dentro questa colonna di lettura:

  • Riferimento2026.08
    Il campionario

    Ogni elemento della pipeline markdown si esibisce una volta in questa pagina.

    PipelineSempreverdeEN
  • Riferimento3 chapters2026.08
    Il set di componenti

    Un giro in tre capitoli su ogni componente consegnato — e una dimostrazione di hub dal vivo.

    ComponentiSempreverde

    Hero · HubCard · Stats — l’arredo dell’hub, sull’hub stesso

§2.4FacetNav

L’indice di navigazione multidimensionale — tipi, ambiti (coi loro toni), i tag più usati, tutti come link a pillola prerenderizzati:

Anche i testi delle etichette sono props, con predefiniti in inglese — l’esempio qui sopra passa labels={{ kind: 'Tipo', domain: 'Ambito', tag: 'Tag', all: 'Tutte →' }}, gli stessi che passano le pagine a faccette italiane di questo sito; nient’altro cambia.

§2.5TaxonomyLine, KindBadge, StatusDot, DomainChip

La striscia di metadati a una riga in testa a una nota assembla i tre atomi-badge; ognuno è usabile anche da solo:

PatternDesignIn crescitaupdated 2026.08

Gli atomi da soli, dentro una riga che corre: un badge di tipo Guida, un chip d’ambito Pipeline, un punto di stato Sempreverde.

Il pannello delle «menzioni collegate» sotto ogni nota di questo giardino è calcolato da createBacklinks del pacchetto — il risolutore di wikilink del motore stesso, rovesciato in un indice bersaglio ← sorgenti, frammenti di contesto compresi. Qui con dati d’esempio inline:

Scorri fino in fondo a questa pagina per vedere quello vero — questo capitolo è a sua volta un bersaglio di wikilink.

§2.7LocalGraph

Lo stesso indice risponde a una seconda domanda — che cosa sta a un salto da qui? — e index.localGraph(id, titleOf) la restituisce come elenco di vicini, prima gli entranti. Il componente li disegna su un’ellisse attorno alla nota: entranti a tratto pieno, uscenti tratteggiati; un vicino può portare un proprio color (per dire, una seconda collezione). Qui alla larghezza della colonna, con dati d’esempio; quello vero sta nella sidebar di ogni nota che ha link:

Titoli, sezioni e corpo del testo, in questa lingua.
    ↑↓ · Enter · Escastro-inkstone