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.
67 lines
1.9 KiB
Vue
67 lines
1.9 KiB
Vue
<script setup lang="ts">
|
|
import type { ArticleSummary, Paginated } from '#shared/types/blog'
|
|
|
|
const route = useRoute()
|
|
|
|
const page = computed(() => {
|
|
const value = Number(route.query.page)
|
|
return Number.isInteger(value) && value > 0 ? value : 1
|
|
})
|
|
|
|
const { data, error, status } = await useFetch<Paginated<ArticleSummary>>('/api/articles', {
|
|
query: { page },
|
|
})
|
|
|
|
const { public: config } = useRuntimeConfig()
|
|
const canonical = computed(
|
|
() => `${config.siteUrl}${route.path}${page.value > 1 ? `?page=${page.value}` : ''}`
|
|
)
|
|
|
|
useSeoMeta({
|
|
title: () => (page.value > 1 ? `Articoli — pagina ${page.value}` : 'Articoli'),
|
|
description: 'Tutti gli articoli pubblicati sul blog.',
|
|
ogType: 'website',
|
|
})
|
|
|
|
useHead({ link: [{ rel: 'canonical', href: canonical }] })
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<header class="page-header">
|
|
<p class="kicker">L'archivio</p>
|
|
<h1>Articoli</h1>
|
|
</header>
|
|
|
|
<p v-if="error">Non è stato possibile caricare gli articoli. Riprova più tardi.</p>
|
|
|
|
<p v-else-if="status === 'pending'">Caricamento…</p>
|
|
|
|
<p v-else-if="!data?.items.length">Non è stato ancora pubblicato nulla.</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>
|