Fix API index heading text (#2077)

Author: skirtles-code

src/api/ApiIndex.vue

@@ -46,23 +46,6 @@ const filtered = computed(() => {
     })
     .filter((i) => i) as APIGroup[]
 })
-
-// same as vitepress' slugify logic
-function slugify(text: string): string {
-  return (
-    text
-      // Replace special characters
-      .replace(/[\s~`!@#$%^&*()\-_+=[\]{}|\\;:"'<>,.?/]+/g, '-')
-      // Remove continuous separators
-      .replace(/\-{2,}/g, '-')
-      // Remove prefixing and trailing separators
-      .replace(/^\-+|\-+$/g, '')
-      // ensure it doesn't start with a number (#121)
-      .replace(/^(\d)/, '_$1')
-      // lowercase
-      .toLowerCase()
-  )
-}
 </script>
 
 <template>
@@ -85,7 +68,7 @@ function slugify(text: string): string {
       :key="section.text"
       class="api-section"
     >
-      <h2 :id="slugify(section.text)">{{ section.text }}</h2>
+      <h2 :id="section.anchor">{{ section.text }}</h2>
       <div class="api-groups">
         <div
           v-for="item of section.items"
@@ -95,7 +78,7 @@ function slugify(text: string): string {
           <h3>{{ item.text }}</h3>
           <ul>
             <li v-for="h of item.headers" :key="h.anchor">
-              <a :href="item.link + '.html#' + slugify(h.anchor)">{{ h.anchor }}</a>
+              <a :href="item.link + '.html#' + h.anchor">{{ h.text }}</a>
             </li>
           </ul>
         </div>

src/api/api.data.ts

@@ -2,6 +2,7 @@
 // a file ending with data.(j|t)s will be evaluated in Node.js
 import fs from 'fs'
 import path from 'path'
+import type { MultiSidebarConfig } from '@vue/theme/src/vitepress/config'
 import { sidebar } from '../../.vitepress/config'
 
 interface APIHeader {
@@ -11,6 +12,7 @@ interface APIHeader {
 
 export interface APIGroup {
   text: string
+  anchor: string
   items: {
     text: string
     link: string
@@ -26,8 +28,9 @@ export default {
   watch: './*.md',
   // read from fs and generate the data
   load(): APIGroup[] {
-    return sidebar['/api/'].map((group) => ({
+    return (sidebar as MultiSidebarConfig)['/api/'].map((group) => ({
       text: group.text,
+      anchor: slugify(group.text),
       items: group.items.map((item) => ({
         ...item,
         headers: parsePageHeaders(item.link)
@@ -57,22 +60,39 @@ function parsePageHeaders(link: string) {
   const h2s = src.match(/^## [^\n]+/gm)
   let headers: APIHeader[] = []
   if (h2s) {
+    const anchorRE = /\{#([^}]+)\}/
     headers = h2s.map((h) => {
-        const text = h
-          .slice(2)
-          .replace(/<sup class=.*/, '')
-          .replace(/\\</g, '<')
-          .replace(/`([^`]+)`/g, '$1')
-          .replace(/\{#([a-zA-Z0-9-]+)\}/g, '') // hidden anchor tag
-          .trim()
-        const anchor = h.match(/\{#([a-zA-Z0-9-]+)\}/)?.[1] ?? text
-        return { text, anchor }
-      }
-    )
+      const text = h
+        .slice(2)
+        .replace(/<sup class=.*/, '')
+        .replace(/\\</g, '<')
+        .replace(/`([^`]+)`/g, '$1')
+        .replace(anchorRE, '') // hidden anchor tag
+        .trim()
+      const anchor = h.match(anchorRE)?.[1] ?? slugify(text)
+      return { text, anchor }
+    })
   }
   headersCache.set(fullPath, {
     timestamp,
     headers
   })
   return headers
 }
+
+// same as vitepress' slugify logic
+function slugify(text: string): string {
+  return (
+    text
+      // Replace special characters
+      .replace(/[\s~`!@#$%^&*()\-_+=[\]{}|\\;:"'<>,.?/]+/g, '-')
+      // Remove continuous separators
+      .replace(/\-{2,}/g, '-')
+      // Remove prefixing and trailing separators
+      .replace(/^\-+|\-+$/g, '')
+      // ensure it doesn't start with a number (#121)
+      .replace(/^(\d)/, '_$1')
+      // lowercase
+      .toLowerCase()
+  )
+}