diff --git a/quartz/components/Head.tsx b/quartz/components/Head.tsx
index 788e656b8..359187c03 100644
--- a/quartz/components/Head.tsx
+++ b/quartz/components/Head.tsx
@@ -21,6 +21,7 @@ async function generateSocialImage(
fileName: string,
fontName: string,
cfg: GlobalConfiguration,
+ colorScheme: "lightMode" | "darkMode",
) {
const font = (await getTtfFromGfont(fontName)) as ArrayBuffer
const svg = await satori(
@@ -41,14 +42,14 @@ async function generateSocialImage(
justifyContent: "center",
height: "100%",
width: "100%",
- backgroundColor: cfg.theme.colors.lightMode.light,
+ backgroundColor: cfg.theme.colors[colorScheme].light,
flexDirection: "column",
gap: "2.5rem",
}}
>
@@ -56,7 +57,7 @@ async function generateSocialImage(
,
@@ -118,7 +120,14 @@ export default (() => {
const title = fileData.frontmatter?.title ?? "Untitled"
const description = fileData.description?.trim() ?? "No description provided"
- generateSocialImage(title, description, filePath as string, cfg.theme.typography.header, cfg)
+ generateSocialImage(
+ title,
+ description,
+ filePath as string,
+ cfg.theme.typography.header,
+ cfg,
+ "lightMode",
+ )
if (!fs.existsSync(imageDir)) {
fs.mkdirSync(imageDir, { recursive: true })
@@ -132,7 +141,10 @@ export default (() => {
const iconPath = joinSegments(baseDir, "static/icon.png")
// TODO: use default image if undefined
const ogImageDefaultPath = `https://${cfg.baseUrl}/static/og-image.png`
- const ogImagePath = `https://${cfg.baseUrl}/static/${filePath}.${extension}`
+ const ogImagePath = `https://${cfg.baseUrl}/${imageDir.replace(
+ "public/",
+ "",
+ )}/${filePath}.${extension}`
return (