Migrate to nuxt content v3. Change articles layout.

pages/articles/[...slug].vue

@@ -6,53 +6,71 @@ definePageMeta({
 });
 
 const { path } = useRoute();
+
+const { data: article } = useAsyncData(path, async () => {
+  const article = await queryCollection("articles").path(path).first();
+
+  return article;
+});
 </script>
 
 <template>
-  <ContentDoc :path="path" v-slot="{ doc }">
-    <UContainer
-      v-motion-fade
-      class="flex flex-col gap-3 prose dark:prose-invert"
-      as="article"
-    >
-      <div class="text-sm text-slate-500">
-        {{ formatDate(new Date(doc.date), "Do of MMMM YYYY") }}
-      </div>
-      <h1>{{ doc.title }}</h1>
-    </UContainer>
+  <UContainer
+    v-motion-fade
+    class="flex flex-col gap-3 prose dark:prose-invert"
+    as="article"
+  >
+    <div class="text-sm text-slate-500">
+      {{ formatDate(new Date(article.date), "Do of MMMM YYYY") }}
+    </div>
+    <h1>{{ article.title }}</h1>
+  </UContainer>
 
-    <UContainer
-      class="hidden md:block"
-      as="figure"
-      v-if="doc.coverImage?.url"
-      v-motion-fade
-      :delay="500"
+  <UContainer
+    class="hidden md:block"
+    as="figure"
+    v-if="article.coverImage?.url"
+    v-motion-fade
+    :delay="500"
+  >
+    <NuxtImg
+      placeholder
+      :src="article.coverImage?.url ?? ''"
+      :alt="article.title"
+      height="1000"
+      width="1700"
+      class="rounded-lg"
+    />
+    <ULink
+      :to="article.coverImage.authorUrl"
+      target="_blank"
+      class="text-xs text-slate-500 italic font-serif hover:underline"
     >
-      <NuxtImg
-        placeholder
-        :src="doc.coverImage.url ?? ''"
-        :alt="doc.title"
-        height="1000"
-        width="1700"
-        class="rounded-lg"
-      />
-      <ULink
-        :to="doc.coverImage.authorUrl"
-        target="_blank"
-        class="text-xs text-slate-500 italic font-serif hover:underline"
-      >
-        Photo by {{ doc.coverImage.author }}
-      </ULink>
-    </UContainer>
-    <UContainer
-      v-motion-fade
-      :delay="500"
-      class="flex flex-col gap-3 prose dark:prose-invert !pt-0"
-      as="article"
-    >
-      <ContentRenderer :value="doc" />
-    </UContainer>
-  </ContentDoc>
+      Photo by {{ article.coverImage.author }}
+    </ULink>
+  </UContainer>
+
+  <UContainer
+    v-motion-fade
+    :delay="500"
+    class="flex flex-col gap-3 prose dark:prose-invert !pt-0"
+    as="article"
+  >
+    <ContentRenderer :value="article" />
+  </UContainer>
 
   <Footer v-motion-fade :delay="500" />
 </template>
+
+<style scoped>
+article.prose {
+  h2 {
+    font-weight: bold !important;
+
+    a {
+      font-weight: bold !important;
+    }
+  }
+}
+</style>
+s

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" />