From 137d55eb1b64e87ff6f3cec52786e5e1bb68798e Mon Sep 17 00:00:00 2001
From: Ben Schlegel <31989404+benschlegel@users.noreply.github.com>
Date: Tue, 12 Nov 2024 12:33:35 +0000
Subject: [PATCH] feat(open-graph): generate OG images + further OG support (#740)
---
quartz/components/Head.tsx | 172 +++++++++++++++++++++++++++++++++++++++++++++++++++++++--
1 files changed, 165 insertions(+), 7 deletions(-)
diff --git a/quartz/components/Head.tsx b/quartz/components/Head.tsx
index cf79434..f4c9d49 100644
--- a/quartz/components/Head.tsx
+++ b/quartz/components/Head.tsx
@@ -3,14 +3,118 @@
import { CSSResourceToStyleElement, JSResourceToScriptElement } from "../util/resources"
import { googleFontHref } from "../util/theme"
import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
+import satori, { SatoriOptions } from "satori"
+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 })
+
+ // 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,
+}
export default (() => {
- const Head: QuartzComponent = ({ cfg, fileData, externalResources }: QuartzComponentProps) => {
+ 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) {
+ fontsPromise = getSatoriFont(cfg.theme.typography.header, cfg.theme.typography.body)
+ }
+
+ 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
- const description =
- fileData.description?.trim() ?? i18n(cfg.locale).propertyDefaults.description
+ 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)
+ generateSocialImage(
+ {
+ title,
+ description,
+ fileName,
+ fileDir,
+ fileExt: extension,
+ fontsPromise,
+ cfg,
+ fileData,
+ },
+ fullOptions,
+ fileDir,
+ )
+ }
+ }
+
const { css, js } = externalResources
const url = new URL(`https://${cfg.baseUrl ?? "example.com"}`)
@@ -18,7 +122,37 @@
const baseDir = fileData.slug === "404" ? path : pathToRoot(fileData.slug!)
const iconPath = joinSegments(baseDir, "static/icon.png")
- const ogImagePath = `https://${cfg.baseUrl}/static/og-image.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!)
return (
<head>
@@ -32,11 +166,35 @@
</>
)}
<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" />
+ <meta name="twitter:card" content="summary_large_image" />
+ <meta name="twitter:title" content={title} />
+ <meta name="twitter:description" content={description} />
<meta property="og:description" content={description} />
- {cfg.baseUrl && <meta property="og:image" content={ogImagePath} />}
- <meta property="og:width" content="1200" />
- <meta property="og:height" content="675" />
+ <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 && (
+ <>
+ <meta property="og:image:width" content={fullOptions.width.toString()} />
+ <meta property="og:image:height" content={fullOptions.height.toString()} />
+ <meta property="og:width" content={fullOptions.width.toString()} />
+ <meta property="og:height" content={fullOptions.height.toString()} />
+ </>
+ )}
+ <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" />
--
Gitblit v1.10.0