blog: labo — rich-media crash-test post (agentic draft, prose to be rewritten)

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

content/blog/labo/fr.md

+---
+title: Banc d'essai — médias riches
+---
+
+> **Brouillon agentique.** Ce billet est un banc d'essai écrit par l'agent pour
+> vérifier le pipeline — chaque bloc existe pour casser quelque chose. La prose
+> sera réécrite à la main ; les blocs, eux, resteront.
+
+Un blog que l'on reconstruit soi-même finit toujours par écrire sur sa propre
+reconstruction. Voici donc le bilan de chantier : ce que le moteur rend, et
+comment. Tout est généré à la construction — la page livrée est du HTML plat,
+sans JavaScript indispensable.[^gfm]
+
+## Du code, coloré à la construction
+
+Le surlignage passe par Shiki (thème *vesper*) pendant le build. Ce que vous
+lisez est donc du HTML avec des couleurs inline — zéro coloriseur côté
+navigateur :
+
+```ts
+// lib/markdown.ts — la seule fabrique d'HTML de /blog
+const processor = unified()
+  .use(remarkParse)
+  .use(remarkGfm)
+  .use(remarkDirective)   // ::note, ::audio, ::youtube, ::soundcloud
+  .use(remarkRehype)
+  .use(rehypeFigure)      // image seule → <figure> + figcaption
+  .use(rehypeEmbeds)      // façades click-to-render
+  .use(rehypePrettyCode, { theme: 'vesper' })
+  .use(rehypeStringify);
+```
+
+```bash
+# Le cycle d'écriture complet, du vide au brouillon
+yarn post mon-slug        # échafaude content/blog/mon-slug/
+node scripts/new-share-token.mjs   # jeton pour /blog/d/<slug>-<token>
+yarn dev                  # le brouillon vit sur /blog/d/mon-slon-<token>
+```
+
+### Les notes de marge
+
+Les notes de bas de page[^gfm] deviennent des notes de marge façon Tufte sur
+grand écran, des popovers au survol en intermédiaire, et des notes de fin
+partout ailleurs — sans une ligne de JavaScript. Le clone de marge est fabriqué
+à la construction depuis la définition GFM, la note de fin reste la source de
+vérité pour les lecteurs d'écran.[^aria]
+
+[^gfm]: GitHub-Flavored Markdown, activé dans la chaîne via `remark-gfm`.
+[^aria]: Les clones en marge sont `aria-hidden` ; la note de fin reste la
+    version lisible par les lecteurs d'écran.
+
+## Images et légendes
+
+Un paragraphe réduit à une image devient une `<figure>` ; le texte alternatif
+sert de légende. Cliché de l'algorave de Lyon, 2025 :
+
+![Algorave de Lyon, 2025 — visuels Hydra, son TidalCycles](/images/blog/labo/poster.jpg)
+
+## Le son
+
+Un petit accord de test, servi par le lecteur natif du navigateur (directive
+`::audio`, zéro client JS) :
+
+::audio[/audio/labo/test-chord.mp3]{title="accord de test"}
+
+## Les embeds qui ne chargent rien
+
+Le principe : rien de distant ne charge avant un clic. La façade est
+construite à la construction ; le lecteur — YouTube *nocookie*, SoundCloud —
+n'arrive que si vous l'appelez.[^facade]
+
+::youtube[https://www.youtube.com/watch?v=dQw4w9WgXcQ]{title="Vidéo de test (remplacer)"}
+
+Et un set ParVagues, cette fois réel :
+
+::soundcloud[https://soundcloud.com/parvagues/live-39c3]{title="ParVagues — live 39C3"}
+
+[^facade]: Seule exception : la vignette YouTube (une requête vers
+    `i.ytimg.com`, sans cookie). SoundCloud ne touche à rien du tout.
+
+## Tableaux et notes
+
+L'état du labo, en tableau GFM :
+
+| Média      | Directive      | JS client | Requête distante    |
+| ---------- | -------------- | --------- | ------------------- |
+| Code       | ``` clôturé    | étiquette + copie | aucune      |
+| Image      | `![alt](src)`  | lightbox  | l'image elle-même   |
+| Audio      | `::audio`      | aucune    | le fichier          |
+| YouTube    | `::youtube`    | au clic   | vignette + iframe   |
+| SoundCloud | `::soundcloud` | au clic   | iframe au clic      |
+
+:::note[À retenir]
+Tout ce qui est décoratif doit pouvoir disparaître : la page se lit
+entièrement sans JavaScript, chaque amélioration n'est qu'une décoration du
+HTML déjà livré.
+:::
+
+C'est le contrat de cette refonte : le lecteur sans JS reçoit l'article
+complet, et chaque gadget n'arrive que pour les autres.[^contrat]
+
+[^contrat]: Voir `ArticleEnhance.jsx` : une île invisible qui décore le DOM
+    déjà servi — copie de code, lightbox, mémoire de langue, façades.