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/components/Head.tsx | 17 ++++++++++++++++-
1 files changed, 16 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()
--
Gitblit v1.10.0