From 4380a7b29073cc22be8f416eca9af6e295705fc6 Mon Sep 17 00:00:00 2001
From: tanishqmanuja <tanishqmanuja@gmail.com>
Date: Wed, 20 Sep 2023 15:06:58 +0530
Subject: [PATCH] refactor: og templates

---
 src/utils/generateOgImages.tsx  | 98 +--------------------------------
 src/utils/og-templates/post.tsx | 95 ++++++++++++++++++++++++++++++++
 2 files changed, 97 insertions(+), 96 deletions(-)
 create mode 100644 src/utils/og-templates/post.tsx

diff --git a/src/utils/generateOgImages.tsx b/src/utils/generateOgImages.tsx
index 328ab38..61b5bc9 100644
--- a/src/utils/generateOgImages.tsx
+++ b/src/utils/generateOgImages.tsx
@@ -1,8 +1,8 @@
 import satori, { type SatoriOptions } from "satori";
-import { SITE } from "@config";
 import { writeFile } from "node:fs/promises";
 import { Resvg } from "@resvg/resvg-js";
 import { getCollection } from "astro:content";
+import postOgImage from "./og-templates/post";
 
 const fetchFonts = async () => {
   // Regular Font
@@ -22,100 +22,6 @@ const fetchFonts = async () => {
 
 const { fontRegular, fontBold } = await fetchFonts();
 
-const ogImage = (text: string) => {
-  return (
-    <div
-      style={{
-        background: "#fefbfb",
-        width: "100%",
-        height: "100%",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-      }}
-    >
-      <div
-        style={{
-          position: "absolute",
-          top: "-1px",
-          right: "-1px",
-          border: "4px solid #000",
-          background: "#ecebeb",
-          opacity: "0.9",
-          borderRadius: "4px",
-          display: "flex",
-          justifyContent: "center",
-          margin: "2.5rem",
-          width: "88%",
-          height: "80%",
-        }}
-      />
-
-      <div
-        style={{
-          border: "4px solid #000",
-          background: "#fefbfb",
-          borderRadius: "4px",
-          display: "flex",
-          justifyContent: "center",
-          margin: "2rem",
-          width: "88%",
-          height: "80%",
-        }}
-      >
-        <div
-          style={{
-            display: "flex",
-            flexDirection: "column",
-            justifyContent: "space-between",
-            margin: "20px",
-            width: "90%",
-            height: "90%",
-          }}
-        >
-          <p
-            style={{
-              fontSize: 72,
-              fontWeight: "bold",
-              maxHeight: "84%",
-              overflow: "hidden",
-            }}
-          >
-            {text}
-          </p>
-          <div
-            style={{
-              display: "flex",
-              justifyContent: "space-between",
-              width: "100%",
-              marginBottom: "8px",
-              fontSize: 28,
-            }}
-          >
-            <span>
-              by{" "}
-              <span
-                style={{
-                  color: "transparent",
-                }}
-              >
-                "
-              </span>
-              <span style={{ overflow: "hidden", fontWeight: "bold" }}>
-                {SITE.author}
-              </span>
-            </span>
-
-            <span style={{ overflow: "hidden", fontWeight: "bold" }}>
-              {SITE.title}
-            </span>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
 const options: SatoriOptions = {
   width: 1200,
   height: 630,
@@ -146,7 +52,7 @@ const generateOgImages = async () => {
   );
 
   const imageGenerationPromises = posts.map(async post => {
-    const svg = await satori(ogImage(post.data.title), options);
+    const svg = await satori(postOgImage(post.data.title), options);
 
     // render png in production mode
     if (import.meta.env.MODE === "production") {
diff --git a/src/utils/og-templates/post.tsx b/src/utils/og-templates/post.tsx
new file mode 100644
index 0000000..480645c
--- /dev/null
+++ b/src/utils/og-templates/post.tsx
@@ -0,0 +1,95 @@
+import { SITE } from "@config";
+
+export default (text: string) => {
+  return (
+    <div
+      style={{
+        background: "#fefbfb",
+        width: "100%",
+        height: "100%",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+      }}
+    >
+      <div
+        style={{
+          position: "absolute",
+          top: "-1px",
+          right: "-1px",
+          border: "4px solid #000",
+          background: "#ecebeb",
+          opacity: "0.9",
+          borderRadius: "4px",
+          display: "flex",
+          justifyContent: "center",
+          margin: "2.5rem",
+          width: "88%",
+          height: "80%",
+        }}
+      />
+
+      <div
+        style={{
+          border: "4px solid #000",
+          background: "#fefbfb",
+          borderRadius: "4px",
+          display: "flex",
+          justifyContent: "center",
+          margin: "2rem",
+          width: "88%",
+          height: "80%",
+        }}
+      >
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "space-between",
+            margin: "20px",
+            width: "90%",
+            height: "90%",
+          }}
+        >
+          <p
+            style={{
+              fontSize: 72,
+              fontWeight: "bold",
+              maxHeight: "84%",
+              overflow: "hidden",
+            }}
+          >
+            {text}
+          </p>
+          <div
+            style={{
+              display: "flex",
+              justifyContent: "space-between",
+              width: "100%",
+              marginBottom: "8px",
+              fontSize: 28,
+            }}
+          >
+            <span>
+              by{" "}
+              <span
+                style={{
+                  color: "transparent",
+                }}
+              >
+                "
+              </span>
+              <span style={{ overflow: "hidden", fontWeight: "bold" }}>
+                {SITE.author}
+              </span>
+            </span>
+
+            <span style={{ overflow: "hidden", fontWeight: "bold" }}>
+              {SITE.title}
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};