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.

public/typography.css

@@ -131,7 +131,7 @@ p {
 .txt-missing {
   color: var(--color-foreground-dim);
 }
-.txt-emoji {
+.marked-emoji-img {
   height: 1em;
   width: 1em;
   margin: 0 0.05em 0 0.1em;

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);

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],
   }))(),

src/lib/utils.ts

@@ -244,7 +244,7 @@ export function twemoji(
     base: "/",
     folder: "twemoji",
     ext: ".svg",
-    className: `txt-emoji`,
+    className: "marked-emoji-img",
   });
 }