Le blog a maintenant deux façons d'être lu — et un arbre pour s'y retrouver

TL;DR

Le devblog n'avait qu'une seule façon d'être parcouru : une pile chronologique. C'était pratique pour suivre l'actualité, pénible pour retrouver un sujet.

Depuis peu, il y en a une seconde : un arbre de savoir (/arbre/) qui range le même corpus en sept sections ordonnées, chacune ouvrant sur ses projets, puis sur leurs articles classés par année.

Et chaque article — de quelque façon qu'on y arrive — porte désormais de quoi continuer : un fil d'Ariane, un sommaire qui suit votre lecture, et en pied ses articles proches, le fil du dossier et ses rétroliens. Aucun de ces liens n'a été saisi à la main : tout est dérivé du corpus.

Détail à part : huit peaux sont disponibles, dont quatre arrivées récemment.

1. Comment on arrive : deux portes au lieu d'une

La pile (l'accueil, inchangée)

L'accueil reste ce qu'il était : les articles les plus récents, avec des filtres par groupe, projet, tag et statut. C'est la porte d'entrée naturelle quand on suit le blog.

Ce qui a changé : un bandeau de sections en tête du flux, pour rappeler que la pile n'est pas le seul chemin.

L'arbre (/arbre/)

C'est la nouveauté principale. Trois niveaux :

Les sept sections, dans l'ordre voulu — du cœur du métaprojet vers sa périphérie :

L'ordre n'est ni alphabétique ni trié par volume : c'est une lecture, pas un classement. On commence par ce qui structure tout le reste, on finit par la chronique quotidienne.

Pourquoi un arbre alors que les dossiers existaient déjà ? Parce que la hiérarchie existait sans être visible : quarante-quatre catégories sur disque, utilisées pour filtrer, jamais pour naviguer. Les quatre groupes projet ne couvraient que la moitié du corpus — les œuvres, la méthode agentique et la chronique tombaient hors hiérarchie, donc nulle part.

2. Comment on continue : les articles reliés

Le reproche qu'on pouvait faire au blog : un article était un cul-de-sac. On le lisait, on repartait à l'accueil, on cherchait autre chose.

Chaque article porte maintenant trois blocs en pied de page.

Le fil du projet

L'article précédent et suivant dans le même dossier, par ordre chronologique. C'est le plus utile quand on lit un carnet suivi — la Fabrique à Psytrance, Rainbow Journey, le journal du devblog — parce qu'il garde le contexte du feuilleton.

Les articles proches

Jusqu'à cinq articles reliés par tags partagés, avec un bonus quand la section ou le projet coïncident. Le calcul est volontairement simple (similarité de Jaccard) : il ne cherche pas à être intelligent, il cherche à être prévisible. Si deux articles se ressemblent, c'est parce qu'ils parlent des mêmes choses, pas parce qu'un modèle a décidé qu'ils se ressemblaient.

Les rétroliens — « cité par »

Le plus intéressant, et le moins visible : les articles dont le markdown pointe vers celui-ci.

Sur 526 articles, 76 sont cités par au moins un autre, via 87 liens. Ce sont les articles qui servent de référence — souvent les guides et les méthodes. Les lire avec leurs rétroliens donne une carte de ce qui s'appuie sur quoi.

Le point important : rien n'a été écrit à la main

Sur 526 articles, un seul portait un frontmatter related. Demander à quiconque de relier les 525 autres n'était pas un plan, c'était un vœu. Le graphe est donc dérivé de ce que les gens ont réellement écrit : la structure des dossiers, les tags, et les liens markdown déjà présents dans les textes. Conséquence directe : il n'y a rien à maintenir. Publier un article le fait entrer automatiquement dans le fil de son dossier ; citer quelqu'un lui ajoute un rétrolien sans le savoir.

3. Comment on lit : le confort

Trois ajouts discrets, qui changent l'expérience plus qu'ils n'en ont l'air.

Le fil d'Ariane — blog.vfg.lol › L'atelier › workflows agentiques. On sait toujours où l'on est, et on peut remonter d'un cran sans revenir à l'accueil.

Le sommaire automatique — construit à partir des h2/h3, repliable, avec surlignage de la section en cours pendant le défilement (scroll-spy). Sur un article long comme celui-ci, c'est ce qui permet de sauter directement à la partie qui intéresse.

La barre de progression — en haut de page, pour savoir où l'on en est.

Un détail d'implémentation qui vaut d'être noté : le sommaire a d'abord été fait en encart flottant collant à droite. Mauvaise idée. Un float combiné à position: sticky conserve l'exclusion de texte calculée à sa position d'origine — résultat, l'encart chevauchait les paragraphes dès qu'on défilait. Il est revenu en flux normal, repliable, sur deux colonnes en large. Moins spectaculaire, correct partout, y compris sous les huit peaux.

Et le rendu est désormais côté serveur : le HTML arrive complet, plus de « Chargement… » à l'ouverture d'un article.

4. Les peaux : huit ambiances

Le bouton Skin (en haut des pages d'article) fait tourner huit modes :

Le choix est mémorisé (par navigateur), donc on retrouve son ambiance à la visite suivante. Les quatre derniers modes sont arrivés récemment — ils étaient annoncés depuis la refonte Skyblog, ils sont là.

À noter : c'est un réglage d'affichage, pas de contenu. Chaque peau conserve la même structure et la même accessibilité — le corps de l'article reste lisible partout, c'est la condition pour que le jeu ne se fasse pas au détriment de la lecture.

5. Ce qui n'a pas changé (et c'est volontaire)

Il est tentant, en listant les nouveautés, de laisser croire à une refonte totale. Ce n'est pas le cas.

• La pile chronologique reste la porte d'entrée. L'arbre est une seconde lecture, pas un remplacement.
• L'accueil, la bibliothèque, le lexique, la page de publication n'ont pas bougé de rôle.
• Le modèle éditorial est le même : un fichier markdown, un frontmatter, publié par la même API.
• Les 16 projets canoniques n'ont pas changé. Les sections sont un second axe posé par-dessus, pas une réorganisation des dossiers.

Ce dernier point était un choix explicite : réorganiser 526 fichiers pour faire joli aurait cassé tous les liens existants. On a ajouté une couche de lecture au-dessus, sans déplacer une seule ligne de contenu.

6. Ce qui arrive ensuite

• Promotion en production — tout ceci tourne en local ; le déploiement du code vers le VPS est en cours de réparation (voir l'article sur le déploiement dans le vide).
• Feeds (RSS/Atom) — déjà présents, à remettre à jour puisque la production était gelée.
• Pagination serveur sur les grosses entrées de l'arbre.
• Un vrai endpoint de version (/healthz.version) pour remplacer le marqueur implicite /arbre/ utilisé par les contrôles automatiques.
• Le musée : l'ancienne pile chronologique conservée comme archive.

7. Comment l'essayer

En local :

npm run dev
# puis ouvrir http://127.0.0.1:5195/arbre/

Quelques adresses utiles :

Pour voir les relations à l'œuvre, prenez un article qui cite ou qui est cité — les guides et méthodes sont les mieux reliés. Le sommaire apparaît dès qu'un article a des h2 ou h3 : celui-ci en a sept.

En une phrase

Le blog se lit toujours de la même façon si on le souhaite — la pile, du plus récent au plus ancien. Mais si on cherche un sujet plutôt qu'une date, il y a maintenant un arbre pour ça ; et une fois sur un article, il y a de quoi continuer sans revenir au point de départ.

Les chiffres de cet article sont ceux du corpus au 20 septembre 2026 : 526 articles, 44 catégories, 7 sections, 52 pages d'arbre en export statique, 8 peaux, 76 articles cités par 87 liens de rétrolien.