From d6a5c13229a615f8ba13ccf3f9ef60c03b43e53f Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Wed, 1 Jan 2025 20:48:37 +0100
Subject: [PATCH] feat(theme): add doc aside scroll spy

---
 src/client/theme-default/components/VPDoc.vue   | 12 ++++++++++--
 src/client/theme-default/composables/outline.ts |  5 ++++-
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/client/theme-default/components/VPDoc.vue b/src/client/theme-default/components/VPDoc.vue
index dd87ee95..aaf9d87d 100644
--- a/src/client/theme-default/components/VPDoc.vue
+++ b/src/client/theme-default/components/VPDoc.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useRoute } from 'vitepress'
-import { computed } from 'vue'
+import { computed, nextTick, provide, ref } from 'vue'
 import { useData } from '../composables/data'
 import { useSidebar } from '../composables/sidebar'
 import VPDocAside from './VPDocAside.vue'
@@ -10,10 +10,18 @@ const { theme } = useData()
 
 const route = useRoute()
 const { hasSidebar, hasAside, leftAside } = useSidebar()
+const asideContainerRef = ref<HTMLDivElement | undefined>()
 
 const pageName = computed(() =>
   route.path.replace(/[./]+/g, '_').replace(/_html$/, '')
 )
+
+function scrollAside(position: number) {
+  nextTick(() => {
+    asideContainerRef.value?.scrollTo({ top: position, behavior: 'smooth' })
+  })
+}
+provide('scroll-aside', scrollAside)
 </script>
 
 <template>
@@ -25,7 +33,7 @@ const pageName = computed(() =>
     <div class="container">
       <div v-if="hasAside" class="aside" :class="{'left-aside': leftAside}">
         <div class="aside-curtain" />
-        <div class="aside-container">
+        <div ref="asideContainerRef" class="aside-container">
           <div class="aside-content">
             <VPDocAside>
               <template #aside-top><slot name="aside-top" /></template>
diff --git a/src/client/theme-default/composables/outline.ts b/src/client/theme-default/composables/outline.ts
index 74e72a0f..81ba0e11 100644
--- a/src/client/theme-default/composables/outline.ts
+++ b/src/client/theme-default/composables/outline.ts
@@ -1,6 +1,6 @@
 import { getScrollOffset } from 'vitepress'
 import type { DefaultTheme } from 'vitepress/theme'
-import { onMounted, onUnmounted, onUpdated, type Ref } from 'vue'
+import { inject, onMounted, onUnmounted, onUpdated, type Ref } from 'vue'
 import type { Header } from '../../shared'
 import { throttleAndDebounce } from '../support/utils'
 import { useAside } from './aside'
@@ -84,6 +84,7 @@ export function useActiveAnchor(
   marker: Ref<HTMLElement>
 ): void {
   const { isAsideEnabled } = useAside()
+  const scrollAside = inject<(position: number) => void>('scroll-aside')
 
   const onScroll = throttleAndDebounce(setActiveLink, 100)
 
@@ -170,9 +171,11 @@ export function useActiveAnchor(
       activeLink.classList.add('active')
       marker.value.style.top = activeLink.offsetTop + 39 + 'px'
       marker.value.style.opacity = '1'
+      scrollAside?.(activeLink.offsetTop + 39)
     } else {
       marker.value.style.top = '33px'
       marker.value.style.opacity = '0'
+      scrollAside?.(33)
     }
   }
 }