Dans les coulisses de la salle de lecture sombre construite avec Next.js 14 et Bun

Les développeurs adorent réécrire leurs blogs. C'est déjà un mème : au lieu d'écrire des articles, on démonte l'ancienne pile technique et on reconstruit l'interface from scratch tous les six mois. Le processus donne presque toujours un modèle standard. Mais parfois, on tombe sur du code source où l'auteur a accordé un peu plus d'attention aux détails.

L'autre jour, j'explorais le dépôt woosal1337/blog — c'est le site personnel du développeur Ege Celebi. Le projet a recueilli un peu plus de 300 étoiles sur GitHub. À l'intérieur se cachent plusieurs solutions intéressantes pour la génération graphique, la typographie et le travail avec MDX.

Sous le capot

Pas de CMS lourd comme Ghost ou Strapi ici. L'auteur a choisi la génération statique et une vitesse de chargement élevée.

Le build repose sur trois éléments :

1. Next.js 14 avec App Router et React 18.
2. Bun comme gestionnaire de paquets et runtime.
3. Biome pour le linting et le formatage du code.

Bun fait gagner du temps sur l'installation des dépendances, et Biome remplace la combinaison classique ESLint et Prettier. Pour exécuter le linter avec auto-fix, le projet utilise la commande bun run check.

Tailwind CSS est utilisé pour le style. Les paramètres de couleur et de tokens sont extraits dans app/globals.css. Geist Sans gère la lecture des articles, et Geist Mono est utilisé pour les blocs de code.

Des couvertures sans designers ni Midjourney

Le point fort principal du dépôt est la génération de bannières pour les articles. Habituellement, les auteurs cherchent une image adaptée sur Unsplash, génèrent des images avec des réseaux de neurones, ou créent des cartes dans Figma.

Ege a résolu le problème différemment. Dans le fichier lib/contour.ts, il y a un algorithme qui prend un titre de post et le transforme en motif de contour. Vous obtenez une bannière SVG déterministe. Chaque titre correspond à son propre dessin unique, et il n'est pas nécessaire d'appeler des services externes pour cela.

La même marque de contour est utilisée comme logo et favicon, maintenant une identité unifiée.

Verre liquide et animations ASCII

Visuellement, le site ressemble à une page éditoriale sombre. Le design utilise des bordures ultra-fines (hairline borders) et une courbe d'animation unifiée pour les transitions.

L'interface contient plusieurs découvertes visuelles :

• Des contrôles ronds avec un effet de verre liquide.
• Des tags dépolis pour les catégories et les étiquettes.
• Une table des matières de l'article sur le côté gauche avec un marqueur de navigation qui défile en douceur. Le comportement du marqueur est modélisé d'après le composant LineNav.
• Des surfaces ASCII en direct. Dans le dossier components/blocks/ascii/, vous trouverez un tore animé (le célèbre ascii donut), de la pluie numérique, des effets plasma et tunnel. L'auteur les a portés depuis la bibliothèque soft-club-ui et les a recoloriés pour correspondre à la palette monochrome du site.

Structure du projet et MDX

Tous les articles sont stockés directement dans l'arborescence des pages de l'App Router : app/(website)/blog/(post)/[slug]/page.mdx.

Cette approche combine la logique de routage et le contenu lui-même. Les composants UI sont clairement séparés :

• components/ds/ contient les éléments de base réutilisables du système de design.
• components/blocks/ stocke la logique métier complexe et les animations.

Comment exécuter en local

Vous aurez besoin de Node.js version 20 ou supérieure et de Bun installé. Aucune variable d'environnement n'est à configurer.

Clonez le dépôt et démarrez le serveur local :

bun install
bun dev

Pour vérifier avec le linter et formater le code :

bun run check

Pourquoi consulter ces sources

Le dépôt mérite d'être ouvert si vous envisagez de créer votre propre site ou si vous cherchez des exemples propres d'architecture frontend. Dans le code, vous pouvez reprendre :

• La configuration de Biome dans un projet Next.js.
• L'implémentation de la génération de cartes vectorielles basée sur le texte.
• L'intégration d'effets Canvas et ASCII dans des composants React.
• L'organisation des tokens Tailwind dans un seul fichier CSS.

Le code est sous licence MIT, mais le contenu textuel et les images sont protégés par le droit d'auteur. Copier des articles n'est pas une bonne idée, mais étudier l'architecture et appliquer les idées dans votre propre projet est un excellent plan.