§3.1DemoMount — na żywo

Podział pracy jest tu ten sam co zwykle w tym pakiecie: znacznik montażu (scena, slot na sterowanie, slot na podpis) jedzie w pakiecie; moduł dema i jego loader należą do witryny. Ta witryna trzyma loader w src/lib/demo-loader.ts i woła mountAllDemos() raz z layoutu; wywołanie biegnie na każdej stronie, ale porcja kodu modułu dema jest pobierana tylko dla strony, która niesie punkt montażu [data-demo].

Demo, które przyjmuje wskaźnik na swoim canvasie, przekazuje interactive — scena przejmuje wtedy gesty dotykowe i pokazuje celownik. To poniżej jest bierne (tylko renderuje), więc zostawia flagę wyłączoną i przeciągnięcie palcem po canvasie nadal przewija stronę. Rysuje interferencję fal z dwóch źródeł tokenem tuszu samej strony, więc podąża za motywem:

Demo · Interferencja fal z dwóch źródeł

Demo · Interferencja fal z dwóch źródeł

Dwa źródła punktowe emitują fale koliste; gdzie grzbiet spotyka grzbiet, tusz się zbiera, gdzie grzbiet spotyka dolinę, prześwituje papier. Przełącz motyw — demo zamacza pędzel w żywych tokenach od nowa.

Kontrakt modułu to jeden domyślny eksport, mount(ctx), zwracający funkcję sprzątającą; identyfikatory modułów w rodzaju waves/interference loader rozwiązuje, jak witrynie wygodnie (tutaj import.meta.glob).

§3.2Wyposażenie stron

Pozostałe komponenty notatkę oprawiają, a nie wypełniają:

• Hero otwiera notatkę: kicker, tytuł w kroju tytułowym, lid przechodzący przez pełny potok Markdowna, linia metadanych i opcjonalny tocLabel, który dodaje do sidebara nienumerowany wiersz „wstępu”. Frontmatterowy title notatki pozostaje krótkim kanonicznym tytułem dla <title> i kart; ten w hero może być długi.
• PartHero otwiera rozdział huba — to głowa tej właśnie strony. Jego kickera nigdy nie wpisuje się ręcznie: trasa przekazuje etykietę rozdziału „Część III · …” jako props.partLabel.
• Part dzieli długą jednostronicową notatkę na części; preset numeracji zamienia go w grupowe wiersze sidebara w rodzaju „CZĘŚĆ II · Fundamenty”. Tak pocięta jest strona Wszystko naraz.
• HubCard i .hub-grid to karty powitalne huba; .path to jego ramka ścieżki lektury — oba na stronie przeglądu tej galerii.
• LocalToc renderuje listę skoków w obrębie strony; przyjmuje oba kształty ToC, które produkują dwa presety numeracji, i chowa się poniżej konfigurowalnego minimum. Niżej, na żywo, na ToC tego właśnie rozdziału.
• SidebarMemory trzyma przewijany sidebar tam, gdzie czytelnik go zostawił, między wczytaniami stron, i centruje bieżący element (domyślnie [aria-current="page"]), ilekroć wypadłby poza widok. Wrzuć go do pudełka przewijania sidebara, za znacznikami nawigacji; działa przed pierwszym malowaniem, więc sidebar nigdy nie błyska od góry. Nosi go sidebar tego dema.
• LineageSvg oprawia ręcznie rysowane SVG (rodowód metody, drzewo taksonomii) w kartę — jedna poniżej.
• PageFooter to drobny druk u stóp notatki — linia pod każdą notatką tutaj.
• Elementy przeglądania mieszkają w rozdziale wiki; markdownową stroną tej galerii jest Wszystko naraz.

§3.3LocalToc i LineageSvg, na żywo

LocalToc nakarmiony ToC tej strony z czasu budowania — tymi samymi danymi, które konsumuje sidebar, podanymi notatce jako props.toc:

I LineageSvg wokół ręcznie napisanego diagramu, tuszowanego wyłącznie tokenami semantycznymi, więc leży na obu motywach:

§3.4Wyposażenie bez komponentu

Kilka elementów to zwykłe klasy w base.css, dla witryn, które renderują je z własnego layoutu albo piszą jako HTML w prozie: