Add Nuxt frontend with blog index, article and category pages

The browser never talks to Strapi: pages call Nitro endpoints under server/api/, which are the only place Strapi queries are built. That keeps the Strapi URL internal to the Docker network and avoids CORS entirely. Article bodies are rendered from Markdown to HTML in the endpoint, so the content is server-rendered and crawlable, marked stays out of the client bundle, and the meta description is derived from the opening of the body. Pages carry canonical URLs, Open Graph tags and BlogPosting structured data, and handle empty, missing and failed states.
2026-08-25 11:42:17 +02:00
parent ec5976135f
commit a808f1010f
28 changed files with 10387 additions and 0 deletions
@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import type { ArticleSummary, Paginated, Category } from '#shared/types/blog'
+
+const route = useRoute()
+const slug = route.params.slug as string
+
+const page = computed(() => {
+  const value = Number(route.query.page)
+  return Number.isInteger(value) && value > 0 ? value : 1
+})
+
+const { data: category } = await useFetch<Category>(`/api/categories/${slug}`)
+
+if (!category.value) {
+  throw createError({ statusCode: 404, statusMessage: 'Categoria non trovata', fatal: true })
+}
+
+const { data, error } = await useFetch<Paginated<ArticleSummary>>('/api/articles', {
+  query: { page, category: slug },
+})
+
+const { public: config } = useRuntimeConfig()
+const canonical = computed(
+  () => `${config.siteUrl}/category/${slug}${page.value > 1 ? `?page=${page.value}` : ''}`
+)
+
+useSeoMeta({
+  title: `${category.value.name} — Articoli`,
+  description: `Tutti gli articoli nella categoria ${category.value.name}.`,
+  ogType: 'website',
+})
+
+useHead({ link: [{ rel: 'canonical', href: canonical }] })
+</script>
+
+<template>
+  <div>
+    <p class="breadcrumb muted">
+      <NuxtLink to="/blog">Articoli</NuxtLink>
+    </p>
+
+    <h1>{{ category?.name }}</h1>
+
+    <p v-if="error">Non è stato possibile caricare gli articoli. Riprova più tardi.</p>
+
+    <p v-else-if="!data?.items.length">Non ci sono articoli in questa categoria.</p>
+
+    <template v-else>
+      <ul class="card-grid">
+        <li v-for="article in data.items" :key="article.slug">
+          <ArticleCard :article="article" />
+        </li>
+      </ul>
+
+      <nav v-if="data.pageCount > 1" class="pagination" aria-label="Paginazione">
+        <NuxtLink v-if="data.page > 1" :to="{ query: { page: data.page - 1 } }" rel="prev">
+          Pagina precedente
+        </NuxtLink>
+        <span class="muted">Pagina {{ data.page }} di {{ data.pageCount }}</span>
+        <NuxtLink
+          v-if="data.page < data.pageCount"
+          :to="{ query: { page: data.page + 1 } }"
+          rel="next"
+        >
+          Pagina successiva
+        </NuxtLink>
+      </nav>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.breadcrumb {
+  font-size: 0.9rem;
+}
+
+.pagination {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1.5rem;
+  align-items: center;
+  margin-top: 3rem;
+}
+</style>