refactor(core): add router

src/core/render/compiler.js

@@ -0,0 +1,50 @@
+import marked from 'marked'
+import Prism from 'prismjs'
+
+export const renderer = new marked.Renderer()
+
+export function markdown () {
+
+}
+
+const toc = []
+
+/**
+ * render anchor tag
+ * @link https://github.com/chjj/marked#overriding-renderer-methods
+ */
+renderer.heading = function (text, level) {
+  const slug = slugify(text)
+  let route = ''
+
+  route = `#/${getRoute()}`
+  toc.push({ level, slug: `${route}#${encodeURIComponent(slug)}`, title: text })
+
+  return `<h${level} id="${slug}"><a href="${route}#${slug}" data-id="${slug}" class="anchor"><span>${text}</span></a></h${level}>`
+}
+// highlight code
+renderer.code = function (code, lang = '') {
+  const hl = Prism.highlight(code, Prism.languages[lang] || Prism.languages.markup)
+
+  return `<pre v-pre data-lang="${lang}"><code class="lang-${lang}">${hl}</code></pre>`
+}
+renderer.link = function (href, title, text) {
+  if (!/:|(\/{2})/.test(href)) {
+    href = `#/${href}`.replace(/\/+/g, '/')
+  }
+  return `<a href="${href}" title="${title || ''}">${text}</a>`
+}
+renderer.paragraph = function (text) {
+  if (/^!&gt;/.test(text)) {
+    return tpl.helper('tip', text)
+  } else if (/^\?&gt;/.test(text)) {
+    return tpl.helper('warn', text)
+  }
+  return `<p>${text}</p>`
+}
+renderer.image = function (href, title, text) {
+  const url = /:|(\/{2})/.test(href) ? href : ($docsify.basePath + href).replace(/\/+/g, '/')
+  const titleHTML = title ? ` title="${title}"` : ''
+
+  return `<img src="${url}" alt="${text}"${titleHTML} />`
+}

src/core/render/index.js

@@ -1,12 +1,26 @@
-import { getNode, dom } from '../util/dom'
+import * as dom from '../util/dom'
 import cssVars from '../util/polyfill/css-vars'
 import * as tpl from './tpl'
 
+function renderMain () {
+
+}
+
+function renderNav () {
+}
+
+function renderSidebar () {
+}
+
 export function renderMixin (Docsify) {
   Docsify.prototype._renderTo = function (el, content, replace) {
-    const node = getNode(el)
+    const node = dom.getNode(el)
     if (node) node[replace ? 'outerHTML' : 'innerHTML'] = content
   }
+
+  Docsify.prototype._renderSidebar = renderSidebar
+  Docsify.prototype._renderNav = renderNav
+  Docsify.prototype._renderMain = renderMain
 }
 
 export function initRender (vm) {
@@ -40,7 +54,7 @@ export function initRender (vm) {
   dom.body.insertBefore(navEl, dom.body.children[0])
 
   if (config.themeColor) {
-    dom.head += tpl.theme(config.themeColor)
+    dom.$.head += tpl.theme(config.themeColor)
     // Polyfll
     cssVars(config.themeColor)
   }

src/core/render/progressbar.js

@@ -1,19 +1,18 @@
-import { dom } from '../util/dom'
+import * as dom from '../util/dom'
 import { isPrimitive } from '../util/core'
 
-let loadingEl
+let barEl
 let timeId
 
 /**
  * Init progress component
  */
 function init () {
-  if (loadingEl) return
   const div = dom.create('div')
 
   div.classList.add('progress')
-  dom.appendTo(div, dom.body)
-  loadingEl = div
+  dom.appendTo(dom.body, div)
+  barEl = div
 }
 /**
  * Render progress bar
@@ -21,26 +20,26 @@ function init () {
 export default function ({ loaded, total, step }) {
   let num
 
-  loadingEl = init()
+  !barEl && init()
 
   if (!isPrimitive(step)) {
     step = Math.floor(Math.random() * 5 + 1)
   }
   if (step) {
-    num = parseInt(loadingEl.style.width, 10) + step
+    num = parseInt(barEl.style.width, 10) + step
     num = num > 80 ? 80 : num
   } else {
     num = Math.floor(loaded / total * 100)
   }
 
-  loadingEl.style.opacity = 1
-  loadingEl.style.width = num >= 95 ? '100%' : num + '%'
+  barEl.style.opacity = 1
+  barEl.style.width = num >= 95 ? '100%' : num + '%'
 
   if (num >= 95) {
     clearTimeout(timeId)
     timeId = setTimeout(_ => {
-      loadingEl.style.opacity = 0
-      loadingEl.style.width = '0%'
+      barEl.style.opacity = 0
+      barEl.style.width = '0%'
     }, 200)
   }
 }