fix: dont use cdn for twemoji, bake emojis as b64

quartz/plugins/emitters/ogImage.tsx

@@ -55,8 +55,9 @@ async function generateSocialImage(
     fonts,
     loadAdditionalAsset: async (languageCode: string, segment: string) => {
       if (languageCode === "emoji") {
-        return `data:image/svg+xml;base64,${btoa(await loadEmoji(getIconCode(segment)))}`
+        return await loadEmoji(getIconCode(segment))
       }
+
       return languageCode
     },
   })

quartz/util/emoji.ts

@@ -25,14 +25,23 @@ function toCodePoint(unicodeSurrogates: string) {
   return r.join("-")
 }
 
-const twemoji = (code: string) =>
+type EmojiMap = {
-  `https://cdnjs.cloudflare.com/ajax/libs/twemoji/15.1.0/svg/${code.toLowerCase()}.svg`
+  codePointToName: Record<string, string>
-const emojiCache: Record<string, Promise<any>> = {}
+  nameToBase64: Record<string, string>
-
+}
-export function loadEmoji(code: string) {
+
-  const type = "twemoji"
+let emojimap: EmojiMap | undefined = undefined
-  const key = type + ":" + code
+export async function loadEmoji(code: string) {
-  if (key in emojiCache) return emojiCache[key]
+  if (!emojimap) {
-
+    const data = await import("./emojimap.json")
-  return (emojiCache[key] = fetch(twemoji(code)).then((r) => r.text()))
+    emojimap = data
+  }
+
+  const name = emojimap.codePointToName[`U+${code.toUpperCase()}`]
+  if (!name) throw new Error(`codepoint ${code} not found in map`)
+
+  const b64 = emojimap.nameToBase64[name]
+  if (!b64) throw new Error(`name ${name} not found in map`)
+
+  return b64
 }