chore(og-image): force twemoji for emoji util

Jacky Zhao

2025-03-06 3c8ccde62431321c4ad35093a780a1585fd424dc

chore(og-image): force twemoji for emoji util

 quartz/components/Head.tsx

@@ -29,15 +29,12 @@
    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)))}`
    loadAdditionalAsset: async (languageCode: string, segment: string) => {
      if (languageCode === "emoji") {
        return `data:image/svg+xml;base64,${btoa(await loadEmoji(getIconCode(segment)))}`
      }
      // if segment is normal text
      return code

      return languageCode
    },
  })


 quartz/util/emoji.ts

@@ -1,10 +1,3 @@
/**
 * 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

@@ -32,35 +25,14 @@
  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 twemoji = (code: string) =>
  `https://cdnjs.cloudflare.com/ajax/libs/twemoji/15.1.0/svg/${code.toLowerCase()}.svg`
const emojiCache: Record<string, Promise<any>> = {}

export function loadEmoji(type: keyof typeof apis, code: string) {
export function loadEmoji(code: string) {
  const type = "twemoji"
  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()))
  return (emojiCache[key] = fetch(twemoji(code)).then((r) => r.text()))
}