67 lines
1.3 KiB
Vue
67 lines
1.3 KiB
Vue
|
<script setup lang="ts">
|
||
|
|
import type { ArticleSummary } from '#shared/types/blog'
|
||
|
|
|
||
|
|
const props = defineProps<{ article: ArticleSummary }>()
|
||
|
|
|
||
|
|
const mediaUrl = useMediaUrl()
|
||
|
|
const cover = computed(() => mediaUrl(props.article.cover))
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<article class="card">
|
||
|
|
<img
|
||
|
|
v-if="cover"
|
||
|
|
class="cover"
|
||
|
|
:src="cover"
|
||
|
|
:alt="article.cover?.alternativeText ?? ''"
|
||
|
|
:width="article.cover?.width ?? undefined"
|
||
|
|
:height="article.cover?.height ?? undefined"
|
||
|
|
loading="lazy"
|
||
|
|
>
|
||
|
|
|
||
|
|
<p v-if="article.category" class="muted meta">
|
||
|
|
{{ article.category.name }}
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h2>
|
||
|
|
<NuxtLink :to="`/blog/${article.slug}`">{{ article.title }}</NuxtLink>
|
||
|
|
</h2>
|
||
|
|
|
||
|
|
<p class="muted meta">
|
||
|
|
<time :datetime="isoDate(article.publishedAt)">{{ formatDate(article.publishedAt) }}</time>
|
||
|
|
</p>
|
||
|
|
</article>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.card h2 {
|
||
|
|
margin: 0.35rem 0 0.5rem;
|
||
|
|
font-size: 1.2rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.card h2 a {
|
||
|
|
color: inherit;
|
||
|
|
text-decoration: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.card h2 a:hover {
|
||
|
|
text-decoration: underline;
|
||
|
|
}
|
||
|
|
|
||
|
|
.card p {
|
||
|
|
margin: 0 0 0.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cover {
|
||
|
|
width: 100%;
|
||
|
|
aspect-ratio: 16 / 9;
|
||
|
|
object-fit: cover;
|
||
|
|
border-radius: var(--radius);
|
||
|
|
background: var(--color-surface);
|
||
|
|
}
|
||
|
|
|
||
|
|
.meta {
|
||
|
|
font-size: 0.9rem;
|
||
|
|
}
|
||
|
|
</style>
|