Files
vue-journal-layer/app/components/Journal/CategoryHeader.vue
Jakub Zych c408eeb2ca feat: Journal list, category pages, pagination, tokens and pl/en strings
- 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
2026-10-09 18:02:48 +02:00

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>