From 5d2fc3f9228c9b26dec26264d0951d0f43b3d90d Mon Sep 17 00:00:00 2001
From: Divyansh Singh <40380293+brc-dd@users.noreply.github.com>
Date: Sat, 21 Jan 2023 20:15:01 +0530
Subject: [PATCH] feat(theme): allow removing badge text from outline (#1825)

---
 .../components/VPDocAsideOutline.vue           |  2 +-
 .../theme-default/composables/outline.ts       | 18 ++++++++++++++++--
 src/client/tsconfig.json                       |  2 +-
 src/shared/tsconfig.json                       |  2 +-
 tsconfig.json                                  |  2 +-
 types/default-theme.d.ts                       |  7 +++++++
 6 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/src/client/theme-default/components/VPDocAsideOutline.vue b/src/client/theme-default/components/VPDocAsideOutline.vue
index 4fd9bd37..3a888611 100644
--- a/src/client/theme-default/components/VPDocAsideOutline.vue
+++ b/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[]>([])
diff --git a/src/client/theme-default/composables/outline.ts b/src/client/theme-default/composables/outline.ts
index c9eb8b3e..0d2b0316 100644
--- a/src/client/theme-default/composables/outline.ts
+++ b/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}`
         })
       }
diff --git a/src/client/tsconfig.json b/src/client/tsconfig.json
index 970a3a5e..b214ebcd 100644
--- a/src/client/tsconfig.json
+++ b/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"],
diff --git a/src/shared/tsconfig.json b/src/shared/tsconfig.json
index 7a50c068..f29d6459 100644
--- a/src/shared/tsconfig.json
+++ b/src/shared/tsconfig.json
@@ -2,7 +2,7 @@
   "extends": "../../tsconfig.json",
   "compilerOptions": {
     "baseUrl": ".",
-    "lib": ["ESNext", "DOM"]
+    "lib": ["esnext", "dom", "dom.iterable"]
   },
   "include": ["."]
 }
diff --git a/tsconfig.json b/tsconfig.json
index deddd794..04ddfad2 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -12,7 +12,7 @@
     "preserveValueImports": true,
     "importsNotUsedAsValues": "error",
     "jsx": "preserve",
-    "lib": ["ESNext", "DOM"]
+    "lib": ["esnext", "dom", "dom.iterable"]
   },
   "exclude": ["**/node_modules/**", "**/dist/**"]
 }
diff --git a/types/default-theme.d.ts b/types/default-theme.d.ts
index 8084b86c..063ad722 100644
--- a/types/default-theme.d.ts
+++ b/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.