feat(config): allow custom ogImage templates

Signed-off-by: ZTL-UwU <[email protected]>

app.config.ts

@@ -4,6 +4,7 @@ export default defineAppConfig({
       name: 'shadcn-docs',
       description: 'Beautifully designed Nuxt Content template built with shadcn-vue. Customizable. Compatible. Open Source.',
       ogImage: '/hero.png',
+      ogImageComponent: 'ShadcnDocs',
     },
     theme: {
       customizable: true,

composables/useConfig.ts

@@ -5,6 +5,7 @@ const defaultConfig: DefaultConfig = {
     name: 'shadcn-docs',
     description: 'Beautifully designed Nuxt Content template built with shadcn-vue. Customizable. Compatible. Open Source.',
     ogImage: '/hero.png',
+    ogImageComponent: 'ShadcnDocs',
   },
   theme: {
     customizable: true,

content/2.api/1.configuration/1.shadcn-docs.md

@@ -59,6 +59,9 @@ All configurable icons can be set to iconify icons, emojis and urls, using [smar
   ::field{name="ogImage" type="string"}
   The path to the Open Graph image.
   ::
+  ::field{name="ogImageComponent" type="string" default-value="ShadcnDocs"}
+  The component to use for the dynamic ogImage. Possible values: `ShadcnDocs`, `Nuxt`, `NuxtSeo` or your custom component name.
+  ::
 ::
 
 ## `theme`

content/2.api/1.configuration/3.og-image.md

@@ -0,0 +1,76 @@
+---
+title: OG Image
+description: Customizing the dynamic OG Image.
+icon: lucide:image
+---
+
+**shadcn-docs-nuxt** utilizes the [nuxt-og-image](https://nuxtseo.com/og-image/getting-started/installation) module to generate dynamic OG Images.
+
+The dynamic OG Image is used in all pages **except** the index page. The index page uses a static OG Image defined in the [`ogImage`](/api/configuration/shadcn-docs#site) field instead.
+
+## Using Built-in Templates
+
+To use a template, set the name of the OG Image component in the [`ogImageComponent`](/api/configuration/shadcn-docs#site).
+
+```ts [app.config.ts]
+export default defineAppConfig({
+  shadcnDocs: {
+    site: {
+      ogImageComponent: 'ShadcnDocs',
+    },
+  },
+});
+```
+
+Out of the box, a shadcn-docs-nuxt template and multiple community templates are available.
+
+| Component Name |                       Preview                        |
+| :------------: | :--------------------------------------------------: |
+|  `ShadcnDocs`  | ![Shadcn Docs OG Image Preview](/og-shadcn-docs.png) |
+|     `Nuxt`     |    ![Shadcn Docs OG Image Preview](/og-nuxt.png)     |
+|   `Nuxt SEO`   |  ![Shadcn Docs OG Image Preview](/og-nuxt-seo.png)   |
+
+::alert{to="https://github.com/nuxt-modules/og-image/tree/main/src/runtime/nuxt/components/Templates/Community" icon="lucide:list"}
+See the full list of community templates.
+::
+
+## Using Custom Templates
+
+To use a custom template, create a template by following the guide in the [Nuxt SEO Docs](https://nuxtseo.com/og-image/getting-started/getting-familar-with-nuxt-og-image#_1-create-your-template-component). Then set the component name of your template in `ogImageComponent`.
+
+::code-group
+```vue [components/OgImage/BlogPost.vue]
+<template>
+  <div class="flex size-full items-start justify-start border-[12px] border-solid border-blue-500 bg-gray-50">
+    <div class="flex h-full items-start justify-start">
+      <div class="flex size-full flex-col justify-between">
+        <h1 class="p-20 text-left text-[80px] font-black">
+          {{ title }}
+        </h1>
+        <p class="mb-0 px-20 pb-10 text-2xl font-bold">
+          mycoolsite.com
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+withDefaults(defineProps<{
+  title?: string;
+}>(), {
+  title: 'title',
+});
+</script>
+```
+
+```ts [app.config.ts]
+export default defineAppConfig({
+  shadcnDocs: {
+    site: {
+      ogImageComponent: 'BlogPost',
+    },
+  },
+});
+```
+::

pages/[...slug].vue

@@ -45,9 +45,11 @@ useSeoMeta({
   title: `${page.value?.title ?? '404'} - ${config.value.site.name}`,
   ogTitle: page.value?.title,
   description: page.value?.description,
+  ogDescription: page.value?.description,
+  twitterCard: 'summary_large_image',
 });
 
-defineOgImageComponent('Docs', {
+defineOgImageComponent(config.value.site.ogImageComponent, {
   title: page.value.title,
   description: page.value.description,
 });

types/index.d.ts

@@ -3,6 +3,7 @@ interface DefaultConfig {
     name: string;
     description: string;
     ogImage: string;
+    ogImageComponent: string;
   };
   theme: {
     customizable: boolean;