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