From 5170ab49f274cd811ba1c5390ed46e95b1e9833d Mon Sep 17 00:00:00 2001
From: froQ <sayhola@froq.me>
Date: Thu, 15 Oct 2026 19:12:06 +0800
Subject: [PATCH] feat: draw page descriptions on og-layer v0.2.0 cards

---
 docs/app/composables/usePaperOgImage.ts | 11 ++++++++++-
 docs/nuxt.config.ts                     |  2 +-
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/docs/app/composables/usePaperOgImage.ts b/docs/app/composables/usePaperOgImage.ts
index 52b03db..9d3fbea 100644
--- a/docs/app/composables/usePaperOgImage.ts
+++ b/docs/app/composables/usePaperOgImage.ts
@@ -1,6 +1,6 @@
 import type { MaybeRefOrGetter } from 'vue'
 import type { ShareMetaInput } from './useShareMeta'
-import { shareTitle, SITE_NAME } from '~/utils/site'
+import { shareTitle, SITE_DESCRIPTION, SITE_NAME } from '~/utils/site'
 
 function cardTitle(value: string | undefined): string {
   const titled = shareTitle(value)
@@ -18,6 +18,10 @@ export function usePaperOgImage(
 
   defineOgImage('Paper', {
     title: () => title.value,
+    description: () => {
+      const raw = share.description == null ? undefined : toValue(share.description)
+      return (typeof raw === 'string' ? raw.trim() : '') || SITE_DESCRIPTION
+    },
     words: 0,
   }, {
     alt: () => title.value,
@@ -57,6 +61,7 @@ export function useContentOgImage(
   if (override.value === undefined) {
     defineOgImage(ogComponentName(current.value), {
       title: () => paperFields(current.value).title,
+      description: () => paperFields(current.value, SITE_DESCRIPTION).description,
       evergreen: () => paperFields(current.value).evergreen,
       created: () => paperFields(current.value).created,
       updated: () => paperFields(current.value).updated,
@@ -84,6 +89,10 @@ export function useCollectionIndexOgImage(
   if (!override.value) {
     defineOgImage('Paper', {
       title: () => cardTitle(toValue(share.title)),
+      description: () => {
+        const raw = share.description == null ? undefined : toValue(share.description)
+        return (typeof raw === 'string' ? raw.trim() : '') || SITE_DESCRIPTION
+      },
       words: 0,
     }, {
       alt: () => cardTitle(toValue(share.title)),
diff --git a/docs/nuxt.config.ts b/docs/nuxt.config.ts
index 0101fec..1f256d7 100644
--- a/docs/nuxt.config.ts
+++ b/docs/nuxt.config.ts
@@ -28,7 +28,7 @@ function componentRoutes(): string[] {
 
 export default defineNuxtConfig({
   extends: [
-    ['github:0froq/og-layer#v0.1.0', { install: true }],
+    ['github:0froq/og-layer#v0.2.0', { install: true }],
   ],
 
   compatibilityDate: '2026-09-19',