fix: normalize id by github-slugger

package.json

@@ -29,6 +29,7 @@
     "esbuild": "0.15.5",
     "fast-glob": "3.2.11",
     "fs-extra": "10.1.0",
+    "github-slugger": "^1.4.0",
     "hast": "^1.0.0",
     "hast-util-from-html": "^1.0.0",
     "lodash-es": "^4.17.21",
@@ -50,6 +51,7 @@
     "@leafac/rehype-shiki": "^2.1.2",
     "@loadable/babel-plugin": "^5.13.2",
     "@types/fs-extra": "^9.0.13",
+    "@types/github-slugger": "^1.3.0",
     "@types/hast": "^2.3.4",
     "@types/koa": "^2.13.5",
     "@types/koa-router": "^7.4.4",

src/client/app/app.tsx

@@ -6,7 +6,7 @@ import { matchRoutes, Route } from 'react-router-dom';
 export async function waitForApp(path: string) {
   const matched = matchRoutes(routes, path)!;
   // @ts-ignore
-  const mod = await import(matched[0].route.componentPath);
+  const mod = await import(/* @vite-ignore */ matched[0].route.componentPath);
   return mod;
 }
 

src/client/app/client-entry.tsx

@@ -1,6 +1,6 @@
 import { hydrateRoot, createRoot } from 'react-dom/client';
 import React, { createElement } from 'react';
-import { BrowserRouter } from 'react-router-dom';
+import { BrowserRouter, useLocation } from 'react-router-dom';
 import './sideEffects';
 import { DataContext } from './hooks';
 
@@ -14,8 +14,7 @@ async function renderInBrowser() {
     // The App code will will be tree-shaking in production
     // So there is no need to worry that the complete hydration will be executed in production
     const { waitForApp, App } = await import('./app');
-
-    const mod = await waitForApp('/');
+    const mod = await waitForApp(window.location.pathname);
     createRoot(containerEl).render(
       <DataContext.Provider value={mod}>
         <BrowserRouter>

src/client/app/sideEffects.ts

@@ -9,7 +9,9 @@ if (inBrowser) {
     try {
       target = el.classList.contains('header-anchor')
         ? el
-        : document.querySelector(decodeURIComponent(hash));
+        : document.getElementById(decodeURIComponent(hash.slice(1)));
+
+      console.log(target);
     } catch (e) {
       console.warn(e);
     }

src/client/theme/components/Aside/index.tsx

@@ -17,9 +17,6 @@ export function Aside() {
   const data = useDataContext();
   const headers = data.toc;
   const SCROLL_INTO_HEIGHT = 150;
-  const normalizeHref = (href: string) => {
-    return href.toLocaleLowerCase().replace(/ +/g, '-').replace(/\./g, '');
-  };
 
   useEffect(() => {
     const onScroll = throttle(
@@ -37,7 +34,7 @@ export function Aside() {
             if (topDistance > 0 && topDistance < SCROLL_INTO_HEIGHT) {
               const id = links[i].getAttribute('href');
               const index = headers.findIndex(
-                (item: any) => normalizeHref(item.text) === id?.slice(1)
+                (item: any) => item.id === id?.slice(1)
               );
               if (index > -1 && index !== activeIndex) {
                 setActiveIndex(index);
@@ -66,7 +63,7 @@ export function Aside() {
     return (
       <li key={header.text}>
         <a
-          href={`#${normalizeHref(header.text)}`}
+          href={`#${header.id}`}
           className={`${styles.outlineLink} ${
             index == activeIndex ? styles.active : ''
           } ${isNested ? styles.nested : ''}`}

src/node/plugin-mdx/remarkPlugins/toc.ts

@@ -2,6 +2,9 @@ import type { Plugin } from 'unified';
 import { visitChildren } from 'unist-util-visit-children';
 import type { MdxjsEsm } from 'mdast-util-mdxjs-esm';
 import { parse } from 'acorn';
+import Slugger from 'github-slugger';
+
+const slugger = new Slugger();
 
 interface TocItem {
   id: string;
@@ -18,10 +21,10 @@ export const remarkPluginToc: Plugin = () => {
       // Collect h2 ~ h5
 
       if (node.type === 'heading' && node.depth > 1 && node.depth < 5) {
-        const text = node.children[0].value;
+        const originText = node.children[0].value;
+        const id = slugger.slug(originText);
         const depth = node.depth;
-        toc.push({ id: text, text, depth, order });
-        order++;
+        toc.push({ id, text: originText, depth, order });
       }
     })(tree);
     const insertedCode = `export const toc = ${JSON.stringify(toc, null, 2)}`;