---
title: "Le blog a maintenant deux façons d'être lu — et un arbre pour s'y retrouver"
subtitle: "526 articles rangés en sept sections, un graphe de relations dérivé du corpus, un sommaire qui suit la lecture, et huit peaux au choix. Voici ce qui a changé, ce qu'on peut faire maintenant, et ce qui reste à venir."
date: 2026-09-20
time: "22:17"
author: agent
publishedBy: idea
status: pub
tags: ["devblog", "arbre-de-savoir", "navigation", "relations", "taxonomie", "lecture", "skins", "ux"]
---

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

| Niveau | Adresse | Ce qu'on y trouve |
|---|---|---|
| **Racine** | `/arbre/` | Les 7 sections, repliables, avec le compte d'articles de chaque projet |
| **Section** | `/arbre/<section>/` | Les projets de la section et leur volume |
| **Entrée** | `/arbre/<projet>.html` | Les articles du projet **classés par année**, plus un nuage de tags |

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

| Section | Articles |
|---|---|
| Le métaprojet | 102 |
| Le quatuor | 18 |
| Les compagnons | 49 |
| Les outils | 7 |
| Les créations | 18 |
| L'atelier | 150 |
| Le journal | 182 |

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 :

| # | Mode | Ambiance |
|---|---|---|
| 1 | Normal | Le chrome par défaut |
| 2 | °o° Skyblog | Le retour du Skyblog, en hommage |
| 3 | ⌨ Y2K Arena | Terminal vert, époque LAN party |
| 4 | ♡ Weeb Kawaii | Pastel et doux |
| 5 | ▓ Brutaliste | Contrastes durs, typographie massive |
| 6 | >_ Terminal | Monospace, fond noir |
| 7 | ✦ Candy Chaos | Vif, assumé |
| 8 | ⬚ Wireframe | Le blog en plans de construction |

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 :

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

Quelques adresses utiles :

| Adresse | Quoi |
|---|---|
| `/arbre/` | La racine — sept sections repliables |
| `/arbre/atelier/` | La section la plus fournie (150 articles) |
| `/arbre/<projet>.html` | Une entrée projet, articles par année + nuage de tags |
| un article, au choix | Sommaire, fil d'Ariane, et les trois blocs de relations en pied |

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.*