From 01c0b2fa8c9825ba718811132f5f10f811772349 Mon Sep 17 00:00:00 2001
From: Ben Schlegel <ben5.schlegel@gmail.com>
Date: Wed, 28 Aug 2024 22:24:38 +0200
Subject: [PATCH] feat: add new default image template

---
 quartz/util/socialImage.tsx  |  2 +
 quartz/util/socialImage2.tsx | 80 ++++++++++++++++++++++++++++++++++++
 2 files changed, 82 insertions(+)
 create mode 100644 quartz/util/socialImage2.tsx

diff --git a/quartz/util/socialImage.tsx b/quartz/util/socialImage.tsx
index 16315212a..81a5e3182 100644
--- a/quartz/util/socialImage.tsx
+++ b/quartz/util/socialImage.tsx
@@ -3,6 +3,8 @@ import { GlobalConfiguration } from "../cfg"
 import { SocialImageOptions, UserOpts } from "./imageHelper"
 import { QuartzPluginData } from "../plugins/vfile"
 
+// This file contains the template of the default social image.
+
 export const defaultImage: SocialImageOptions["imageStructure"] = (
   cfg: GlobalConfiguration,
   userOpts: UserOpts,
diff --git a/quartz/util/socialImage2.tsx b/quartz/util/socialImage2.tsx
new file mode 100644
index 000000000..16315212a
--- /dev/null
+++ b/quartz/util/socialImage2.tsx
@@ -0,0 +1,80 @@
+import { SatoriOptions } from "satori/wasm"
+import { GlobalConfiguration } from "../cfg"
+import { SocialImageOptions, UserOpts } from "./imageHelper"
+import { QuartzPluginData } from "../plugins/vfile"
+
+export const defaultImage: SocialImageOptions["imageStructure"] = (
+  cfg: GlobalConfiguration,
+  userOpts: UserOpts,
+  title: string,
+  description: string,
+  fonts: SatoriOptions["fonts"],
+  fileData: QuartzPluginData,
+) => {
+  // How many characters are allowed before switching to smaller font
+  const fontBreakPoint = 22
+  const useSmallerFont = title.length > fontBreakPoint
+
+  const { colorScheme } = userOpts
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "row",
+        justifyContent: "flex-start",
+        alignItems: "center",
+        height: "100%",
+        width: "100%",
+      }}
+    >
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          height: "100%",
+          width: "100%",
+          backgroundColor: cfg.theme.colors[colorScheme].light,
+          flexDirection: "column",
+          gap: "2.5rem",
+          paddingTop: "2rem",
+          paddingBottom: "2rem",
+        }}
+      >
+        <p
+          style={{
+            color: cfg.theme.colors[colorScheme].dark,
+            fontSize: useSmallerFont ? 70 : 82,
+            marginLeft: "4rem",
+            textAlign: "center",
+            marginRight: "4rem",
+            fontFamily: fonts[0].name,
+          }}
+        >
+          {title}
+        </p>
+        <p
+          style={{
+            color: cfg.theme.colors[colorScheme].dark,
+            fontSize: 44,
+            marginLeft: "8rem",
+            marginRight: "8rem",
+            lineClamp: 3,
+            fontFamily: fonts[1].name,
+          }}
+        >
+          {description}
+        </p>
+      </div>
+      <div
+        style={{
+          height: "100%",
+          width: "2vw",
+          position: "absolute",
+          backgroundColor: cfg.theme.colors[colorScheme].tertiary,
+          opacity: 0.85,
+        }}
+      />
+    </div>
+  )
+}