Migrate to nuxt content v3. Change articles layout.

pages/articles/index.vue

@@ -1,7 +1,13 @@
 <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>
@@ -9,19 +15,30 @@ definePageMeta({
     <h1>Articles</h1>
   </UContainer>
 
-  <UContainer
-    v-motion-fade
-    :delay="500"
-    class="flex flex-col md:gap-10 gap-5 !pt-0"
-  >
-    <ContentList :query="{ sort: [{ date: -1 }] }" v-slot="{ list }">
-      <div v-for="article in list" :key="article._path">
-        <ArticleListing
-          :article="article"
-          v-if="article._path?.startsWith('/articles')"
+  <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>
-    </ContentList>
+    </UCard>
   </UContainer>
 
   <Footer v-motion-fade :delay="500" />