@docsector/docsector-reader 0.11.0 → 0.12.0

package/README.md

@@ -38,7 +38,7 @@ Transform Markdown content into beautiful, navigable documentation sites — wit
 - 🚨 **GitHub-Style Alerts** — Native support for `[!NOTE]`, `[!TIP]`, `[!IMPORTANT]`, `[!WARNING]`, and `[!CAUTION]`
 - 🌍 **Internationalization (i18n)** — Multi-language support with HJSON locale files and per-page translations
 - 🌗 **Dark/Light Mode** — Automatic theme switching with Quasar Dark Plugin
-- 🔗 **Anchor Navigation** — Right-side Table of Contents tree with scroll tracking
+- 🔗 **Anchor Navigation** — Right-side Table of Contents tree with scroll tracking and auto-scroll to active section
 - 🔎 **Search** — Menu search across all documentation content and tags
 - 📱 **Responsive** — Mobile-friendly with collapsible sidebar and drawers
 - 🏷️ **Status Badges** — Mark pages as `done`, `draft`, or `empty` with visual indicators

package/bin/docsector.js

@@ -23,7 +23,7 @@ const packageRoot = resolve(__dirname, '..')
 const args = process.argv.slice(2)
 const command = args[0]
 
-const VERSION = '0.11.0'
+const VERSION = '0.12.0'
 
 const HELP = `
   Docsector Reader v${VERSION}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docsector/docsector-reader",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "description": "A documentation rendering engine built with Vue 3, Quasar v2 and Vite. Transform Markdown into beautiful, navigable documentation sites.",
   "productName": "Docsector Reader",
   "author": "Rodrigo de Araujo Vieira",

package/src/components/DPageAnchor.vue

@@ -1,7 +1,7 @@
 <script setup>
-import { computed, onMounted, onBeforeUnmount } from 'vue'
+import { computed, ref, watch, onMounted, onBeforeUnmount } from 'vue'
 import { useStore } from 'vuex'
-import { useQuasar } from 'quasar'
+import { useQuasar, scroll as quasarScroll } from 'quasar'
 import { useRoute } from "vue-router";
 
 import useNavigator from '../composables/useNavigator'
@@ -11,6 +11,8 @@ const $q = useQuasar()
 const route = useRoute()
 const { navigate, anchor, selected: navigatorSelected } = useNavigator()
 
+const scrolling = ref(null)
+
 const nodes = computed(() => store.getters['page/nodes'])
 const expanded = computed({
   get() {
@@ -45,6 +47,34 @@ const stylize = computed(() => {
   }
 })
 
+const scrollToActiveAnchor = () => {
+  if (scrolling.value) {
+    clearTimeout(scrolling.value)
+  }
+
+  scrolling.value = setTimeout(() => {
+    const anchorEl = document.getElementById('anchor')
+    if (anchorEl) {
+      const activeNode = anchorEl.querySelector('.q-tree__node--selected')
+      if (activeNode && typeof activeNode === 'object') {
+        const target = quasarScroll.getScrollTarget(activeNode)
+        const offsetTop = activeNode.offsetTop
+        const innerHeightBy2 = window.innerHeight / 2
+        const offset = offsetTop - innerHeightBy2
+
+        if (offset > 0) {
+          quasarScroll.setVerticalScrollPosition(target, offset, 300)
+        }
+      }
+    }
+    scrolling.value = null
+  }, 300)
+}
+
+watch(selected, () => {
+  scrollToActiveAnchor()
+})
+
 onMounted(() => {
   store.commit('layout/setMetaToggle', true)
 
@@ -61,6 +91,10 @@ onMounted(() => {
 })
 
 onBeforeUnmount(() => {
+  if (scrolling.value) {
+    clearTimeout(scrolling.value)
+  }
+
   store.commit('layout/setMetaToggle', false)
 
   store.commit('page/resetAnchor')