Refactor OG image generation in various pages and update package dependencies

content.config.ts

@@ -1,10 +1,23 @@
-import { defineContentConfig, defineCollection } from '@nuxt/content'
+import { defineCollection, defineContentConfig } from '@nuxt/content'
+import { asRobotsCollection } from '@nuxtjs/robots/content'
+import { asSitemapCollection } from '@nuxtjs/sitemap/content'
+import { asOgImageCollection } from 'nuxt-og-image/content'
 
 export default defineContentConfig({
   collections: {
     content: defineCollection({
+      ...asRobotsCollection({
         type: 'page',
         source: '**/*.md',
       }),
+      ...asSitemapCollection({
+        type: 'page',
+        source: '**/*.md',
+      }),
+      ...asOgImageCollection({
+        type: 'page',
+        source: '**/*.md',
+      }),
+    }),
   },
 })

nuxt.config.ts

@@ -10,10 +10,10 @@ export default defineNuxtConfig({
     '@nuxt/fonts',
     '@nuxt/eslint',
     '@vueuse/nuxt',
+    '@nuxtjs/robots',
+    '@nuxtjs/sitemap',
+    'nuxt-og-image',
     '@nuxt/content',
-    // 'nuxt-og-image',
-    // '@nuxtjs/robots',
-    // '@nuxtjs/sitemap',
     '@nuxtjs/color-mode',
     '@nuxtjs/tailwindcss',
     '@formkit/auto-animate',
@@ -31,17 +31,14 @@ export default defineNuxtConfig({
     layoutTransition: { name: 'layout', mode: 'out-in' },
   },
 
-  // sitemap: {
+  sitemap: {
-  //   strictNuxtContentPaths: true,
+    sources: [seoData.mySite],
-  // },
+  },
 
-  // site: {
+  site: {
-  //   url: seoData.mySite,
+    url: seoData.mySite,
-  //   identity: {
+    name: 'Al Asad Nur Riyad',
-  //     type: 'Person',
+  },
-  //   },
-  //   twitter: seoData.twitterHandle,
-  // },
 
   typescript: {
     strict: true,
@@ -64,8 +61,7 @@ export default defineNuxtConfig({
     build: {
       markdown: {
         highlight: {
-          // Theme used in all color schemes.
+          theme: 'dracula',
-          theme: 'github-light',
         },
       },
     },

package.json

@@ -21,8 +21,8 @@
     "@nuxt/fonts": "^0.10.2",
     "@nuxt/image": "^1.8.0",
     "@nuxtjs/color-mode": "^3.3.2",
-    "@nuxtjs/robots": "^4.1.7",
+    "@nuxtjs/robots": "^5.2.6",
-    "@nuxtjs/sitemap": "^5.3.2",
+    "@nuxtjs/sitemap": "^7.2.7",
     "@nuxtjs/tailwindcss": "^6.11.4",
     "@stefanobartoletti/nuxt-social-share": "^0.6.1",
     "@tailwindcss/forms": "^0.5.7",
@@ -34,9 +34,13 @@
     "fuse.js": "^7.0.0",
     "nuxt": "^3.16.0",
     "nuxt-icon": "^0.6.8",
-    "nuxt-og-image": "^3.1.1",
+    "nuxt-og-image": "^5.0.2",
     "prettier": "^3.5.3",
     "typescript": "^5.8.2",
     "unenv": "^1.10.0"
+  },
+  "dependencies": {
+    "i": "^0.3.7",
+    "npm": "^10.9.2"
   }
 }

pages/[...slug].vue

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

pages/about.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { aboutPage, footerData, socialLinks } from '~/data'
+import { aboutPage, footerData, navbarData, socialLinks } from '~/data'
 
 useHead({
   title: 'About',
@@ -11,12 +11,12 @@ useHead({
   ],
 })
 
-// defineOgImageComponent('About', {
+defineOgImageComponent('About', {
-//   headline: 'Greetings 👋',
+  headline: 'Greetings 👋',
-//   title: navbarData.homeTitle,
+  title: navbarData.homeTitle,
-//   description: 'Dive into web development with me and learn Js, Ts, Vue, Nuxt, Docker, k8s',
+  description: 'Dive into web development with me and learn Js, Ts, Vue, Nuxt, Docker, k8s',
-//   link: '/riyad.jpg',
+  link: '/riyad.jpg',
-// })
+})
 </script>
 
 <template>

pages/blogs/[blog].vue

@@ -80,12 +80,12 @@ useHead({
 })
 
 // Generate OG Image
-// defineOgImageComponent('Test', {
+defineOgImageComponent('Test', {
-//   headline: 'Greetings 👋',
+  headline: 'Greetings 👋',
-//   title: data.value.title || '',
+  title: data.value.title || '',
-//   description: data.value.description || '',
+  description: data.value.description || '',
-//   link: data.value.ogImage,
+  link: data.value.ogImage,
-// })
+})
 </script>
 
 <template>

pages/blogs/index.vue

@@ -75,14 +75,14 @@ useHead({
 })
 
 // Generate OG Image
-// const siteData = useSiteConfig()
+const siteData = useSiteConfig()
-// defineOgImage({
+defineOgImage({
-//   props: {
+  props: {
-//     title: 'Archive',
+    title: 'Archive',
-//     description: 'Here you will find all the blog posts I have written & published on this site.',
+    description: 'Here you will find all the blog posts I have written & published on this site.',
-//     siteName: siteData.url,
+    siteName: siteData.url,
-//   },
+  },
-// })
+})
 </script>
 
 <template>

pages/categories/[category].vue

@@ -51,14 +51,14 @@ useHead({
 })
 
 // Generate OG Image
-// const siteData = useSiteConfig()
+const siteData = useSiteConfig()
-// defineOgImage({
+defineOgImage({
-//   props: {
+  props: {
-//     title: category.value?.toUpperCase(),
+    title: category.value?.toUpperCase(),
-//     description: `You will find all the ${category.value} related post here`,
+    description: `You will find all the ${category.value} related post here`,
-//     siteName: siteData.url,
+    siteName: siteData.url,
-//   },
+  },
-// })
+})
 </script>
 
 <template>

pages/categories/index.vue

@@ -31,15 +31,15 @@ useHead({
 })
 
 // Generate OG Image
-// const siteData = useSiteConfig()
+const siteData = useSiteConfig()
-// defineOgImage({
+defineOgImage({
-//   props: {
+  props: {
-//     title: 'Categories',
+    title: 'Categories',
-//     description:
+    description:
-//       'Below All the topics are listed on which either I have written a blog or will write a blog in near future.',
+      '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,
+    siteName: siteData.url,
-//   },
+  },
-// })
+})
 </script>
 
 <template>

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