feat: og

Signed-off-by: Innei <i@innei.in>

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

@@ -10,6 +10,7 @@ import { OnlyMobile } from '~/components/ui/viewport/OnlyMobile'
 import { CommentAreaRootLazy } from '~/components/widgets/comment'
 import { TocFAB } from '~/components/widgets/toc/TocFAB'
 import { attachUA } from '~/lib/attach-ua'
+import { getOgUrl } from '~/lib/helper.server'
 import { getSummaryFromMd } from '~/lib/markdown'
 import { getQueryClient } from '~/lib/query-client.server'
 import { CurrentPageDataProvider } from '~/providers/page/CurrentPageDataProvider'
@@ -33,15 +34,10 @@ export const generateMetadata = async ({
   try {
     attachUA()
     const data = await getQueryClient().fetchQuery(queries.page.bySlug(slug))
-    const { title, images, text } = data
+    const { title, text } = data
     const description = getSummaryFromMd(text ?? '')
 
-    const ogImage = images?.length
-      ? {
-          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-          url: images[0].src!,
-        }
-      : undefined
+    const ogImage = getOgUrl(title, '关于我')
     return {
       title,
       description,

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

@@ -8,6 +8,7 @@ import { NoteMainContainer } from '~/components/widgets/note/NoteMainContainer'
 import { TocFAB } from '~/components/widgets/toc/TocFAB'
 import { REQUEST_QUERY } from '~/constants/system'
 import { attachUA } from '~/lib/attach-ua'
+import { getOgUrl } from '~/lib/helper.server'
 import { getSummaryFromMd } from '~/lib/markdown'
 import { getQueryClient } from '~/lib/query-client.server'
 import {
@@ -18,7 +19,7 @@ import { CurrentNoteIdProvider } from '~/providers/note/CurrentNoteIdProvider'
 import { queries } from '~/queries/definition'
 
 import { Paper } from '../../../components/layout/container/Paper'
-import { Transition } from './Transtion'
+import { Transition } from './Transition'
 
 export const generateMetadata = async ({
   params,
@@ -32,26 +33,22 @@ export const generateMetadata = async ({
     const { data } = await getQueryClient().fetchQuery(
       queries.note.byNid(params.id),
     )
-    const { title, images, text } = data
+    const { title, text } = data
     const description = getSummaryFromMd(text ?? '')
 
-    const ogImage = images?.length
-      ? {
-          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-          url: images[0].src!,
-        }
-      : undefined
+    const ogUrl = getOgUrl(title, '生活记录')
+
     return {
       title,
       description,
       openGraph: {
         title,
         description,
-        images: ogImage,
+        images: ogUrl,
         type: 'article',
       },
       twitter: {
-        images: ogImage,
+        images: ogUrl,
         title,
         description,
         card: 'summary_large_image',

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

@@ -10,6 +10,7 @@ import { OnlyMobile } from '~/components/ui/viewport/OnlyMobile'
 import { CommentAreaRootLazy } from '~/components/widgets/comment'
 import { TocFAB } from '~/components/widgets/toc/TocFAB'
 import { attachUA } from '~/lib/attach-ua'
+import { getOgUrl } from '~/lib/helper.server'
 import { getSummaryFromMd } from '~/lib/markdown'
 import { getQueryClient } from '~/lib/query-client.server'
 import { CurrentPostDataProvider } from '~/providers/post/CurrentPostDataProvider'
@@ -27,15 +28,15 @@ export const generateMetadata = async ({
     const data = await getQueryClient().fetchQuery(
       queries.post.bySlug(category, slug),
     )
-    const { title, images, text } = data
+    const {
+      title,
+      category: { name },
+      text,
+    } = data
     const description = getSummaryFromMd(text ?? '')
 
-    const ogImage = images?.length
-      ? {
-          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-          url: images[0].src!,
-        }
-      : undefined
+    const ogImage = getOgUrl(title, name)
+
     return {
       title,
       description,

src/constants/system.ts

@@ -3,3 +3,5 @@ export const REQUEST_QUERY = 'request_query'
 
 export const REQUEST_GEO = 'request_geo'
 export const REQUEST_IP = 'request_ip'
+
+export const REQUEST_HOST = 'request_host'

src/lib/helper.server.ts

@@ -1,3 +1,9 @@
+import { headers } from 'next/dist/client/components/headers'
+
+import { REQUEST_HOST } from '~/constants/system'
+
+import { isDev } from './env'
+
 export function escapeXml(unsafe: string) {
   return unsafe.replace(/[<>&'"]/g, (c) => {
     switch (c) {
@@ -15,3 +21,17 @@ export function escapeXml(unsafe: string) {
     return c
   })
 }
+
+export const getHost = () => {
+  const header = headers()
+  const host = header.get(REQUEST_HOST)
+
+  return host
+}
+
+export const getOgUrl = (title: string, subtitle: string) => {
+  const ogUrl = new URL(`${isDev ? 'http' : 'https'}://${getHost()}/api/og`)
+  ogUrl.searchParams.set('title', title)
+  ogUrl.searchParams.set('subtitle', subtitle)
+  return ogUrl
+}

src/middleware.ts

@@ -5,6 +5,7 @@ import countries from '~/data/countries.json'
 
 import {
   REQUEST_GEO,
+  REQUEST_HOST,
   REQUEST_IP,
   REQUEST_PATHNAME,
   REQUEST_QUERY,
@@ -47,6 +48,7 @@ export default async function middleware(req: NextRequest) {
   requestHeaders.set(REQUEST_QUERY, search)
   requestHeaders.set(REQUEST_GEO, geo?.country || 'unknown')
   requestHeaders.set(REQUEST_IP, ip || '')
+  requestHeaders.set(REQUEST_HOST, headers.get('host') || '')
 
   const isApi = pathname.startsWith('/api/')
 

src/providers/root/script-inject-provider.tsx

@@ -21,7 +21,6 @@ export const ScriptInjectProvider = () => {
           delete nextProps[key]
         }
 
-        console.log(nextProps)
         return <Script key={props.src} {...nextProps} />
       })}
     </>