§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 lijst een handgetekende SVG (een methodestamboom, een taxonomieboom) in als kaart — er staat er één 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 LineageSvg, live

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

En LineageSvg rond een handgeschreven diagram, volledig geïnkt in semantische tokens zodat het op beide thema's past:

§3.4Meubilair 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: