Update nuxt-og-image

Signed-off-by: nurRiyad <asadnurriyad@gmail.com>

pages/[...slug].vue

@@ -1,5 +1,9 @@
 <script setup lang="ts">
-defineOgImage()
+defineOgImageComponent('About', {
+  headline: 'Wrong Path',
+  title: '404',
+  description: 'Page Not Found',
+})
 </script>
 
 <template>

pages/about.vue

@@ -1,5 +1,10 @@
 <script setup lang="ts">
-defineOgImage()
+defineOgImageComponent('About', {
+  headline: 'Greetings 👋',
+  title: 'Riyad\'s Blog',
+  description: 'Dive into web development with me and learn Js, Ts, Vue, Nuxt, Docker, k8s',
+  link: '/riyad.jpg',
+})
 </script>
 
 <template>

pages/blogs/[blog].vue

@@ -76,9 +76,13 @@ useHead({
   ],
 })
 
-defineOgImage({
-  title: data.value.title,
-  description: data.value.description,
+// Generate OG Image
+defineOgImageComponent('Test', {
+  headline: 'Greetings 👋',
+  title: data.value.title || '',
+  description: data.value.description || '',
+  link: data.value.ogImage,
+
 })
 </script>
 

pages/blogs/index.vue

@@ -68,7 +68,15 @@ useHead({
   titleTemplate: 'Riyad\'s Blog - %s',
 })
 
-defineOgImage()
+// 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,
+  },
+})
 </script>
 
 <template>

pages/categories/[category].vue

@@ -45,7 +45,15 @@ useHead({
   titleTemplate: 'Riyad\'s Blog - %s',
 })
 
-defineOgImage()
+// 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,
+  },
+})
 </script>
 
 <template>

pages/categories/index.vue

@@ -30,7 +30,15 @@ useHead({
   titleTemplate: 'Riyad\'s Blog - %s',
 })
 
-defineOgImage()
+// 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,
+  },
+})
 </script>
 
 <template>

pages/index.vue

@@ -11,10 +11,12 @@ useHead({
   titleTemplate: 'Riyad\'s Blog - %s',
 })
 
-// a. Use the Composition API
-defineOgImage({
+// Generate OG Image
+defineOgImageComponent('About', {
+  headline: 'Greetings 👋',
   title: 'Riyad\'s Blog',
-  description: 'Welcome To My Blog Site. Get Web Development, Javascript, Typescript, NodeJs, Vue, and Nuxt, Related Articles, Tips, Learning resources and more',
+  description: 'Dive into web development with me and learn Js, Ts, Vue, Nuxt, Docker, k8s',
+  link: '/riyad.jpg',
 })
 </script>