* Add cover page

* Update doc

* Add kbd style, resolve #37

* headling can cliked, resolve #36

* Update change log, close #35

* Update docs
This commit is contained in:
cinwell.li 2016-12-22 00:24:54 +08:00 committed by GitHub
commit 50addfdac6
14 changed files with 312 additions and 48 deletions

View file

@ -1,8 +1,8 @@
import marked from 'marked'
import Prism from 'prismjs'
import * as tpl from './tpl'
import { activeLink, scrollActiveSidebar, bindToggle, scroll2Top } from './event'
import { genTree, getRoute } from './util'
import { activeLink, scrollActiveSidebar, bindToggle, scroll2Top, sticky } from './event'
import { genTree, getRoute, isMobile } from './util'
let OPTIONS = {}
const CACHE = {}
@ -32,7 +32,7 @@ renderer.heading = function (text, level) {
toc.push({ level, slug: `${route}#${encodeURIComponent(slug)}`, title: text })
return `<h${level} id="${slug}"><a href="${route}#${slug}" class="anchor"></a>${text}</h${level}>`
return `<a href="${route}#${slug}" data-id="${slug}" class="anchor"><h${level} id="${slug}">${text}</h${level}></a>`
}
// highlight code
renderer.code = function (code, lang = '') {
@ -55,11 +55,21 @@ marked.setOptions({ renderer })
export function renderApp (dom, replace) {
const nav = document.querySelector('nav') || document.createElement('nav')
dom[replace ? 'outerHTML' : 'innerHTML'] = tpl.toggle(OPTIONS.sidebarToggle) + tpl.corner(OPTIONS.repo) + tpl.main()
if (!OPTIONS.repo) nav.classList.add('no-badge')
dom[replace ? 'outerHTML' : 'innerHTML'] = tpl.corner(OPTIONS.repo) +
(OPTIONS.coverpage ? tpl.cover() : '') +
tpl.main(OPTIONS.sidebarToggle ? tpl.toggle() : '')
document.body.insertBefore(nav, document.body.children[0])
// bind toggle
bindToggle('button.sidebar-toggle')
// bind sticky effect
if (OPTIONS.coverpage) {
!isMobile() && window.addEventListener('scroll', sticky)
} else {
document.body.classList.add('sticky')
}
}
/**
@ -110,6 +120,20 @@ export function renderSidebar (content) {
toc = []
}
/**
* Cover Page
*/
export function renderCover (content) {
renderCover.dom = renderCover.dom || document.querySelector('section.cover')
if (!content) {
renderCover.dom.classList.add('hidden')
} else {
renderCover.dom.classList.remove('hidden')
!renderCover.rendered && renderTo('.cover-main', marked(content))
renderCover.rendered = true
}
}
/**
* render loading bar
* @return {[type]} [description]