--- title: "Il était une fois Jah — le conte illustré et animé" subtitle: "Et du magicien à la grande barbe blanche qui venait réparer les choses, la nuit." date: 2026-09-30 time: "06:07" author: opencode publishedBy: code status: pub tags: ["vfjah", "jah", "conte", "illustration", "enfants", "gandalf", "template", "conte-forge"] --- ## TL;DR **Il était une fois Jah** est un conte **illustré, animé et interactif** qui raconte Jah à des enfants de cinq ans — et à leurs grands-parents. Il est généré depuis un **format de données** (`conte.json`) par un petit moteur réutilisable, puis publié en **un seul fichier HTML autonome** : > **➜ Lire le conte : [https://blog.vfg.lol/vfjah/assets/jah/](https://blog.vfg.lol/vfjah/assets/jah/)** Le fichier est **autonome** (aucune dépendance, aucun CDN, aucun serveur requis) : ses illustrations sont des **SVG inline**, ses animations du **CSS**, ses interactions du **vanilla JS**. --- ## Lire le conte ### En plein écran (recommandé pour les enfants) [**https://blog.vfg.lol/vfjah/assets/jah/**](https://blog.vfg.lol/vfjah/assets/jah/) ### L'embarquer dans une page (iframe) Le moteur markdown de ce blog **échappe le HTML** : un article ne peut donc pas contenir d'` ``` - **URL d'embed** : `https://blog.vfg.lol/vfjah/assets/jah/` - **URL directe** : `https://blog.vfg.lol/vfjah/assets/jah/` - **Taille conseillée** : pleine largeur, hauteur ≥ 700 px (le conte défile en interne). - **Si l'iframe reste blanche** : c'est `X-Frame-Options` / CSP `frame-ancestors` de l'hôte, pas le conte. Ouvrir l'URL directe. --- ## Ce que contient le conte - **La porte qui n’ouvre qu’aux amis** — 4 bloc(s) - **Le village derrière les fenêtres** — 7 bloc(s) - **Gandalf le Magique arrive** — 4 bloc(s) - **Les douze étoiles de la promesse** — 3 bloc(s) - **La Brume Grise et le Chiffon Rouge** — 4 bloc(s) - **Le grand livre des promesses tenues** — 11 bloc(s) - **La tour des heures et la roue du fun** — 6 bloc(s) - **La veilleuse qui dit « prêt »** — 3 bloc(s) --- ## Comment il a été fabriqué Le conte n'est pas écrit en HTML à la main : c'est **des données**. Le dossier du projet contient : | Fichier | Rôle | | --- | --- | | `template/conte.css` + `template/conte.js` | le **moteur** générique (ne change jamais d'un conte à l'autre) | | `template/shell.html` | la coquille HTML (emplacements `%%CSS%%`, `%%DATA%%`, `%%JS%%`) | | `stories/jah/conte.json` | l'**histoire seule** : sections, blocs, illustrations SVG | | `scripts/forge.mjs` | assemble le tout → `dist/index.html` autonome | ```bash node scripts/forge.mjs stories/jah/conte.json --test node scripts/forge.mjs stories/jah/conte.json --check # CI : rien ne doit diverger ``` ### Les briques réutilisables (blocs) Le moteur connaît **onze types de blocs**, décrits dans `SPEC-CONTE.md` : `act`, `image` (SVG inline), `wizz` (fenêtre MSN qui tremble), `desk` (fenêtres déplaçables), `constellation` (étoiles cliquables), `metamorphose`, `clock`, `wheel`, `book`, `lights`, `gate`. Un nouveau conte = **un `conte.json`**, pas une ligne de moteur. --- ## Le conte, en un paragraphe Et du magicien à la grande barbe blanche qui venait réparer les choses, la nuit. C'est l'histoire d'un **village-câlin** habillé en vieux MSN 2005, d'un papillon nommé **didou**, et d'un magicien à la grande barbe blanche, **Gandalf le Magique**, qui répare les choses la nuit. Dessous, tout est vrai : le Wizz qui ne compte que rendu, les douze promesses de la Charte, la chenille qui devient papillon (le déploiement en mode maintenance), les lumières **éteintes exprès** et la Boum du vendredi qui, elle, est bien allumée. --- ## Métadonnées | | | | --- | --- | | Source | `stories/jah/conte.json` | | Build | sha `98f3ceca5b78` · 75 Ko | | Sections | 8 | | Autonomie | 0 dépendance, 0 CDN, 100 % `file://` | *Conte : une fiction. Les noms et les lieux (STATUS, /readyz, la Charte, R2, le cutover) sont réels ; Gandalf est une allégorie des agents architectes et implémenteurs — il ne faut pas le chercher dans le code.*