jyapayne/docsify
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: finish ssr

Browse source
This commit is contained in:
qingwei.li 2017-05-30 00:23:43 +08:00 • committed by cinwell.li
commit 3444884905
12 changed files with 163 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

4
packages/docsify-server-renderer/README.md
View file

@ -41,8 +41,8 @@ renderer.renderToString({ url })
<link rel="stylesheet" href="//unpkg.com/docsify/themes/buble.css" title="buble" disabled>
</head>
<body>
<div id="app"></div>
<!--inject-docsify-config-->
<!--inject-app-->
<!--inject-config-->
<script src="//unpkg.com/docsify/lib/docsify.js"></script>
</body>
</html>

100
packages/docsify-server-renderer/index.js
View file

@ -1,7 +1,27 @@
import { Compiler } from '../../src/core/render/compiler'
import { AbstractHistory } from '../../src/core/router/history/abstract'
import path from 'path'
import fs from 'fs'
import { resolve, basename } from 'path'
import { readFileSync } from 'fs'
import * as tpl from '../../src/core/render/tpl'
function cwd (...args) {
return resolve(process.cwd(), ...args)
}
function mainTpl (config) {
let html = `<nav class="app-nav${config.repo ? '' : 'no-badge'}"><!--navbar--></nav>`
if (config.repo) {
html += tpl.corner(config.repo)
}
if (config.coverpage) {
html += tpl.cover()
}
html += tpl.main(config)
return html
}
export default class Renderer {
constructor ({
@ -10,16 +30,80 @@ export default class Renderer {
config,
cache
}) {
this.template = template
this.path = path
this.config = config
this.html = this.template = template
this.path = cwd(path)
this.config = Object.assign(config, {
routerMode: 'history'
})
this.cache = cache
this.router = new AbstractHistory()
this.router = new AbstractHistory(config)
this.compiler = new Compiler(config, this.router)
this.router.getCurrentPath = () => this.url
this._renderHtml('inject-config', `<script>window.$docsify = ${JSON.stringify(config)}</script>`)
this._renderHtml('inject-app', mainTpl(config))
}
renderToString(url) {
console.log(url)
renderToString (url) {
this.url = url
// TODO render cover page
const { loadSidebar, loadNavbar } = this.config
const mainFile = cwd(this.path, `./${this.router.getFile(url)}`)
this._renderHtml('main', this._render(mainFile))
if (loadSidebar) {
const name = loadSidebar === true ? '_sidebar.md' : loadSidebar
const sidebarFile = cwd(mainFile, '..', name)
this._renderHtml('sidebar', this._render(sidebarFile, 'sidebar'))
}
if (loadNavbar) {
const name = loadNavbar === true ? '_navbar.md' : loadNavbar
const navbarFile = cwd(mainFile, '..', name)
this._renderHtml('navbar', this._render(navbarFile, 'navbar'))
}
return this.html
}
_renderHtml (match, content) {
this.html = this.html.replace(new RegExp(`<!--${match}-->`, 'g'), content)
}
_render (path, type) {
let html = this._loadFile(path)
switch (type) {
case 'sidebar':
html = this.compiler.sidebar(html)
break
case 'cover':
html = this.compiler.cover(html)
break
case 'navbar':
case 'article':
default:
html = this.compiler.compile(html)
break
}
return html
}
_loadFile (filePath) {
try {
return readFileSync(filePath, 'utf8')
} catch (e) {
const fileName = basename(filePath)
const parentPath = cwd(filePath, '../..')
if (this.path.length < parentPath.length) {
throw Error(`Not found file ${fileName}`)
}
this._loadFile(cwd(filePath, '../..', fileName))
}
}
}