68 lines
2.1 KiB
Vue
68 lines
2.1 KiB
Vue
|
<script setup lang="ts">
|
||
|
|
import type { ArticleSummary, 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 page = computed(() => {
|
||
|
|
const value = Number(route.query.page)
|
||
|
|
return Number.isInteger(value) && value > 0 ? value : 1
|
||
|
|
})
|
||
|
|
|
||
|
|
const { data, error, status } = await useFetch<Paginated<ArticleSummary>>('/content/articles', {
|
||
|
|
key: () => `blog-${props.locale}-${page.value}`,
|
||
|
|
query: { page, lang: props.locale },
|
||
|
|
})
|
||
|
|
|
||
|
|
useSeo({
|
||
|
|
locale: props.locale,
|
||
|
|
path: '/blog',
|
||
|
|
title: page.value > 1 ? interpolate(strings.value.blog.titlePage, { page: page.value }) : strings.value.blog.title,
|
||
|
|
description: strings.value.blog.metaDescription,
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div>
|
||
|
|
<header class="page-header">
|
||
|
|
<p class="kicker">{{ strings.blog.archiveKicker }}</p>
|
||
|
|
<h1>{{ strings.blog.title }}</h1>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<p v-if="error">{{ strings.blog.loadError }}</p>
|
||
|
|
|
||
|
|
<p v-else-if="status === 'pending'">{{ strings.blog.loading }}</p>
|
||
|
|
|
||
|
|
<p v-else-if="!data?.items.length">{{ strings.blog.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>
|
||
|
|
|
||
|
|
<nav v-if="data.pageCount > 1" class="pagination" :aria-label="strings.blog.paginationAriaLabel">
|
||
|
|
<NuxtLink v-if="data.page > 1" :to="{ query: { page: data.page - 1 } }" rel="prev">
|
||
|
|
{{ strings.blog.prevPage }}
|
||
|
|
</NuxtLink>
|
||
|
|
<span class="muted">
|
||
|
|
{{ interpolate(strings.blog.pageOf, { current: data.page, total: data.pageCount }) }}
|
||
|
|
</span>
|
||
|
|
<NuxtLink
|
||
|
|
v-if="data.page < data.pageCount"
|
||
|
|
:to="{ query: { page: data.page + 1 } }"
|
||
|
|
rel="next"
|
||
|
|
>
|
||
|
|
{{ strings.blog.nextPage }}
|
||
|
|
</NuxtLink>
|
||
|
|
</nav>
|
||
|
|
</template>
|
||
|
|
</div>
|
||
|
|
</template>
|