From eebae0d01dcad50848254e03d07544bdbb61d34c Mon Sep 17 00:00:00 2001
From: Ben Schlegel <ben5.schlegel@gmail.com>
Date: Wed, 28 Aug 2024 23:11:24 +0200
Subject: [PATCH] feat: use icon.png for image generation

---
 quartz/util/socialImage.tsx | 34 +++++++++++++++++++++++++---------
 1 file changed, 25 insertions(+), 9 deletions(-)

diff --git a/quartz/util/socialImage.tsx b/quartz/util/socialImage.tsx
index 81a5e3182..9ff1d7e17 100644
--- a/quartz/util/socialImage.tsx
+++ b/quartz/util/socialImage.tsx
@@ -2,6 +2,7 @@ import { SatoriOptions } from "satori/wasm"
 import { GlobalConfiguration } from "../cfg"
 import { SocialImageOptions, UserOpts } from "./imageHelper"
 import { QuartzPluginData } from "../plugins/vfile"
+import { FullSlug, pathToRoot, joinSegments } from "./path"
 
 // This file contains the template of the default social image.
 
@@ -18,6 +19,9 @@ export const defaultImage: SocialImageOptions["imageStructure"] = (
   const useSmallerFont = title.length > fontBreakPoint
 
   const { colorScheme } = userOpts
+
+  // Setup to access image
+  const iconPath = `https://${cfg.baseUrl}/static/icon.png`
   return (
     <div
       style={{
@@ -43,18 +47,30 @@ export const defaultImage: SocialImageOptions["imageStructure"] = (
           paddingBottom: "2rem",
         }}
       >
-        <p
+        <div
           style={{
-            color: cfg.theme.colors[colorScheme].dark,
-            fontSize: useSmallerFont ? 70 : 82,
-            marginLeft: "4rem",
-            textAlign: "center",
-            marginRight: "4rem",
-            fontFamily: fonts[0].name,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            height: "100%",
+            width: "100%",
+            gap: "2rem",
           }}
         >
-          {title}
-        </p>
+          <img src={iconPath} width={200} height={200} />
+          <p
+            style={{
+              color: cfg.theme.colors[colorScheme].dark,
+              fontSize: useSmallerFont ? 70 : 82,
+              marginLeft: "4rem",
+              textAlign: "center",
+              marginRight: "4rem",
+              fontFamily: fonts[0].name,
+            }}
+          >
+            {title}
+          </p>
+        </div>
         <p
           style={{
             color: cfg.theme.colors[colorScheme].dark,