Refactor/remark rehype plugins

app/packages/rehype-mermaid/README.md

@@ -5,7 +5,3 @@
 ## features
 
 - Generating Mermaid Diagrams
-
-## How to use?
-
-<img src="./docs/assets/rehype-mermaid-sample.png" alt="example usage of rehype-mermaid" />

app/packages/rehype-mermaid/rehypeMermaid.ts

@@ -1,4 +1,4 @@
-import type { Plugin } from "unified";
+import type { Plugin, Transformer } from "unified";
 import type { Text, Parent, Root } from "hast";
 import { visit } from "unist-util-visit";
 import { renderMermaid } from "@mermaid-js/mermaid-cli";
@@ -23,8 +23,8 @@ const rehypeMermaid: Plugin<[], Root> = () => {
 
   const checkIsMermaid = (lang: string): boolean => lang === "mermaid";
 
-  return async (tree) => {
-    const mermaidCodeBlocks: MermaidCodeBlock[] = [];
+  const transformer: Transformer<Root> = async (tree) => {
+    const mermaidCodeBlockPromises: MermaidCodeBlock[] = [];
 
     visit(tree, "element", (node, index, parent) => {
       // Check if the node is a pre tag with a single child
@@ -61,11 +61,11 @@ const rehypeMermaid: Plugin<[], Root> = () => {
       const isMermaid = checkIsMermaid(lang);
 
       if (isMermaid && index && parent) {
-        mermaidCodeBlocks.push({ textNode, index, parent });
+        mermaidCodeBlockPromises.push({ textNode, index, parent });
       }
     });
 
-    if (mermaidCodeBlocks.length === 0) {
+    if (mermaidCodeBlockPromises.length === 0) {
       return;
     }
 
@@ -76,7 +76,7 @@ const rehypeMermaid: Plugin<[], Root> = () => {
     const decoder = new TextDecoder();
 
     await Promise.all(
-      mermaidCodeBlocks.map(async ({ textNode, index, parent }, blockIndex) => {
+      mermaidCodeBlockPromises.map(async ({ textNode, index, parent }, blockIndex) => {
         const { data: svgBuffer } = await renderMermaid(browser, textNode.value, "svg");
 
         const svgElem = decoder.decode(svgBuffer).replaceAll("my-svg", `my-svg-${blockIndex}`);
@@ -95,6 +95,8 @@ const rehypeMermaid: Plugin<[], Root> = () => {
 
     await browser.close();
   };
+
+  return transformer;
 };
 
 export default rehypeMermaid;

app/packages/rehype-momiji/README.md

@@ -1,4 +1,4 @@
-# rehype-momiji (in development)
+# rehype-momiji
 
 [rehype](https://github.com/rehypejs/rehype) plugin powered by [shiki](https://shiki.matsu.io/).
 
@@ -9,6 +9,4 @@
 
 ## How to use?
 
-When you want only highlighting code block, just use this package. If you want to display a filename, you also need to use `remark-momiji`.
-
-<img src="./docs/assets/rehype-momiji-sample.png" alt="example usage of rehype-momiji" />
+When you want only highlighting code block, just use this package. If you want to display a filename, you also need to use `remark-momiji-title`.

app/packages/rehype-momiji/buildCodeBlock.ts

@@ -1,6 +1,6 @@
 import type { BundledLanguage, HighlighterGeneric, BundledTheme } from "shiki";
 import { COLOR_SHIRONERI, COLOR_HAI } from "./colors";
-import type { Root } from "hast";
+import type { Element } from "hast";
 
 const buildCodeBlock = (
   highlighter: HighlighterGeneric<BundledLanguage, BundledTheme>,
@@ -10,7 +10,7 @@ const buildCodeBlock = (
   filename: string,
   filenameBGColor?: string,
   filenameTextColor?: string,
-): Root => {
+): Element | undefined => {
   const hast = highlighter.codeToHast(rawCode, {
     lang: lang,
     theme: theme,
@@ -50,7 +50,11 @@ const buildCodeBlock = (
     ],
   });
 
-  return hast;
+  if (hast.children[0].type !== "element") {
+    return;
+  }
+
+  return hast.children[0];
 };
 
 export { buildCodeBlock };

app/packages/rehype-momiji/index.ts

@@ -93,23 +93,24 @@ const rehypeMomiji: Plugin<Option[], Root> = (options) => {
 
       const supportedLang = checkSupportedLanguage(lang);
 
-      const filename = (codeElem.properties["data-remark-code-filename"] as string) ?? "";
+      const filename = codeElem.properties["data-remark-code-title"] ?? "";
 
       const codeBlock = buildCodeBlock(
         defaultHighlighter,
         rawCode,
         supportedLang,
         theme,
-        filename,
+        String(filename),
         filenameBGColor,
         filenameTextColor,
       );
+      if (!codeBlock) return;
 
       node.tagName = "div";
-      node.children = codeBlock.children as ElementContent[];
+      node.children = [codeBlock];
       node.properties.style = "position: relative;";
     });
   };
 };
 
-export default rehypeMomiji;
+export { rehypeMomiji };

app/packages/remark-momiji-filename/index.ts → app/packages/remark-momiji-title/index.ts

@@ -2,7 +2,7 @@ import { visit } from "unist-util-visit";
 import type { Root } from "mdast";
 import type { Plugin } from "unified";
 
-const remarkMomijiFilename: Plugin<[], Root> = () => {
+const remarkMomijiTitle: Plugin<[], Root> = () => {
   return (tree) => {
     visit(tree, "code", (node) => {
       const metaString = `${node.lang ?? ""} ${node.meta ?? ""}`.trim();
@@ -11,14 +11,13 @@ const remarkMomijiFilename: Plugin<[], Root> = () => {
       const [title] = metaString.match(/(?<=title=("|'))(.*?)(?=("|'))/) ?? [""];
       if (!title) return;
 
-      if (!node.data) {
-        node.data = {};
-      }
-      node.data.hProperties = {
-        "data-remark-code-filename": title,
+      node.data = {
+        hProperties: {
+          "data-remark-code-title": title,
+        },
       };
     });
   };
 };
 
-export default remarkMomijiFilename;
+export { remarkMomijiTitle };

vite.config.ts

@@ -8,8 +8,8 @@ import remarkBreaks from 'remark-breaks';
 import remarkFrontmatter from 'remark-frontmatter';
 import remarkMdxFrontmatter from 'remark-mdx-frontmatter';
 import remarkGfm from 'remark-gfm'
-import rehypeMomiji from './app/packages/rehype-momiji'
-import remarkMomijiCodeFilename from './app/packages/remark-momiji-filename'
+import { rehypeMomiji } from './app/packages/rehype-momiji'
+import { remarkMomijiTitle } from './app/packages/remark-momiji-title'
 import rehypeMermaid from './app/packages/rehype-mermaid/rehypeMermaid'
 import { remarkAttentionBlock } from './app/packages/remark-attention-block'
 import { rehypeAttentionBlock } from './app/packages/rehype-attention-block'
@@ -25,7 +25,7 @@ export default defineConfig(() => {
       ssg({ entry: "./app/server.ts" }), 
       mdx({
         jsxImportSource: 'hono/jsx',
-        remarkPlugins: [remarkGfm, remarkBreaks, remarkFrontmatter, remarkMdxFrontmatter, remarkMomijiCodeFilename, remarkAttentionBlock],
+        remarkPlugins: [remarkGfm, remarkBreaks, remarkFrontmatter, remarkMdxFrontmatter, remarkMomijiTitle, remarkAttentionBlock],
         rehypePlugins: [[rehypeMomiji, { excludeLangs: ['mermaid'] }], rehypeMermaid, rehypeAttentionBlock],
       })
     ],