chore: update to content v3

Author: HigherOrderLogic

.gitignore

@@ -88,6 +88,7 @@ web_modules/
 out
 
 # Nuxt.js build / generate output
+.data
 .nuxt
 .output
 dist

.yarn/releases/yarn-4.5.2.cjs

@@ -2,4 +2,4 @@ enableGlobalCache: true
 
 nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-4.5.2.cjs
+yarnPath: .yarn/releases/yarn-4.9.1.cjs

.yarn/releases/yarn-4.9.1.cjs

@@ -1,5 +1,5 @@
 <template>
-  <header class="block flex p-4">
+  <header class="block flex px-4 py-2">
     <nuxt-link to="/">
       <img
         src="https://github.com/HigherOrderLogic.png"

.yarnrc.yml

@@ -2,7 +2,7 @@
   <div class="font-normal font-[Inter_Variable] prose-neutral dark:prose-invert">
     <div>
       <navbar />
-      <div class="mx-a lt-md:px-4 md:prose" :class="[$style.dashed_link, $style.no_header_underline]">
+      <div class="mx-a lt-md:px-4 md:prose" :class="[$style.dashedLink, $style.noHeaderUnderline]">
         <slot />
         <div class="h-8" />
         <cd />
@@ -12,13 +12,13 @@
 </template>
 
 <style lang="scss" module>
-.dashed_link {
+.dashedLink {
   a {
-    --at-apply: 'underline-dashed hover:underline-solid'
+    --at-apply: 'underline-dashed underline-offset-2 hover:(underline-solid underline-offset-1.5)'
   }
 }
 
-.no_header_underline {
+.noHeaderUnderline {
   h1, h2, h3, h4, h5, h6 {
     a {
       --at-apply: 'no-underline'

app/components/navbar.vue

@@ -1,4 +1,6 @@
 <script lang="ts">
+import type { MinimalNode } from '@nuxt/content'
+
 const ContentNotFound = defineComponent({
   setup() {
     showError({
@@ -10,50 +12,40 @@ const ContentNotFound = defineComponent({
 </script>
 
 <script setup lang="ts">
-// eslint-disable-next-line import/first
-import type { MarkdownNode, ParsedContent } from '@nuxt/content'
-
-function parseNode(node: MarkdownNode): number {
+function getWordCount(nodesList: MinimalNode[]): number {
   let wordCount = 0
 
-  if (node.type === 'text' && node.value) {
-    wordCount += node.value.split(' ').length
-  }
-
-  for (const child of node.children ?? []) {
-    wordCount += parseNode(child)
+  for (const node of nodesList) {
+    if (Array.isArray(node)) {
+      const [content, _data, ...childNode] = node
+      wordCount += content.length + getWordCount(childNode)
+    } else {
+      wordCount += node.length
+    }
   }
 
   return wordCount
 }
 
-function getWordCount(parsedContent: ParsedContent): number {
-  let wordCount = 0
+const route = useRoute()
 
-  if (parsedContent.body) {
-    for (const child of parsedContent.body.children) {
-      wordCount += parseNode(child)
-    }
-  }
-
-  return wordCount
-}
+const { data: blog } = await useAsyncData(`blog-${route.path}`, () => queryCollection('blogs').path(route.path).first())
 </script>
 
 <template>
-  <content-doc>
-    <template #default="{ doc }">
+  <div>
+    <template v-if="blog">
       <div class="pb-4">
-        <h1>{{ doc.title }}</h1>
-        <p class="op-70 divide-x *:px-2 first:*:pl-0">
-          <span>{{ useDateFormat(doc.date, 'ddd, DD MMMM YYYY') }}</span>
-          <span>{{ getWordCount(doc) }} words</span>
+        <h1>{{ blog.title }}</h1>
+        <p class="op-70 divide-x *:pr-2 not-first:*:pl-2">
+          <span>{{ useDateFormat(blog.date, 'ddd, DD MMMM YYYY') }}</span>
+          <span>{{ getWordCount(blog.body.value) }} words</span>
         </p>
       </div>
-      <content-renderer :value="doc" />
+      <content-renderer :value="blog" />
     </template>
-    <template #not-found>
+    <template v-else>
       <content-not-found />
     </template>
-  </content-doc>
+  </div>
 </template>

app/layouts/default.vue

@@ -1,21 +1,24 @@
 <script setup lang="ts">
 useSeoMeta({ title: 'Blogs' })
+
+const { data: blogsList } = await useAsyncData('blogsList', () =>
+  queryCollection('blogs').select('id', 'path', 'title', 'date').order('date', 'DESC').all())
 </script>
 
 <template>
   <div>
     <h1 class="pb-4">
       Blogs
     </h1>
-    <content-list v-slot="{ list }" path="/blogs">
-      <div class="divide-y divide-gray divide-op-20 divide-dashed dark:(divide-zinc divide-op-25)">
+    <div class="divide-y divide-gray divide-op-20 divide-dashed dark:(divide-zinc divide-op-25)">
+      <template v-if="blogsList?.length">
         <template
-          v-for="blog in list.sort((a, b) => +new Date(b.date) - +new Date(a.date))"
-          :key="blog._path"
+          v-for="blog in blogsList"
+          :key="blog.id"
         >
           <div class="flex flex-col items-start py-2 md:flex-row">
             <h3 class="my-2 flex-auto md:m-a">
-              <nuxt-link :to="blog._path">
+              <nuxt-link :to="blog.path">
                 {{ blog.title }}
               </nuxt-link>
             </h3>
@@ -24,7 +27,12 @@ useSeoMeta({ title: 'Blogs' })
             </p>
           </div>
         </template>
-      </div>
-    </content-list>
+      </template>
+      <template v-else>
+        <div class="w-full text-center text-size-lg">
+          There is nothing here...
+        </div>
+      </template>
+    </div>
   </div>
 </template>

app/pages/blogs/[...slugs].vue

@@ -0,0 +1,13 @@
+import { defineCollection, defineContentConfig, z } from '@nuxt/content'
+
+export default defineContentConfig({
+  collections: {
+    blogs: defineCollection({
+      type: 'page',
+      source: 'blogs/**',
+      schema: z.object({
+        date: z.string(),
+      }),
+    }),
+  },
+})

app/pages/blogs/index.vue

@@ -33,6 +33,8 @@ export default defineNuxtConfig({
     },
   },
 
+  ssr: false,
+
   modules: [
     '@nuxt/content',
     '@nuxtjs/color-mode',
@@ -59,10 +61,11 @@ export default defineNuxtConfig({
   },
 
   pwa: {
+    devOptions: { enabled: true },
     registerType: 'autoUpdate',
     workbox: {
       navigateFallback: '/',
-      globPatterns: ['**/*.{js,css,html,woff2}', 'api/**/*.json'],
+      globPatterns: ['**/*.{js,css,html,woff2}'],
     },
     manifest: {
       background_color: '#FFF',
@@ -73,4 +76,6 @@ export default defineNuxtConfig({
       shortcuts: [{ name: 'Blogs', url: '/blogs' }],
     },
   },
+
+  compatibilityDate: '2025-04-24',
 })