§3.1DemoMount, en direct

La répartition des rôles est celle, habituelle, du paquet : le balisage de montage (scène, emplacement des contrôles, emplacement de la légende) est livré dans le paquet ; le module de démonstration et son chargeur appartiennent au site. Ce site garde son chargeur dans src/lib/demo-loader.ts et appelle mountAllDemos() une fois depuis le layout ; l’appel s’exécute sur chaque page, mais le chunk d’un module de démonstration n’est récupéré que pour une page qui porte un montage [data-demo].

Une démonstration qui prend l’entrée du pointeur sur son canvas passe interactive — la scène s’approprie alors les gestes tactiles et affiche un réticule. Celle-ci est passive (rendu seul) : elle laisse le drapeau éteint, et un glissement sur le canvas continue de faire défiler la page. Elle dessine l’interférence de deux sources d’ondes avec le token d’encre de la page elle-même, et suit donc le thème :

Démo · Interférences à deux sources

Démo · Interférences à deux sources

Deux sources ponctuelles émettent des ondes circulaires ; où les crêtes rencontrent les crêtes, l’encre s’accumule ; où les crêtes rencontrent les creux, le papier transparaît. Basculez le thème — la démonstration se ré-encre depuis les tokens vivants.

Le contrat de module tient en un export par défaut, mount(ctx), qui retourne une fonction de nettoyage ; les ids de modules comme waves/interference se résolvent comme bon semble au site (import.meta.glob ici).

§3.2Le mobilier de page

Les composants restants n’emplissent pas une note : ils l’encadrent.

• Hero ouvre une note : surtitre, titre d’affichage, un chapeau qui traverse toute la chaîne Markdown, une ligne de méta, et un tocLabel facultatif qui ajoute à la barre latérale une ligne « intro » non numérotée. Le title du frontmatter reste le nom canonique court pour <title> et les cartes ; celui du hero peut être long.
• PartHero ouvre un chapitre de hub — l’en-tête de cette page même. Son surtitre ne se tape jamais : la route passe le libellé « Partie III · … » du chapitre en props.partLabel.
• Part découpe une longue note d’une seule page en parties ; le préréglage de numérotation les transforme en lignes de groupe « PARTIE II · … » de la barre latérale. La démonstration intégrale est découpée ainsi.
• HubCard et .hub-grid sont les cartes d’accueil d’un hub ; .path est sa boîte de chemin de lecture — les deux sont sur la vue d’ensemble de cette galerie.
• LocalToc rend une liste de sauts dans la page ; il accepte les deux formes de ToC que produisent les deux préréglages de numérotation, et se masque de lui-même sous un minimum configurable. Ci-dessous, en direct, sur le ToC de ce chapitre même.
• SidebarMemory garde une barre latérale défilante là où le lecteur l’a laissée d’une page à l’autre, et centre l’élément courant ([aria-current="page"] par défaut) dès qu’il sortirait de la vue. Déposez-le dans la boîte de défilement de la barre latérale, après le balisage de navigation ; il s’exécute avant le premier rendu, la barre ne clignote donc jamais en haut. La barre latérale de cette démo le porte.
• LineageSvg encadre un SVG sans mots — un arbre de filiation, une taxonomie — dans une carte ; un schéma avec des mots est un FlowDiagram, ci-dessous.
• PageFooter est la petite ligne au pied d’une note — celle qui clôt chaque note ici.
• Les pièces de parcours vivent dans le chapitre wiki ; le versant Markdown de la galerie, c’est la démonstration intégrale.

§3.3LocalToc et FlowDiagram, en direct

LocalToc, nourri du ToC de cette page généré au build — les mêmes données que consomme la barre latérale, remises à la note en props.toc :

La même figure en FlowDiagram — les boîtes sont du HTML qui s'ajuste à ses mots, les flèches sont mesurées après la mise en page, rien ne sort donc de sa boîte quelle que soit la police :

tokens.css

base.cssla colonne de lecture

browse.cssl'étagère de navigation

componentsconsomment les deux

§3.4FlowDiagram — des boîtes à la taille de leurs mots

Un schéma qui porte des mots est un FlowDiagram (ou un bloc mermaid). Un <svg> positionné à la main avec des <text> est dessiné pour une police et casse avec la suivante, plus large — et chaque site rend avec la sienne ; LineageSvg reste pour le SVG sans texte qu'une police pourrait déformer. La spécification est une donnée : cols, nodes (col / row / span, un tone, des lines, un tag, ghost pour une note en pointillés, mono pour des chemins), edges (label, dashed, off pour un lien rompu), lanes et heads optionnels :

Auteur

Relecture

Build

Écrireune note ou un composant

Ouvrir une PRune branche

Relireapprouver ou demander

Construire et déployerau merge

§3.5Du mobilier sans composant

Quelques pièces ne sont que des classes ordinaires de base.css, pour les sites qui les rendent depuis leur propre layout ou les écrivent en HTML au fil de la prose :