- post, index, category, tag and author pages render <SeoBreadcrumbs> at the top of their content while journal.breadcrumbs is on (default); false leaves the trail to the site's layout, the BreadcrumbList data is unchanged - JournalPagination renders <SeoPagination class-prefix="journal-pagination"> with the journal's labels: the same class names, plus page 1, the last page, gap items, aria labels and head rel prev/next, with links in the CMS's pagination form - with vue-seo-layer's seo.pagination.form 'path' the module registers <listing>/<segment>/:page routes (journalPagedRoutes), and the listing pages read the page from the :page param or ?page (pageFromRoute) - the category pillar text renders on page 1 only, the description on every page; an h1 in it becomes h2 while the category row's content_h1_to_h2 is on (absent counts as on)
28 lines
1.4 KiB
Vue
28 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
// Heading of a category page: name, description and the category's rich
|
|
// content (the pillar text), which goes through the Journal sanitizer before
|
|
// v-html. The rich content renders on page 1 only, the description on every
|
|
// page (D-41). An h1 in it becomes h2 while the category row's
|
|
// content_h1_to_h2 is on (absent counts as on), as for post bodies. The page
|
|
// payload keeps embed placeholders; expandEmbeds turns them into iframes as
|
|
// the last step, after sanitizing, and its output is never sanitized again.
|
|
import type { JournalCategory } from '../../utils/types.ts'
|
|
import { expandEmbeds } from '../../utils/embeds.ts'
|
|
import { sanitizeJournalHtml } from '../../utils/htmlGate.ts'
|
|
|
|
const props = defineProps<{ category: JournalCategory; page?: number }>()
|
|
const content = computed(() =>
|
|
props.page && props.page > 1 ? '' : expandEmbeds(sanitizeJournalHtml(props.category.content, { demoteH1: props.category.content_h1_to_h2 !== false })),
|
|
)
|
|
</script>
|
|
|
|
<template>
|
|
<header class="journal-category-header">
|
|
<h1 class="journal-category-header__title">
|
|
{{ category.name }}<template v-if="page && page > 1"> · {{ $t('journal.pagination.pageTitle', { page }) }}</template>
|
|
</h1>
|
|
<p v-if="category.description" class="journal-category-header__description">{{ category.description }}</p>
|
|
<div v-if="content" class="journal-category-header__content journal-post-body" v-html="content" />
|
|
</header>
|
|
</template>
|