50 lines
1.5 KiB
Vue
50 lines
1.5 KiB
Vue
<script setup>
|
|
defineProps({
|
|
post: {
|
|
type: Object,
|
|
required: true
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<article class="post-card site-section site-panel-hover group">
|
|
<div class="post-card__body site-section-body flex gap-4">
|
|
<PostCardMedia
|
|
:to="post.to"
|
|
:title="post.title"
|
|
:featured-image="post.featuredImage"
|
|
:thumbnail-image="post.featuredImageThumbnail"
|
|
link-class="h-20 w-36 shrink-0"
|
|
aspect-class="h-full w-full"
|
|
/>
|
|
<div class="post-card__content min-w-0">
|
|
<h2 class="post-card__title text-base font-semibold leading-tight">
|
|
<NuxtLink class="post-card__title-link site-interactive hover:opacity-70" :to="post.to">
|
|
{{ post.title }}
|
|
</NuxtLink>
|
|
</h2>
|
|
<p
|
|
v-if="post.excerpt"
|
|
class="post-card__excerpt post-summary-clamp post-summary-clamp--two mt-2 text-sm leading-6 site-muted"
|
|
>
|
|
{{ post.excerpt }}
|
|
</p>
|
|
<p class="post-card__meta mt-2 text-xs site-muted">
|
|
{{ post.publishedAt }}<template v-if="post.tag"> / </template>
|
|
<NuxtLink
|
|
v-if="post.tag && post.tagSlug"
|
|
class="post-card__tag-link site-interactive hover:text-[var(--site-accent)]"
|
|
:to="`/tag/${post.tagSlug}`"
|
|
>
|
|
{{ post.tag }}
|
|
</NuxtLink>
|
|
<template v-else-if="post.tag">
|
|
{{ post.tag }}
|
|
</template>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</template>
|