davide
1247a2ca07
Blog and category archives now show a numbered page list (first, last, current +/-1, collapsing gaps into an ellipsis) instead of only previous/next — see shared/utils/pagination.ts's paginationRange(). Renders page links via NuxtLink's custom/v-slot API rather than letting it render its own <a>: RouterLink's built-in active-class/aria-current detection compares only the route's path, not its query string, so every ?page=N link was incorrectly marked as the current page. The language switch now shows both "Italiano / English" at all times, with the current one as plain non-interactive text and the other as a link, moved to the header's top-right corner instead of stacked under the logo.
62 lines
1.8 KiB
Vue
62 lines
1.8 KiB
Vue
<script setup lang="ts">
|
|
import type { ArticleSummary, Category, Paginated } from '#shared/types/blog'
|
|
import type { Locale } from '#shared/utils/locale'
|
|
import { STRINGS, interpolate } from '#shared/utils/i18n'
|
|
|
|
const props = defineProps<{ locale: Locale }>()
|
|
|
|
const strings = computed(() => STRINGS[props.locale])
|
|
|
|
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>(`/content/categories/${slug}`, {
|
|
key: `category-${slug}-${props.locale}`,
|
|
query: { lang: props.locale },
|
|
})
|
|
|
|
if (!category.value) {
|
|
throw createError({ statusCode: 404, statusMessage: 'Category not found', fatal: true })
|
|
}
|
|
|
|
const { data, error } = await useFetch<Paginated<ArticleSummary>>('/content/articles', {
|
|
key: () => `category-articles-${slug}-${props.locale}-${page.value}`,
|
|
query: { page, category: slug, lang: props.locale },
|
|
})
|
|
|
|
useSeo({
|
|
locale: props.locale,
|
|
path: `/category/${slug}`,
|
|
title: category.value.name,
|
|
description: interpolate(strings.value.category.metaDescription, { name: category.value.name }),
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<header class="page-header">
|
|
<p class="kicker">{{ strings.category.kicker }}</p>
|
|
<h1>{{ category?.name }}</h1>
|
|
</header>
|
|
|
|
<p v-if="error">{{ strings.category.loadError }}</p>
|
|
|
|
<p v-else-if="!data?.items.length">{{ strings.category.empty }}</p>
|
|
|
|
<template v-else>
|
|
<ul class="card-grid">
|
|
<li v-for="article in data.items" :key="article.slug">
|
|
<ArticleCard :article="article" :locale="locale" />
|
|
</li>
|
|
</ul>
|
|
|
|
<PaginationNav :page="data.page" :page-count="data.pageCount" :locale="locale" />
|
|
</template>
|
|
</div>
|
|
</template>
|