调用链路追踪法：从断点到根因

import { visit } from 'unist-util-visit';
import type { Root, Text, Link } from 'mdast';

export function remarkWikilinks() {
  return (tree: Root) => {
    visit(tree, 'text', (node: Text, index, parent) => {
      const wikiLinkRegex = /\[\[([^\]|]+)(?:\|([^\]]+))?\]\]/g;

      if (!wikiLinkRegex.test(node.value)) return;

      const newNodes: (Text | Link)[] = [];
      let lastIndex = 0;

      node.value.replace(wikiLinkRegex, (match, slug, displayText, offset) => {
        // 添加匹配前的文本
        if (offset > lastIndex) {
          newNodes.push({
            type: 'text',
            value: node.value.slice(lastIndex, offset),
          });
        }

        // 添加链接节点
        newNodes.push({
          type: 'link',
          url: `/blog/${slug}`,
          children: [{ type: 'text', value: displayText || slug }],
        });

        lastIndex = offset + match.length;
        return match;
      });

      // 添加匹配后的文本
      if (lastIndex < node.value.length) {
        newNodes.push({
          type: 'text',
          value: node.value.slice(lastIndex),
        });
      }

      if (newNodes.length > 0 && parent && index !== undefined) {
        parent.children.splice(index, 1, ...newNodes);
      }
    });
  };
}

<MDXRemote
  source={post.content}
  components={mdxComponents}
  options={{
    mdxOptions: {
      remarkPlugins: [remarkGfm, remarkWikilinks],
    },
  }}
/>

className="prose prose-sm dark:prose-invert max-w-none
  prose-a:text-primary
  prose-a:no-underline
  hover:prose-a:underline"