Files
vue-journal-layer/app/components/Journal/CategoryHeader.vue
Jakub Zych 98904b8fbd feat: breadcrumbs, CMS pagination and pillar content on page one
- 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)
2026-11-04 13:54:46 +01:00

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>