feat: add remark-emoji-name

app/packages/remark-emoji-name/index.ts

@@ -0,0 +1,33 @@
+import type { Root } from "mdast";
+import type { Plugin } from "unified";
+import { visit } from "unist-util-visit";
+
+type EmojiMap = { [key: string]: string };
+
+const emojiMap: EmojiMap = {
+  ":heart:": "❤️",
+  ":ok_hand:": "👌",
+  ":thumbsup:": "👍",
+  ":clap:": "👏",
+  ":pray:": "🙏",
+  ":muscle:": "💪",
+  ":white_check_mark:": "✅",
+};
+
+const remarkEmojiName: Plugin<[], Root> = () => {
+  const regex = /:[a-zA-Z0-9_]+:/g;
+  return (tree) => {
+    visit(tree, "text", (node) => {
+      const matches = node.value.match(regex);
+      if (matches) {
+        for (const match of matches) {
+          if (emojiMap[match]) {
+            node.value = node.value.replace(match, emojiMap[match]);
+          }
+        }
+      }
+    });
+  };
+};
+
+export default remarkEmojiName;

app/routes/posts/md-test.mdx

@@ -40,7 +40,7 @@ publishedAt: 2024/09/14
 console.log("Hello, TypeScript!");
 ```
 
-- こちらは、Mermaid のサンプルです。
+- こちらは、Mermaid のサンプルです:ok_hand:
 
 ```mermaid
 classDiagram

vite.config.ts

@@ -11,6 +11,7 @@ import remarkGfm from 'remark-gfm'
 import rehypeMomiji from './app/packages/rehype-momiji'
 import remarkMomijiCodeFilename from './app/packages/remark-momiji-filename'
 import rehypeMermaid from './app/packages/rehype-mermaid/rehypeMermaid'
+import remarkEmojiName from './app/packages/remark-emoji-name'
 
 export default defineConfig(() => {
   return {
@@ -23,7 +24,7 @@ export default defineConfig(() => {
       ssg({ entry: "./app/server.ts" }), 
       mdx({
         jsxImportSource: 'hono/jsx',
-        remarkPlugins: [remarkGfm, remarkBreaks, remarkFrontmatter, remarkMdxFrontmatter, remarkMomijiCodeFilename],
+        remarkPlugins: [remarkGfm, remarkBreaks, remarkFrontmatter, remarkMdxFrontmatter, remarkMomijiCodeFilename, remarkEmojiName],
         rehypePlugins: [[rehypeMomiji, { excludeLangs: ['mermaid'] }], rehypeMermaid],
       })
     ],