Refactor OG image generation in various pages and update package dependencies

2025-03-13 03:11:33 +06:00
parent 510e265a7c
commit 23a1b0f8a9
11 changed files with 3031 additions and 513 deletions
--- a/content.config.ts
+++ b/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',
+      }),
+    }),
  },
 })
--- a/nuxt.config.ts
+++ b/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: {
-  //   strictNuxtContentPaths: true,
-  // },
+  sitemap: {
+    sources: [seoData.mySite],
+  },

-  // site: {
-  //   url: seoData.mySite,
-  //   identity: {
-  //     type: 'Person',
-  //   },
-  //   twitter: seoData.twitterHandle,
-  // },
+  site: {
+    url: seoData.mySite,
+    name: 'Al Asad Nur Riyad',
+  },

  typescript: {
    strict: true,
@@ -64,8 +61,7 @@ export default defineNuxtConfig({
    build: {
      markdown: {
        highlight: {
-          // Theme used in all color schemes.
-          theme: 'github-light',
+          theme: 'dracula',
        },
      },
    },
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/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/sitemap": "^5.3.2",
+    "@nuxtjs/robots": "^5.2.6",
+    "@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"
  }
 }
--- a/pages/[...slug].vue
+++ b/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>
--- a/pages/about.vue
+++ b/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>
--- a/pages/blogs/[blog].vue
+++ b/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>
--- a/pages/blogs/index.vue
+++ b/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>
--- a/pages/categories/[category].vue
+++ b/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>
--- a/pages/categories/index.vue
+++ b/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>
--- a/pages/index.vue
+++ b/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>