feat: use icon.png for image generation

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,
+            display: "flex",
-            fontSize: useSmallerFont ? 70 : 82,
+            alignItems: "center",
-            marginLeft: "4rem",
+            justifyContent: "center",
-            textAlign: "center",
+            height: "100%",
-            marginRight: "4rem",
+            width: "100%",
-            fontFamily: fonts[0].name,
+            gap: "2rem",
           }}
         >
-          {title}
+          <img src={iconPath} width={200} height={200} />
-        </p>
+          <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,