Update seo og image code

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

components/OgImage/Blog.vue

@@ -0,0 +1,110 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+// inherited attrs can mess up the satori parser
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = defineProps({
+  path: String,
+  title: {
+    type: String,
+    default: 'Og Image Template',
+  },
+  description: {
+    type: String,
+    default: 'Set a description to change me.',
+  },
+  background: {
+    type: String,
+    default: 'linear-gradient(to bottom, #dbf4ff, #fff1f1)',
+  },
+  color: {
+    type: String,
+  },
+  padding: {
+    type: String,
+    default: '0 50px',
+  },
+  titleFontSize: {
+    type: String,
+    default: '50px',
+  },
+  descriptionFontSize: {
+    type: String,
+    default: '35px',
+  },
+  icon: {
+    type: [String, Boolean],
+    default: 'logos:nuxt',
+  },
+  image: {
+    type: String,
+    required: false,
+  },
+  siteName: {
+    type: String,
+    required: false,
+  },
+  siteLogo: {
+    type: String,
+    required: false,
+  },
+  readingMins: {
+    type: Number,
+    required: false,
+  },
+})
+
+const titleAttrs = computed(() => {
+  const classes: Array<string> = []
+  const styles = {
+    fontWeight: 'bold',
+    marginBottom: '50px',
+    lineHeight: '70px',
+    fontSize: props.titleFontSize,
+  }
+  return { class: classes, style: styles }
+})
+
+const siteConfig = useSiteConfig()
+const siteName = computed(() => {
+  return props.siteName || siteConfig.name
+})
+</script>
+
+<template>
+  <div class="bg w-full flex flex-row z-10">
+    <div class="w-3/5" style="padding: 50px;">
+      <div class="flex flex-col h-full justify-between text-gray-100">
+        <div class="flex flex-row justify-between items-center">
+          <div class="flex flex-col">
+            <div v-bind="titleAttrs">
+              {{ title || 'Null Title' }}
+            </div>
+            <div class="text-2xl">
+              {{ props.description }}
+            </div>
+          </div>
+        </div>
+        <div class="text-white w-full flex flex-row">
+          <div style="font-size: 30px;" class="font-bold mt-2">
+            {{ siteName }}
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="w-2/5 flex items-center justify-center">
+      <img v-if="image" :src="image" style="object-fit: cover;" class="rounded-xl max-w-full h-full">
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.bg{
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  background: rgb(2,0,36);
+  background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(5,5,5,1) 62%, rgba(4,95,58,1) 100%);
+}
+</style>

nuxt.config.ts

@@ -17,6 +17,10 @@ export default defineNuxtConfig({
   },
   site: {
     url: 'https://blog.nurriyad.xyz',
+    identity: {
+      type: 'Person',
+    },
+    twitter: '@qdnvubp',
   },
 
   typescript: {
@@ -39,16 +43,17 @@ export default defineNuxtConfig({
   },
 
   modules: [
-    '@nuxt/content',
-    '@nuxtjs/tailwindcss',
     'nuxt-icon',
     '@nuxt/image',
+    '@vueuse/nuxt',
+    'nuxt-og-image',
+    '@nuxt/content',
     '@nuxtjs/robots',
+    '@nuxtseo/module',
     '@nuxtjs/fontaine',
     '@nuxtjs/color-mode',
     'nuxt-simple-sitemap',
-    'nuxt-og-image',
-    '@vueuse/nuxt',
+    '@nuxtjs/tailwindcss',
   ],
 
   content: {

package.json

@@ -18,6 +18,7 @@
     "@nuxtjs/fontaine": "^0.2.5",
     "@nuxtjs/robots": "^3.0.0",
     "@nuxtjs/tailwindcss": "^6.6.7",
+    "@nuxtseo/module": "^2.0.0-beta.15",
     "@tailwindcss/forms": "^0.5.4",
     "@tailwindcss/typography": "^0.5.9",
     "@vueuse/core": "^10.4.1",

pages/[...slug].vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-defineOgImageScreenshot()
+defineOgImage()
 </script>
 
 <template>

pages/about.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-defineOgImageScreenshot()
+defineOgImage()
 </script>
 
 <template>

pages/blogs/[blog].vue

@@ -76,7 +76,12 @@ useHead({
   ],
 })
 
-defineOgImageScreenshot()
+defineOgImage({
+  component: 'Blog',
+  image: data.value.image,
+  title: data.value.title,
+  description: data.value.description,
+})
 </script>
 
 <template>

pages/blogs/index.vue

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

pages/categories/[category].vue

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

pages/categories/index.vue

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

pages/index.vue

@@ -11,7 +11,11 @@ useHead({
   titleTemplate: 'Riyad\'s Blog - %s',
 })
 
-defineOgImageScreenshot()
+// a. Use the Composition API
+defineOgImage({
+  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',
+})
 </script>
 
 <template>