feat(site/blog): improve og style

qhanw · Mar 3, 2024 · f093908 · f093908
1 parent 412c57a
commit f093908
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 11 deletions.
diff --git a/site/blog/app/(web)/posts/[slug]/opengraph-image.tsx b/site/blog/app/(web)/posts/[slug]/opengraph-image.tsx
@@ -8,32 +8,50 @@ export const alt = "Qhan W";
 export const size = { width: 1200, height: 630 };
 export const contentType = "image/png";
 
+
+
+
+
+
 export default async function Image({ params }: { params: { slug: string } }) {
   const post = await getPostBySlug(params.slug);
 
+  // Font
+  // const sacramentoRegular = fetch(
+  //   new URL("./Sacramento-Regular.ttf", import.meta.url)
+  // ).then((res) => res.arrayBuffer());
+
   return new ImageResponse(
     (
       <div
         style={{
-          background: "white",
           width: "100%",
           height: "100%",
           display: "flex",
           alignItems: "center",
           justifyContent: "center",
           padding: 120,
+          // background:
+          //   "linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab)",
+
+          background: "linear-gradient(-45deg, #ee7752, #e73c7e)",
         }}
       >
         <div
           style={{
             display: "flex",
-            width: 128,
-            height: (128 * 62) / 64,
+            //  // width: 128,
+            //   height: (128 * 62) / 64,
+            flex: "1 1 20%",
+            justifyContent: "flex-end",
           }}
         >
           {/* source: @/public/images/icon.svg */}
-          <svg viewBox="0 0 64 62" style={{ width: "100%", height: "100%" }}>
-            <g fill="#f24a8e">
+          <svg
+            viewBox="0 0 64 62"
+            style={{ width: 128, height: (128 * 62) / 64 }}
+          >
+            <g fill="#fff">
               <path d="M36.7683498,-3.55271368e-15 C33.112546,2.33597685 32.207355,8.43579641 32.207355,8.43579641 C32.7066701,6.18741869 27.768999,-3.55271368e-15 27.768999,-3.55271368e-15 C23.4562017,2.99881029 19.8850771,6.18449872 19.6135198,13.6829844 C19.3419625,21.1814701 31.8773983,32.2394006 31.8773983,32.2394006 C33.6585806,19.683525 44.623072,14.0567407 44.623072,14.0567407 C46.138537,5.16542882 36.7683498,-3.55271368e-15 36.7683498,-3.55271368e-15 Z M34.6134112,20.994592 C34.6134112,20.994592 31.0510465,23.914563 31.5211618,31.0217726 C31.5211618,31.0217726 23.1788045,23.8999632 23.6372399,19.3068487 C23.6372399,19.3068487 25.2315441,12.719394 29.0742261,17.9957817 C29.0742261,17.9957817 32.2599145,13.7793435 35.0718466,17.4322273 C35.0835265,17.4293073 35.8310391,19.5900859 34.6134112,20.994592 L34.6134112,20.994592 Z" />
               <path d="M64,26.7509271 C60.6186735,24.0265941 54.5538936,25.0953035 54.5538936,25.0953035 C56.8460709,24.8587859 61.1501082,18.2158517 61.1501082,18.2158517 C56.9424299,15.0768828 52.7902311,12.7146262 45.5895824,14.8170054 C38.3889338,16.9193845 31.8657184,32.3368318 31.8657184,32.3368318 C44.3427548,30.0475745 53.1493875,38.670249 53.1493875,38.670249 C62.078659,37.2745029 64,26.7509271 64,26.7509271 Z M43.4025241,31.3557215 C43.4025241,31.3557215 39.5189626,28.8971059 32.911068,31.5980791 C32.911068,31.5980791 37.0253073,21.4307398 41.5308226,20.4204299 C41.5308226,20.4204299 48.2847157,19.8364356 44.4975132,25.1624629 C44.4975132,25.1624629 49.5081836,26.8502061 46.9298491,30.6753682 C46.9298491,30.6724483 45.125307,32.0652745 43.4054441,31.3557215 L43.4025241,31.3557215 Z" />
               <path d="M46.5978963,61.4314976 C48.2272402,57.4077775 45.4445078,51.912392 45.4445078,51.912392 C46.3350989,54.0381309 53.9416236,56.2310292 53.9416236,56.2310292 C55.7257259,51.2904381 56.7915153,46.6330843 52.688956,40.3522265 C48.5863966,34.0713687 31.9571614,32.3018663 31.9571614,32.3018663 C37.7620639,43.5817145 32.0622804,54.4936464 32.0622804,54.4936464 C35.9604417,62.6432856 46.5978963,61.4314976 46.5978963,61.4314976 Z M36.2261591,43.0531997 C36.2261591,43.0531997 37.452547,38.6236036 32.9557915,33.0814985 C32.9557915,33.0814985 43.8794033,34.0742887 46.1511408,38.0921689 C46.1511408,38.0921689 48.6564759,44.3876265 42.4719772,42.3056871 C42.4719772,42.3056871 42.3084588,47.5879148 37.9022225,46.2301283 C37.8934626,46.2301283 36.033441,44.9044614 36.2173992,43.0531997 L36.2261591,43.0531997 Z" />
@@ -44,24 +62,47 @@ export default async function Image({ params }: { params: { slug: string } }) {
         </div>
 
         <div
-          style={{ display: "flex", marginLeft: 60, flexDirection: "column" }}
+          style={{
+            display: "flex",
+            flex: "1 1 80%",
+            paddingLeft: 60,
+            flexDirection: "column",
+          }}
         >
           <div
             style={{
-              fontSize: 36,
+              fontSize: 40,
               fontWeight: "bold",
-              color: "rgba(156,163,175)",
+              // color: "rgba(156,163,175)",
               marginBottom: 16,
+              color: "#fff",
             }}
           >
             {alt}
           </div>
-          <div style={{ fontSize: 48, color: "rgba(75,85,99)" }}>
+          <div
+            style={{
+              fontSize: 48,
+              lineHeight: 1.12,
+              // color: "rgba(75,85,99)",
+              color: "#fff",
+            }}
+          >
             {post.meta.title}
           </div>
         </div>
       </div>
     ),
-    { ...size }
+    {
+      ...size,
+      // fonts: [
+      //   {
+      //     name: "Sacramento",
+      //     data: await sacramentoRegular,
+      //     style: "normal",
+      //     weight: 400,
+      //   },
+      // ],
+    }
   );
 }
diff --git a/site/blog/utils/seo.ts b/site/blog/utils/seo.ts
@@ -33,7 +33,7 @@ export default function seo({ description, title }: SeoProps): Metadata {
     },
     twitter: {
       card: "summary_large_image",
-      // site: siteMetadata.siteTitle,
+      site: siteMetadata.siteTitle,
       creator: siteMetadata?.social?.twitter,
       title: title,
       description: metaDescription,