adding collapsible table of content (#118)

Apply suggestions from code review

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

fix(TOC): add name option, rename class to toc--item for sidebar styling

Author: nirajacharya2

src/components/detail/ContentSidebar.vue

@@ -2,14 +2,7 @@
   <div class="blog-content-sidebar">
     <div class="toc">
       <div class="title sharp-border">Table of content</div>
-      <div v-for="(item, index) in toc"
-        :key="index"
-        class="toc--item"
-        @click="scrollToHeading(item.id)"
-      >
-        <mdi-menu-right class="mdi-circle" />
-        {{ item.text }}
-      </div>
+      <TOC :toc="toc" />
     </div>
     <br>
     <div class="title sharp-border">Tags</div>
@@ -28,6 +21,7 @@
 </template>
 <script setup>
 import { defineProps } from "vue"
+import TOC from "./TOC.vue"
 
 defineProps({
   toc: {
@@ -42,25 +36,6 @@ defineProps({
   }
 })
 
-const scrollToHeading = (headingId) => {
-  const xpath = `//*[@id="${headingId}"]`
-  const heading = document.evaluate(
-    xpath,
-    document,
-    null,
-    XPathResult.FIRST_ORDERED_NODE_TYPE,
-    null
-  ).singleNodeValue
-  if (heading) {
-    const position = heading.getBoundingClientRect()
-    // scrolls to 100px above element
-    window.scrollTo({
-      left: position.left,
-      top: position.top + window.scrollY - 100,
-      behavior: "smooth"
-    })
-  }
-}
 </script>
 <style lang="scss">
 .blog-content-sidebar {

src/components/detail/TOC.vue

@@ -0,0 +1,107 @@
+<template>
+  <div>
+    <div v-for="item in toc" :key="item.id" :style="{ paddingLeft: item.val * 0.2 + 'em' }">
+
+      <div class="toc--item toc-content">
+        <button v-if="item.node && item.node.length" type="button" class="toc-toggle"
+          :aria-expanded="!collapsed.has(item.id)" :aria-controls="`toc-children-${item.id}`"
+          :aria-label="collapsed.has(item.id) ? 'Expand section' : 'Collapse section'" @click.stop="toggle(item.id)"
+          @keydown.enter.prevent.stop="toggle(item.id)" @keydown.space.prevent.stop="toggle(item.id)">
+          <mdi-menu-right v-if="collapsed.has(item.id)" class="mdi-circle" />
+          <mdi-menu-down v-else class="mdi-circle" />
+        </button>
+        <mdi-menu-right v-else class="mdi-circle" />
+
+        <button type="button" class="toc-link" @click="scrollToHeading(item.id, $event)"
+          @keydown.enter.prevent="scrollToHeading(item.id, $event)"
+          @keydown.space.prevent="scrollToHeading(item.id, $event)">
+          <span class="toc-text">{{ item.title }}</span>
+        </button>
+      </div>
+
+      <Transition v-if="item.node && item.node.length" name="collapse">
+        <div :id="`toc-children-${item.id}`" v-show="!collapsed.has(item.id)">
+          <TOC :toc="item.node" />
+        </div>
+      </Transition>
+
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { defineProps, ref } from "vue"
+
+defineProps({
+  toc: {
+    type: Array,
+    default: () => []
+  }
+})
+
+const collapsed = ref(new Set())
+
+const toggle = (id) => {
+  if (collapsed.value.has(id)) {
+    collapsed.value.delete(id)
+  } else {
+    collapsed.value.add(id)
+  }
+}
+
+const scrollToHeading = (headingId, e) => {
+  e.stopPropagation()
+
+  const heading = document.getElementById(headingId)
+  if (!heading) return
+
+  const position = heading.getBoundingClientRect()
+
+  window.scrollTo({
+    top: position.top + window.scrollY - 100,
+    behavior: "smooth"
+  })
+}
+</script>
+<script>
+export default { name: "TOC" }
+</script>
+<style scoped>
+.toc-content {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding-bottom: 0 !important;
+}
+
+.toc-toggle, .toc-link {
+  background: none;
+  border: 0;
+  padding: 0;
+  margin: 0;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+}
+
+.mdi-circle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.toc-link {
+  text-align: left;
+}
+
+.collapse-enter-active, .collapse-leave-active {
+  transition: all 0.25s ease;
+  overflow: hidden;
+}
+
+.collapse-enter-from, .collapse-leave-to {
+  opacity: 0;
+  transform: translateY(-4px);
+}
+</style>

src/helpers/markdown.js

@@ -84,12 +84,43 @@ export const getTableOfContent = (source) => {
   const tokens = marked.lexer(source)
   // remove the first 2 tokens to avoid meta information
   // and then return every tokens that is of header type
-  const headers = tokens.slice(2).filter(token => token.type === "heading" && token.depth <= 4)
-  headers.forEach(header => {
+  const headingGraphs = []
+  const headers = tokens
+    .slice(2)
+    .filter((token) => token.type === "heading" && token.depth <= 4)
+  headers.forEach((header) => {
     const html = marked.parser([header])
     const doc = new DOMParser().parseFromString(html, "text/xml")
     header.id = doc.firstChild.id
     header.text = doc.firstChild.textContent
+    headingGraphs.push(new Graph(header.depth, header.text, header.id))
   })
-  return headers
+  if (headingGraphs.length === 0) return []
+  const stack = []
+  const finalHeadingGraph = []
+  headingGraphs.forEach((headingGraph) => {
+    while (stack.length && headingGraph.val <= stack[stack.length - 1].val) {
+      stack.pop()
+    }
+    if (stack.length === 0) {
+      finalHeadingGraph.push(headingGraph)
+    } else {
+      stack[stack.length - 1].addNode(headingGraph)
+    }
+    stack.push(headingGraph)
+  })
+  return finalHeadingGraph
+}
+
+class Graph {
+  constructor (val, title, id) {
+    this.val = val
+    this.title = title
+    this.id = id
+    this.node = []
+  }
+
+  addNode (node) {
+    this.node.push(node)
+  }
 }