From 5537cfb4c99d0bb0543d40c3e85f6f6cc6600c63 Mon Sep 17 00:00:00 2001 From: Innei Date: Wed, 12 Jul 2023 23:17:38 +0800 Subject: [PATCH] feat: og Signed-off-by: Innei --- src/app/(page-detail)/[slug]/layout.tsx | 10 +++------- .../[id]/{Transtion.tsx => Transition.tsx} | 0 src/app/notes/[id]/layout.tsx | 17 +++++++--------- .../[category]/[slug]/layout.tsx | 15 +++++++------- src/constants/system.ts | 2 ++ src/lib/helper.server.ts | 20 +++++++++++++++++++ src/middleware.ts | 2 ++ src/providers/root/script-inject-provider.tsx | 1 - 8 files changed, 42 insertions(+), 25 deletions(-) rename src/app/notes/[id]/{Transtion.tsx => Transition.tsx} (100%) diff --git a/src/app/(page-detail)/[slug]/layout.tsx b/src/app/(page-detail)/[slug]/layout.tsx index f85b616c06..be52900fa4 100644 --- a/src/app/(page-detail)/[slug]/layout.tsx +++ b/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, diff --git a/src/app/notes/[id]/Transtion.tsx b/src/app/notes/[id]/Transition.tsx similarity index 100% rename from src/app/notes/[id]/Transtion.tsx rename to src/app/notes/[id]/Transition.tsx diff --git a/src/app/notes/[id]/layout.tsx b/src/app/notes/[id]/layout.tsx index 762d568dac..a4cd6a258a 100644 --- a/src/app/notes/[id]/layout.tsx +++ b/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', diff --git a/src/app/posts/(post-detail)/[category]/[slug]/layout.tsx b/src/app/posts/(post-detail)/[category]/[slug]/layout.tsx index c027213acc..76ae399ab8 100644 --- a/src/app/posts/(post-detail)/[category]/[slug]/layout.tsx +++ b/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, diff --git a/src/constants/system.ts b/src/constants/system.ts index 18b5e9190b..24ffa465d7 100644 --- a/src/constants/system.ts +++ b/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' diff --git a/src/lib/helper.server.ts b/src/lib/helper.server.ts index 05adf0437b..9dbc77049c 100644 --- a/src/lib/helper.server.ts +++ b/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 +} diff --git a/src/middleware.ts b/src/middleware.ts index dc44111fab..2abdb5a470 100644 --- a/src/middleware.ts +++ b/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/') diff --git a/src/providers/root/script-inject-provider.tsx b/src/providers/root/script-inject-provider.tsx index 57a0ebc437..2f32ed4b08 100644 --- a/src/providers/root/script-inject-provider.tsx +++ b/src/providers/root/script-inject-provider.tsx @@ -21,7 +21,6 @@ export const ScriptInjectProvider = () => { delete nextProps[key] } - console.log(nextProps) return