feat(seo): dynamic ogImage

Signed-off-by: ZTL-UwU <zhangtianli2006@163.com>

components/OgImage/OgImageDocs.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="flex size-full flex-col justify-center p-16">
+    <div class="mb-4 flex">
+      <img :src="config.header.logo.light" height="65">
+      <span class="ml-4 self-center text-4xl font-bold">
+        {{ config.site.name }}
+      </span>
+    </div>
+    <div class="relative">
+      <h1 class="text-8xl font-bold">
+        {{ title }}
+      </h1>
+      <p class="text-4xl leading-tight text-zinc-500">
+        {{ description }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  title: {
+    type: String,
+    required: true,
+  },
+  description: {
+    type: String,
+    required: true,
+  },
+});
+
+const config = useConfig().value;
+</script>

nuxt.config.ts

@@ -13,6 +13,7 @@ export default defineNuxtConfig({
     '@nuxt/image',
     '@nuxt/icon',
     '@nuxtjs/color-mode',
+    'nuxt-og-image',
   ],
   shadcn: {
     prefix: 'Ui',

package.json

@@ -45,20 +45,21 @@
     "lint:fix": "eslint . --fix"
   },
   "dependencies": {
-    "@iconify-json/lucide": "^1.2.7",
+    "@iconify-json/lucide": "^1.2.8",
     "@nuxt/content": "^2.13.2",
-    "@nuxt/icon": "^1.5.4",
+    "@nuxt/icon": "^1.5.5",
     "@nuxt/image": "^1.8.1",
     "@nuxtjs/color-mode": "^3.5.1",
     "@nuxtjs/tailwindcss": "^6.12.1",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "nuxt": "^3.13.2",
-    "radix-vue": "^1.9.6",
+    "nuxt-og-image": "^3.0.4",
+    "radix-vue": "^1.9.7",
     "shadcn-nuxt": "^0.10.4",
     "tailwind-merge": "^2.5.3",
     "tailwindcss-animate": "^1.0.7",
-    "typescript": "^5.6.2",
+    "typescript": "^5.6.3",
     "vue": "^3.5.11",
     "vue-router": "^4.4.5"
   },
@@ -68,8 +69,8 @@
     "@vueuse/core": "^11.1.0",
     "@vueuse/nuxt": "^11.1.0",
     "eslint": "^9.12.0",
-    "eslint-plugin-tailwindcss": "^3.17.4",
-    "shiki": "^1.21.1",
+    "eslint-plugin-tailwindcss": "^3.17.5",
+    "shiki": "^1.22.0",
     "vue-tsc": "^2.1.6"
   }
 }

pages/[...slug].vue

@@ -46,4 +46,9 @@ useSeoMeta({
   ogTitle: page.value?.title,
   description: page.value?.description,
 });
+
+defineOgImageComponent('Docs', {
+  title: page.value.title,
+  description: page.value.description,
+});
 </script>

pages/index.vue

@@ -18,5 +18,8 @@ useSeoMeta({
   title: `${page.value?.title ?? '404'} - ${config.value.site.name}`,
   ogTitle: page.value?.title,
   description: page.value?.description,
+  ogDescription: page.value?.description,
+  ogImage: config.value.site.ogImage,
+  twitterCard: 'summary_large_image',
 });
 </script>