fix: og api

Author: Innei

src/app/(page-detail)/[slug]/layout.tsx

@@ -37,7 +37,10 @@ export const generateMetadata = async ({
     const { title, text } = data
     const description = getSummaryFromMd(text ?? '')
 
-    const ogImage = getOgUrl(title, '关于我')
+    const ogImage = getOgUrl('page', {
+      slug,
+    })
+
     return {
       title,
       description,

src/app/api/og/route.tsx

@@ -8,7 +8,7 @@ import { apiClient } from '~/lib/request'
 const fontNormal = fetch(
   'https://github.com/lxgw/LxgwWenKai/releases/download/v1.300/LXGWWenKai-Regular.ttf',
 ).then((res) => res.arrayBuffer())
-export const runtime = 'edge'
+// export const runtime = 'edge'
 
 export const revalidate = 60 * 60 * 24 // 24 hours
 export const GET = async (req: NextRequest) => {
@@ -17,8 +17,50 @@ export const GET = async (req: NextRequest) => {
 
     const { searchParams } = req.nextUrl
 
-    const titlePost = searchParams.get('title')
-    const subtitlePost = searchParams.get('subtitle') || ''
+    const dataString = searchParams.get('data') as string
+
+    let data:
+      | { type: 'post'; category: string; slug: string }
+      | { type: 'note'; nid: number }
+      | {
+          type: 'page'
+          slug: string
+        }
+
+    try {
+      data = JSON.parse(decodeURIComponent(dataString))
+    } catch {
+      return new Response('Failed to parse the data.', { status: 400 })
+    }
+
+    let document: { title: string; subtitle: string }
+
+    switch (data.type) {
+      case 'post': {
+        const { category, slug } = data
+        document = await apiClient.post
+          .getPost(category, slug)
+          .then((r) => ({ title: r.title, subtitle: r.category.name }))
+        break
+      }
+
+      case 'note': {
+        const { nid } = data
+        document = await apiClient.note
+          .getNoteById(+nid)
+          .then((r) => ({ title: r.data.title, subtitle: '生活记录' }))
+        break
+      }
+      case 'page': {
+        const { slug } = data
+        document = await apiClient.page.getBySlug(slug).then((data) => ({
+          title: data.title,
+          subtitle: data.subtitle || '',
+        }))
+        break
+      }
+    }
+    const { title, subtitle } = document
 
     const aggregation = await fetch(apiClient.aggregate.proxy.toString(true), {
       next: {
@@ -28,7 +70,7 @@ export const GET = async (req: NextRequest) => {
 
     const {
       user: { avatar },
-      seo: { title },
+      seo,
     } = aggregation
 
     if (!title)
@@ -37,17 +79,17 @@ export const GET = async (req: NextRequest) => {
         { status: 400 },
       )
 
-    const bgAccent = uniqolor(titlePost + subtitlePost, {
+    const bgAccent = uniqolor(title + subtitle, {
       saturation: [30, 35],
       lightness: [60, 70],
     }).color
 
-    const bgAccentLight = uniqolor(titlePost + subtitlePost, {
+    const bgAccentLight = uniqolor(title + subtitle, {
       saturation: [30, 35],
       lightness: [80, 90],
     }).color
 
-    const bgAccentUltraLight = uniqolor(titlePost + subtitlePost, {
+    const bgAccentUltraLight = uniqolor(title + subtitle, {
       saturation: [30, 35],
       lightness: [95, 96],
     }).color
@@ -96,7 +138,7 @@ export const GET = async (req: NextRequest) => {
                 fontSize: '2rem',
               }}
             >
-              <h3>{title}</h3>
+              <h3>{seo.title}</h3>
             </span>
           </div>
           <div
@@ -119,15 +161,15 @@ export const GET = async (req: NextRequest) => {
                 lineClamp: 1,
               }}
             >
-              {titlePost?.slice(0, 20)}
+              {title?.slice(0, 20)}
             </h1>
             <h2
               style={{
                 color: 'rgba(230, 230, 230, 0.85)',
                 fontSize: '3rem',
               }}
             >
-              {subtitlePost}
+              {subtitle}
             </h2>
           </div>
         </div>

src/app/notes/[id]/layout.tsx

@@ -37,7 +37,9 @@ export const generateMetadata = async ({
     const { title, text } = data
     const description = getSummaryFromMd(text ?? '')
 
-    const ogUrl = getOgUrl(title, '生活记录')
+    const ogUrl = getOgUrl('note', {
+      nid: params.id,
+    })
 
     return {
       title,

src/app/posts/(post-detail)/[category]/[slug]/layout.tsx

@@ -32,12 +32,15 @@ export const generateMetadata = async ({
     )
     const {
       title,
-      category: { name },
+      category: { slug: categorySlug },
       text,
     } = data
     const description = getSummaryFromMd(text ?? '')
 
-    const ogImage = getOgUrl(title, name)
+    const ogImage = getOgUrl('post', {
+      category: categorySlug,
+      slug,
+    })
 
     return {
       title,

src/lib/helper.server.ts

@@ -29,9 +29,16 @@ export const getHost = () => {
   return host
 }
 
-export const getOgUrl = (title: string, subtitle: string) => {
+export const getOgUrl = (type: 'post' | 'note' | 'page', data: any) => {
   const ogUrl = new URL(`${isDev ? 'http' : 'https'}://${getHost()}/api/og`)
-  ogUrl.searchParams.set('title', title)
-  ogUrl.searchParams.set('subtitle', subtitle)
+  ogUrl.searchParams.set(
+    'data',
+    encodeURIComponent(
+      JSON.stringify({
+        type,
+        ...data,
+      }),
+    ),
+  )
   return ogUrl
 }