31 lines
1.2 KiB
Vue
31 lines
1.2 KiB
Vue
<script setup lang="ts">
|
|
import type { PostSummary } from '#shared/types';
|
|
|
|
defineProps<{ post: PostSummary }>();
|
|
</script>
|
|
|
|
<template>
|
|
<article class="card flex flex-col">
|
|
<div class="flex flex-wrap items-center gap-2">
|
|
<NuxtLink
|
|
v-for="tag in post.tags"
|
|
:key="tag.slug"
|
|
:to="`/tags/${tag.slug}`"
|
|
class="badge bg-brand-50 text-brand-700 dark:bg-brand-700/20 dark:text-brand-100"
|
|
>
|
|
{{ tag.name }}
|
|
</NuxtLink>
|
|
<UiBadge v-if="post.featured" tone="warning">{{ t('blog.featured') }}</UiBadge>
|
|
</div>
|
|
<h2 class="mt-3 text-lg font-semibold">
|
|
<NuxtLink :to="`/blog/${post.slug}`" class="hover:text-brand-600 dark:hover:text-brand-400">{{ post.title }}</NuxtLink>
|
|
</h2>
|
|
<p class="muted mt-2 flex-1 text-sm">{{ post.excerpt }}</p>
|
|
<p class="muted mt-4 text-xs">
|
|
<NuxtLink :to="`/authors/${post.author.slug}`" class="font-medium hover:opacity-80">{{ post.author.name }}</NuxtLink>
|
|
<template v-if="post.publishedAt"> · <time :datetime="new Date(post.publishedAt).toISOString()">{{ formatDate(post.publishedAt) }}</time></template>
|
|
· {{ post.readingMinutes }} {{ t('blog.minRead') }}
|
|
</p>
|
|
</article>
|
|
</template>
|