52 lines
1.4 KiB
Vue
52 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
import { formatDate } from "@vueuse/core";
|
|
|
|
definePageMeta({
|
|
layout: "content",
|
|
});
|
|
|
|
const articles = useAsyncData("articles", async () => {
|
|
return queryCollection("articles").order("date", "DESC").all();
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<UContainer v-motion-fade class="prose dark:prose-invert">
|
|
<h1>Articles</h1>
|
|
</UContainer>
|
|
|
|
<UContainer v-motion-fade :delay="500" class="grid grid-cols-12 gap-8">
|
|
<UCard
|
|
class="col-span-12 md:col-span-6"
|
|
:ui="{ body: { padding: '' } }"
|
|
v-for="article in articles.data.value"
|
|
>
|
|
<div class="grid gap-4 pb-4 md:pb-6">
|
|
<NuxtImg
|
|
class="rounded-t-lg cursor-pointer"
|
|
:src="article.coverImage.url"
|
|
@click="navigateTo(article.path)"
|
|
/>
|
|
<div class="w-full px-4 md:px-6">
|
|
<NuxtLink
|
|
:to="article.path"
|
|
class="font-semibold line-clamp-2 min-h-12"
|
|
>{{ article.title }}</NuxtLink
|
|
>
|
|
<div class="text-sm text-slate-500">
|
|
{{ formatDate(new Date(article.date), "Do of MMMM YYYY") }}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="w-full px-4 md:px-6">
|
|
<UButton variant="soft" color="gray" :to="article.path"
|
|
>Read article</UButton
|
|
>
|
|
</div>
|
|
</div>
|
|
</UCard>
|
|
</UContainer>
|
|
|
|
<Footer v-motion-fade :delay="500" />
|
|
</template>
|