feat(theme): allow removing badge text from outline (#1825)

Author: brc-dd

src/client/theme-default/components/VPDocAsideOutline.vue

@@ -17,7 +17,7 @@ const pageOutline = computed<DefaultTheme.Config['outline']>(
 
 const onContentUpdated = inject('onContentUpdated') as Ref<() => void>
 onContentUpdated.value = () => {
-  headers.value = getHeaders(pageOutline.value)
+  headers.value = getHeaders(pageOutline.value, theme.value.outlineBadges)
 }
 
 const headers = ref<MenuItem[]>([])

src/client/theme-default/composables/outline.ts

@@ -11,16 +11,30 @@ export type MenuItem = Omit<Header, 'slug' | 'children'> & {
   children?: MenuItem[]
 }
 
-export function getHeaders(pageOutline: DefaultTheme.Config['outline']) {
+export function getHeaders(
+  pageOutline: DefaultTheme.Config['outline'],
+  outlineBadges: DefaultTheme.Config['outlineBadges']
+) {
   if (pageOutline === false) return []
   let updatedHeaders: MenuItem[] = []
+
   document
     .querySelectorAll<HTMLHeadingElement>('h2, h3, h4, h5, h6')
     .forEach((el) => {
       if (el.textContent && el.id) {
+        let title = el.textContent
+
+        if (outlineBadges === false) {
+          const clone = el.cloneNode(true) as HTMLElement
+          for (const child of clone.querySelectorAll('.VPBadge')) {
+            child.remove()
+          }
+          title = clone.textContent || ''
+        }
+
         updatedHeaders.push({
           level: Number(el.tagName[1]),
-          title: el.innerText.replace(/\s+#\s*$/, ''),
+          title: title.replace(/\s+#\s*$/, ''),
           link: `#${el.id}`
         })
       }

src/client/tsconfig.json

@@ -9,7 +9,7 @@
     "declaration": true,
     "declarationDir": "../../dist/client-types",
     "jsx": "preserve",
-    "lib": ["ESNext", "DOM"],
+    "lib": ["esnext", "dom", "dom.iterable"],
     "types": ["vite/client"],
     "paths": {
       "vitepress": ["index.ts"],

src/shared/tsconfig.json

@@ -2,7 +2,7 @@
   "extends": "../../tsconfig.json",
   "compilerOptions": {
     "baseUrl": ".",
-    "lib": ["ESNext", "DOM"]
+    "lib": ["esnext", "dom", "dom.iterable"]
   },
   "include": ["."]
 }

tsconfig.json

@@ -12,7 +12,7 @@
     "preserveValueImports": true,
     "importsNotUsedAsValues": "error",
     "jsx": "preserve",
-    "lib": ["ESNext", "DOM"]
+    "lib": ["esnext", "dom", "dom.iterable"]
   },
   "exclude": ["**/node_modules/**", "**/dist/**"]
 }

types/default-theme.d.ts

@@ -22,6 +22,13 @@ export namespace DefaultTheme {
      */
     outline?: Outline | Outline['level'] | false
 
+    /**
+     * Disable this to hide badge text from outline.
+     *
+     * @default true
+     */
+    outlineBadges?: boolean
+
     /**
      * @deprecated
      * Use `outline.label` instead.