feat: bump @nuxt/content to v3

components/home/Socials.vue

@@ -16,7 +16,7 @@ const socialList = shallowRef<ISocial[]>([
   },
   {
     label: 'Bluesky',
-    link: 'https://bsky.app/profile/ntnyq.bsky.social',
+    link: 'https://bsky.app/profile/ntnyq.com',
     icon: 'i-ri:bluesky-fill',
     class: 'hover:bg-#0057a8',
   },

content.config.ts

@@ -0,0 +1,15 @@
+/**
+ * @file @nuxt/content config
+ * @see {@link https://content.nuxt.com}
+ */
+
+import { defineCollection, defineContentConfig } from '@nuxt/content'
+
+export default defineContentConfig({
+  collections: {
+    content: defineCollection({
+      source: '**/*.md',
+      type: 'page',
+    }),
+  },
+})

layouts/post.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="mx-auto max-w-[76ch] w-full p-4 prose">
+  <div class="mx-auto max-w-76ch w-full p-4 prose">
     <NuxtPage />
   </div>
 </template>

nuxt.config.ts

@@ -52,10 +52,14 @@ export default defineNuxtConfig({
    * @see {@link https://content.nuxt.com/get-started/configuration}
    */
   content: {
-    highlight: {
-      theme: {
-        dark: 'vitesse-dark',
-        default: 'vitesse-light',
+    build: {
+      markdown: {
+        highlight: {
+          theme: {
+            dark: 'vitesse-dark',
+            default: 'vitesse-light',
+          },
+        },
       },
     },
   },

package.json

@@ -19,14 +19,14 @@
     "typecheck": "nuxt typecheck"
   },
   "dependencies": {
-    "@nuxt/content": "^2.13.4",
+    "@nuxt/content": "^3.0.0",
     "@nuxt/image": "^1.9.0",
-    "@unocss/nuxt": "^65.4.0",
+    "@unocss/nuxt": "^65.4.2",
     "@vite-pwa/nuxt": "^0.10.6",
     "@vueuse/nuxt": "^12.4.0",
     "floating-vue": "^5.2.2",
     "medium-zoom": "^1.1.0",
-    "nuxt": "^3.15.1"
+    "nuxt": "^3.15.2"
   },
   "devDependencies": {
     "@iconify-json/fa-brands": "^1.2.1",
@@ -39,8 +39,8 @@
     "@nuxt-dev/medium-zoom": "^0.0.1",
     "@nuxt/eslint": "^0.7.5",
     "@types/prompts": "^2.4.9",
-    "@unocss/reset": "^65.4.0",
-    "bumpp": "^9.10.0",
+    "@unocss/reset": "^65.4.2",
+    "bumpp": "^9.10.1",
     "consola": "^3.4.0",
     "eslint": "^9.18.0",
     "husky": "^9.1.7",
@@ -50,7 +50,7 @@
     "prompts": "^2.4.2",
     "tsx": "^4.19.2",
     "typescript": "^5.7.3",
-    "unocss": "^65.4.0",
+    "unocss": "^65.4.2",
     "vue-tsc": "^2.2.0",
     "workbox-build": "^7.3.0"
   },

pages/[...slug].vue

@@ -2,11 +2,22 @@
 definePageMeta({
   layout: 'post',
 })
+
+const route = useRoute()
+
+const { data: page } = await useAsyncData(
+  route.path,
+  async () => await queryCollection('content').path(route.path).first(),
+)
 </script>
 
 <template>
   <div>
-    <ContentDoc />
+    <ContentRenderer
+      v-if="page"
+      :value="page"
+      prose
+    />
     <p class="py-4">
       <NuxtLink
         to="/posts"

pages/posts.vue

@@ -1,13 +1,19 @@
+<script lang="ts" setup>
+const route = useRoute()
+
+const { data: list } = await useAsyncData(
+  route.path,
+  async () => await queryCollection('content').all(),
+)
+</script>
+
 <template>
   <div class="mx-auto max-w-76ch w-full px-4 py-10">
-    <ContentList
-      v-slot="{ list }"
-      path="/posts"
-    >
+    <div class="relative">
       <NuxtLink
         v-for="post in list"
-        :key="post._id"
-        :to="post._path"
+        :key="post.id"
+        :to="post.path"
         class="mb-4 block border border-gray-200 rounded-md p-4 transition-colors hover:bg-gray-50"
       >
         <h2 class="mb-2 text-xl">
@@ -17,11 +23,7 @@
         <p class="text-gray-500">
           {{ post.description || 'No description' }}
         </p>
-
-        <p class="text-gray-500">
-          {{ post.date }}
-        </p>
       </NuxtLink>
-    </ContentList>
+    </div>
   </div>
 </template>