Slack emojis in markdown

Author: andnorda

package.json

@@ -34,8 +34,12 @@
 	"dependencies": {
 		"@amplitude/analytics-browser": "^2.11.9",
 		"@nais/ds-svelte-community": "^0.7.5",
+		"@slack/web-api": "^7.7.0",
 		"date-fns": "^4.1.0",
+		"mdast-util-find-and-replace": "^3.0.1",
+		"node-emoji": "^2.1.3",
 		"shiki": "^1.23.0",
-		"svelte-preprocess": "^6.0.3"
+		"svelte-preprocess": "^6.0.3",
+		"unified": "^11.0.5"
 	}
 }

remark-custom-emojis.js

@@ -0,0 +1,47 @@
+import { findAndReplace } from "mdast-util-find-and-replace";
+import { get as getEmoji } from "node-emoji";
+import { WebClient } from "@slack/web-api";
+
+const token = process.env.SLACK_TOKEN;
+
+const web = new WebClient(token);
+
+console.log("Fetching custom emojis from Slack...");
+
+const customEmojis = await web.emoji
+	.list()
+	.then((res) => {
+		const { emoji = {} } = res;
+
+		const map = new Map();
+		const getSrc = (url) => (url?.startsWith("alias:") ? getSrc(emoji[url.split(":")[1]]) : url);
+
+		Object.entries(emoji).forEach(([name, url]) => {
+			const src = getSrc(url);
+			if (src) {
+				map.set(`:${name}:`, {
+					type: "html",
+					value: `<img src='${src.replace(
+						/'/gu,
+						"%27",
+					)}' style='height: 1em;display:inline;' title='${name.replace(/'/gu, "&apos;")}'/>`,
+				});
+			}
+		});
+
+		return map;
+	})
+	.catch((e) => {
+		console.error(e);
+		return new Map();
+	});
+
+const plugin = () => {
+	const replaceEmoji = (match) => customEmojis.get(match) ?? getEmoji(match) ?? false;
+
+	const transformer = (tree) => findAndReplace(tree, [[/:\+1:|:-1:|:[\w-]+:/g, replaceEmoji]]);
+
+	return transformer;
+};
+
+export default plugin;

src/routes/(pages)/log/posts/2024-11-06-nais-debug.md

@@ -1,5 +1,5 @@
 ---
-title: ":naiser: NAIS DEBUG!"
+title: "NAIS DEBUG!"
 date: 2024-11-06T12:55:13+02:00
 author: Carl Hedgren
 tags: []

src/routes/(pages)/log/posts/2024-11-12-nais-redirects.md

@@ -1,5 +1,5 @@
 ---
-title: ":naiser: Redirects, but Nais"
+title: "Redirects, but Nais"
 date: 2024-11-12T14:10:13+02:00
 author: Carl Hedgren
 tags: []

src/routes/(pages)/log/posts/2024-11-15-influx-pa-aiven-eol.md

@@ -8,6 +8,6 @@ layout: log
 
 :aiven: Influx på Aiven er end of life 30. april 2025, innen denne dato må alle team som bruker Influx på Aiven avslutte sin bruk av bruk. Mer informasjon her: https://nav-it.slack.com/files/USLACKBOT/F080WSQCRUK/end_of_life_for_aiven_for_influxdb_services
 
-:megaphone: I forbindelse med dette gjennomfører Nais en brukerundersøkelse om teamene sin bruk av forretningsmetrikker / produktmetrikker / funksjonelle metrikker. Vi hadde satt svært pris på tilbakemeldinger fra team som i dag bruker Prometheus, Influx, Bigquery eller noe annet til å lagre forretningsmetrikker.
+:mega: I forbindelse med dette gjennomfører Nais en brukerundersøkelse om teamene sin bruk av forretningsmetrikker / produktmetrikker / funksjonelle metrikker. Vi hadde satt svært pris på tilbakemeldinger fra team som i dag bruker Prometheus, Influx, Bigquery eller noe annet til å lagre forretningsmetrikker.
 
 Undersøkelsen har bare 4 spørsmål og du finner den her: https://forms.office.com/e/A8BsJFt22h

svelte.config.js

@@ -3,6 +3,7 @@ import path from "path";
 import { mdsvex, escapeSvelte } from "mdsvex";
 import { createHighlighter } from "shiki";
 import remarkRelativeImages from "mdsvex-relative-images";
+import remarkCustomEmojis from "./remark-custom-emojis.js";
 
 const theme = "github-dark";
 const highlighter = await createHighlighter({
@@ -18,7 +19,7 @@ const config = {
 	preprocess: [
 		mdsvex({
 			extensions: [".svx", ".md", ".mdx"],
-			remarkPlugins: [remarkRelativeImages],
+			remarkPlugins: [remarkCustomEmojis, remarkRelativeImages],
 			layout: {
 				log: "/src/routes/(pages)/log/post.svelte",
 				blog: "/src/routes/(pages)/blog/posts/layout.svelte",