From c97fd7089ad372537114ab469f1f9d6e95e5237a Mon Sep 17 00:00:00 2001
From: Stephen Tse <Stephen-X@users.noreply.github.com>
Date: Thu, 06 Mar 2025 01:14:06 +0000
Subject: [PATCH] Added emoji support to Satori when generating OG images (#1593)
---
quartz/util/emoji.ts | 66 +++++++++++++++++++++++++++++++++
quartz/components/Head.tsx | 17 ++++++++
2 files changed, 82 insertions(+), 1 deletions(-)
diff --git a/quartz/components/Head.tsx b/quartz/components/Head.tsx
index 983dc50..1aa8cbe 100644
--- a/quartz/components/Head.tsx
+++ b/quartz/components/Head.tsx
@@ -4,6 +4,7 @@
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"
@@ -24,7 +25,21 @@
// 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 })
+ const svg = await satori(imageComponent, {
+ width,
+ height,
+ fonts,
+ // `code` will be the detected language code, `emoji` if it's an Emoji, or `unknown` if not able to tell.
+ // `segment` will be the content to render.
+ loadAdditionalAsset: async (code: string, segment: string) => {
+ if (code === "emoji") {
+ // if segment is an emoji, load the image.
+ return `data:image/svg+xml;base64,${btoa(await loadEmoji("twemoji", getIconCode(segment)))}`
+ }
+ // if segment is normal text
+ return code
+ },
+ })
// Convert svg directly to webp (with additional compression)
const compressed = await sharp(Buffer.from(svg)).webp({ quality: 40 }).toBuffer()
diff --git a/quartz/util/emoji.ts b/quartz/util/emoji.ts
new file mode 100644
index 0000000..2312943
--- /dev/null
+++ b/quartz/util/emoji.ts
@@ -0,0 +1,66 @@
+/**
+ * Modified version of https://unpkg.com/twemoji@13.1.0/dist/twemoji.esm.js.
+ * Ported from https://github.com/vercel/satori/blob/48aea6f812365959c2888a25261c72ce17992c6d/playground/utils/twemoji.ts.
+ */
+
+/*! Copyright Twitter Inc. and other contributors. Licensed under MIT */
+
+const U200D = String.fromCharCode(8205)
+const UFE0Fg = /\uFE0F/g
+
+export function getIconCode(char: string) {
+ return toCodePoint(char.indexOf(U200D) < 0 ? char.replace(UFE0Fg, "") : char)
+}
+
+function toCodePoint(unicodeSurrogates: string) {
+ const r = []
+ let c = 0,
+ p = 0,
+ i = 0
+
+ while (i < unicodeSurrogates.length) {
+ c = unicodeSurrogates.charCodeAt(i++)
+ if (p) {
+ r.push((65536 + ((p - 55296) << 10) + (c - 56320)).toString(16))
+ p = 0
+ } else if (55296 <= c && c <= 56319) {
+ p = c
+ } else {
+ r.push(c.toString(16))
+ }
+ }
+ return r.join("-")
+}
+
+export const apis = {
+ twemoji: (code: string) =>
+ "https://cdnjs.cloudflare.com/ajax/libs/twemoji/15.1.0/svg/" + code.toLowerCase() + ".svg",
+ openmoji: "https://cdn.jsdelivr.net/npm/@svgmoji/openmoji@3.2.0/svg/",
+ blobmoji: "https://cdn.jsdelivr.net/npm/@svgmoji/blob@3.2.0/svg/",
+ noto: "https://cdn.jsdelivr.net/gh/svgmoji/svgmoji/packages/svgmoji__noto/svg/",
+ fluent: (code: string) =>
+ "https://cdn.jsdelivr.net/gh/shuding/fluentui-emoji-unicode/assets/" +
+ code.toLowerCase() +
+ "_color.svg",
+ fluentFlat: (code: string) =>
+ "https://cdn.jsdelivr.net/gh/shuding/fluentui-emoji-unicode/assets/" +
+ code.toLowerCase() +
+ "_flat.svg",
+}
+
+const emojiCache: Record<string, Promise<any>> = {}
+
+export function loadEmoji(type: keyof typeof apis, code: string) {
+ const key = type + ":" + code
+ if (key in emojiCache) return emojiCache[key]
+
+ if (!type || !apis[type]) {
+ type = "twemoji"
+ }
+
+ const api = apis[type]
+ if (typeof api === "function") {
+ return (emojiCache[key] = fetch(api(code)).then((r) => r.text()))
+ }
+ return (emojiCache[key] = fetch(`${api}${code.toUpperCase()}.svg`).then((r) => r.text()))
+}
--
Gitblit v1.10.0