Au bout d’une dizaine de projets et autant d’articles, composer chaque visuel à la main dans un éditeur graphique était devenu une corvée. Toujours le même gabarit : fond sombre dégradé, trait d’accent en haut, un titre en Fraunces, une tagline en DM Sans, un logo dans son halo de couleur. Quand la structure ne bouge plus, c’est qu’il est temps d’écrire l’outil qui la produit.
Card Generator, c’est exactement ça : une petite app web auto-hébergée qui sort les featured images de ce site. J’ai pris le pipeline SVG que je bricolais en local et je l’ai transformé en interface — aperçu en direct, sélecteur de logo, color picker, export PNG. Ce que je faisais en un quart d’heure sous Inkscape, je le sors maintenant en deux minutes.
Ce qu’elle sait faire
- Tous les champs éditables (eyebrow, titre sur une ou deux lignes, tagline), avec un aperçu qui se met à jour sous les 200 ms.
- Trois façons de poser un logo : la bibliothèque embarquée (Simple Icons + Font Awesome), un upload PNG/SVG, ou un simple monogramme texte façon YB.
- Export PNG en 1×, 2× ou 3×, rasterisé côté serveur par
rsvg-convertavec les fontes exactes de la prod — donc rendu identique au pixel près. - Et un export SVG brut, quand j’ai envie de retoucher dans Figma.
Sous le capot, c’est volontairement minimal : un backend Python en http.server threadé, sans la moindre dépendance, du HTML/CSS/JS vanilla devant, et librsvg pour cracher le PNG. Le tout tourne en service systemd sur servyass, port 6789, fermé au LAN. L’idée, c’est que ça puisse redémarrer sur n’importe quelle machine avec Python et librsvg, sans node_modules ni base de données.
Petit détail dont je suis assez content : l’image de couverture en haut de cette page a été générée par l’outil lui-même, via un appel à son endpoint POST /api/png. Un outil qui produit sa propre vitrine — difficile de faire plus dogfooding.