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

2025-03-12 03:43:14 +06:00
parent 1aba5e18cc
commit beb5305d65
15 changed files with 2607 additions and 6080 deletions
--- a/pages/[...slug].vue
+++ b/pages/[...slug].vue
@@ -9,11 +9,11 @@ useHead({
  ],
 })

-defineOgImageComponent('About', {
-  headline: 'Wrong Path',
-  title: '404',
-  description: 'Page Not Found',
-})
+// defineOgImageComponent('About', {
+//   headline: 'Wrong Path',
+//   title: '404',
+//   description: 'Page Not Found',
+// })
 </script>

 <template>
--- a/pages/about.vue
+++ b/pages/about.vue
@@ -11,12 +11,12 @@ useHead({
  ],
 })

-defineOgImageComponent('About', {
-  headline: 'Greetings 👋',
-  title: navbarData.homeTitle,
-  description: 'Dive into web development with me and learn Js, Ts, Vue, Nuxt, Docker, k8s',
-  link: '/riyad.jpg',
-})
+// defineOgImageComponent('About', {
+//   headline: 'Greetings 👋',
+//   title: navbarData.homeTitle,
+//   description: 'Dive into web development with me and learn Js, Ts, Vue, Nuxt, Docker, k8s',
+//   link: '/riyad.jpg',
+// })
 </script>

 <template>
--- a/pages/blogs/[blog].vue
+++ b/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>
--- a/pages/blogs/index.vue
+++ b/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>
--- a/pages/categories/[category].vue
+++ b/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>
--- a/pages/categories/index.vue
+++ b/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>
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { navbarData } from '~/data'
+// import { navbarData } from '~/data'

 useHead({
  title: 'Home',
@@ -13,12 +13,12 @@ useHead({
 })

 // Generate OG Image
-defineOgImageComponent('About', {
-  headline: 'Greetings 👋',
-  title: navbarData.homeTitle,
-  description: 'Dive into web development with me and learn Js, Ts, Vue, Nuxt, Docker, k8s',
-  link: '/riyad.jpg',
-})
+// defineOgImageComponent('About', {
+//   headline: 'Greetings 👋',
+//   title: navbarData.homeTitle,
+//   description: 'Dive into web development with me and learn Js, Ts, Vue, Nuxt, Docker, k8s',
+//   link: '/riyad.jpg',
+// })
 </script>

 <template>