fix(render): support html file

Author: QingWei-Li

src/core/event/scroll.js

@@ -9,7 +9,6 @@ export function scrollActiveSidebar () {
   const anchors = dom.findAll('.anchor')
   const sidebar = dom.find('.sidebar')
   const wrap = dom.find(sidebar, '.sidebar-nav')
-  const height = sidebar.clientHeight
 
   const nav = {}
   const lis = dom.findAll(sidebar, 'li')
@@ -54,6 +53,7 @@ export function scrollActiveSidebar () {
     // scroll into view
     // https://github.com/vuejs/vuejs.org/blob/master/themes/vue/source/js/common.js#L282-L297
     if (!hoverOver && dom.body.classList.contains('sticky')) {
+      const height = sidebar.clientHeight
       const curOffset = 0
       const cur = active.offsetTop + active.clientHeight + 40
       const isInView = (

src/core/fetch/index.js

@@ -15,6 +15,9 @@ export function fetchMixin (proto) {
 
     last = get(this.$getFile(path), true)
 
+    // Current page is html
+    this.isHTML = /\.html$/g.test(path)
+
     // Load main content
     last.then(text => {
       this._renderMain(text)
@@ -42,13 +45,15 @@ export function fetchMixin (proto) {
   proto._fetchCover = function () {
     const { coverpage } = this.config
     const root = getRoot(this.route.path)
+    const path = this.$getFile(root + coverpage)
 
     if (this.route.path !== '/' || !coverpage) {
       this._renderCover()
       return
     }
 
-    get(this.$getFile(root + coverpage))
+    this.coverIsHTML = /\.html$/g.test(path)
+    get(path)
       .then(text => this._renderCover(text))
   }
 

src/core/render/compiler.js

@@ -5,7 +5,7 @@ import { genTree } from './gen-tree'
 import { slugify, clearSlugCache } from './slugify'
 import { emojify } from './emojify'
 import { toURL, parse } from '../route/hash'
-import { getBasePath, getPath } from '../route/util'
+import { getBasePath, isResolvePath, getPath } from '../route/util'
 import { isFn, merge, cached } from '../util/core'
 
 let markdownCompiler = marked
@@ -84,9 +84,13 @@ renderer.paragraph = function (text) {
   return `<p>${text}</p>`
 }
 renderer.image = function (href, title, text) {
-  const url = getPath(contentBase, href)
+  let url = href
   const titleHTML = title ? ` title="${title}"` : ''
 
+  if (!isResolvePath(href)) {
+    url = getPath(contentBase, href)
+  }
+
   return `<img src="${url}" data-origin="${href}" alt="${text}"${titleHTML}>`
 }
 

src/core/render/index.js

@@ -5,7 +5,7 @@ import cssVars from '../util/polyfill/css-vars'
 import * as tpl from './tpl'
 import { markdown, sidebar, subSidebar, cover } from './compiler'
 import { callHook } from '../init/lifecycle'
-import { getBasePath, getPath } from '../route/util'
+import { getBasePath, getPath, isResolvePath } from '../route/util'
 
 function executeScript () {
   const script = dom.findAll('.markdown-section>script')
@@ -22,6 +22,7 @@ function executeScript () {
 function renderMain (html) {
   if (!html) {
     // TODO: Custom 404 page
+    html = 'not found'
   }
 
   this._renderTo('.markdown-section', html)
@@ -56,11 +57,13 @@ export function renderMixin (proto) {
     const active = getAndActive('.sidebar-nav', true, true)
     subSidebar(active, subMaxLevel)
     // bind event
+    this.activeLink = active
     scrollActiveSidebar()
 
     if (autoHeader && active) {
       const main = dom.getNode('#main')
-      if (main.children[0].tagName !== 'H1') {
+      const firstNode = main.children[0]
+      if (firstNode && firstNode.tagName !== 'H1') {
         const h1 = dom.create('h1')
         h1.innerText = active.innerText
         dom.before(main, h1)
@@ -75,7 +78,7 @@ export function renderMixin (proto) {
 
   proto._renderMain = function (text) {
     callHook(this, 'beforeEach', text, result => {
-      const html = markdown(result)
+      const html = this.isHTML ? result : markdown(result)
       callHook(this, 'afterEach', html, text => renderMain.call(this, text))
     })
   }
@@ -88,15 +91,20 @@ export function renderMixin (proto) {
     }
     dom.toggleClass(el, 'add', 'show')
 
-    let html = cover(text)
+    let html = this.coverIsHTML ? text : cover(text)
     const m = html.trim().match('<p><img.*?data-origin="(.*?)"[^a]+alt="(.*?)">([^<]*?)</p>$')
 
     if (m) {
       if (m[2] === 'color') {
         el.style.background = m[1] + (m[3] || '')
       } else {
+        let path = m[1]
+
         dom.toggleClass(el, 'add', 'has-mask')
-        el.style.backgroundImage = `url(${getPath(getBasePath(this.config.basePath), m[1])})`
+        if (isResolvePath(m[1])) {
+          path = getPath(getBasePath(this.config.basePath), m[1])
+        }
+        el.style.backgroundImage = `url(${path})`
       }
       html = html.replace(m[0], '')
     }
@@ -145,7 +153,7 @@ export function initRender (vm) {
   dom.before(dom.body, navEl)
 
   if (config.themeColor) {
-    dom.$.head += tpl.theme(config.themeColor)
+    dom.$.head.innerHTML += tpl.theme(config.themeColor)
     // Polyfll
     cssVars(config.themeColor)
   }

src/core/render/tpl.js

@@ -10,7 +10,7 @@ export function corner (data) {
   data = data.replace(/^git\+/, '')
 
   return (
-  '<a href="${data}" class="github-corner" aria-label="View source on Github">' +
+  `<a href="${data}" class="github-corner" aria-label="View source on Github">` +
     '<svg viewBox="0 0 250 250" aria-hidden="true">' +
       '<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>' +
       '<path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>' +

src/core/route/index.js

@@ -23,7 +23,7 @@ export function routeMixin (proto) {
 
     path = getAlias(path, config.alias)
     path = getFileName(path)
-    path = path === '/README.md' ? ('/' + config.homepage || path) : path
+    path = path === '/README.md' ? (config.homepage || path) : path
     path = getPath(base, path)
 
     return path

src/core/route/util.js

@@ -38,17 +38,17 @@ export const getBasePath = cached(base => {
 })
 
 export function getPath (...args) {
-  const path = args.find(path => /:|(\/{2})/.test(path))
-
-  if (path) return path
-
   return cleanPath(args.join('/'))
 }
 
+export const isResolvePath = cached(path => {
+  return /:|(\/{2})/.test(path)
+})
+
 export const getRoot = cached(path => {
   return /\/$/g.test(path) ? path : path.match(/(\S*\/)[^\/]+$/)[1]
 })
 
-export function cleanPath (path) {
+export const cleanPath = cached(path => {
   return path.replace(/\/+/g, '/')
-}
+})