Construire un jardin numérique avec Astro et Totem

Pourquoi encore un blog

Je ne voulais pas un blog. Les blogs imposent la chronologie, et la chronologie impose la pression de publier. Ce que je voulais, c’est un endroit où planter des idées et y revenir. Un jardin numérique.

La différence est fondamentale. Un article de blog est un produit fini. Une note de jardin est un organisme vivant. Elle a un stade de croissance - graine, pousse, croissance, persistant - et elle évolue avec le temps. Pas de date de péremption.

Astro 5 sans hésitation

Le choix d’Astro était évident. Zéro JavaScript côté client par défaut. Content collections avec validation de schéma. Rendu statique. Pour un site de contenu, c’est exactement ce qu’il faut - pas de SPA, pas de hydratation, pas de bundle JavaScript de 200 Ko pour afficher du texte.

Les content collections d’Astro 5 sont auto-générées depuis les dossiers src/content/. Un fichier markdown avec le bon frontmatter, et la collection existe. Pas de configuration manuelle. Le schéma est inféré.

---
title: 'Mon projet'
icon: 'icon-code'
stage: growing
tags: [projet, typescript]
xp: 75
---

La variante acide

Totem, mon design system, a une esthétique “Soft Minimal” - pastels chauds, ombres subtiles. Pour le jardin, je voulais l’opposé : acide, saturé, vibrant. Vert #ADFF2F, orange #FF8C00, framboise #FF2D6B.

Le pattern !default de Totem rend ça trivial. Il suffit de charger les tokens du jardin avant ceux de Totem :

// garden-tokens.scss (chargé en premier)
$color-primary: #adff2f;
$color-secondary: #ff2d6b;
$color-success: #00e676;
$color-warn: #ff8c00;

// Puis Totem utilise ses valeurs uniquement si rien n’est défini
// $color-primary: #FDE68A !default;  ← ignoré

Même design system, deux identités visuelles radicalement différentes. C’est la validation ultime de l’architecture de Totem.

Le game design

Les mécaniques de jeu vidéo ne sont pas un gadget. Elles résolvent un vrai problème de navigation.

Les stades de croissance (graine → pousse → croissance → persistant) indiquent la maturité d’une note. L’utilisateur sait immédiatement si une fiche est une ébauche ou une référence stable. C’est plus honnête qu’un blog classique où chaque article prétend être fini.

Les barres d’XP quantifient la maturité. Un projet à 95 XP est quasi-complet. Un projet à 30 XP est encore en construction. Le visiteur sait à quoi s’attendre.

Le HUD - le panneau de stats en haut du jardin - donne une vue d’ensemble : nombre de fiches, répartition par stade, projets les plus actifs. Comme un tableau de bord de jeu vidéo.

.xp-bar {
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  overflow: hidden;

  &__fill {
    height: 100%;
    background: linear-gradient(90deg, var(--glow-primary), var(--color-success));
    transition: width 0.6s ease;
  }
}

Les fiches projet auto-générées

Chaque fiche de projet est construite par un agent Claude qui explore le dépôt source :

1. Structure du projet (README, package.json, arborescence)
2. Historique git (premiers commits, timeline, rythme)
3. Sessions Claude (.claude/, agents, mémoire)
4. Résumé structuré avec frontmatter, stack, stats, narratif

10 projets analysés en parallèle. Le jardin se cultive avec ses propres outils.

Le carnet

Le carnet, c’est la couche temporelle. Contrairement aux fiches du jardin qui évoluent, les articles du carnet sont datés et figés. C’est le récit de construction - le “comment” et le “pourquoi” derrière chaque projet.

Les deux se complètent. La fiche dit “voici le projet”. Le carnet dit “voici comment je l’ai construit et ce que j’ai appris”.

Puppeteer pour les screenshots

Un script Puppeteer capture automatiquement chaque page du jardin en desktop (1440×900) et mobile (390×844). C’est utile pour deux choses : vérifier le rendu responsive sans ouvrir vingt onglets, et fournir des visuels pour les fiches projet.

Le script tourne contre le serveur de dev local. Boucle simple : modifier le SCSS, relancer le script, vérifier les captures. Pas de CI sophistiquée - juste un outil pragmatique.

Ce que je retiens

Construire son propre jardin numérique, c’est le projet méta par excellence. Chaque décision technique est aussi une décision éditoriale. Le choix du vert acide influence la perception du contenu. Les barres d’XP changent la façon dont les visiteurs naviguent. Le game design n’est pas cosmétique - il structure l’information.

Le jardin pousse. De nouvelles fiches apparaissent, des notes mûrissent, des articles documentent le parcours. C’est exactement ce que je voulais : un espace qui grandit avec moi, pas un blog qui me demande de publier.