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

pages/blogs/[blog].vue

@@ -5,21 +5,22 @@ import { navbarData, seoData } from '~/data'
 const { path } = useRoute()
 
 const { data: articles, error } = await useAsyncData(`blog-post-${path}`, () =>
-  queryContent(path).findOne(),
+  queryCollection('content').path(path).first(),
 )
 
 if (error.value) navigateTo('/404')
 
 const data = computed<BlogPost>(() => {
+  const meta = articles?.value?.meta as unknown as BlogPost
   return {
     title: articles.value?.title || 'no-title available',
     description: articles.value?.description || 'no-description available',
-    image: articles.value?.image || '/not-found.jpg',
-    alt: articles.value?.alt || 'no alter data available',
-    ogImage: articles.value?.ogImage || '/not-found.jpg',
-    date: articles.value?.date || 'not-date-available',
-    tags: articles.value?.tags || [],
-    published: articles.value?.published || false,
+    image: meta?.image || '/not-found.jpg',
+    alt: meta?.alt || 'no alter data available',
+    ogImage: meta?.ogImage || '/not-found.jpg',
+    date: meta?.date || 'not-date-available',
+    tags: meta?.tags || [],
+    published: meta?.published || false,
   }
 })
 
@@ -33,7 +34,7 @@ useHead({
     },
     // Test on: https://developers.facebook.com/tools/debug/ or https://socialsharepreview.com/
     { property: 'og:site_name', content: navbarData.homeTitle },
-    { hid: 'og:type', property: 'og:type', content: 'website' },
+    { 'http-equiv': 'og:type', property: 'og:type', content: 'website' },
     {
       property: 'og:url',
       content: `${seoData.mySite}/${path}`,
@@ -79,12 +80,12 @@ useHead({
 })
 
 // Generate OG Image
-defineOgImageComponent('Test', {
-  headline: 'Greetings 👋',
-  title: data.value.title || '',
-  description: data.value.description || '',
-  link: data.value.ogImage,
-})
+// defineOgImageComponent('Test', {
+//   headline: 'Greetings 👋',
+//   title: data.value.title || '',
+//   description: data.value.description || '',
+//   link: data.value.ogImage,
+// })
 </script>
 
 <template>

pages/blogs/index.vue

@@ -1,7 +1,8 @@
 <script lang="ts" setup>
 import Fuse from 'fuse.js'
+import type { BlogPost } from '~/types/blog'
 
-const { data } = await useAsyncData('home', () => queryContent('/blogs').sort({ _id: -1 }).find())
+const { data } = await useAsyncData('all-blog-post', () => queryCollection('content').all())
 
 const elementPerPage = ref(5)
 const pageNumber = ref(1)
@@ -10,16 +11,17 @@ const searchTest = ref('')
 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 || '/not-found.jpg',
-        alt: articles.alt || 'no alter data available',
-        ogImage: articles.ogImage || '/not-found.jpg',
-        date: articles.date || 'not-date-available',
-        tags: articles.tags || [],
-        published: articles.published || false,
+        image: meta.image || '/not-found.jpg',
+        alt: meta.alt || 'no alter data available',
+        ogImage: meta.ogImage || '/not-found.jpg',
+        date: meta.date || 'not-date-available',
+        tags: meta.tags || [],
+        published: meta.published || false,
       }
     }) || []
   )
@@ -73,14 +75,14 @@ useHead({
 })
 
 // Generate OG Image
-const siteData = useSiteConfig()
-defineOgImage({
-  props: {
-    title: 'Archive',
-    description: 'Here you will find all the blog posts I have written & published on this site.',
-    siteName: siteData.url,
-  },
-})
+// const siteData = useSiteConfig()
+// defineOgImage({
+//   props: {
+//     title: 'Archive',
+//     description: 'Here you will find all the blog posts I have written & published on this site.',
+//     siteName: siteData.url,
+//   },
+// })
 </script>
 
 <template>