Blog

Un blog completo, senza CMS e senza database: articoli, categorie, pagine autore, meta tag e Schema Markup JSON-LD. Tutto il contenuto vive in un unico file TypeScript, quindi gli articoli sono JSX — puoi metterci componenti, immagini ottimizzate e blocchi di codice senza inventarti una pipeline markdown.

File

• app/blog/_assets/content.tsx — categorie, autori e articoli. È l'unico file che tocchi davvero.
• app/blog/page.tsx — indice: gli ultimi 6 articoli per data + la griglia delle categorie.
• app/blog/[articleId]/page.tsx — pagina articolo, con indice laterale, autore, JSON-LD e articoli correlati.
• app/blog/category/[categoryId]/page.tsx e app/blog/author/[authorId]/page.tsx — archivi generati dagli slug.
• app/blog/_assets/components/ — CardArticle, CardCategory, BadgeCategory, Avatar, HeaderBlog.

Uso base

Il blog è già una rotta: vai su /blog e c'è. Aggiungere un articolo vuol dire aggiungere un oggetto all'array articles.

export const articles: articleType[] = [
  {
    slug: "introducing-supabase",
    title: "Introducing Supabase to ZeroToShip",
    description: "Massimo 160 caratteri: finisce nella meta description.",
    categories: [
      categories.find((category) => category.slug === categorySlugs.feature),
    ],
    author: authors.find((author) => author.slug === authorSlugs.alberto),
    publishedAt: "2023-11-20",
    image: {
      src: introducingSupabaseImg,
      urlRelative: "/blog/introducing-supabase/header.jpg",
      alt: "Supabase and ZeroToShip logo combined",
    },
    content: (
      <>
        <h2 className={styles.h2}>Il titolo della sezione</h2>
        <p className={styles.p}>Il corpo dell'articolo.</p>
      </>
    ),
  },
];

Personalizzare

• Categorie: aggiungi una chiave a categorySlugs e poi l'oggetto corrispondente in categories. Servono title, titleShort (per i badge), description e descriptionShort. Da lì nasce la pagina /blog/category/<slug>.
• Autori: stessa logica con authorSlugs e authors. Ogni autore ha name, job, description, un avatar importato da app/blog/_assets/images/authors/ e un array socials costruito da socialIcons (Twitter, LinkedIn, GitHub già pronti).
• Stile del testo: l'oggetto styles in content.tsx definisce le classi di h2, h3, p, ul, li, code e codeInline. Cambi lì, cambiano tutti gli articoli insieme. Usa già headline-serif e i token --ink / --cream-2.
• Immagini: metti l'header in public/blog/<slug>/, importalo in cima al file e passalo sia come image.src (per le card, con placeholder="blur") sia come image.urlRelative (per Open Graph e JSON-LD).
• Look: le card usano .card-brutal e i badge .tag-brutal da app/globals.css, con l'hover che sposta l'ombra di 2px. Il layout del blog forza sfondo --cream e testo --ink.

Per il flusso completo, passo per passo, c'è il tutorial Scrivere un articolo del blog.