§3.1DemoMount — live

De taakverdeling is de gebruikelijke van dit pakket: de mount-markup (podium, slot voor bediening, slot voor onderschrift) reist mee in het pakket; de demomodule en haar loader horen bij de site. Deze site houdt zijn loader in src/lib/demo-loader.ts en roept mountAllDemos() één keer aan vanuit de layout; die aanroep draait op elke pagina, maar een demomodule-chunk wordt alleen opgehaald voor een pagina die een [data-demo]-mount draagt.

Een demo die aanwijzerinvoer op haar canvas aanneemt, geeft interactive mee — het podium claimt dan aanraakgebaren en toont een draadkruis. Deze demo is passief (alleen renderen), laat de vlag dus weg, en een veeg over het canvas scrolt gewoon de pagina. Ze tekent interferentie van twee golfbronnen met het eigen inkt-token van de pagina, en volgt zo het thema:

Demo · Interferentie van twee golfbronnen

Demo · Interferentie van twee golfbronnen

Twee puntbronnen zenden cirkelvormige golven uit; waar toppen op toppen vallen hoopt de inkt zich op, waar toppen op dalen vallen schemert het papier erdoorheen. Wissel eens van thema — de demo inkt zichzelf opnieuw vanuit de actuele tokens.

Het modulecontract is één default export, mount(ctx), die een opruimfunctie teruggeeft; de loader lost module-ids als waves/interference op zoals het de site uitkomt (hier met import.meta.glob).

§3.2Paginameubilair

De resterende componenten omlijsten een notitie in plaats van haar te vullen:

• Hero opent een notitie: kicker, displaytitel, een intro die door de volledige Markdown-pipeline gaat, een metaregel en een optioneel tocLabel dat een ongenummerde "intro"-rij aan de zijbalk toevoegt. De frontmatter-title van de notitie blijft de korte canonieke naam voor <title> en kaarten; die van de hero mag lang zijn.
• PartHero opent een hoofdstuk van een hub — het hoofd van deze pagina zelf. Zijn kicker typ je nooit uit: de route geeft het "Deel III · …"-label van het hoofdstuk door als props.partLabel.
• Part verdeelt een lange notitie van één pagina in delen; de nummeringspreset maakt er de groepsrijen van de zijbalk van. De staalkaart is zo opgedeeld.
• HubCard en .hub-grid zijn de landingskaarten van een hub; .path is zijn leesroutekader — beide op het overzicht van deze galerij.
• LocalToc rendert een springlijst binnen de pagina; het accepteert beide ToC-vormen die de twee nummeringspresets produceren en verbergt zichzelf onder een instelbaar minimum. Hieronder, live, op de ToC van dit hoofdstuk zelf.
• SidebarMemory houdt een scrollende zijbalk over paginaladingen heen waar de lezer hem achterliet, en centreert het huidige item (standaard [aria-current="page"]) zodra het anders buiten beeld zou vallen. Zet het in de scrollbak van de zijbalk, na de navigatiemarkup; het draait vóór de eerste paint, dus de zijbalk flitst nooit eerst naar boven. De zijbalk van deze demo draagt het zelf.
• LineageSvg omlijst een SVG zonder woorden — een stamboom, een taxonomie — als kaart; een diagram met woorden is een FlowDiagram, hieronder.
• PageFooter is de kleine lettertjes aan de voet van een notitie — de regel onder elke notitie hier.
• De bladeronderdelen wonen in het wiki-hoofdstuk; de Markdown-kant van de galerij is de staalkaart.

§3.3LocalToc en FlowDiagram, live

LocalToc, gevoed met de buildtijd-ToC van deze pagina zelf — dezelfde data die de zijbalk consumeert, aan de notitie doorgegeven als props.toc:

Dezelfde figuur als FlowDiagram — de vakken zijn HTML dat zich naar zijn woorden voegt, de pijlen worden na de lay-out gemeten, dus niets loopt in welk lettertype dan ook uit zijn vak:

tokens.css

base.cssde leeskolom

browse.cssde bladerplank

componentsgebruiken beide

§3.4FlowDiagram — vakken op maat van hun woorden

Een diagram met woorden is een FlowDiagram (of een mermaid-blok). Een handmatig gepositioneerde <svg> met <text> is tegen één lettertype getekend en breekt bij het volgende, bredere — en elke site rendert met het zijne; LineageSvg blijft voor SVG zonder tekst die een lettertype uit vorm kan duwen. De specificatie is data: cols, nodes (col / row / span, een tone, lines, een tag, ghost voor een gestippelde notitie, mono voor paden), edges (label, dashed, off voor een verbroken verbinding), optionele lanes en heads:

Auteur

Review

Build

Schrijveneen notitie of een component

PR openenéén branch

Reviewengoedkeuren of vragen

Bouwen en uitrollenbij merge

Een item in heads is de kop van de rijen eronder, dus een diagram in groepen is een koprij met daaronder de vakken van de groep; lijnen lopen om de tekst van een kop heen zoals om een vak. Een lijn die tussen de vakken geen weg vindt, loopt langs de rand van het diagram — de strook aan weerszijden van de vakken, binnen de opvulling van het kader — en de lijnenlaag omvat die rand, zodat lijn en nummer binnen de figuur blijven:

Plannenwat er moet veranderen

Bouwen

Metentegen de referentie

Wat het model krijgt

Wat het model daaruit berekent

Foto’smeerdere aanzichten

Camera’sposes en lenzen

Kenmerken per aanzicht

Aanzichten samenvoegen

Gesloten oppervlak

Elk vak is minstens tien letters breed en elke kolom zo breed als het langste woord in zijn vakken, zodat geen woord wordt afgebroken; een snake_case-naam mag na een underscore afbreken. Is de kolom van de pagina te smal voor allemaal, bijvoorbeeld op een telefoon, dan scrolt het diagram zijwaarts binnen zijn kader terwijl titel en onderschrift blijven staan; het diagram houdt de structuur waarmee het geschreven is.

Gaan er meerdere gelabelde lijnen uit één vak, dan vindt soms een label geen plek vrij van de vakken en wordt het een nummer. Een nummer wordt geplaatst zoals een label: nooit op een vak, een kop, een label of een ander nummer. Het staat op zijn lijn waar die lijn een vrije plek heeft, en anders naast de lijn, eraan vastgemaakt met een kort streepje:

Een straal komt de band in

Loop dit stuk afeen budget van M cellen

Opnieuw, één niveau groverhet interval bevat de treffer nog

Loop het zonder budget afalleen op het grofste niveau

Geef het intervalhet bevat de eerste treffer

Neem de volgende doorganggeen meer: de straal mist

§3.5Meubilair zonder component

Een paar stukken zijn gewone classes in base.css, voor sites die ze vanuit hun eigen layout renderen of als HTML in lopende tekst schrijven: