46 lines
1.9 KiB
Vue
46 lines
1.9 KiB
Vue
<script setup lang="ts">
|
|
// Date, reading time, categories and author of a post. Links go through
|
|
// route names, so a disabled view renders its label as plain text.
|
|
import type { JournalPost } from '../../utils/types.ts'
|
|
import { formatJournalDate } from '../../utils/view.ts'
|
|
|
|
const props = defineProps<{ post: JournalPost }>()
|
|
const { localeProperties } = useI18n()
|
|
const links = useJournalLinks()
|
|
|
|
const date = computed(() => formatJournalDate(props.post.published_at, localeProperties.value.language ?? 'en'))
|
|
const authorName = computed(() => {
|
|
const a = props.post.author
|
|
return a ? `${a.first_name} ${a.last_name}`.trim() || a.slug || a.login : ''
|
|
})
|
|
// By slug, so the link does not carry the login (often an email address).
|
|
// An API before sm-journal-plugin v0.3.1 sends no slug; the login still
|
|
// resolves there.
|
|
const authorHref = computed(() => {
|
|
const a = props.post.author
|
|
return a ? links.authorLink(a.slug || a.login) : null
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="journal-post-meta">
|
|
<time v-if="date" class="journal-post-meta__date" :datetime="post.published_at ?? undefined">
|
|
{{ $t('journal.post.publishedOn', { date }) }}
|
|
</time>
|
|
<span v-if="post.reading_time > 0" class="journal-post-meta__reading">
|
|
{{ $t('journal.post.readingTime', { minutes: post.reading_time }) }}
|
|
</span>
|
|
<span v-if="authorName" class="journal-post-meta__author">
|
|
{{ $t('journal.post.by') }}
|
|
<NuxtLink v-if="authorHref" :to="authorHref">{{ authorName }}</NuxtLink>
|
|
<template v-else>{{ authorName }}</template>
|
|
</span>
|
|
<ul v-if="post.categories.length" class="journal-post-meta__categories">
|
|
<li v-for="cat in post.categories" :key="cat.id">
|
|
<NuxtLink v-if="links.categoryLink(cat.slug)" :to="links.categoryLink(cat.slug)!">{{ cat.name }}</NuxtLink>
|
|
<span v-else>{{ cat.name }}</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</template>
|