642c25a0d0
The index, category, tag and author pages add an ItemList node (@id <page URL>#itemlist, a ListItem with the absolute URL of each post shown, positions continuing across pages) through vue-seo-layer's useSchemaNode, so the page keeps one JSON-LD script with one @graph (useJournalItemList, journalItemList).
51 lines
2.2 KiB
Vue
51 lines
2.2 KiB
Vue
<script setup lang="ts">
|
|
// journal-tag: posts with one tag, paginated with ?page=N. An unknown tag or
|
|
// an out-of-range page is a real 404.
|
|
import { pageFromRoute, pageOutOfRange } from '../utils/pagination.ts'
|
|
import { listTitle } from '../utils/seo.ts'
|
|
import { journalBreadcrumbsOn, toListPost } from '../utils/view.ts'
|
|
import type { JournalModuleOptions } from '../utils/types.ts'
|
|
|
|
definePageMeta({ key: (route) => route.fullPath })
|
|
|
|
const route = useRoute()
|
|
const api = useJournalApi()
|
|
const { t } = useI18n()
|
|
const cfg = useRuntimeConfig().public.journal as JournalModuleOptions
|
|
const slug = String(route.params.tag ?? '')
|
|
|
|
const page = pageFromRoute(route)
|
|
if (page === null) throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true })
|
|
|
|
const { data, error } = await useAsyncData(`journal-tag-${slug}-${page}`, async () => {
|
|
const tag = (await api.listTags()).find((row) => row.slug === slug)
|
|
if (!tag) return null
|
|
const posts = await api.listPosts({ tag: tag.slug, page, perPage: cfg.perPage.tag, sort: cfg.sort })
|
|
return { tag, posts: { ...posts, data: posts.data.map(toListPost) } }
|
|
})
|
|
if (error.value) {
|
|
throw createError({ statusCode: (error.value as { statusCode?: number }).statusCode ?? 500, fatal: true })
|
|
}
|
|
if (!data.value) throw createError({ statusCode: 404, statusMessage: 'Tag not found', fatal: true })
|
|
if (pageOutOfRange(page, data.value.posts.meta.last_page)) {
|
|
throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true })
|
|
}
|
|
|
|
const heading = t('journal.tag.title', { name: data.value.tag.name })
|
|
const title = listTitle(heading, page, t('journal.pagination.pageTitle', { page }))
|
|
useSeoMeta({ title, ogTitle: title })
|
|
const crumbs = journalBreadcrumbsOn(cfg.breadcrumbs)
|
|
useJournalItemList(() => data.value?.posts.data, () => data.value?.posts.meta)
|
|
</script>
|
|
|
|
<template>
|
|
<section v-if="data" class="journal-tag">
|
|
<SeoBreadcrumbs v-if="crumbs" />
|
|
<header class="journal-index-header">
|
|
<h1 class="journal-index-header__title">{{ title }}</h1>
|
|
</header>
|
|
<JournalPostList :posts="data.posts.data" :empty="$t('journal.tag.empty')" />
|
|
<JournalPagination :current="data.posts.meta.current_page" :last="data.posts.meta.last_page" />
|
|
</section>
|
|
</template>
|