46 lines
1.2 KiB
Vue
46 lines
1.2 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-6" v-for="article in articles.data.value">
|
|
<div class="grid gap-4">
|
|
<NuxtImg
|
|
class="rounded rounded-lg cursor-pointer"
|
|
:src="article.coverImage.url"
|
|
@click="navigateTo(article.path)"
|
|
/>
|
|
<div class="w-full">
|
|
<NuxtLink :to="article.path" class="font-semibold">{{
|
|
article.title
|
|
}}</NuxtLink>
|
|
<div class="text-sm text-slate-500">
|
|
{{ formatDate(new Date(article.date), "Do of MMMM YYYY") }}
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<UButton variant="soft" color="gray" :to="article.path"
|
|
>Read article</UButton
|
|
>
|
|
</div>
|
|
</div>
|
|
</UCard>
|
|
</UContainer>
|
|
|
|
<Footer v-motion-fade :delay="500" />
|
|
</template>
|