feat: use pangu to add padding between chinese and english (#413)

package.json

@@ -93,6 +93,7 @@
     "next-i18next": "^13.2.2",
     "nextjs-progressbar": "0.0.16",
     "node-id3": "^0.2.6",
+    "pangu": "^4.0.7",
     "pinyin": "3.0.0-alpha.5",
     "prismjs": "1.29.0",
     "react": "18.2.0",
@@ -154,6 +155,7 @@
     "@types/katex": "^0.16.0",
     "@types/mjml": "4.7.1",
     "@types/node": "18.15.12",
+    "@types/pangu": "^4.0.0",
     "@types/prismjs": "1.26.0",
     "@types/react": "18.0.37",
     "@types/react-dom": "18.0.11",
@@ -196,4 +198,4 @@
     "vitest>vite": "^4.3.1",
     "rehype-katex>katex": "^0.16.6"
   }
-}
+}

src/markdown/index.ts

@@ -38,6 +38,7 @@ import { rehypeWrapCode } from "./rehype-wrap-code"
 import { rehypeExternalLink } from "./rehyper-external-link"
 import { remarkCallout } from "./remark-callout"
 import { remarkMermaid } from "./remark-mermaid"
+import { remarkPangu } from "./remark-pangu"
 import { remarkYoutube } from "./remark-youtube"
 import sanitizeScheme from "./sanitize-schema"
 
@@ -114,6 +115,7 @@ export const renderPageContent = (
       .use(remarkMath, {
         singleDollarTextMath: false,
       })
+      .use(remarkPangu)
       .use(remarkRehype, { allowDangerousHtml: true })
       .use(rehypeStringify)
       .use(rehypeRaw)

src/markdown/remark-pangu.ts

@@ -0,0 +1,60 @@
+import pangu from "pangu"
+import type { Root } from "remark-gfm"
+import type { Plugin } from "unified"
+import { visit } from "unist-util-visit"
+
+interface Options {
+  text?: boolean
+  inlineCode?: boolean
+  link?: boolean
+  image?: boolean
+  definition?: boolean
+  imageReference?: boolean
+}
+
+const defaultOptions: Options = {
+  text: true,
+  inlineCode: false,
+  link: true,
+  image: true,
+  definition: true,
+  imageReference: true,
+}
+
+function format(value: string) {
+  if (!value) return value
+  return pangu.spacing(value)
+}
+
+export const remarkPangu: Plugin<Array<Options>, Root> =
+  (options = {}) =>
+  (tree, _) => {
+    const settings = Object.assign({}, defaultOptions, options)
+    const subset = (Object.keys(settings) as Array<keyof Options>).filter(
+      (k) => settings[k],
+    ) as string[]
+
+    visit(tree, (node) => {
+      if (subset.includes(node.type)) {
+        if (node.type === "text" || node.type === "inlineCode") {
+          node.value = format(node.value)
+        }
+
+        if (
+          (node.type === "link" ||
+            node.type === "image" ||
+            node.type === "definition") &&
+          node.title
+        ) {
+          node.title = format(node.title)
+        }
+
+        if (
+          (node.type === "image" || node.type === "imageReference") &&
+          node.alt
+        ) {
+          node.alt = format(node.alt)
+        }
+      }
+    })
+  }