From aaa5c8e8e40be33aec74c1cf0073ac081cb918fc Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Mon, 24 Mar 2025 00:34:14 +0000
Subject: [PATCH] feat: conditional render component
---
quartz/plugins/emitters/ogImage.tsx | 34 ++++++++++++++++++++++++++++++----
1 files changed, 30 insertions(+), 4 deletions(-)
diff --git a/quartz/plugins/emitters/ogImage.tsx b/quartz/plugins/emitters/ogImage.tsx
index f31cc4b..7fad8c5 100644
--- a/quartz/plugins/emitters/ogImage.tsx
+++ b/quartz/plugins/emitters/ogImage.tsx
@@ -1,7 +1,7 @@
import { QuartzEmitterPlugin } from "../types"
import { i18n } from "../../i18n"
import { unescapeHTML } from "../../util/escape"
-import { FullSlug, getFileExtension } from "../../util/path"
+import { FullSlug, getFileExtension, isAbsoluteURL, joinSegments, QUARTZ } from "../../util/path"
import { ImageOptions, SocialImageOptions, defaultImage, getSatoriFonts } from "../../util/og"
import sharp from "sharp"
import satori, { SatoriOptions } from "satori"
@@ -10,6 +10,8 @@
import { write } from "./helpers"
import { BuildCtx } from "../../util/ctx"
import { QuartzPluginData } from "../vfile"
+import fs from "node:fs/promises"
+import chalk from "chalk"
const defaultOptions: SocialImageOptions = {
colorScheme: "lightMode",
@@ -28,7 +30,25 @@
userOpts: SocialImageOptions,
): Promise<Readable> {
const { width, height } = userOpts
- const imageComponent = userOpts.imageStructure(cfg, userOpts, title, description, fonts, fileData)
+ const iconPath = joinSegments(QUARTZ, "static", "icon.png")
+ let iconBase64: string | undefined = undefined
+ try {
+ const iconData = await fs.readFile(iconPath)
+ iconBase64 = `data:image/png;base64,${iconData.toString("base64")}`
+ } catch (err) {
+ console.warn(chalk.yellow(`Warning: Could not find icon at ${iconPath}`))
+ }
+
+ const imageComponent = userOpts.imageStructure({
+ cfg,
+ userOpts,
+ title,
+ description,
+ fonts,
+ fileData,
+ iconBase64,
+ })
+
const svg = await satori(imageComponent, {
width,
height,
@@ -124,13 +144,19 @@
additionalHead: [
(pageData) => {
const isRealFile = pageData.filePath !== undefined
- const userDefinedOgImagePath = pageData.frontmatter?.socialImage
+ let userDefinedOgImagePath = pageData.frontmatter?.socialImage
+
+ if (userDefinedOgImagePath) {
+ userDefinedOgImagePath = isAbsoluteURL(userDefinedOgImagePath)
+ ? userDefinedOgImagePath
+ : `https://${baseUrl}/static/${userDefinedOgImagePath}`
+ }
+
const generatedOgImagePath = isRealFile
? `https://${baseUrl}/${pageData.slug!}-og-image.webp`
: undefined
const defaultOgImagePath = `https://${baseUrl}/static/og-image.png`
const ogImagePath = userDefinedOgImagePath ?? generatedOgImagePath ?? defaultOgImagePath
-
const ogImageMimeType = `image/${getFileExtension(ogImagePath) ?? "png"}`
return (
<>
--
Gitblit v1.10.0