§3.1DemoMount — dal vivo

La divisione del lavoro è quella solita del pacchetto: il markup del mount (palco, slot dei controlli, slot della didascalia) viaggia nel pacchetto; il modulo della demo e il suo loader appartengono al sito. Questo sito tiene il loader in src/lib/demo-loader.ts e chiama mountAllDemos() una volta dal layout; la chiamata corre su ogni pagina, ma il chunk di un modulo demo viene scaricato solo per una pagina che porta un mount [data-demo].

Una demo che accetta input del puntatore sul canvas passa interactive — il palco allora reclama i gesti touch e mostra un mirino. Questa è passiva (solo resa), quindi lascia il flag spento e uno swipe sul canvas continua a scorrere la pagina. Disegna l’interferenza di onde da due sorgenti con il token d’inchiostro della pagina stessa, così segue il tema:

Demo · Interferenza di onde da due sorgenti

Demo · Interferenza di onde da due sorgenti

Due sorgenti puntiformi emettono onde circolari; dove le creste incontrano le creste l’inchiostro si raccoglie, dove le creste incontrano i ventri traspare la carta. Cambia tema — la demo si rinchiostra dai token vivi.

Il contratto del modulo è un solo export di default, mount(ctx), che restituisce una funzione di pulizia; il loader risolve gli id di modulo come waves/interference come più piace al sito (qui, import.meta.glob).

§3.2L’arredo di pagina

I componenti restanti incorniciano una nota più che riempirla:

• Hero apre una nota: kicker, titolo in carattere da titolazione, un attacco che passa per l’intera pipeline Markdown, una riga di metadati e un tocLabel facoltativo che aggiunge alla sidebar una riga «intro» senza numero. Il title del frontmatter resta quello corto e canonico per <title> e per le carte; quello dell’hero può essere lungo.
• PartHero apre il capitolo di un hub — la testa di questa stessa pagina. Il suo kicker non si digita mai: la rotta gli passa l’etichetta «Parte III · …» del capitolo come props.partLabel.
• Part divide in parti una nota lunga a pagina singola; il preset di numerazione lo trasforma nelle righe di gruppo «Parte II · …» della sidebar. Il campionario è tagliato così.
• HubCard e .hub-grid sono le carte d’atterraggio di un hub; .path è il suo riquadro del percorso di lettura — entrambi su la panoramica di questa galleria.
• LocalToc rende una lista di salto in pagina; accetta entrambe le forme di ToC che i due preset di numerazione producono, e si nasconde sotto un minimo configurabile. Più sotto, dal vivo, sul ToC di questo stesso capitolo.
• SidebarMemory mantiene una sidebar scorrevole dove chi legge l’aveva lasciata da un caricamento all’altro, e centra la voce corrente ([aria-current="page"] come predefinito) ogni volta che finirebbe fuori vista. Mettilo dentro la scatola di scorrimento della sidebar, dopo il markup di navigazione; corre prima del primo paint, così la sidebar non lampeggia mai in cima. La sidebar di questa demo lo porta.
• LineageSvg incornicia come carta un SVG disegnato a mano (la genealogia di un metodo, un albero tassonomico) — uno più sotto.
• PageFooter è il carattere minuto in fondo a una nota — la riga sotto ogni nota di qui.
• I pezzi di navigazione vivono nel capitolo wiki; il lato Markdown della galleria è il campionario.

§3.3LocalToc e LineageSvg, dal vivo

LocalToc alimentato dal ToC che la build produce per questa stessa pagina — gli stessi dati che consuma la sidebar, consegnati alla nota come props.toc:

E LineageSvg attorno a un diagramma scritto a mano, inchiostrato interamente in token semantici, così che sieda su entrambi i temi:

§3.4Arredo senza componente

Qualche pezzo è fatto di semplici classi in base.css, per i siti che lo rendono dal proprio layout o lo scrivono come HTML nella prosa: