Tweak og image

banga · Dec 27, 2023 · 0bf874b · 0bf874b
1 parent f69c034
commit 0bf874b
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 19 deletions.
diff --git a/src/components/opengraph/BlogPostOpenGraphImage.tsx b/src/components/opengraph/BlogPostOpenGraphImage.tsx
@@ -22,33 +22,39 @@ export function BlogPostOpenGraphImage({
     <div
       style={{
         fontFamily: fontFamily(400),
-        fontSize: 24,
         display: "flex",
         width: "100%",
         height: "100%",
         flexDirection: "column",
         flexWrap: "wrap",
-        alignItems: "center",
         justifyContent: "center",
         backgroundColor,
         color: textColor,
+        padding: "50px 100px",
+        lineHeight: 1.5,
+        gap: "15px",
       }}
     >
       <div
         style={{
           display: "flex",
-          flexDirection: "column",
-          margin: "60px",
-          lineHeight: 1.5,
+          flexDirection: "row",
+          fontFamily: fontFamily(600),
+          fontSize: 64,
         }}
       >
-        <div style={{ fontFamily: fontFamily(600), fontSize: 32 }}>
-          {post.title}
-        </div>
-        <div style={{ display: "flex", flexDirection: "row", gap: "10px" }}>
-          <div style={{ color: linkColor }}>{hostname}</div>•
-          <div>{renderDate(post.createdDate)}</div>
-        </div>
+        {post.title}
+      </div>
+      <div
+        style={{
+          fontSize: 32,
+          display: "flex",
+          flexDirection: "row",
+          gap: "15px",
+        }}
+      >
+        <div style={{ color: linkColor }}>{hostname}</div>•
+        <div>{renderDate(post.createdDate)}</div>
       </div>
     </div>
   );

diff --git a/src/lib/build.tsx b/src/lib/build.tsx
@@ -55,7 +55,9 @@ async function writeBlogPostOpenGraphImagesAsync(
 
       const imageBuffer = await generateOpenGraphImageAsync(
         // Can't use context provider here because `satori` can't handle it
-        <BlogPostOpenGraphImage post={post} baseUrl={buildContext.baseUrl} />
+        <BlogPostOpenGraphImage post={post} baseUrl={buildContext.baseUrl} />,
+        1200,
+        600
       );
       writeFile(openGraphImageOutputPath, imageBuffer);
     })

diff --git a/src/lib/opengraph-image.ts b/src/lib/opengraph-image.ts
@@ -23,13 +23,11 @@ export function fontFamily(weight: (typeof FONT_WEIGHTS)[number]): string {
 }
 
 export async function generateOpenGraphImageAsync(
-  element: ReactElement
+  element: ReactElement,
+  width: number,
+  height: number
 ): Promise<Buffer> {
-  const svg = await satori(element, {
-    width: 800,
-    height: 400,
-    fonts: FONTS,
-  });
+  const svg = await satori(element, { width, height, fonts: FONTS });
   const resvg = new Resvg(svg, {
     fitTo: { mode: "original" },
     font: { loadSystemFonts: false },