# How to build a blog index

A blog index is a list of posts with date, author, topic and reading time, built from an array. Here are the fields and the endpoint that feed it.

> Page: https://ui.eneawork.it/blog/come-costruire-un-indice-blog
> Markdown: https://ui.eneawork.it/blog/come-costruire-un-indice-blog.md

*2026-11-01*

Un indice di blog è una lista di articoli con data, autore, argomento e tempo di lettura, costruita da un array di dati. Non richiede un CMS: richiede campi stabili e un ordinamento.

Il catalogo EneUI conta 1.556 blocchi e 111.985 componenti da 1.472 librerie, letti da /api/stats il 1 novembre 2026. I blocchi con la categoria blog sono 8, da 2 delle 28 fonti, e tutti e otto dichiarano la licenza come see source; conteggio eseguito il 1 novembre 2026 su data/blocks.json, snapshot del 31 ottobre 2026. La misura riguarda la copertura del catalogo, non la qualità dei blocchi.

## I campi minimi di una voce

Cinque campi coprono una lista e una scheda articolo. Se ne aggiungi altri, aggiungili dopo aver reso obbligatori questi.

## Il comando

L'API del catalogo restituisce i blocchi blog in JSON, con licenza e dipendenze per voce.

curl "https://ui.eneawork.it/api/blocks/category/blog?limit=10"

La stessa forma serve per l'indice: una lista ordinata per data, con un limite e un cursore. Se il limite non è nella query, la pagina cresce finché il browser regge.

## Un esempio concreto: la lista

type Post = { slug: string; title: string; publishedAt: string; topic: string; minutes: number }; export function PostList({ posts }: { posts: Post[] }) { return ( {posts.map((post) => ( {post.title} {post.publishedAt.slice(0, 10)} {post.topic} · {post.minutes} min ))} ); }

La chiave è lo slug, non l'indice dell'array: se filtri o riordini, React riusa il nodo giusto. time con dateTime in formato ISO rende la data leggibile a un crawler, e i minuti arrivano già calcolati dal file, non dal render. La lista resta senza stato: cambia l'array, cambia il markup, e non c'è nessun valore da sincronizzare.

Il 1 novembre 2026 node scripts/validate-blog-quality.js conta 538 articoli indicizzati su questo sito. A dodici voci per pagina servono 45 pagine: la divisione è aritmetica, non una stima, e spiega perché il numero di pagina deve stare nell'URL invece che nello stato del componente.

## Tre record da guardare

Il blocco blogs di Cnippet, il blog7 di Shadcnblocks e la categoria blog mostrano tre densità diverse: elenco compatto, griglia con immagine, lista con autore.

## Ordinamento, paginazione, stato vuoto

Tre decisioni da prendere prima di scrivere il componente: l'ordine (data di pubblicazione), la paginazione (numero fisso per pagina) e lo stato vuoto (un messaggio, non una griglia vuota).

## La limitazione

Otto blocchi da due fonti dichiarano la licenza come see source: il catalogo non può dirti se puoi usarli in un prodotto commerciale. E nessuno degli otto risolve la paginazione: quella la scrivi tu.

## La regola di decisione

Una sola data decide l'ordine: publishedAt. Correggere un refuso non muove nulla; riscrivere un articolo e volerlo in cima significa cambiare publishedAt e lasciare lo slug fermo, così l'URL e i link esterni continuano a funzionare. La data di modifica resta nella scheda, fuori dall'ordinamento.

## L'errore da evitare

Calcolare il tempo di lettura sull'HTML grezzo: tag, attributi e blocchi di codice gonfiano il conteggio, e due articoli lunghi uguali ricevono tempi diversi. Togli i tag, conta le parole e dividi per 200 una volta sola, quando il file viene salvato; se lo ricalcoli in tre componenti, prima o poi i tre valori divergono.

Per il cursore usa lo slug dell'ultimo articolo, non un offset: un articolo pubblicato mentre l'utente scorre sposta tutte le posizioni e la pagina due mostra un duplicato. Lo slug resta stabile anche quando l'ordine cambia, e la query diventa ?after=slug.

## Dove continuare

Le sezioni per un magazine sono in blocchi per blog e magazine; i dati strutturati dell'articolo sono in come aggiungere schema markup; la classifica verificata è in migliori blog blocks 2026.

## FAQ

### Quali campi servono per l'indice di un blog?

Slug, titolo, sommario, data ISO, autore, argomento e tempo di lettura. Con questi sette campi costruisci sia la lista sia la scheda dell'articolo.

### Serve un CMS per un indice di blog?

No. Un array di oggetti in un file JSON basta fino a qualche centinaio di articoli. Il CMS serve quando più persone scrivono senza toccare il repository.

### Come ordino gli articoli nell'indice?

Per data di pubblicazione, dal più recente. Ordinare per data di modifica sposta gli articoli vecchi in cima ogni volta che correggi una virgola.

### Quanti articoli mostro per pagina?

Da dieci a venti. Sotto i dieci la paginazione è inutile, sopra i venti il tempo di caricamento si sente su mobile.

### Come calcolo il tempo di lettura?

Dividi il numero di parole per 200 e arrotonda per eccesso. È una stima, ma è coerente tra gli articoli perché nasce dallo stesso calcolo.