85 lines
2.2 KiB
Vue
85 lines
2.2 KiB
Vue
|
<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>
|