§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

Une entrée de heads sert d’intitulé aux rangées qui la suivent : un diagramme en groupes est donc une rangée d’intitulé suivie des boîtes du groupe, et les fils contournent le texte d’un intitulé comme ils contournent une boîte. Un fil qui ne trouve pas de passage entre les boîtes descend par la marge du diagramme — la bande de part et d’autre des boîtes, dans le remplissage du cadre — et la couche des fils couvre cette marge, si bien que le fil et son numéro restent dans la figure :

Planifierce qu’il faut changer

Construire

Mesurerface à la référence

Ce que reçoit le modèle

Ce que le modèle en calcule

Photosplusieurs vues

Camérasposes et objectifs

Traits par vue

Fusionner les vues

Surface fermée

Chaque boîte fait au moins dix lettres de large et chaque colonne autant que le mot le plus long de ses boîtes, si bien qu'aucun mot n'est coupé ; un nom snake_case peut passer à la ligne après un tiret bas. Quand la colonne de la page est trop étroite pour toutes, sur un téléphone par exemple, le diagramme défile latéralement dans son cadre, le titre et la légende restant fixes ; le diagramme garde la structure avec laquelle il a été écrit.

Quand plusieurs fils étiquetés partent d’une même boîte, certaines étiquettes ne trouvent pas de place à l’écart des boîtes et deviennent des numéros. Un numéro se place comme une étiquette : jamais sur une boîte, un intitulé, une étiquette ou un autre numéro. Il se pose sur son fil là où le fil a une place libre, sinon à côté, relié au fil par un court trait :

Un rayon entre dans la bande

Parcourir ce tronçonun budget de M cellules

Refaire un niveau plus grossierl’intervalle contient toujours l’impact

Le parcourir sans budgetseulement au niveau le plus grossier

Donner l’intervalleil contient le premier impact

Passer à la traversée suivanteplus aucune : le rayon manque l’objet

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