- index and category pages paginate with ?page=N and 404 out of range - category content renders above the list through the html gate - related posts fall back to the latest posts - --journal-* tokens and neutral base styles - pl/en strings registered only for locales the app enables
21 lines
1.1 KiB
Vue
21 lines
1.1 KiB
Vue
<script setup lang="ts">
|
|
// Heading of a category page: name, description and the category's rich
|
|
// content, which passes the Journal HTML gate before v-html.
|
|
import type { JournalCategory } from '../../utils/types.ts'
|
|
import { gateJournalHtml } from '../../utils/htmlGate.ts'
|
|
|
|
const props = defineProps<{ category: JournalCategory; page?: number; blocked?: boolean }>()
|
|
const content = computed(() => (props.blocked ? { safe: false, html: '' } : gateJournalHtml(props.category.content)))
|
|
</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.safe && content.html" class="journal-category-header__content journal-post-body" v-html="content.html" />
|
|
<p v-else-if="!content.safe" class="journal-post-body--blocked">{{ $t('journal.post.contentUnavailable') }}</p>
|
|
</header>
|
|
</template>
|