Add latest article section to homepage and back to articles link

components/home/latest-article.vue

@@ -0,0 +1,41 @@
+<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>