Add max level option

src/bind-event.js

@@ -20,6 +20,8 @@ function scrollActiveSidebar () {
 
       if (bcr.top < 10 && bcr.bottom > 10) {
         const li = nav[node.id]
+
+        if (!li) return
         if (li === active) return
         if (active) active.setAttribute('class', '')
 

src/gen-toc.js

@@ -1,7 +1,7 @@
 /**
  * @link from https://github.com/killercup/grock/blob/5280ae63e16c5739e9233d9009bc235ed7d79a50/styles/solarized/assets/js/behavior.coffee#L54-L81
  */
-const tocToTree = function (toc) {
+const tocToTree = function (toc, maxLevel) {
   const headlines = []
   const last = {}
 
@@ -9,6 +9,7 @@ const tocToTree = function (toc) {
     const level = headline.level || 1
     const len = level - 1
 
+    if (level > maxLevel) return
     if (last[len]) {
       last[len].children = last[len].children || []
       last[len].children.push(headline)
@@ -34,8 +35,7 @@ const buildHeadlinesTree = function (tree, tpl = '') {
   return tpl
 }
 
-export default function (toc) {
-  var tree = tocToTree(toc)
-  var result = buildHeadlinesTree(tree, '<ul>')
-  return result
+export default function (toc, maxLevel) {
+  var tree = tocToTree(toc, maxLevel)
+  return buildHeadlinesTree(tree, '<ul>')
 }

src/index.js

@@ -4,7 +4,8 @@ import bindEvent from './bind-event'
 
 const DEFAULT_OPTS = {
   el: '#app',
-  repo: ''
+  repo: '',
+  'max-level': 6
 }
 
 const script = document.currentScript || [].slice.call(document.getElementsByTagName('script')).pop()

src/render.js

@@ -45,7 +45,7 @@ export default function (content, opts = {}) {
   const section = `<section class="content">
     <article class="markdown-section">${marked(content)}</article>
   </section>`
-  const sidebar = `<aside class="sidebar">${genToc(toc)}</aside>`
+  const sidebar = `<aside class="sidebar">${genToc(toc, opts['max-level'])}</aside>`
 
   return `${corner}<main>${sidebar}${section}</main>`
 }