Closes #151: Show headings in the sidebar

website/saber-config.js

@@ -14,6 +14,7 @@ module.exports = {
   build: { lazy: true },
   permalinks: { post: '/blog/:slug.html' },
   themeConfig: {
+    markdownHeadingsLevels: [2, 3],
     sidebar: [
       {
         title: 'Basics',

website/src/components/Tocbar.vue

@@ -0,0 +1,139 @@
+<template>
+  <aside class="tocbar">
+    <div class="items" :key="currentHash">
+      <div class="item" v-for="(item, i) in items" :style="{ paddingLeft: `${7 * item.level}px`, 'font-size': `${1 - 0.01 * item.level}rem` }" :key="i">
+        <saber-link
+          :to="item.link"
+          :class="{active: isActive(item.link)}"
+        >{{ item.title }}</saber-link>
+      </div>
+    </div>
+  </aside>
+</template>
+
+<script>
+export default {
+  props: {
+    items: {
+      type: Array,
+      required: true
+    }
+  },
+
+  computed: {
+    flatItems() {
+      const res = []
+      for (const item of this.items) {
+        res.push({ disabled: true, title: item.title })
+        for (const child of item.children) {
+          res.push({ ...child, disabled: false })
+        }
+      }
+      return res
+    }
+  },
+
+  methods: {
+    isActive(link) {
+      if (!link) return false
+      return link[0] === '#'
+        ? link === this.currentHash
+        : link === this.$route.path
+    },
+    handleScrolling() {
+      this.hTags.forEach(el => {
+        const top = window.pageYOffset;
+        const distance = top - el.offsetTop;
+        const hash = el.getElementsByTagName('a')[0].hash;
+        if (distance < 50 && distance > -50 && this.currentHash != hash) {
+            //this.$router.push(hash);
+            history.pushState(null, null, hash)
+            this.currentHash = hash;
+        }
+      })
+    }
+  },
+
+  watch: {
+    $route(to, from) {
+      this.currentHash = this.$route.hash
+    }
+  },
+
+  data() {
+    return {
+      currentHash: null
+    }
+  },
+
+  mounted() {
+    const hLevels = this.$themeConfig.markdownHeadingsLevels ? this.$themeConfig.markdownHeadingsLevels : [2]
+    this.hTags = hLevels.map(val => {
+      return [...document.getElementsByTagName('h' + val)]
+    }).flat()
+
+    window.addEventListener('scroll', this.handleScrolling)
+  },
+
+  beforeDestroy() {
+    window.removeEventListener('scroll', this.handleScrolling)
+  }
+}
+</script>
+
+
+<style scoped>
+.tocbar {
+  width: var(--tocbar-width);
+  top: var(--header-height);
+  border-right: 1px solid var(--border-color);
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  overflow: auto;
+  padding: 20px 0;
+  background: var(--sidebar-bg);
+  z-index: 50;
+  transition: transform 200ms cubic-bezier(0.2, 1, 0.2, 1);
+
+  @media (max-width: 950px) {
+    transform: translateX(var(--tocbar-width));
+  }
+
+  @media (max-width: 768px) and (min-width: 650px) {
+    transform: translateX(0);
+  }
+
+  &::-webkit-scrollbar {
+    width: 6px;
+    display: none;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: rgb(216, 216, 216);
+  }
+
+  &:hover::-webkit-scrollbar  {
+    display: block;
+  }
+}
+
+.item {
+  font-size: 1.2rem;
+  margin: 10px 0;
+  max-width: 197px;
+}
+
+.item a {
+  display: block;
+  color: var(--text-light-color);
+}
+
+.item a:hover:not(.active) {
+  color: #333;
+}
+
+.item a.active {
+  color: var(--theme-color);
+}
+</style>

website/src/css/global.css

@@ -5,6 +5,7 @@
   --header-shadow: 0 1px 1px rgba(0,0,0,.05);
   --spinner-color: #3880ff;
   --sidebar-width: 270px;
+  --tocbar-width: 200px;
   --body-bg: white;
   --header-bg: white;
   --sidebar-bg: white;

website/src/css/page.css

@@ -1,12 +1,16 @@
 .main {
-  margin: 0 var(--sidebar-width);
+  padding: 0 var(--tocbar-width) 0 var(--sidebar-width);
 
-  @media (max-width: 1280px) {
-    margin-right: 0;
+  @media (max-width: 950px) {
+    padding: 0 0 0 var(--sidebar-width);
   }
 
   @media (max-width: 768px) {
-    margin: 0;
+    padding: 0 var(--tocbar-width) 0 0;
+  }
+
+  @media (max-width: 650px) {
+    padding: 0;
   }
 }
 

website/src/layouts/docs.vue

@@ -24,13 +24,15 @@
         </div>
       </div>
     </main>
+    <Tocbar :items="markdownHeadings" />
   </div>
 </template>
 
 <script>
 import format from 'date-fns/format'
 import Header from '../components/Header.vue'
 import Sidebar from '../components/Sidebar.vue'
+import Tocbar from '../components/Tocbar.vue'
 import DocMixin from '../mixins/doc'
 
 export default {
@@ -45,6 +47,17 @@ export default {
   },
 
   computed: {
+  	markdownHeadings() {
+        const items = this.page.markdownHeadings
+        .filter(h => this.$themeConfig.markdownHeadingsLevels ? this.$themeConfig.markdownHeadingsLevels.includes(h.level) : h.level === 2)
+        .map(h => ({
+          title: h.text,
+          link: `#${h.slug}`,
+          level: h.level
+        }))
+	  	return items
+    },
+
     flatSidebarItems() {
       return this.$themeConfig.sidebar.reduce((res, item) => {
         return res.concat(item.children)
@@ -74,7 +87,8 @@ export default {
 
   components: {
     Header,
-    Sidebar
+    Sidebar,
+    Tocbar
   }
 }
 </script>