From 83f710e811fc166bf361788e4c071af85a9ee975 Mon Sep 17 00:00:00 2001
From: Sebastian Martinez <me@sebastinez.dev>
Date: Mon, 14 Oct 2024 11:33:33 +0200
Subject: [PATCH] Fix twemojis display

Text in Markdown with emojis has been tried to be fetched from the
`/raw` route as embeds.
This commit changes the `renderer` method to compute the hex string for
a unicode emoji to be able to use the `/twemoji` asset folder.
---
 src/components/Markdown.svelte | 8 +++++++-
 src/lib/markdown.ts            | 8 +++++++-
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/components/Markdown.svelte b/src/components/Markdown.svelte
index 85ab8d309..6d3faa12c 100644
--- a/src/components/Markdown.svelte
+++ b/src/components/Markdown.svelte
@@ -137,6 +137,7 @@
     // pointing at the repos /raw endpoint.
     for (const i of container.querySelectorAll("img")) {
       const imagePath = i.getAttribute("src");
+      const imageClass = i.getAttribute("class");
 
       // If the image is an oid embed
       if (imagePath && isCommit(imagePath)) {
@@ -160,7 +161,8 @@
       }
 
       // Make sure the source isn't a URL before trying to fetch it from the repo
-      if (imagePath && !isUrl(imagePath) && !imagePath.startsWith("/twemoji")) {
+      const emoji = imageClass && imageClass === "marked-emoji-img";
+      if (imagePath && isUrl(imagePath) && !emoji) {
         i.setAttribute("src", `${rawPath}/${canonicalize(imagePath, path)}`);
       }
     }
@@ -349,6 +351,10 @@
     max-width: 100%;
   }
 
+  .markdown :global(img.marked-emoji-img) {
+    height: 1rem;
+  }
+
   .markdown :global(code) {
     font-family: var(--font-family-monospace);
     font-size: var(--font-size-small);
diff --git a/src/lib/markdown.ts b/src/lib/markdown.ts
index bbeb92205..ddb1773e7 100644
--- a/src/lib/markdown.ts
+++ b/src/lib/markdown.ts
@@ -89,7 +89,13 @@ export const markdownWithExtensions = new Marked(
   katexMarkedExtension({ throwOnError: false }),
   markedLinkifyIt({}, { fuzzyLink: false }),
   markedFootnote({ refMarkers: true }),
-  markedEmoji({ emojis }),
+  markedEmoji({
+    emojis,
+    renderer: (token: { name: string; emoji: string }) => {
+      const src = token.emoji.codePointAt(0)?.toString(16);
+      return `<img alt="${token.name}" src="/twemoji/${src}.svg" class="marked-emoji-img">`;
+    },
+  }),
   ((): MarkedExtension => ({
     extensions: [anchorMarkedExtension],
   }))(),