Refactor OG image generation in various pages and update package dependencies

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>