feat: og

Author: coderz-w

config/seo.ts

@@ -9,3 +9,7 @@ export const seo = {
       : 'http://localhost:3000',
   ),
 } as const;
+
+export const siteUrl = new URL(
+  process.env.NODE_ENV === 'production' ? 'https://blog-rbtb.vercel.app/' : 'http://localhost:3000',
+);

markdown/index.json

@@ -1,11 +1,11 @@
 [
-  {
+  { "authors": ["yy"],
     "path": "yyblog.md",
     "title": "yyblog",
     "tag": "技术/react",
     "coverImage": "https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/0b76076eab124179816d68b846280cdc~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgTWVnYXRyb25LaW5n:q75.awebp?rk3s=f64ab15b&x-expires=1731736114&x-signature=3ggdE9od5WvMZaVJ7VFlQtt48rA%3D"
   },
-  {
+  { "authors": ["yy"],
     "path": "react19.md",
     "title": "react19",
     "tag": "随笔/生活",

src/app/(app)/notes/[nid]/page.tsx

@@ -27,9 +27,31 @@ export const generateMetadata = async ({ params }: { params: any }): Promise<Met
     const postData = postDataMap[nid];
     const { title, summary } = postData;
 
+    const ogParams = new URLSearchParams();
+    ogParams.set('title', postData.title);
+    ogParams.set('tag', postData.tag);
+
     return {
+      authors: postData.authors?.map((author) => ({
+        name: author,
+      })),
+
       title: { absolute: title },
       description: summary,
+      alternates: { canonical: `/notes/${nid}` },
+      openGraph: {
+        authors: postData.authors,
+        title: postData.title,
+        description: postData.summary,
+        type: 'article',
+        url: `/notes/${nid}`,
+        images: [
+          {
+            url: `/api/og?${ogParams.toString()}`,
+            alt: postData.title,
+          },
+        ],
+      },
     } satisfies Metadata;
   } catch {
     return {};

src/app/api/og/router.tsx renamed to src/app/api/og/route.tsx

@@ -3,12 +3,9 @@ import { ImageResponseOptions, NextRequest } from 'next/server';
 import uniqolor from 'uniqolor';
 
 import { seo } from '~/index';
-import { buildPostData } from '@/core';
 
 export const runtime = 'edge';
 
-const { postDataMap } = buildPostData();
-
 const resOptions = {
   width: 1200,
   height: 600,
@@ -18,7 +15,8 @@ const resOptions = {
     ['cdn-cache-control', 'max-age=3600, stale-while-revalidate=600'],
   ]),
 } as ImageResponseOptions;
-const HomeOGImage = () => {
+
+const HomeOGImage = ({ img }: { img: ArrayBuffer }) => {
   const seed = Math.random().toString(36).substring(7);
   const bgAccent = uniqolor(seed, {
     saturation: [30, 35],
@@ -41,25 +39,21 @@ const HomeOGImage = () => {
         display: 'flex',
         height: '100%',
         width: '100%',
-
         background: `linear-gradient(37deg, ${bgAccent} 27.82%, ${bgAccentLight} 79.68%, ${bgAccentUltraLight} 100%)`,
-
         fontFamily: 'Noto Sans, Inter, "Material Icons"',
-
         padding: '80px 15rem',
         alignItems: 'center',
         justifyContent: 'space-between',
       }}
     >
       <img
-        src="/image/owner.jpg"
+        src={img as unknown as any}
         style={{
           borderRadius: '50%',
         }}
         height={256}
         width={256}
       />
-
       <div
         style={{
           display: 'flex',
@@ -97,36 +91,31 @@ const HomeOGImage = () => {
 };
 
 export const GET = async (req: NextRequest) => {
+  const imageData = await fetch(
+    new URL('../../../../public/image/owner.jpg', import.meta.url),
+  ).then((res) => res.arrayBuffer());
+
   try {
     const { searchParams } = req.nextUrl;
 
-    const dataString = searchParams.get('nid') as string;
+    const title = searchParams.get('title');
+    const tag = searchParams.get('tag');
 
-    if (!dataString) {
-      return new ImageResponse(<HomeOGImage />, resOptions);
+    if (!title || !tag) {
+      return new ImageResponse(<HomeOGImage img={imageData} />, resOptions);
     }
 
-    try {
-      if (!(dataString in postDataMap)) {
-        throw new Error('No such post');
-      }
-    } catch {
-      return new Response('Failed to parse the data.', { status: 400 });
-    }
-
-    const postName = postDataMap[dataString].title;
-
-    const bgAccent = uniqolor(postName, {
+    const bgAccent = uniqolor(title, {
       saturation: [30, 35],
       lightness: [60, 70],
     }).color;
 
-    const bgAccentLight = uniqolor(postName, {
+    const bgAccentLight = uniqolor(title, {
       saturation: [30, 35],
       lightness: [80, 90],
     }).color;
 
-    const bgAccentUltraLight = uniqolor(postName, {
+    const bgAccentUltraLight = uniqolor(title, {
       saturation: [30, 35],
       lightness: [95, 96],
     }).color;
@@ -138,11 +127,8 @@ export const GET = async (req: NextRequest) => {
             display: 'flex',
             height: '100%',
             width: '100%',
-
             background: `linear-gradient(37deg, ${bgAccent} 27.82%, ${bgAccentLight} 79.68%, ${bgAccentUltraLight} 100%)`,
-
             fontFamily: 'Inter, Noto Sans, Inter, "Material Icons"',
-
             padding: '80px',
             alignItems: 'flex-end',
             justifyContent: 'flex-end',
@@ -151,7 +137,6 @@ export const GET = async (req: NextRequest) => {
           <div
             style={{
               display: 'flex',
-
               position: 'absolute',
               left: '5rem',
               top: '5rem',
@@ -160,23 +145,13 @@ export const GET = async (req: NextRequest) => {
             }}
           >
             <img
-              src="/image/owner.jpg"
+              src={imageData as unknown as any}
               style={{
                 borderRadius: '50%',
               }}
               height={128}
               width={128}
             />
-
-            <span
-              style={{
-                marginLeft: '3rem',
-                color: '#ffffff99',
-                fontSize: '2rem',
-              }}
-            >
-              <h3>{seo.ogTitle}</h3>
-            </span>
           </div>
           <div
             style={{
@@ -187,7 +162,7 @@ export const GET = async (req: NextRequest) => {
               textAlign: 'right',
             }}
           >
-            <h1
+            <h2
               style={{
                 color: 'rgba(255, 255, 255, 0.92)',
                 fontSize: '50px',
@@ -196,17 +171,28 @@ export const GET = async (req: NextRequest) => {
                 fontWeight: 'bold',
               }}
             >
-              {postName}
-            </h1>
+              {title}
+            </h2>
             <h2
+              style={{
+                color: 'rgba(255, 255, 255, 0.92)',
+                fontSize: '42px',
+                overflow: 'hidden',
+                maxHeight: '150px',
+                fontWeight: 'bold',
+              }}
+            >
+              {tag}
+            </h2>
+            <h3
               style={{
                 color: 'rgba(255, 255, 255, 0.85)',
                 fontSize: '38px',
                 fontWeight: 'lighter',
               }}
             >
               {seo.word}
-            </h2>
+            </h3>
           </div>
         </div>
       ),

src/core/index.ts

@@ -5,6 +5,7 @@ import { symbolsTime, symbolsCount } from '@/lib/count';
 import { getFirstGitCommitTime, getLastGitUpdateTime } from '@/lib/git';
 
 export type PostItem = {
+  authors: string[];
   path: string;
   rawFilePath: string;
   text: string;
@@ -20,6 +21,7 @@ export type PostItem = {
 };
 
 export type PostJsonType = {
+  authors: string[];
   path: string;
   title: string;
   tag: string;
@@ -42,6 +44,7 @@ export function buildPostData() {
   function processPostItem(item: PostJsonType) {
     const itemInfo = {} as PostItem;
     const file = importMarkdownFile(`./${item.path}`);
+    itemInfo.authors = item.authors;
     itemInfo.title = item.title;
     itemInfo.tag = item.tag;
     itemInfo.path = item.path.replace('.md', '');

tsconfig.json

@@ -27,7 +27,7 @@
   "include": [
     "next-env.d.ts",
     "**/**/*.ts",
-    "**/*.tsx",
+    "**/**/*.tsx",
     "**/**/*.md",
     ".next/types/**/*.ts",
     "commitlint.config.mjs",