Binnen in de Donkere Leeskamer Gebouwd met Next.js 14 en Bun

Ontwikkelaars houden ervan om blogs te herschrijven. Het is al een meme: in plaats van posts te schrijven, breken we de oude stack elke zes maanden af en bouwen we de interface opnieuw op. Het proces resulteert bijna altijd in een cookie-cutter template. Maar soms kom je broncode tegen waar de auteur iets meer aandacht aan de details heeft besteed.

De andere dag was ik aan het verkennen van de woosal1337/blog repository — het is de persoonlijke website van ontwikkelaar Ege Celebi. Het project heeft iets meer dan 300 sterren verzameld op GitHub. Verborgen darin zijn verschillende interessante oplossingen voor grafische generatie, typografie en werken met MDX.

Onder de Motorkap

Er is hier geen zware CMS zoals Ghost of Strapi. De auteur koos voor statische generatie en hoge laadsnelheid.

De build is gebaseerd op drie dingen:

1. Next.js 14 met App Router en React 18.
2. Bun als package manager en runtime.
3. Biome voor code linting en formatting.

Bun bespaart tijd op dependency installatie, en Biome vervangt de klassieke ESLint en Prettier combinatie. Om de linter te draaien met auto-fix, gebruikt het project het bun run check commando.

Tailwind CSS wordt gebruikt voor styling. Kleur- en token-instellingen worden geëxtraheerd naar app/globals.css. Geist Sans verzorgt het artikel lezen, en Geist Mono wordt gebruikt voor code blokken.

Covers Zonder Designers of Midjourney

Het hoogtepunt van de repository is banner generatie voor artikelen. Meestal zoeken auteurs een geschikte afbeelding op Unsplash, genereren afbeeldingen met neurale netwerken, of maken kaarten in Figma.

Ege heeft het probleem anders opgelost. In het lib/contour.ts bestand staat een algoritme dat een post titel neemt en omzet in een contour patroon. Je krijgt een deterministische SVG banner. Elke titel correspondeert met zijn eigen unieke tekening, en er is geen noodzaak om externe services hiervoor aan te roepen.

Dezelfde contour markering wordt gebruikt als het logo en favicon, waardoor een uniforme identiteit behouden blijft.

Vloeibaar Glas en ASCII Animaties

Visueel gezien lijkt de site op een donkere editorial pagina. Het design maakt gebruik van ultra-dunne randen (haarlijn randen) en een uniform animatie curve voor overgangen.

De interface bevat verschillende visuele ontdekkingen:

• Ronde controls met een vloeibaar glas effect.
• Frosted tags voor categorieën en labels.
• Linker kant inhoudsopgave voor artikelen met een navigatie marker die soepel meescrolt. Het gedrag van de marker is gemodelleerd naar het LineNav component.
• Live ASCII oppervlakken. In de components/blocks/ascii/ map vind je een geanimeerde torus (de beroemde ascii donut), digitale regen, plasma, en tunnel effecten. De auteur heeft ze gepoort van de soft-club-ui library en opnieuw gekleurd om te passen bij het monochrome palet van de site.

Projectstructuur en MDX

Alle artikelen worden direct opgeslagen in de App Router page tree: app/(website)/blog/(post)/[slug]/page.mdx.

Deze aanpak combineert routing logica en content zelf. UI componenten zijn duidelijk gescheiden:

• components/ds/ bevat herbruikbare basis design systeem elementen.
• components/blocks/ slaat complexe domein logica en animaties op.

Hoe Lokaal te Draaien

Je hebt Node.js versie 20 of hoger en Bun geïnstalleerd nodig. Er hoeven geen environment variables geconfigureerd te worden.

Kloon de repository en start de lokale server:

bun install
bun dev

Om te controleren met de linter en de code te formatteren:

bun run check

Waarom Deze Bronnen Bekijken

De repository is de moeite waard om te openen als je van plan bent je eigen site te bouwen of op zoek bent naar schone voorbeelden van frontend architectuur. In de code kun je oppikken:

• Biome configuratie in een Next.js project.
• Implementatie van vector card generatie op basis van tekst.
• Integratie van Canvas en ASCII effecten in React componenten.
• Organiseren van Tailwind tokens in een enkel CSS bestand.

De code is gelicenseerd onder MIT, maar de tekst content en afbeeldingen zijn beschermd door copyright. Artikelen kopiëren is geen goed idee, maar de architectuur bestuderen en de ideeën toepassen in je eigen project is een geweldig plan.