From d9159e0ac9bfc22e584c78bc8aa04ecd82c14eea Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Thu, 13 Mar 2025 17:27:46 +0000
Subject: [PATCH] feat: make og images an emitter to properly await image generation (#1826)
---
quartz/components/Head.tsx | 178 ++++++++---------------------------------------------------
1 files changed, 25 insertions(+), 153 deletions(-)
diff --git a/quartz/components/Head.tsx b/quartz/components/Head.tsx
index b6a7e8d..60dce6e 100644
--- a/quartz/components/Head.tsx
+++ b/quartz/components/Head.tsx
@@ -1,173 +1,41 @@
import { i18n } from "../i18n"
-import { FullSlug, joinSegments, pathToRoot } from "../util/path"
+import { FullSlug, getFileExtension, joinSegments, pathToRoot } from "../util/path"
import { CSSResourceToStyleElement, JSResourceToScriptElement } from "../util/resources"
-import { getFontSpecificationName, googleFontHref } from "../util/theme"
+import { googleFontHref } from "../util/theme"
import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
-import satori, { SatoriOptions } from "satori"
-import { loadEmoji, getIconCode } from "../util/emoji"
-import fs from "fs"
-import sharp from "sharp"
-import { ImageOptions, SocialImageOptions, getSatoriFont, defaultImage } from "../util/og"
import { unescapeHTML } from "../util/escape"
-
-/**
- * Generates social image (OG/twitter standard) and saves it as `.webp` inside the public folder
- * @param opts options for generating image
- */
-async function generateSocialImage(
- { cfg, description, fileName, fontsPromise, title, fileData }: ImageOptions,
- userOpts: SocialImageOptions,
- imageDir: string,
-) {
- const fonts = await fontsPromise
- const { width, height } = userOpts
-
- // JSX that will be used to generate satori svg
- const imageComponent = userOpts.imageStructure(cfg, userOpts, title, description, fonts, fileData)
-
- const svg = await satori(imageComponent, {
- width,
- height,
- fonts,
- loadAdditionalAsset: async (languageCode: string, segment: string) => {
- if (languageCode === "emoji") {
- return `data:image/svg+xml;base64,${btoa(await loadEmoji(getIconCode(segment)))}`
- }
-
- return languageCode
- },
- })
-
- // Convert svg directly to webp (with additional compression)
- const compressed = await sharp(Buffer.from(svg)).webp({ quality: 40 }).toBuffer()
-
- // Write to file system
- const filePath = joinSegments(imageDir, `${fileName}.${extension}`)
- fs.writeFileSync(filePath, compressed)
-}
-
-const extension = "webp"
-
-const defaultOptions: SocialImageOptions = {
- colorScheme: "lightMode",
- width: 1200,
- height: 630,
- imageStructure: defaultImage,
- excludeRoot: false,
-}
-
+import { CustomOgImagesEmitterName } from "../plugins/emitters/ogImage"
export default (() => {
- let fontsPromise: Promise<SatoriOptions["fonts"]>
-
- let fullOptions: SocialImageOptions
const Head: QuartzComponent = ({
cfg,
fileData,
externalResources,
ctx,
}: QuartzComponentProps) => {
- // Initialize options if not set
- if (!fullOptions) {
- if (typeof cfg.generateSocialImages !== "boolean") {
- fullOptions = { ...defaultOptions, ...cfg.generateSocialImages }
- } else {
- fullOptions = defaultOptions
- }
- }
-
- // Memoize google fonts
- if (!fontsPromise && cfg.generateSocialImages) {
- const headerFont = getFontSpecificationName(cfg.theme.typography.header)
- const bodyFont = getFontSpecificationName(cfg.theme.typography.body)
- fontsPromise = getSatoriFont(headerFont, bodyFont)
- }
-
- const slug = fileData.filePath
- // since "/" is not a valid character in file names, replace with "-"
- const fileName = slug?.replaceAll("/", "-")
-
- // Get file description (priority: frontmatter > fileData > default)
- const fdDescription =
- fileData.description?.trim() ?? i18n(cfg.locale).propertyDefaults.description
const titleSuffix = cfg.pageTitleSuffix ?? ""
const title =
(fileData.frontmatter?.title ?? i18n(cfg.locale).propertyDefaults.title) + titleSuffix
- let description = ""
- if (fdDescription) {
- description = unescapeHTML(fdDescription)
- }
-
- if (fileData.frontmatter?.socialDescription) {
- description = fileData.frontmatter?.socialDescription as string
- } else if (fileData.frontmatter?.description) {
- description = fileData.frontmatter?.description
- }
-
- const fileDir = joinSegments(ctx.argv.output, "static", "social-images")
- if (cfg.generateSocialImages) {
- // Generate folders for social images (if they dont exist yet)
- if (!fs.existsSync(fileDir)) {
- fs.mkdirSync(fileDir, { recursive: true })
- }
-
- if (fileName) {
- // Generate social image (happens async)
- void generateSocialImage(
- {
- title,
- description,
- fileName,
- fileDir,
- fileExt: extension,
- fontsPromise,
- cfg,
- fileData,
- },
- fullOptions,
- fileDir,
- )
- }
- }
+ const description =
+ fileData.frontmatter?.socialDescription ??
+ fileData.frontmatter?.description ??
+ unescapeHTML(fileData.description?.trim() ?? i18n(cfg.locale).propertyDefaults.description)
const { css, js, additionalHead } = externalResources
const url = new URL(`https://${cfg.baseUrl ?? "example.com"}`)
const path = url.pathname as FullSlug
const baseDir = fileData.slug === "404" ? path : pathToRoot(fileData.slug!)
-
const iconPath = joinSegments(baseDir, "static/icon.png")
- const ogImageDefaultPath = `https://${cfg.baseUrl}/static/og-image.png`
- // "static/social-images/slug-filename.md.webp"
- const ogImageGeneratedPath = `https://${cfg.baseUrl}/${fileDir.replace(
- `${ctx.argv.output}/`,
- "",
- )}/${fileName}.${extension}`
-
- // Use default og image if filePath doesnt exist (for autogenerated paths with no .md file)
- const useDefaultOgImage = fileName === undefined || !cfg.generateSocialImages
-
- // Path to og/social image (priority: frontmatter > generated image (if enabled) > default image)
- let ogImagePath = useDefaultOgImage ? ogImageDefaultPath : ogImageGeneratedPath
-
- // TODO: could be improved to support external images in the future
- // Aliases for image and cover handled in `frontmatter.ts`
- const frontmatterImgUrl = fileData.frontmatter?.socialImage
-
- // Override with default og image if config option is set
- if (fileData.slug === "index") {
- ogImagePath = ogImageDefaultPath
- }
-
- // Override with frontmatter url if existing
- if (frontmatterImgUrl) {
- ogImagePath = `https://${cfg.baseUrl}/static/${frontmatterImgUrl}`
- }
-
// Url of current page
const socialUrl =
fileData.slug === "404" ? url.toString() : joinSegments(url.toString(), fileData.slug!)
+ const usesCustomOgImage = ctx.cfg.plugins.emitters.some(
+ (e) => e.name === CustomOgImagesEmitterName,
+ )
+ const ogImageDefaultPath = `https://${cfg.baseUrl}/static/og-image.png`
+
return (
<head>
<title>{title}</title>
@@ -181,7 +49,7 @@
)}
<link rel="preconnect" href="https://cdnjs.cloudflare.com" crossOrigin="anonymous" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
- {/* OG/Twitter meta tags */}
+
<meta name="og:site_name" content={cfg.pageTitle}></meta>
<meta property="og:title" content={title} />
<meta property="og:type" content="website" />
@@ -189,28 +57,32 @@
<meta name="twitter:title" content={title} />
<meta name="twitter:description" content={description} />
<meta property="og:description" content={description} />
- <meta property="og:image:type" content={`image/${extension}`} />
<meta property="og:image:alt" content={description} />
- {/* Dont set width and height if unknown (when using custom frontmatter image) */}
- {!frontmatterImgUrl && (
+
+ {!usesCustomOgImage && (
<>
- <meta property="og:image:width" content={fullOptions.width.toString()} />
- <meta property="og:image:height" content={fullOptions.height.toString()} />
+ <meta property="og:image" content={ogImageDefaultPath} />
+ <meta property="og:image:url" content={ogImageDefaultPath} />
+ <meta name="twitter:image" content={ogImageDefaultPath} />
+ <meta
+ property="og:image:type"
+ content={`image/${getFileExtension(ogImageDefaultPath) ?? "png"}`}
+ />
</>
)}
- <meta property="og:image:url" content={ogImagePath} />
+
{cfg.baseUrl && (
<>
- <meta name="twitter:image" content={ogImagePath} />
- <meta property="og:image" content={ogImagePath} />
<meta property="twitter:domain" content={cfg.baseUrl}></meta>
<meta property="og:url" content={socialUrl}></meta>
<meta property="twitter:url" content={socialUrl}></meta>
</>
)}
+
<link rel="icon" href={iconPath} />
<meta name="description" content={description} />
<meta name="generator" content="Quartz" />
+
{css.map((resource) => CSSResourceToStyleElement(resource, true))}
{js
.filter((resource) => resource.loadTime === "beforeDOMReady")
--
Gitblit v1.10.0