Update @nuxt/content to version 3.3.0 and refactor content queries

pages/categories/[category].vue

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import type { BlogPost } from '@/types/blog'
 const route = useRoute()
 
 // take category from route params & make first char upper
@@ -12,23 +13,29 @@ const category = computed(() => {
 })
 
 const { data } = await useAsyncData(`category-data-${category.value}`, () =>
-  queryContent('/blogs')
-    .where({ tags: { $contains: category.value } })
-    .find(),
+  queryCollection('content')
+    .all()
+    .then((articles) =>
+      articles.filter((article) => {
+        const meta = article.meta as unknown as BlogPost
+        return meta.tags.includes(category.value)
+      }),
+    ),
 )
 
 const formattedData = computed(() => {
   return data.value?.map((articles) => {
+    const meta = articles.meta as unknown as BlogPost
     return {
-      path: articles._path,
+      path: articles.path,
       title: articles.title || 'no-title available',
       description: articles.description || 'no-description available',
-      image: articles.image || '/blogs-img/blog.jpg',
-      alt: articles.alt || 'no alter data available',
-      ogImage: articles.ogImage || '/blogs-img/blog.jpg',
-      date: articles.date || 'not-date-available',
-      tags: articles.tags || [],
-      published: articles.published || false,
+      image: meta.image || '/blogs-img/blog.jpg',
+      alt: meta.alt || 'no alter data available',
+      ogImage: meta.ogImage || '/blogs-img/blog.jpg',
+      date: meta.date || 'not-date-available',
+      tags: meta.tags || [],
+      published: meta.published || false,
     }
   })
 })
@@ -44,14 +51,14 @@ useHead({
 })
 
 // Generate OG Image
-const siteData = useSiteConfig()
-defineOgImage({
-  props: {
-    title: category.value?.toUpperCase(),
-    description: `You will find all the ${category.value} related post here`,
-    siteName: siteData.url,
-  },
-})
+// const siteData = useSiteConfig()
+// defineOgImage({
+//   props: {
+//     title: category.value?.toUpperCase(),
+//     description: `You will find all the ${category.value} related post here`,
+//     siteName: siteData.url,
+//   },
+// })
 </script>
 
 <template>

pages/categories/index.vue

@@ -1,14 +1,14 @@
 <script lang="ts" setup>
 import { makeFirstCharUpper } from '@/utils/helper'
 
-const { data } = await useAsyncData('all-blog-post-for-category', () =>
-  queryContent('/blogs').sort({ _id: -1 }).find(),
+const { data } = await useAsyncData('all-blog-post-by-category', () =>
+  queryCollection('content').all(),
 )
 
 const allTags = new Map()
 
 data.value?.forEach((blog) => {
-  const tags: Array<string> = blog.tags || []
+  const tags: Array<string> = (blog.meta.tags as string[]) || []
   tags.forEach((tag) => {
     if (allTags.has(tag)) {
       const cnt = allTags.get(tag)
@@ -31,15 +31,15 @@ useHead({
 })
 
 // Generate OG Image
-const siteData = useSiteConfig()
-defineOgImage({
-  props: {
-    title: 'Categories',
-    description:
-      'Below All the topics are listed on which either I have written a blog or will write a blog in near future.',
-    siteName: siteData.url,
-  },
-})
+// const siteData = useSiteConfig()
+// defineOgImage({
+//   props: {
+//     title: 'Categories',
+//     description:
+//       'Below All the topics are listed on which either I have written a blog or will write a blog in near future.',
+//     siteName: siteData.url,
+//   },
+// })
 </script>
 
 <template>