fix(seo): support og

AaronConlon · Jul 25, 2024 · ba561d1 · ba561d1
1 parent 9c681ae
commit ba561d1
Show file tree

Hide file tree

Showing 9 changed files with 70 additions and 2,121 deletions.
diff --git a/apps/v-next/components/query/index.tsx b/apps/v-next/components/query/index.tsx
@@ -178,7 +178,6 @@ export default function Query({ accessToken }: IQueryProps) {
                     accessToken={accessToken}
                     selectedRows={data.filter((i) => selectedRows.includes(i.id))}
                     onSuccess={() => {
-                      console.log('delete');
                       setSelectedRows([]);
                       refresh();
                     }}

diff --git a/apps/v-next/next.config.mjs b/apps/v-next/next.config.mjs
@@ -6,6 +6,11 @@ const nextConfig = {
         // github
         hostname: 'avatars.githubusercontent.com',
         protocol: 'https'
+      },
+      {
+        // image bed
+        hostname: 'de4965e.webp.li',
+        protocol: 'https'
       }
     ]
   }

diff --git a/apps/v-next/public/shandian.svg b/apps/v-next/public/shandian.svg
diff --git a/apps/v-next/src/app/action/page.tsx b/apps/v-next/src/app/action/page.tsx
@@ -20,8 +20,6 @@ export default async function Page() {
       })
     | null;
 
-  console.log('session:', session);
-
   if (session === null) {
     return (
       <div className="text-center py-48 flex flex-col gap-12 justify-center items-center">

diff --git a/apps/v-next/src/app/favicon.ico b/apps/v-next/src/app/favicon.ico
diff --git a/apps/v-next/src/app/layout.tsx b/apps/v-next/src/app/layout.tsx
@@ -28,21 +28,25 @@ export default function RootLayout({
   return (
     <html lang="en">
       <head>
-        <meta charSet="utf-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <link rel="icon" href="/shandian.svg" />
+        <link rel="shortcut icon" href={PROJECT.imgs.logo} />
       </head>
       <body className={`${roboto.className} flex flex-col min-h-screen w-full`}>
         <header className="flex justify-between max-w-full w-full md:w-[1200px] mx-auto py-4 px-8 xl:px-0 items-center">
           <Link href={'/'} className="flex items-center gap-4">
             <Image
-              src="/shandian.svg"
+              src={PROJECT.imgs.logo}
               alt="logo"
               width={64}
               height={64}
               className="hidden md:inline-block !rounded-full"
             />
-            <Image src="/shandian.svg" alt="logo" width={32} height={32} className="inline-block md:hidden" />
+            <Image
+              src={PROJECT.imgs.logo}
+              alt="logo"
+              width={32}
+              height={32}
+              className="inline-block md:hidden"
+            />
             <div className="fancy-text text-2xl xl:text-3xl font-semibold uppercase">Delete & Archive</div>
           </Link>
           <SignIn />

diff --git a/apps/v-next/src/app/opengraph-image.tsx b/apps/v-next/src/app/opengraph-image.tsx
@@ -0,0 +1,48 @@
+import { PROJECT } from '@shared/consts';
+import { ImageResponse } from 'next/og';
+export const alt = PROJECT.description;
+export const size = { width: 1200, height: 630 };
+export const contentType = 'image/png';
+
+export default function Image() {
+  return new ImageResponse(
+    (
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'center',
+          alignItems: 'end'
+        }}
+      >
+        <div
+          style={{
+            fontSize: 48,
+            background: 'white',
+            width: '100%',
+            height: '100%',
+            display: 'flex',
+            alignItems: 'center'
+          }}
+        >
+          {PROJECT.name}
+        </div>
+        <div
+          style={{
+            fontSize: 24,
+            background: 'white',
+            width: '100%',
+            height: '100%',
+            display: 'flex',
+            alignItems: 'center'
+          }}
+        >
+          {PROJECT.description}
+        </div>
+      </div>
+    ),
+    {
+      ...size
+    }
+  );
+}
diff --git a/apps/v-next/src/app/page.tsx b/apps/v-next/src/app/page.tsx
@@ -1,24 +1,17 @@
 import Description from '@@/components/Description';
 import SocialMediaShare from '@@/components/SocialMediaShare';
 import { PROJECT } from '@shared/consts';
-import Head from 'next/head';
 import Image from 'next/image';
 import Link from 'next/link';
 
+export const metadata = {
+  title: PROJECT.name,
+  description: PROJECT.description
+};
+
 export default function Home() {
   return (
     <main className="flex flex-col">
-      <Head>
-        <meta name="description" content={PROJECT.description} />
-        <meta property="og:title" content={PROJECT.name} />
-        <meta property="og:description" content={PROJECT.description} />
-        <meta property="og:image" content={PROJECT.ogImage} />
-        <meta name="twitter:card" content="summary" />
-        <meta name="twitter:title" content={PROJECT.name} />
-        <meta name="twitter:description" content={PROJECT.description} />
-        <meta name="twitter:image" content={PROJECT.ogImage} />
-        {/* 其他你想要添加的meta标签 */}
-      </Head>
       {/* Basic Info */}
       <div className="bg-gray-50 group">
         <div className="md:w-[1200px] max-w-[100vw] p-16 md:p-4 grid grid-cols-1 sm:grid-cols-[auto_420px] mx-auto items-center">

diff --git a/packages/consts/src/project/index.ts b/packages/consts/src/project/index.ts
@@ -25,4 +25,7 @@ export const PROJECT = {
       },
     ],
   },
+  imgs: {
+    logo: 'https://de4965e.webp.li/blog-images/2024/07/848247cc0d9004068bb1c069f6ef10ee.jpeg',
+  },
 };