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} />
  })}
  </>