§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 SVG bez słów — drzewo pochodzenia, taksonomię — w kartę; diagram ze słowami to FlowDiagram, 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 FlowDiagram, na żywo

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

Ta sama ilustracja jako FlowDiagram — ramki to HTML dopasowujący się do słów, strzałki są mierzone po ułożeniu, więc w żadnej czcionce nic nie wychodzi poza ramkę:

tokens.css

base.csskolumna czytania

browse.csspółka przeglądania

componentsużywają obu

§3.4FlowDiagram — ramki na miarę swoich słów

Diagram niosący słowa to FlowDiagram (albo blok mermaid). Ręcznie pozycjonowany <svg> z <text> jest rysowany pod jedną czcionkę i psuje się przy następnej, szerszej — a każda witryna renderuje własną; LineageSvg zostaje dla SVG bez tekstu, który czcionka mogłaby wypchnąć z kształtu. Specyfikacja to dane: cols, nodes (col / row / span, tone, lines, tag, ghost dla kreskowanej notatki, mono dla ścieżek), edges (label, dashed, off dla zerwanego połączenia), opcjonalne lanes i heads:

Autor

Przegląd

Build

Pisanienotatka lub komponent

Otwarcie PRjedna gałąź

Przeglądzatwierdzenie lub pytanie

Budowa i wdrożenieprzy scaleniu

Wpis w heads jest nagłówkiem wierszy pod nim, więc diagram w grupach to wiersz nagłówka, a pod nim ramki grupy; linie omijają tekst nagłówka tak samo jak ramkę. Linia, która nie znajduje drogi między ramkami, biegnie marginesem diagramu — pasem po obu stronach ramek, wewnątrz dopełnienia obramowania — a warstwa linii obejmuje ten margines, więc linia i jej numer zostają w obrębie rysunku:

Planco zmienić

Budowa

Pomiarwzględem wzorca

Co dostaje model

Co model z tego oblicza

Zdjęciakilka widoków

Kamerypozy i obiektywy

Cechy każdego widoku

Połączenie widoków

Zamknięta powierzchnia

Każde pole ma co najmniej dziesięć liter szerokości, a każda kolumna jest tak szeroka jak najdłuższe słowo w jej polach, więc żadne słowo nie jest dzielone; nazwa snake_case może się złamać po podkreślniku. Gdy kolumna strony jest za wąska na wszystkie, na przykład na telefonie, diagram przewija się w bok wewnątrz swojej ramki, podczas gdy tytuł i podpis stoją w miejscu; diagram zachowuje strukturę, w jakiej go napisano.

Gdy z jednej ramki wychodzi kilka linii z etykietami, niektóre etykiety nie znajdują miejsca wolnego od ramek i stają się numerami. Numer umieszcza się jak etykietę: nigdy na ramce, nagłówku, etykiecie ani innym numerze. Stoi na swojej linii tam, gdzie linia ma wolne miejsce, a jeśli go nie ma, obok niej, połączony z nią krótką kreską:

Promień wchodzi w pas

Przejdź ten odcinekbudżet M komórek

Powtórz o poziom grubiejprzedział nadal zawiera trafienie

Przejdź go bez budżetutylko na najgrubszym poziomie

Podaj przedziałzawiera pierwsze trafienie

Weź następne przejścienie ma już: promień chybia

§3.5Wyposaż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: