Hinter den Kulissen des dunklen Leseraums mit Next.js 14 und Bun

Entwickler lieben es, Blogs neu zu schreiben. Es ist bereits ein Meme: Anstatt Beiträge zu verfassen, reißen wir alle sechs Monate den alten Stack ein und bauen das Interface von Grund auf neu auf. Der Prozess führt fast immer zu einer austauschbaren Vorlage. Aber manchmal stößt man auf Quellcode, bei dem der Autor etwas mehr Aufmerksamkeit auf die Details verwendet hat.

Neulich habe ich das woosal1337/blog-Repository erkundet – es ist die persönliche Website des Entwicklers Ege Celebi. Das Projekt hat etwas über 300 Sterne auf GitHub gesammelt. Darin verbergen sich mehrere interessante Lösungen für Grafikgenerierung, Typografie und die Arbeit mit MDX.

Unter der Haube

Hier gibt es kein schweres CMS wie Ghost oder Strapi. Der Autor hat sich für statische Generierung und hohe Lade Geschwindigkeit entschieden.

Der Build basiert auf drei Dingen:

1. Next.js 14 mit App Router und React 18.
2. Bun als Paketmanager und Runtime.
3. Biome für Code-Linting und Formatierung.

Bun spart Zeit bei der Installation von Abhängigkeiten, und Biome ersetzt die klassische Kombination aus ESLint und Prettier. Um den Linter mit Auto-Fix auszuführen, verwendet das Projekt den Befehl bun run check.

Tailwind CSS wird für das Styling verwendet. Farb- und Token-Einstellungen sind in app/globals.css ausgelagert. Geist Sans übernimmt die Artikel-Lektüre, und Geist Mono wird für Code-Blöcke verwendet.

Cover ohne Designer oder Midjourney

Das Haupt-Highlight des Repositories ist die Banner-Generierung für Artikel. Normalerweise suchen Autoren entweder nach einem passenden Bild auf Unsplash, generieren Bilder mit neuronalen Netzen oder erstellen Karten in Figma.

Ege hat das Problem anders gelöst. In der Datei lib/contour.ts gibt es einen Algorithmus, der einen Beitragstitel nimmt und in ein Konturmuster verwandelt. Man erhält ein deterministisches SVG-Banner. Jeder Titel entspricht seiner eigenen einzigartigen Zeichnung, und es müssen keine externen Dienste dafür aufgerufen werden.

Dasselbe Konturzeichen wird als Logo und Favicon verwendet und wahrt eine einheitliche Identität.

Flüssiges Glas und ASCII-Animationen

Visuell sieht die Seite aus wie eine dunkle redaktionelle Seite. Das Design verwendet ultra-dünne Rahmen (Haarstärke-Rahmen) und eine einheitliche Animationskurve für Übergänge.

Die Benutzeroberfläche enthält mehrere visuelle Entdeckungen:

• Runde Steuerelemente mit einem Flüssigglas-Effekt.
• Mattierte Tags für Kategorien und Labels.
• Inhaltsverzeichnis auf der linken Seite mit einem Navigationsmarker, der sanft mit scrollt. Das Verhalten des Markers ist vom LineNav-Komponenten inspiriert.
• Live-ASCII-Flächen. Im Ordner components/blocks/ascii/ finden sich ein animierter Torus (der berühmte ASCII-Donut), digitaler Regen, Plasma- und Tunnel-Effekte. Der Autor hat sie aus der soft-club-ui-Bibliothek portiert und an die monochrome Palette der Seite angepasst.

Projektstruktur und MDX

Alle Artikel werden direkt im App Router-Seitenbaum gespeichert: app/(website)/blog/(post)/[slug]/page.mdx.

Dieser Ansatz kombiniert Routing-Logik und Inhalte. UI-Komponenten sind klar getrennt:

• components/ds/ enthält wiederverwendbare grundlegende Design-System-Elemente.
• components/blocks/ speichert komplexe Domänenlogik und Animationen.

Lokal ausführen

Du brauchst Node.js Version 20 oder höher und Bun installiert. Es müssen keine Umgebungsvariablen konfiguriert werden.

Klone das Repository und starte den lokalen Server:

bun install
bun dev

Um den Linter auszuführen und den Code zu formatieren:

bun run check

Warum einen Blick auf diese Quellen werfen

Das Repository lohnt sich zu öffnen, wenn du planst, eine eigene Website zu bauen oder nach sauberen Beispielen für Frontend-Architektur suchst. Im Code findest du:

• Biome-Konfiguration in einem Next.js-Projekt.
• Implementierung von Vektor-Karten-Generierung basierend auf Text.
• Integration von Canvas- und ASCII-Effekten in React-Komponenten.
• Organisation von Tailwind-Tokens in einer einzigen CSS-Datei.

Der Code steht unter MIT-Lizenz, aber Textinhalte und Bilder sind urheberrechtlich geschützt. Artikel zu kopieren ist keine gute Idee, aber die Architektur zu studieren und die Ideen in deinem eigenen Projekt anzuwenden, ist ein großartiger Plan.