35d3bd1647
* Refactor: use iife * Feat: customize sidebar and navbar via markdown file, #6 * Add changelog
83 lines
2.1 KiB
JavaScript
83 lines
2.1 KiB
JavaScript
import marked from 'marked'
|
|
import Prism from 'prismjs'
|
|
import * as tpl from './tpl'
|
|
import { activeLink, scrollActiveSidebar } from './event'
|
|
import { genTree } from './util'
|
|
|
|
const renderTo = function (dom, content) {
|
|
dom = typeof dom === 'object' ? dom : document.querySelector(dom)
|
|
dom.innerHTML = content
|
|
|
|
return dom
|
|
}
|
|
const toc = []
|
|
const renderer = new marked.Renderer()
|
|
|
|
/**
|
|
* render anchor tag
|
|
* @link https://github.com/chjj/marked#overriding-renderer-methods
|
|
*/
|
|
renderer.heading = function (text, level) {
|
|
const slug = text.toLowerCase().replace(/<(?:.|\n)*?>/gm, '').replace(/[\s\n\t]+/g, '-')
|
|
|
|
toc.push({ level, slug: '#' + slug, title: text })
|
|
|
|
return `<h${level} id="${slug}"><a href="#${slug}" class="anchor"></a>${text}</h${level}>`
|
|
}
|
|
// highlight code
|
|
renderer.code = function (code, lang = '') {
|
|
const hl = Prism.highlight(code, Prism.languages[lang] || Prism.languages.markup)
|
|
|
|
return `<pre data-lang="${lang}"><code class="lang-${lang}">${hl}</code></pre>`
|
|
}
|
|
marked.setOptions({ renderer })
|
|
|
|
/**
|
|
* App
|
|
*/
|
|
export function renderApp (dom, replace, opts) {
|
|
const nav = document.querySelector('nav') || document.createElement('nav')
|
|
|
|
dom[replace ? 'outerHTML' : 'innerHTML'] = tpl.corner(opts.repo) + tpl.main()
|
|
document.body.insertBefore(nav, document.body.children[0])
|
|
}
|
|
|
|
/**
|
|
* article
|
|
*/
|
|
export function renderArticle (content = 'not found') {
|
|
renderTo('article', marked(content))
|
|
if (!renderSidebar.rendered) renderSidebar(null)
|
|
if (!renderNavbar.rendered) renderNavbar(null)
|
|
}
|
|
|
|
/**
|
|
* navbar
|
|
*/
|
|
export function renderNavbar (content, OPTIONS = {}) {
|
|
renderNavbar.rendered = true
|
|
|
|
if (content) renderTo('nav', marked(content))
|
|
activeLink('nav')
|
|
}
|
|
|
|
/**
|
|
* sidebar
|
|
*/
|
|
export function renderSidebar (content, OPTIONS = {}) {
|
|
renderSidebar.rendered = true
|
|
|
|
let isToc = false
|
|
|
|
if (content) {
|
|
content = marked(content)
|
|
} else if (OPTIONS.sidebar) {
|
|
content = tpl.tree(OPTIONS.sidebar, '<ul>')
|
|
} else {
|
|
content = tpl.tree(genTree(toc, OPTIONS.maxLevel), '<ul>')
|
|
isToc = true
|
|
}
|
|
|
|
renderTo('aside.sidebar', content)
|
|
isToc ? scrollActiveSidebar() : activeLink('aside.sidebar', true)
|
|
}
|