From 361e48f86230b81a1ccffa01ae55ee6100fd4201 Mon Sep 17 00:00:00 2001
From: Zenith Rifle <84105075+eli32-vlc@users.noreply.github.com>
Date: Mon, 5 Jan 2026 10:43:34 +0800
Subject: [PATCH] Added Toggle Indexes (#4544)

* Add monochrome theme with grayscale filter

* Add indexes toggle and disable starred

* Keep filters mutually exclusive
---
 docs/.vitepress/markdown/toggleStarred.ts     | 26 +++++++------
 .../theme/components/SidebarCard.vue          |  6 +++
 docs/.vitepress/theme/components/Switch.vue   |  7 ++++
 .../theme/components/ToggleIndexes.vue        | 23 +++++++++++
 .../theme/components/ToggleStarred.vue        | 38 ++++++++++++++++++-
 5 files changed, 87 insertions(+), 13 deletions(-)
 create mode 100644 docs/.vitepress/theme/components/ToggleIndexes.vue

diff --git a/docs/.vitepress/markdown/toggleStarred.ts b/docs/.vitepress/markdown/toggleStarred.ts
index 4047de36c..567348003 100644
--- a/docs/.vitepress/markdown/toggleStarred.ts
+++ b/docs/.vitepress/markdown/toggleStarred.ts
@@ -17,23 +17,27 @@
 import type { MarkdownRenderer } from 'vitepress'
 
 const excluded = ['Beginners Guide']
+const starredMarkers = [':star:', ':glowing-star:', '⭐', '🌟']
+const indexMarkers = ['🌐', ':globe_with_meridians:', ':globe-with-meridians:']
 
 export function toggleStarredPlugin(md: MarkdownRenderer) {
   md.renderer.rules.list_item_open = (tokens, index, options, env, self) => {
     const contentToken = tokens[index + 2]
 
-    // Ensure the token exists
-    if (contentToken) {
-      const content = contentToken.content
+    if (!contentToken) return self.renderToken(tokens, index, options)
 
-      if (
-        !excluded.includes(env.frontmatter.title) &&
-        (content.includes(':star:') || content.includes(':glowing-star:'))
-      ) {
-        return `<li class="starred">`
-      }
-    }
+    const content = contentToken.content
+    const isStarred =
+      !excluded.includes(env.frontmatter.title) &&
+      starredMarkers.some((marker) => content.includes(marker))
+    const isIndex = indexMarkers.some((marker) => content.includes(marker))
 
-    return self.renderToken(tokens, index, options)
+    if (!isStarred && !isIndex) return self.renderToken(tokens, index, options)
+
+    const classes = []
+    if (isStarred) classes.push('starred')
+    if (isIndex) classes.push('index')
+
+    return `<li class="${classes.join(' ')}">`
   }
 }
diff --git a/docs/.vitepress/theme/components/SidebarCard.vue b/docs/.vitepress/theme/components/SidebarCard.vue
index 9d860772a..71121e70d 100644
--- a/docs/.vitepress/theme/components/SidebarCard.vue
+++ b/docs/.vitepress/theme/components/SidebarCard.vue
@@ -4,6 +4,7 @@ import ColorPicker from './ColorPicker.vue'
 import ThemeSelector from './ThemeSelector.vue'
 import InputField from './InputField.vue'
 import ToggleStarred from './ToggleStarred.vue'
+import ToggleIndexes from './ToggleIndexes.vue'
 </script>
 
 <template>
@@ -26,6 +27,11 @@ import ToggleStarred from './ToggleStarred.vue'
         <ToggleStarred />
       </template>
     </InputField>
+    <InputField id="toggle-indexes" label="Toggle Indexes">
+      <template #display>
+        <ToggleIndexes />
+      </template>
+    </InputField>
 
     <div class="mt-4">
       <ColorPicker />
diff --git a/docs/.vitepress/theme/components/Switch.vue b/docs/.vitepress/theme/components/Switch.vue
index f72ba9620..266224013 100644
--- a/docs/.vitepress/theme/components/Switch.vue
+++ b/docs/.vitepress/theme/components/Switch.vue
@@ -29,6 +29,13 @@ const enabled = ref(false)
 .switch.enabled {
   background-color: var(--vp-c-brand);
 }
+
+.switch.disabled {
+  opacity: 0.5;
+  pointer-events: none;
+  background-color: var(--vp-c-bg-soft);
+  border-color: var(--vp-c-divider);
+}
 </style>
 
 <style scoped>
diff --git a/docs/.vitepress/theme/components/ToggleIndexes.vue b/docs/.vitepress/theme/components/ToggleIndexes.vue
new file mode 100644
index 000000000..76149375d
--- /dev/null
+++ b/docs/.vitepress/theme/components/ToggleIndexes.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import Switch from './Switch.vue'
+
+const toggleIndexes = () => {
+  const root = document.documentElement
+  const enabling = !root.classList.contains('indexes-only')
+  root.classList.toggle('indexes-only')
+
+  if (enabling && root.classList.contains('starred-only')) {
+    root.classList.remove('starred-only')
+  }
+}
+</script>
+
+<template>
+  <Switch @click="toggleIndexes()" />
+</template>
+
+<style>
+.indexes-only li:not(.index) {
+  display: none;
+}
+</style>
diff --git a/docs/.vitepress/theme/components/ToggleStarred.vue b/docs/.vitepress/theme/components/ToggleStarred.vue
index 9b3675d47..ae5812912 100644
--- a/docs/.vitepress/theme/components/ToggleStarred.vue
+++ b/docs/.vitepress/theme/components/ToggleStarred.vue
@@ -1,12 +1,46 @@
 <script setup lang="ts">
+import { onBeforeUnmount, onMounted, ref } from 'vue'
 import Switch from './Switch.vue'
 
-const toggleStarred = () =>
+const isDisabled = ref(false)
+const switchKey = ref(0)
+
+const syncDisabled = () => {
+  const root = document.documentElement
+  const disabled = root.classList.contains('indexes-only')
+  isDisabled.value = disabled
+
+  if (disabled && root.classList.contains('starred-only')) {
+    root.classList.remove('starred-only')
+    switchKey.value += 1
+  }
+}
+
+let observer: MutationObserver | undefined
+
+onMounted(() =>
+  (observer = new MutationObserver(syncDisabled)).observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: ['class']
+  })
+)
+
+onMounted(syncDisabled)
+
+onBeforeUnmount(() => observer?.disconnect())
+
+const toggleStarred = () => {
+  if (isDisabled.value) return
   document.documentElement.classList.toggle('starred-only')
+}
 </script>
 
 <template>
-  <Switch @click="toggleStarred()" />
+  <Switch
+    :key="switchKey"
+    :class="{ disabled: isDisabled }"
+    @click="toggleStarred()"
+  />
 </template>
 
 <style>