refactor(core): and sidebar event

src/core/render/compiler.js

@@ -1,6 +1,7 @@
 import marked from 'marked'
 import Prism from 'prismjs'
-import { helper as helperTpl } from './tpl'
+import { helper as helperTpl, tree as treeTpl } from './tpl'
+import { genTree } from './gen-tree'
 import { slugify, clearSlugCache } from './slugify'
 import { emojify } from './emojify'
 import { toURL } from '../route/hash'
@@ -9,8 +10,7 @@ import { isFn, merge, cached } from '../util/core'
 let markdownCompiler = marked
 let contentBase = ''
 let renderer = new marked.Renderer()
-
-const toc = []
+let toc = []
 
 /**
  * Compile markdown content
@@ -29,8 +29,8 @@ export const markdown = cached(text => {
 
 markdown.renderer = renderer
 
-markdown.init = function (config = {}, context = window.location.pathname) {
-  contentBase = context
+markdown.init = function (config = {}, base = window.location.pathname) {
+  contentBase = base
 
   if (isFn(config)) {
     markdownCompiler = config(marked, renderer)
@@ -85,6 +85,34 @@ renderer.image = function (href, title, text) {
 /**
  * Compile sidebar
  */
-export function sidebar (text) {
+export function sidebar (text, level) {
+  let html = ''
 
+  if (text) {
+    html = markdown(text)
+    html = html.match(/<ul[^>]*>([\s\S]+)<\/ul>/g)[0]
+  } else {
+    const tree = genTree(toc, level)
+    html = treeTpl(tree, '<ul>')
+  }
+
+  return html
+}
+
+/**
+ * Compile sub sidebar
+ */
+export function subSidebar (el, level) {
+  if (el) {
+    toc[0] && toc[0].level === 1 && toc.shift()
+    const tree = genTree(toc, level)
+    el.parentNode.innerHTML += treeTpl(tree, '<ul>')
+  }
+  toc = []
+}
+
+/**
+ * Compile cover page
+ */
+export function cover (text) {
 }

src/core/render/index.js

@@ -1,14 +1,19 @@
 import * as dom from '../util/dom'
+import { getAndActive } from '../event/sidebar'
+import { scrollActiveSidebar } from '../event/scroll'
 import cssVars from '../util/polyfill/css-vars'
 import * as tpl from './tpl'
-import { markdown, sidebar } from './compiler'
+import { markdown, sidebar, subSidebar } from './compiler'
 import { callHook } from '../init/lifecycle'
 
 function renderMain (html) {
   if (!html) {
     // TODO: Custom 404 page
   }
+
   this._renderTo('.markdown-section', html)
+  // Render sidebar with the TOC
+  !this.config.loadSidebar && this._renderSidebar()
 }
 
 export function renderMixin (Docsify) {
@@ -20,8 +25,12 @@ export function renderMixin (Docsify) {
   }
 
   proto._renderSidebar = function (text) {
-    this._renderTo('.sidebar-nav', sidebar(text))
+    const { maxLevel, subMaxLevel } = this.config
+
+    this._renderTo('.sidebar-nav', sidebar(text, maxLevel))
+    subSidebar(getAndActive('.sidebar-nav', true), subMaxLevel)
     // bind event
+    scrollActiveSidebar()
   }
 
   proto._renderNav = function (text) {