Dentro la Stanza di Lettura Oscura Costruita con Next.js 14 e Bun
Gli sviluppatori amano riscrivere i blog. È già un meme: invece di scrivere post, smantelliamo lo stack vecchio e ricostruiamo l'interfaccia da zero ogni sei mesi. Il processo quasi sempre risulta in un template standard. Ma a volte ti imbatti in del codice sorgente dove l'autore ha prestato un po' più attenzione ai dettagli.
L'altro giorno stavo esplorando il repository woosal1337/blog — è il sito personale dello sviluppatore Ege Celebi. Il progetto ha raccolto poco più di 300 stelle su GitHub. Nascosti all'interno ci sono diverse soluzioni interessanti per la generazione di grafica, tipografia e lavoro con MDX.
Sotto il Cofano
Non c'è nessun CMS pesante come Ghost o Strapi qui. L'autore ha scelto la generazione statica e un'elevata velocità di caricamento.
Il build si basa su tre elementi:
- Next.js 14 con App Router e React 18.
- Bun come package manager e runtime.
- Biome per il linting e la formattazione del codice.
Bun fa risparmiare tempo sull'installazione delle dipendenze, e Biome sostituisce la classica combinazione di ESLint e Prettier. Per eseguire il linter con auto-fix, il progetto usa il comando bun run check.
Per lo styling viene usato Tailwind CSS. Le impostazioni di colori e token sono estratte in app/globals.css. Geist Sans gestisce la lettura degli articoli, e Geist Mono viene usato per i blocchi di codice.
Copertine Senza Designer o Midjourney
La caratteristica principale del repository è la generazione di banner per gli articoli. Di solito gli autori cercano un'immagine adatta su Unsplash, generano immagini con reti neurali, o creano card in Figma.
Ege ha risolto il problema in modo diverso. Nel file lib/contour.ts c'è un algoritmo che prende un titolo del post e lo trasforma in un pattern di contorni. Ottieni un banner SVG deterministico. Ogni titolo corrisponde al proprio disegno unico, e non c'è bisogno di chiamare servizi esterni per questo.
Lo stesso marchio di contorni viene usato come logo e favicon, mantenendo un'identità unificata.
Vetro Liquido e Animazioni ASCII
Visivamente, il sito assomiglia a una pagina editoriale scura. Il design usa bordi ultra-sottili (hairline borders) e una curva di animazione unificata per le transizioni.
L'interfaccia contiene diverse scoperte visive:
- Controlli arrotondati con effetto vetro liquido.
- Tag smerigliati per categorie ed etichette.
- Sommario dell'articolo sul lato sinistro con un marcatore di navigazione che scorre fluidamente. Il comportamento del marcatore è modellato sul componente LineNav.
- Superfici ASCII dal vivo. Nella cartella
components/blocks/ascii/troverai un toro animato (la famosa ciambella ASCII), pioggia digitale, plasma ed effetti tunnel. L'autore li ha portati dalla libreria soft-club-ui e li ha ricolorati per adattarli alla palette monocromatica del sito.
Struttura del Progetto e MDX
Tutti gli articoli sono archiviati direttamente nell'albero delle pagine di App Router: app/(website)/blog/(post)/[slug]/page.mdx.
Questo approccio combina la logica di routing e il contenuto stesso. I componenti UI sono chiaramente separati:
components/ds/contiene elementi riutilizzabili del sistema di design di base.components/blocks/memorizza logica di dominio complessa e animazioni.
Come Eseguire in Locale
Avrai bisogno di Node.js versione 20 o superiore e Bun installato. Non sono necessarie variabili d'ambiente.
Clona il repository e avvia il server locale:
bun install
bun dev
Per verificare con il linter e formattare il codice:
bun run check
Perché Guardare Questi Sorgenti
Il repository vale la pena di essere aperto se stai pianificando di costruire il tuo sito o cerchi esempi puliti di architettura frontend. Nel codice puoi trovare:
- Configurazione di Biome in un progetto Next.js.
- Implementazione della generazione di card vettoriali basata su testo.
- Integrazione di effetti Canvas e ASCII nei componenti React.
- Organizzazione dei token Tailwind in un singolo file CSS.
Il codice è concesso in licenza MIT, ma i contenuti testuali e le immagini sono protetti da copyright. Copiare gli articoli non è una buona idea, ma studiare l'architettura e applicare le idee nel tuo progetto è un'ottima strategia.
Progetti correlati