Merge 93ca2c89cfffee92d1ab7c8f40d5d9e71679dfce into 7be47742a6dc86f22d148ca9d304f7a9eea318cf

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

package-lock.json

@@ -34,7 +34,7 @@
         "mdast-util-to-hast": "^13.2.0",
         "mdast-util-to-string": "^4.0.0",
         "micromorph": "^0.4.5",
-        "pixi.js": "^8.6.6",
+        "pixi.js": "^8.7.3",
         "preact": "^10.25.4",
         "preact-render-to-string": "^6.5.13",
         "pretty-bytes": "^6.1.1",
@@ -79,10 +79,10 @@
         "@types/d3": "^7.4.3",
         "@types/hast": "^3.0.4",
         "@types/js-yaml": "^4.0.9",
-        "@types/node": "^22.10.6",
+        "@types/node": "^22.12.0",
         "@types/pretty-time": "^1.1.5",
         "@types/source-map-support": "^0.5.10",
-        "@types/ws": "^8.5.13",
+        "@types/ws": "^8.5.14",
         "@types/yargs": "^17.0.33",
         "esbuild": "^0.24.2",
         "prettier": "^3.4.2",
@@ -1914,10 +1914,11 @@
       }
     },
     "node_modules/@types/node": {
-      "version": "22.10.6",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.10.6.tgz",
-      "integrity": "sha512-qNiuwC4ZDAUNcY47xgaSuS92cjf8JbSUoaKS77bmLG1rU7MlATVSiw/IlrjtIyyskXBZ8KkNfjK/P5na7rgXbQ==",
+      "version": "22.12.0",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.12.0.tgz",
+      "integrity": "sha512-Fll2FZ1riMjNmlmJOdAyY5pUbkftXslB5DgEzlIuNaiWhXd00FhWxVC/r4yV/4wBb9JfImTu+jiSvXTkJ7F/gA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "undici-types": "~6.20.0"
       }
@@ -1943,10 +1944,11 @@
       "integrity": "sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ=="
     },
     "node_modules/@types/ws": {
-      "version": "8.5.13",
-      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.13.tgz",
-      "integrity": "sha512-osM/gWBTPKgHV8XkTunnegTRIsvF6owmf5w+JtAfOw472dptdm0dlGv4xCt6GwQRcC2XVOvvRE/0bAoQcL2QkA==",
+      "version": "8.5.14",
+      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.14.tgz",
+      "integrity": "sha512-bd/YFLW+URhBzMXurx7lWByOu+xzU9+kb3RboOteXYDfW+tr+JZa99OyNmPINEGB/ahzKrEuc8rcv4gnpJmxTw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@types/node": "*"
       }
@@ -5583,9 +5585,10 @@
       }
     },
     "node_modules/pixi.js": {
-      "version": "8.6.6",
-      "resolved": "https://registry.npmjs.org/pixi.js/-/pixi.js-8.6.6.tgz",
-      "integrity": "sha512-o5pw7G2yuIrnBx0G4npBlmFp+XGNcapI/Ufs62rRj/4XKxc1Zo74YJr/BtEXcXTraTKd+pQvYOLvnfxRjxBMvQ==",
+      "version": "8.7.3",
+      "resolved": "https://registry.npmjs.org/pixi.js/-/pixi.js-8.7.3.tgz",
+      "integrity": "sha512-wfWlhJYnGx1s4f2yoouevQjaeacbJ12LTkJGa+n9AIYNIjOnmJylBtZ2mARX7iFk3mr2xv0wuo//XPe2hk5OBw==",
+      "license": "MIT",
       "dependencies": {
         "@pixi/colord": "^2.9.6",
         "@types/css-font-loading-module": "^0.0.12",

package.json

@@ -60,7 +60,7 @@
     "mdast-util-to-hast": "^13.2.0",
     "mdast-util-to-string": "^4.0.0",
     "micromorph": "^0.4.5",
-    "pixi.js": "^8.6.6",
+    "pixi.js": "^8.7.3",
     "preact": "^10.25.4",
     "preact-render-to-string": "^6.5.13",
     "pretty-bytes": "^6.1.1",
@@ -102,10 +102,10 @@
     "@types/d3": "^7.4.3",
     "@types/hast": "^3.0.4",
     "@types/js-yaml": "^4.0.9",
-    "@types/node": "^22.10.6",
+    "@types/node": "^22.12.0",
     "@types/pretty-time": "^1.1.5",
     "@types/source-map-support": "^0.5.10",
-    "@types/ws": "^8.5.13",
+    "@types/ws": "^8.5.14",
     "@types/yargs": "^17.0.33",
     "esbuild": "^0.24.2",
     "prettier": "^3.4.2",

quartz/components/Head.tsx

@@ -4,6 +4,7 @@ import { CSSResourceToStyleElement, JSResourceToScriptElement } from "../util/re
 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 @@ async function generateSocialImage(
   // 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()

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()))
+}