Refactor OG image generation in various pages and update package dependencies

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>

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', {
-//   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>

pages/blogs/[blog].vue

@@ -80,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

@@ -75,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>

pages/categories/[category].vue

@@ -51,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

@@ -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>

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>