docs: og image for components (#3414)

docs/app/pages/[...slug].vue

@@ -72,9 +72,20 @@ useSeoMeta({
   ogDescription: page.value.description
 })
 
-defineOgImageComponent('Docs', {
-  headline: breadcrumb.value.map(item => item.label).join(' > ')
-})
+if (route.path.startsWith('/components')) {
+  defineOgImageComponent('OgImageComponent', {
+    title: page.value.title,
+    description: page.value.description,
+    component: (route.params.slug as string[]).pop() as string,
+    module: page.value.module
+  })
+} else {
+  defineOgImageComponent('Docs', {
+    headline: breadcrumb.value?.[breadcrumb.value.length - 1]?.label || 'Nuxt UI',
+    framework: page.value?.framework,
+    module: page.value.module
+  })
+}
 
 const communityLinks = computed(() => [{
   icon: 'i-lucide-file-pen',

docs/app/pages/components.vue

@@ -1,4 +1,8 @@
 <script setup lang="ts">
+import { joinURL } from 'ufo'
+
+const { url } = useSiteConfig()
+
 const title = 'Vue Components'
 const description = 'Explore 99+ customizable UI components for Vue and Nuxt built with Tailwind CSS and Reka UI.'
 
@@ -7,11 +11,8 @@ useSeoMeta({
   title,
   description,
   ogTitle: `${title} - Nuxt UI`,
-  ogDescription: description
-})
-
-defineOgImageComponent('Docs', {
-  headline: 'Documentation'
+  ogDescription: description,
+  ogImage: joinURL(url, '/og-image.png')
 })
 
 const { data: components } = await useAsyncData('components', () => {

docs/app/pages/pro/activate.vue

@@ -72,7 +72,6 @@ onMounted(() => {
   <UMain>
     <UPageHero headline="License Activation" :title="title" :description="description" :ui="{ container: 'relative' }">
       <template #top>
-        <div class="absolute z-[-1] rounded-full bg-(--ui-primary) blur-[300px] size-60 sm:size-80 transform -translate-x-1/2 left-1/2 -translate-y-80" />
         <StarsBg />
       </template>
       <div aria-hidden="true" class="hidden lg:block absolute z-[-1] border-x border-(--ui-border) inset-0 mx-4 sm:mx-6 lg:mx-8" />

docs/app/pages/pro/templates.vue

@@ -41,7 +41,7 @@ useSeoMeta({
     class="lg:border-t border-(--ui-border)"
     :ui="{
       title: 'lg:text-4xl',
-      wrapper: 'lg:py-16 lg:border-r border-(--ui-border) order-last',
+      wrapper: 'lg:py-16 lg:border-r border-(--ui-border) order-last lg:pr-16',
       container: 'lg:py-0'
     }"
   >