feat: implement basic web app

frontend/src/core/rehype/index.ts

@@ -0,0 +1,49 @@
+import type { Element, Root, ElementContent } from "hast";
+import { useMemo } from "react";
+import { visit } from "unist-util-visit";
+import type { BuildVisitor } from "unist-util-visit";
+
+export function rehypeSplitWordsIntoSpans() {
+  return (tree: Root) => {
+    visit(tree, "element", ((node: Element) => {
+      if (
+        ["p", "h1", "h2", "h3", "h4", "h5", "h6", "li", "strong"].includes(
+          node.tagName,
+        ) &&
+        node.children
+      ) {
+        const newChildren: Array<ElementContent> = [];
+        node.children.forEach((child) => {
+          if (child.type === "text") {
+            const segmenter = new Intl.Segmenter("zh", { granularity: "word" });
+            const segments = segmenter.segment(child.value);
+            const words = Array.from(segments)
+              .map((segment) => segment.segment)
+              .filter(Boolean);
+            words.forEach((word: string) => {
+              newChildren.push({
+                type: "element",
+                tagName: "span",
+                properties: {
+                  className: "animate-fade-in",
+                },
+                children: [{ type: "text", value: word }],
+              });
+            });
+          } else {
+            newChildren.push(child);
+          }
+        });
+        node.children = newChildren;
+      }
+    }) as BuildVisitor<Root, "element">);
+  };
+}
+
+export function useRehypeSplitWordsIntoSpans(enabled = true) {
+  const rehypePlugins = useMemo(
+    () => (enabled ? [rehypeSplitWordsIntoSpans] : []),
+    [enabled],
+  );
+  return rehypePlugins;
+}