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

@@ -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) return self.renderToken(tokens, index, options)
-    if (contentToken) {
-      const content = contentToken.content
 
-      if (
+    const content = contentToken.content
-        !excluded.includes(env.frontmatter.title) &&
+    const isStarred =
-        (content.includes(':star:') || content.includes(':glowing-star:'))
+      !excluded.includes(env.frontmatter.title) &&
-      ) {
+      starredMarkers.some((marker) => content.includes(marker))
-        return `<li class="starred">`
+    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(' ')}">`
   }
 }

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 />

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>

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>

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>