fix(plugin-docs): use github-slugger to generate heading anchors (#8433)

* fix(plugin-docs): use github-slugger to generate heading anchors * fix(plugin-docs): fix dependencies * fix: ci error * fix: dependencies
umijs · Jul 20, 2022 · 7a1de5c · 7a1de5c · vercel · Jul 20, 2022
1 parent 04ffe1e
commit 7a1de5c
Show file tree

Hide file tree

Showing 5 changed files with 87 additions and 20 deletions.
diff --git a/packages/plugin-docs/client/theme-doc/Search.tsx b/packages/plugin-docs/client/theme-doc/Search.tsx
@@ -1,9 +1,9 @@
 import cx from 'classnames';
+import slugger from 'github-slugger';
 import key from 'keymaster';
 import React, { Fragment, useEffect, useState } from 'react';
 import { useThemeContext } from './context';
 import useLanguage from './useLanguage';
-import getLinkFromTitle from './utils/getLinkFromTitle';
 
 export default () => {
   const { components } = useThemeContext()!;
@@ -168,7 +168,7 @@ function search(routes: any, keyword: string): SearchResultItem[] {
               .join(' > ') +
             ' > ' +
             title.title,
-          href: '/' + path + '#' + getLinkFromTitle(title.title),
+          href: '/' + path + '#' + slugger.slug(title.title),
         });
       }
     });

diff --git a/packages/plugin-docs/client/theme-doc/Toc.tsx b/packages/plugin-docs/client/theme-doc/Toc.tsx
@@ -1,11 +1,12 @@
+import GithubSlugger from 'github-slugger';
 import React from 'react';
 import { Helmet } from 'react-helmet';
 import { useThemeContext } from './context';
 import useLanguage from './useLanguage';
-import getLinkFromTitle from './utils/getLinkFromTitle';
 import getTocTitle from './utils/getTocTitle';
 
 export default () => {
+  const slugger = new GithubSlugger();
   const { location, appData, themeConfig } = useThemeContext()!;
   const lang = useLanguage();
   const route =
@@ -48,7 +49,7 @@ export default () => {
                 className={`${
                   item.level > 2 ? 'text-sm' : 'text-base'
                 } break-all 2xl:break-words`}
-                href={'#' + getLinkFromTitle(item.title)}
+                href={'#' + slugger.slug(item.title)}
               >
                 {getTocTitle(item.title)}
               </a>

diff --git a/packages/plugin-docs/client/theme-doc/utils/getLinkFromTitle.ts b/packages/plugin-docs/client/theme-doc/utils/getLinkFromTitle.ts
diff --git a/packages/plugin-docs/package.json b/packages/plugin-docs/package.json
@@ -26,13 +26,15 @@
     "test": "umi-scripts jest-turbo"
   },
   "dependencies": {
+    "github-slugger": "^1.4.0",
     "keymaster": "1.6.2",
     "react-helmet": "^6.1.0",
     "rehype-pretty-code": "^0.3.1",
     "shiki": "^0.10.1"
   },
   "devDependencies": {
     "@mdx-js/mdx": "2.1.1",
+    "@types/github-slugger": "^1.3.0",
     "@types/keymaster": "^1.6.30",
     "@types/react-helmet": "^6.1.5",
     "classnames": "^2.3.1",