davide
809b60d85e
The interface was translated in en/it/es/fr via @nuxtjs/i18n. Drop the module, the locale files, and the language switcher: the UI is now static Italian text, with translation for foreign visitors left to the Google Translate browser extension instead of the app.
72 lines
2.0 KiB
Vue
72 lines
2.0 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: 'Category not found', fatal: true })
|
|
}
|
|
|
|
const { data, error } = await useFetch<Paginated<ArticleSummary>>('/api/articles', {
|
|
query: { page, category: slug },
|
|
})
|
|
|
|
const { public: config } = useRuntimeConfig()
|
|
const canonical = computed(
|
|
() => `${config.siteUrl}${route.path}${page.value > 1 ? `?page=${page.value}` : ''}`
|
|
)
|
|
|
|
useSeoMeta({
|
|
title: category.value.name,
|
|
description: () => `Tutti gli articoli nella categoria ${category.value?.name ?? ''}.`,
|
|
ogType: 'website',
|
|
})
|
|
|
|
useHead({ link: [{ rel: 'canonical', href: canonical }] })
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<header class="page-header">
|
|
<p class="kicker">Categoria</p>
|
|
<h1>{{ category?.name }}</h1>
|
|
</header>
|
|
|
|
<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>
|