51e5d67576
- JournalPostCard: the title link is the card's only anchor; the image is no longer a link and the separate read-more link is gone; the whole card stays clickable through a CSS stretched link with the focus ring on the card; prop headingLevel (2 | 3, default 2) - related posts keep their h2 and render their cards at h3; JournalPostList passes headingLevel through - smoke checks headings=strict (one h1, no skipped level) and cardlinks=N on every fixture page; expectation files for postTitleTag forced to h1 and p (the documented two-h1 and no-h1 consequences) BREAKING CHANGE: .journal-post-card__more and the image link (.journal-post-card__image is now a div) are removed from post cards.
32 lines
1.6 KiB
Vue
32 lines
1.6 KiB
Vue
<script setup lang="ts">
|
|
// One post in a listing: image, title link, date and excerpt (UI-SPEC L5).
|
|
// The title link is the card's only anchor (D-80): the image is not a link
|
|
// and there is no separate "read more" link; the whole card is clickable
|
|
// through a CSS stretched link on the title (journal-base.css), with the
|
|
// focus ring on the card. Post links carry no rel. headingLevel is 2 in a
|
|
// listing and 3 under the related posts' own h2 (D-52).
|
|
import type { JournalPost } from '../../utils/types.ts'
|
|
import { formatJournalDate } from '../../utils/view.ts'
|
|
|
|
const props = withDefaults(defineProps<{ post: JournalPost; headingLevel?: 2 | 3 }>(), { headingLevel: 2 })
|
|
const { localeProperties } = useI18n()
|
|
const links = useJournalLinks()
|
|
const href = computed(() => links.postLink(props.post.slug))
|
|
const date = computed(() => formatJournalDate(props.post.published_at, localeProperties.value.language ?? 'en'))
|
|
const heading = computed(() => (props.headingLevel === 3 ? 'h3' : 'h2'))
|
|
</script>
|
|
|
|
<template>
|
|
<article class="journal-post-card">
|
|
<div v-if="post.featured_image_url" class="journal-post-card__image">
|
|
<JournalFeaturedImage :src="post.featured_image_url" :alt="post.title" />
|
|
</div>
|
|
<component :is="heading" class="journal-post-card__title">
|
|
<NuxtLink v-if="href" :to="href">{{ post.title }}</NuxtLink>
|
|
<template v-else>{{ post.title }}</template>
|
|
</component>
|
|
<time v-if="date" class="journal-post-card__date" :datetime="post.published_at ?? undefined">{{ date }}</time>
|
|
<p v-if="post.excerpt" class="journal-post-card__excerpt">{{ post.excerpt }}</p>
|
|
</article>
|
|
</template>
|