42 lines
1.3 KiB
Vue
42 lines
1.3 KiB
Vue
<script setup lang="ts">
|
|
const { data: article } = await useAsyncData("latest-article", async () => {
|
|
return queryCollection("articles").order("date", "DESC").first();
|
|
});
|
|
|
|
const date = useDateFormat(new Date(article.value?.date ?? ""), "Do of MMMM YYYY");
|
|
|
|
const excerpt = computed(() => {
|
|
if (!article.value) return "";
|
|
const text = article.value.description ?? article.value.body ?? "";
|
|
return text.slice(0, 150) + (text.length > 150 ? "..." : "");
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<UContainer
|
|
v-if="article"
|
|
class="p-4 sm:p-6 lg:p-8 max-w-3xl"
|
|
as="section"
|
|
>
|
|
<span class="text-sm text-gray-500 flex flex-row gap-1 items-center">
|
|
Latest article
|
|
</span>
|
|
|
|
<ULink :to="article.path" class="block mt-4">
|
|
<div class="flex gap-6 items-start flex-row-reverse">
|
|
<NuxtImg
|
|
v-if="article.coverImage?.url"
|
|
class="w-24 h-24 object-cover rounded-lg shrink-0"
|
|
:src="article.coverImage.url.replace('w=1287&h=600', 'w=300&h=300')"
|
|
:alt="article.title"
|
|
/>
|
|
<div class="flex flex-col gap-2">
|
|
<h3 class="font-semibold text-lg">{{ article.title }}</h3>
|
|
<p class="text-sm text-slate-600 dark:text-slate-400 line-clamp-3">{{ excerpt }}</p>
|
|
<time class="text-xs text-slate-500">{{ date }}</time>
|
|
</div>
|
|
</div>
|
|
</ULink>
|
|
</UContainer>
|
|
</template>
|