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

refactor: build config (#408)

Browse source 
* refactor: build config

* chore: fix conflict

* fix: 404 page path
This commit is contained in:
cinwell.li 2018-03-03 22:51:27 +08:00 • committed by GitHub
commit 8352a1e489
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
64 changed files with 4246 additions and 5512 deletions
Download patch file Download diff file Expand all files Collapse all files

6
.eslintignore
View file

@ -1,3 +1,5 @@
.git/ .git
packages/docsify-server-renderer/build.js packages/docsify-server-renderer/build.js
node_modules node_modules
build
server.js

23
.eslintrc
View file

@ -1,15 +1,20 @@
{ {
"extends": [ "extends": "xo-space/browser",
"vue" "rules": {
], "semi": [2, "never"],
"parserOptions": { "no-return-assign": "off",
"ecmaVersion": 8 "no-unused-expressions": "off",
}, "no-new-func": "off",
"env": { "no-multi-assign": "off",
"browser": true "no-mixed-operators": "off",
"max-params": "off",
"no-script-url": "off",
"camelcase": "off",
"no-warning-comments": "off"
}, },
"globals": { "globals": {
"Docsify": true, "Docsify": true,
"$docsify": true "$docsify": true,
"process": true
} }
} }

1
README.md
View file

@ -71,7 +71,6 @@ Move to [awesome-docsify](https://github.com/QingWei-Li/awesome-docsify)
```bash ```bash
npm run bootstrap && npm run dev npm run bootstrap && npm run dev
open http://localhost:3000
``` ```
## Backers ## Backers

53
app.js
View file

@ -1,53 +0,0 @@
var serveStatic = require('serve-static')
var http = require('http')
var fs = require('fs')
var Renderer = require('./packages/docsify-server-renderer/build.js')
var renderer = new Renderer({
template: `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>docsify</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="/themes/vue.css" title="vue">
</head>
<body>
<!--inject-app-->
<!--inject-config-->
<script src="/lib/docsify.js"></script>
</body>
</html>`,
config: {
name: 'docsify',
repo: 'qingwei-li/docsify',
basePath: 'https://docsify.js.org/',
loadNavbar: true,
loadSidebar: true,
subMaxLevel: 3,
auto2top: true,
alias: {
'/de-de/changelog': '/changelog',
'/zh-cn/changelog': '/changelog',
'/changelog':
'https://raw.githubusercontent.com/QingWei-Li/docsify/master/CHANGELOG'
}
},
path: './'
})
http
.createServer(function (req, res) {
serveStatic('.')(req, res, function () {
// TEST SSR
// renderer.renderToString(req.url)
// .then(html => res.end(html))
res.writeHead(404, { 'Content-Type': 'text/html' })
res.end(fs.readFileSync('dev.html'))
})
})
.listen(3000, '0.0.0.0')
console.log(`\nListening at http://0.0.0.0:3000\n`)

50
build/build-css.js
View file

@ -1,50 +0,0 @@
var fs = require('fs')
var cssnano = require('cssnano').process
var resolve = require('path').resolve
var postcss = require('postcss')
var isProd = process.argv[process.argv.length - 1] !== '--dev'
var processor = postcss([
require('postcss-salad')({
features: {
precss: {
properties: {
preserve: true
}
}
}
})
])
var saveMin = function (file, content) {
fs.writeFileSync(resolve(__dirname, '../lib/themes/', file), content)
}
var save = function (file, content) {
fs.writeFileSync(resolve(__dirname, '../themes/', file), content)
}
var load = function (file) {
return fs.readFileSync(resolve(__dirname, '../src/themes/', file)).toString()
}
var loadLib = function (file) {
return fs.readFileSync(resolve(__dirname, '../themes/', file)).toString()
}
var list = fs.readdirSync(resolve(__dirname, '../src/themes'))
list.forEach(function (file) {
if (!/\.css$/.test(file)) return
processor
.process(load(file), { from: resolve(__dirname, '../src/themes/', file) })
.then(function (result) {
save(file, result.css)
console.log('salad - ' + file)
isProd &&
cssnano(loadLib(file)).then(function (result) {
saveMin(file, result.css)
console.log('cssnao - ' + file)
})
})
.catch(function (err) {
console.log(err)
})
})

133
build/build.js
View file

@ -1,19 +1,19 @@
var rollup = require('rollup') const rollup = require('rollup')
var buble = require('rollup-plugin-buble') const buble = require('rollup-plugin-buble')
var commonjs = require('rollup-plugin-commonjs') const commonjs = require('rollup-plugin-commonjs')
var nodeResolve = require('rollup-plugin-node-resolve') const nodeResolve = require('rollup-plugin-node-resolve')
var string = require('rollup-plugin-string') const uglify = require('rollup-plugin-uglify')
var uglify = require('rollup-plugin-uglify') const replace = require('rollup-plugin-replace')
var replace = require('rollup-plugin-replace') const isProd = process.env.NODE_ENV === 'production'
var isProd = process.argv[process.argv.length - 1] !== '--dev' const version = process.env.VERSION || require('../package.json').version
var version = process.env.VERSION || require('../package.json').version const chokidar = require('chokidar')
const path = require('path')
var build = function (opts) { const build = function(opts) {
rollup rollup
.rollup({ .rollup({
input: 'src/' + opts.entry, input: opts.input,
plugins: (opts.plugins || []).concat([ plugins: (opts.plugins || []).concat([
string({ include: '**/*.css' }),
buble(), buble(),
commonjs(), commonjs(),
nodeResolve(), nodeResolve(),
@ -23,8 +23,8 @@ var build = function (opts) {
}) })
]) ])
}) })
.then(function (bundle) { .then(function(bundle) {
var dest = 'lib/' + (opts.output || opts.entry) var dest = 'lib/' + (opts.output || opts.input)
console.log(dest) console.log(dest)
bundle.write({ bundle.write({
@ -33,45 +33,86 @@ var build = function (opts) {
strict: false strict: false
}) })
}) })
.catch(function (err) { .catch(function(err) {
console.error(err) console.error(err)
}) })
} }
const buildCore = function() {
build({
entry: 'core/index.js',
output: 'docsify.js'
})
var plugins = [
{ name: 'search', entry: 'search/index.js' },
{ name: 'ga', entry: 'ga.js' },
{ name: 'emoji', entry: 'emoji.js' },
{ name: 'external-script', entry: 'external-script.js' },
{ name: 'front-matter', entry: 'front-matter/index.js' },
{ name: 'zoom-image', entry: 'zoom-image.js' },
{ name: 'disqus', entry: 'disqus.js' },
{ name: 'gitalk', entry: 'gitalk.js' }
]
plugins.forEach(item => {
build({ build({
entry: 'plugins/' + item.entry, input: 'src/core/index.js',
output: 'plugins/' + item.name + '.js' output: 'docsify.js'
}) })
})
if (isProd) { if (isProd) {
build({
entry: 'core/index.js',
output: 'docsify.min.js',
plugins: [uglify()]
})
plugins.forEach(item => {
build({ build({
entry: 'plugins/' + item.entry, input: 'src/core/index.js',
output: 'plugins/' + item.name + '.min.js', output: 'docsify.min.js',
plugins: [uglify()] plugins: [uglify()]
}) })
}) }
}
const buildAllPlugin = function() {
var plugins = [
{name: 'search', input: 'search/index.js'},
{name: 'ga', input: 'ga.js'},
{name: 'emoji', input: 'emoji.js'},
{name: 'external-script', input: 'external-script.js'},
{name: 'front-matter', input: 'front-matter/index.js'},
{name: 'zoom-image', input: 'zoom-image.js'},
{name: 'disqus', input: 'disqus.js'},
{name: 'gitalk', input: 'gitalk.js'}
]
plugins.forEach(item => {
build({
input: 'src/plugins/' + item.input,
output: 'plugins/' + item.name + '.js'
})
})
if (isProd) {
plugins.forEach(item => {
build({
input: 'src/plugins/' + item.input,
output: 'plugins/' + item.name + '.min.js',
plugins: [uglify()]
})
})
}
}
if (!isProd) {
chokidar
.watch(['src/core', 'src/plugins'], {
atomic: true,
awaitWriteFinish: {
stabilityThreshold: 1000,
pollInterval: 100
}
})
.on('change', p => {
console.log('[watch] ', p)
const dirs = p.split(path.sep)
if (dirs[1] === 'core') {
buildCore()
} else if (dirs[2]) {
const name = path.basename(dirs[2], '.js')
const input = `src/plugins/${name}${
/\.js/.test(dirs[2]) ? '' : '/index'
}.js`
build({
input,
output: 'plugins/' + name + '.js'
})
}
})
.on('ready', () => {
console.log('[start]')
buildCore()
buildAllPlugin()
})
} else {
buildCore()
buildAllPlugin()
} }

0
build/build-cover.js → build/cover.js
View file

0
build/build-ssr.js → build/ssr.js
View file

4
docs/configuration.md
View file

@ -420,8 +420,8 @@ window.$docsify = {
List of languages that will fallback to the default language when a page is request and didn't exists for the given local. List of languages that will fallback to the default language when a page is request and didn't exists for the given local.
Example: Example:
- try to fetch the page of `/de/overview`. If this page exists, it'll be displayed - try to fetch the page of `/de/overview`. If this page exists, it'll be displayed
- then try to fetch the default page `/overview` (depending on the default language). If this page exists, it'll be displayed - then try to fetch the default page `/overview` (depending on the default language). If this page exists, it'll be displayed
- then display 404 page. - then display 404 page.

10
dev.html → index.html
View file

@ -1,5 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>docsify</title> <title>docsify</title>
@ -14,6 +15,7 @@
} }
</style> </style>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>
<script> <script>
@ -22,6 +24,7 @@
'.*?/changelog': 'https://raw.githubusercontent.com/QingWei-Li/docsify/master/CHANGELOG', '.*?/changelog': 'https://raw.githubusercontent.com/QingWei-Li/docsify/master/CHANGELOG',
'/.*/_navbar.md': '/_navbar.md' '/.*/_navbar.md': '/_navbar.md'
}, },
notFoundPage: '_404.html',
auto2top: true, auto2top: true,
basePath: '/docs/', basePath: '/docs/',
executeScript: true, executeScript: true,
@ -33,11 +36,11 @@
mergeNavbar: true, mergeNavbar: true,
formatUpdated: '{MM}/{DD} {HH}:{mm}', formatUpdated: '{MM}/{DD} {HH}:{mm}',
plugins: [ plugins: [
function(hook, vm) { function (hook, vm) {
hook.beforeEach(function (html) { hook.beforeEach(function (html) {
var url = 'https://github.com/QingWei-Li/docsify/blob/master/' + vm.route.file var url = 'https://github.com/QingWei-Li/docsify/blob/master/' + vm.route.file
var editHtml = '[:memo: Edit Document](' + url + ')\n' var editHtml = '[:memo: Edit Document](' + url + ')\n'
return editHtml return editHtml
+ html + html
+ '\n----\n' + '\n----\n'
@ -50,4 +53,5 @@
</script> </script>
<script src="/lib/docsify.js"></script> <script src="/lib/docsify.js"></script>
</body> </body>
</html>
</html>

5751
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

56
package.json
View file

@ -14,20 +14,27 @@
"url": "git+https://github.com/QingWei-Li/docsify.git" "url": "git+https://github.com/QingWei-Li/docsify.git"
}, },
"main": "lib/docsify.js", "main": "lib/docsify.js",
"files": [ "files": ["lib", "src", "themes"],
"lib",
"src",
"themes"
],
"scripts": { "scripts": {
"bootstrap": "npm i && lerna bootstrap && npm run build:ssr", "bootstrap": "npm i && lerna bootstrap && npm run build:ssr",
"build": "rimraf lib themes && node build/build && mkdir lib/themes && mkdir themes && node build/build-css && npm run build:ssr && node build/build-cover", "serve": "node server",
"dev:build": "rimraf lib themes && mkdir themes && node build/build --dev && node build/build-css --dev", "serve:ssr": "cross-env SSR=1 node server",
"dev:watch": "nodemon -w ./src/ -e js,css --exec \"npm run dev:build\"", "dev": "run-p serve watch:*",
"dev": "concurrently \"node app\" \"npm run dev:watch\"", "dev:ssr": "run-p serve:ssr watch:*",
"build:ssr": "node build/build-ssr", "lint": "eslint {src,packages} --fix",
"test": "eslint {src,packages} --fix", "test": "run-p lint",
"pub:next": "RELEASE_TAG=next sh build/release.sh", "css": "stylus src/themes/*.styl -u autoprefixer-stylus",
"watch:css": "run-p 'css -- -o themes -w'",
"watch:js": "node build/build.js",
"build:css:min":
"mkdir lib/themes && run-p 'css -- -o lib/themes' && cssnano lib/themes/*",
"build:css": "mkdir themes && run-p 'css -- -o themes'",
"build:js": "cross-env NODE_ENV=production node build/build.js",
"build:ssr": "node build/ssr.js",
"build:cover": "node build/cover.js",
"build":
"rimraf lib themes && run-s build:js build:css build:css:min build:ssr build:cover",
"pub:next": "cross-env RELEASE_TAG=next sh build/release.sh",
"pub": "sh build/release.sh", "pub": "sh build/release.sh",
"postinstall": "opencollective postinstall" "postinstall": "opencollective postinstall"
}, },
@ -40,16 +47,16 @@
"tweezer.js": "^1.4.0" "tweezer.js": "^1.4.0"
}, },
"devDependencies": { "devDependencies": {
"concurrently": "^3.5.1", "autoprefixer-stylus": "^0.14.0",
"chokidar": "^2.0.2",
"conventional-changelog-cli": "^1.3.5", "conventional-changelog-cli": "^1.3.5",
"cssnano": "^3.10.0", "cross-env": "^5.1.3",
"cssnano-cli": "^1.0.5",
"eslint": "^4.14.0", "eslint": "^4.14.0",
"eslint-config-vue": "^2.0.2", "eslint-config-xo-space": "^0.18.0",
"eslint-plugin-vue": "^4.0.1",
"lerna": "^2.5.1", "lerna": "^2.5.1",
"nodemon": "^1.14.7", "live-server": "^1.2.0",
"postcss": "^5.2.16", "npm-run-all": "^4.1.2",
"postcss-salad": "^1.0.8",
"rimraf": "^2.6.2", "rimraf": "^2.6.2",
"rollup": "^0.53.3", "rollup": "^0.53.3",
"rollup-plugin-async": "^1.2.0", "rollup-plugin-async": "^1.2.0",
@ -57,17 +64,10 @@
"rollup-plugin-commonjs": "^8.2.6", "rollup-plugin-commonjs": "^8.2.6",
"rollup-plugin-node-resolve": "^3.0.0", "rollup-plugin-node-resolve": "^3.0.0",
"rollup-plugin-replace": "^2.0.0", "rollup-plugin-replace": "^2.0.0",
"rollup-plugin-string": "^2.0.2",
"rollup-plugin-uglify": "^2.0.1", "rollup-plugin-uglify": "^2.0.1",
"serve-static": "^1.13.1" "stylus": "^0.54.5"
}, },
"keywords": [ "keywords": ["doc", "docs", "documentation", "creator", "generator"],
"doc",
"docs",
"documentation",
"creator",
"generator"
],
"collective": { "collective": {
"type": "opencollective", "type": "opencollective",
"url": "https://opencollective.com/docsify", "url": "https://opencollective.com/docsify",

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

@ -1,19 +1,19 @@
import * as tpl from '../../src/core/render/tpl' import * as tpl from '../../src/core/render/tpl'
import fetch from 'node-fetch' import fetch from 'node-fetch'
import { AbstractHistory } from '../../src/core/router/history/abstract' import {AbstractHistory} from '../../src/core/router/history/abstract'
import { Compiler } from '../../src/core/render/compiler' import {Compiler} from '../../src/core/render/compiler'
import { isAbsolutePath } from '../../src/core/router/util' import {isAbsolutePath} from '../../src/core/router/util'
import { readFileSync } from 'fs' import {readFileSync} from 'fs'
import { resolve, basename } from 'path' import {resolve, basename} from 'path'
import resolvePathname from 'resolve-pathname' import resolvePathname from 'resolve-pathname'
import debug from 'debug' import debug from 'debug'
import { prerenderEmbed } from '../../src/core/render/embed' import {prerenderEmbed} from '../../src/core/render/embed'
function cwd (...args) { function cwd(...args) {
return resolve(process.cwd(), ...args) return resolve(process.cwd(), ...args)
} }
function mainTpl (config) { function mainTpl(config) {
let html = `<nav class="app-nav${ let html = `<nav class="app-nav${
config.repo ? '' : ' no-badge' config.repo ? '' : ' no-badge'
}"><!--navbar--></nav>` }"><!--navbar--></nav>`
@ -31,7 +31,7 @@ function mainTpl (config) {
} }
export default class Renderer { export default class Renderer {
constructor ({ template, config, cache }) { constructor({template, config, cache}) {
this.html = template this.html = template
this.config = config = Object.assign({}, config, { this.config = config = Object.assign({}, config, {
routerMode: 'history' routerMode: 'history'
@ -51,15 +51,15 @@ export default class Renderer {
this.template = this.html this.template = this.html
} }
_getPath (url) { _getPath(url) {
const file = this.router.getFile(url) const file = this.router.getFile(url)
return isAbsolutePath(file) ? file : cwd(`./${file}`) return isAbsolutePath(file) ? file : cwd(`./${file}`)
} }
async renderToString (url) { async renderToString(url) {
this.url = url = this.router.parse(url).path this.url = url = this.router.parse(url).path
const { loadSidebar, loadNavbar, coverpage } = this.config const {loadSidebar, loadNavbar, coverpage} = this.config
const mainFile = this._getPath(url) const mainFile = this._getPath(url)
this._renderHtml('main', await this._render(mainFile, 'main')) this._renderHtml('main', await this._render(mainFile, 'main'))
@ -100,15 +100,16 @@ export default class Renderer {
return html return html
} }
_renderHtml (match, content) { _renderHtml(match, content) {
this.html = this.html.replace(new RegExp(`<!--${match}-->`, 'g'), content) this.html = this.html.replace(new RegExp(`<!--${match}-->`, 'g'), content)
return this.html return this.html
} }
async _render (path, type) { async _render(path, type) {
let html = await this._loadFile(path) let html = await this._loadFile(path)
const { subMaxLevel, maxLevel } = this.config const {subMaxLevel, maxLevel} = this.config
let tokens
switch (type) { switch (type) {
case 'sidebar': case 'sidebar':
@ -122,7 +123,7 @@ export default class Renderer {
html = this.compiler.cover(html) html = this.compiler.cover(html)
break break
case 'main': case 'main':
const tokens = await new Promise(r => { tokens = await new Promise(r => {
prerenderEmbed( prerenderEmbed(
{ {
fetch: url => this._loadFile(this._getPath(url)), fetch: url => this._loadFile(this._getPath(url)),
@ -144,13 +145,15 @@ export default class Renderer {
return html return html
} }
async _loadFile (filePath) { async _loadFile(filePath) {
debug('docsify')(`load > ${filePath}`) debug('docsify')(`load > ${filePath}`)
let content let content
try { try {
if (isAbsolutePath(filePath)) { if (isAbsolutePath(filePath)) {
const res = await fetch(filePath) const res = await fetch(filePath)
if (!res.ok) throw Error() if (!res.ok) {
throw Error()
}
content = await res.text() content = await res.text()
this.lock = 0 this.lock = 0
} else { } else {
@ -166,8 +169,11 @@ export default class Renderer {
} }
const fileName = basename(filePath) const fileName = basename(filePath)
const result = await this._loadFile(
resolvePathname(`../${fileName}`, filePath)
)
return await this._loadFile(resolvePathname(`../${fileName}`, filePath)) return result
} }
} }
} }

55
server.js Normal file
View file

@ -0,0 +1,55 @@
const liveServer = require('live-server')
const isSSR = !!process.env.SSR
const middleware = []
if (isSSR) {
const Renderer = require('./packages/docsify-server-renderer/build.js')
const renderer = new Renderer({
template: `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>docsify</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="/themes/vue.css" title="vue">
</head>
<body>
<!--inject-app-->
<!--inject-config-->
<script src="/lib/docsify.js"></script>
</body>
</html>`,
config: {
name: 'docsify',
repo: 'qingwei-li/docsify',
basePath: 'https://docsify.js.org/',
loadNavbar: true,
loadSidebar: true,
subMaxLevel: 3,
auto2top: true,
alias: {
'/de-de/changelog': '/changelog',
'/zh-cn/changelog': '/changelog',
'/changelog':
'https://raw.githubusercontent.com/QingWei-Li/docsify/master/CHANGELOG'
}
},
path: './'
})
middleware.push(function(req, res, next) {
if (/\.(css|js)$/.test(req.url)) {
return next()
}
renderer.renderToString(req.url).then(html => res.end(html))
})
}
const params = {
port: 3000,
watch: ['lib', 'docs', 'themes'],
middleware
}
liveServer.start(params)

30
src/core/config.js
View file

@ -1,4 +1,4 @@
import { merge, hyphenate, isPrimitive } from './util/core' import {merge, hyphenate, isPrimitive, hasOwn} from './util/core'
const config = merge( const config = merge(
{ {
@ -37,18 +37,30 @@ const script =
if (script) { if (script) {
for (const prop in config) { for (const prop in config) {
const val = script.getAttribute('data-' + hyphenate(prop)) if (hasOwn.call(config, prop)) {
const val = script.getAttribute('data-' + hyphenate(prop))
if (isPrimitive(val)) { if (isPrimitive(val)) {
config[prop] = val === '' ? true : val config[prop] = val === '' ? true : val
}
} }
} }
if (config.loadSidebar === true) config.loadSidebar = '_sidebar' + config.ext if (config.loadSidebar === true) {
if (config.loadNavbar === true) config.loadNavbar = '_navbar' + config.ext config.loadSidebar = '_sidebar' + config.ext
if (config.coverpage === true) config.coverpage = '_coverpage' + config.ext }
if (config.repo === true) config.repo = '' if (config.loadNavbar === true) {
if (config.name === true) config.name = '' config.loadNavbar = '_navbar' + config.ext
}
if (config.coverpage === true) {
config.coverpage = '_coverpage' + config.ext
}
if (config.repo === true) {
config.repo = ''
}
if (config.name === true) {
config.name = ''
}
} }
window.$docsify = config window.$docsify = config

10
src/core/event/index.js
View file

@ -1,9 +1,9 @@
import { isMobile } from '../util/env' import {isMobile} from '../util/env'
import { body, on } from '../util/dom' import {body, on} from '../util/dom'
import * as sidebar from './sidebar' import * as sidebar from './sidebar'
import { scrollIntoView } from './scroll' import {scrollIntoView} from './scroll'
export function eventMixin (proto) { export function eventMixin(proto) {
proto.$resetEvents = function () { proto.$resetEvents = function () {
scrollIntoView(this.route.path, this.route.query.id) scrollIntoView(this.route.path, this.route.query.id)
@ -13,7 +13,7 @@ export function eventMixin (proto) {
} }
} }
export function initEvent (vm) { export function initEvent(vm) {
// Bind toggle button // Bind toggle button
sidebar.btn('button.sidebar-toggle', vm.router) sidebar.btn('button.sidebar-toggle', vm.router)
sidebar.collapse('.sidebar', vm.router) sidebar.collapse('.sidebar', vm.router)

58
src/core/event/scroll.js
View file

@ -1,4 +1,4 @@
import { isMobile } from '../util/env' import {isMobile} from '../util/env'
import * as dom from '../util/dom' import * as dom from '../util/dom'
import Tweezer from 'tweezer.js' import Tweezer from 'tweezer.js'
@ -8,8 +8,10 @@ let scroller = null
let enableScrollEvent = true let enableScrollEvent = true
let coverHeight = 0 let coverHeight = 0
function scrollTo (el) { function scrollTo(el) {
if (scroller) scroller.stop() if (scroller) {
scroller.stop()
}
enableScrollEvent = false enableScrollEvent = false
scroller = new Tweezer({ scroller = new Tweezer({
start: window.pageYOffset, start: window.pageYOffset,
@ -24,8 +26,10 @@ function scrollTo (el) {
.begin() .begin()
} }
function highlight (path) { function highlight(path) {
if (!enableScrollEvent) return if (!enableScrollEvent) {
return
}
const sidebar = dom.getNode('.sidebar') const sidebar = dom.getNode('.sidebar')
const anchors = dom.findAll('.anchor') const anchors = dom.findAll('.anchor')
const wrap = dom.find(sidebar, '.sidebar-nav') const wrap = dom.find(sidebar, '.sidebar-nav')
@ -38,22 +42,28 @@ function highlight (path) {
const node = anchors[i] const node = anchors[i]
if (node.offsetTop > top) { if (node.offsetTop > top) {
if (!last) last = node if (!last) {
last = node
}
break break
} else { } else {
last = node last = node
} }
} }
if (!last) return if (!last) {
return
}
const li = nav[getNavKey(path, last.getAttribute('data-id'))] const li = nav[getNavKey(path, last.getAttribute('data-id'))]
if (!li || li === active) return if (!li || li === active) {
return
}
active && active.classList.remove('active') active && active.classList.remove('active')
li.classList.add('active') li.classList.add('active')
active = li active = li
// scroll into view // Scroll into view
// https://github.com/vuejs/vuejs.org/blob/master/themes/vue/source/js/common.js#L282-L297 // https://github.com/vuejs/vuejs.org/blob/master/themes/vue/source/js/common.js#L282-L297
if (!hoverOver && dom.body.classList.contains('sticky')) { if (!hoverOver && dom.body.classList.contains('sticky')) {
const height = sidebar.clientHeight const height = sidebar.clientHeight
@ -68,11 +78,11 @@ function highlight (path) {
} }
} }
function getNavKey (path, id) { function getNavKey(path, id) {
return `${path}?id=${id}` return `${path}?id=${id}`
} }
export function scrollActiveSidebar (router) { export function scrollActiveSidebar(router) {
const cover = dom.find('.cover.show') const cover = dom.find('.cover.show')
coverHeight = cover ? cover.offsetHeight : 0 coverHeight = cover ? cover.offsetHeight : 0
@ -82,18 +92,26 @@ export function scrollActiveSidebar (router) {
for (let i = 0, len = lis.length; i < len; i += 1) { for (let i = 0, len = lis.length; i < len; i += 1) {
const li = lis[i] const li = lis[i]
const a = li.querySelector('a') const a = li.querySelector('a')
if (!a) continue if (!a) {
continue
}
let href = a.getAttribute('href') let href = a.getAttribute('href')
if (href !== '/') { if (href !== '/') {
const { query: { id }, path } = router.parse(href) const {query: {id}, path} = router.parse(href)
if (id) href = getNavKey(path, id) if (id) {
href = getNavKey(path, id)
}
} }
if (href) nav[decodeURIComponent(href)] = li if (href) {
nav[decodeURIComponent(href)] = li
}
} }
if (isMobile) return if (isMobile) {
return
}
const path = router.getCurrentPath() const path = router.getCurrentPath()
dom.off('scroll', () => highlight(path)) dom.off('scroll', () => highlight(path))
dom.on('scroll', () => highlight(path)) dom.on('scroll', () => highlight(path))
@ -105,8 +123,10 @@ export function scrollActiveSidebar (router) {
}) })
} }
export function scrollIntoView (path, id) { export function scrollIntoView(path, id) {
if (!id) return if (!id) {
return
}
const section = dom.find('#' + id) const section = dom.find('#' + id)
section && scrollTo(section) section && scrollTo(section)
@ -120,6 +140,6 @@ export function scrollIntoView (path, id) {
const scrollEl = dom.$.scrollingElement || dom.$.documentElement const scrollEl = dom.$.scrollingElement || dom.$.documentElement
export function scroll2Top (offset = 0) { export function scroll2Top(offset = 0) {
scrollEl.scrollTop = offset === true ? 0 : Number(offset) scrollEl.scrollTop = offset === true ? 0 : Number(offset)
} }

16
src/core/event/sidebar.js
View file

@ -1,11 +1,11 @@
import { isMobile } from '../util/env' import {isMobile} from '../util/env'
import * as dom from '../util/dom' import * as dom from '../util/dom'
const title = dom.$.title const title = dom.$.title
/** /**
* Toggle button * Toggle button
*/ */
export function btn (el, router) { export function btn(el) {
const toggle = _ => dom.body.classList.toggle('close') const toggle = _ => dom.body.classList.toggle('close')
el = dom.getNode(el) el = dom.getNode(el)
@ -22,10 +22,10 @@ export function btn (el, router) {
) )
} }
export function collapse (el, router) { export function collapse(el) {
el = dom.getNode(el) el = dom.getNode(el)
dom.on(el, 'click', ({ target }) => { dom.on(el, 'click', ({target}) => {
if ( if (
target.nodeName === 'A' && target.nodeName === 'A' &&
target.nextSibling && target.nextSibling &&
@ -36,9 +36,11 @@ export function collapse (el, router) {
}) })
} }
export function sticky () { export function sticky() {
const cover = dom.getNode('section.cover') const cover = dom.getNode('section.cover')
if (!cover) return if (!cover) {
return
}
const coverHeight = cover.getBoundingClientRect().height const coverHeight = cover.getBoundingClientRect().height
if (window.pageYOffset >= coverHeight || cover.classList.contains('hidden')) { if (window.pageYOffset >= coverHeight || cover.classList.contains('hidden')) {
@ -56,7 +58,7 @@ export function sticky () {
* @param {Boolean} autoTitle auto set title * @param {Boolean} autoTitle auto set title
* @return {element} * @return {element}
*/ */
export function getAndActive (router, el, isParent, autoTitle) { export function getAndActive(router, el, isParent, autoTitle) {
el = dom.getNode(el) el = dom.getNode(el)
const links = dom.findAll(el, 'a') const links = dom.findAll(el, 'a')

12
src/core/fetch/ajax.js
View file

@ -1,5 +1,5 @@
import progressbar from '../render/progressbar' import progressbar from '../render/progressbar'
import { noop } from '../util/core' import {noop, hasOwn} from '../util/core'
const cache = {} const cache = {}
@ -9,7 +9,7 @@ const cache = {}
* @param {boolean} [hasBar=false] has progress bar * @param {boolean} [hasBar=false] has progress bar
* @return { then(resolve, reject), abort } * @return { then(resolve, reject), abort }
*/ */
export function get (url, hasBar = false, headers = {}) { export function get(url, hasBar = false, headers = {}) {
const xhr = new XMLHttpRequest() const xhr = new XMLHttpRequest()
const on = function () { const on = function () {
xhr.addEventListener.apply(xhr, arguments) xhr.addEventListener.apply(xhr, arguments)
@ -17,12 +17,14 @@ export function get (url, hasBar = false, headers = {}) {
const cached = cache[url] const cached = cache[url]
if (cached) { if (cached) {
return { then: cb => cb(cached.content, cached.opt), abort: noop } return {then: cb => cb(cached.content, cached.opt), abort: noop}
} }
xhr.open('GET', url) xhr.open('GET', url)
for (const i in headers) { for (const i in headers) {
xhr.setRequestHeader(i, headers[i]) if (hasOwn.call(headers, i)) {
xhr.setRequestHeader(i, headers[i])
}
} }
xhr.send() xhr.send()
@ -45,7 +47,7 @@ export function get (url, hasBar = false, headers = {}) {
} }
on('error', error) on('error', error)
on('load', ({ target }) => { on('load', ({target}) => {
if (target.status >= 400) { if (target.status >= 400) {
error(target) error(target)
} else { } else {

121
src/core/fetch/index.js
View file

@ -1,14 +1,16 @@
import { get } from './ajax' import {get} from './ajax'
import { callHook } from '../init/lifecycle' import {callHook} from '../init/lifecycle'
import { getParentPath, stringifyQuery } from '../router/util' import {getParentPath, stringifyQuery} from '../router/util'
import { noop } from '../util/core' import {noop} from '../util/core'
import { getAndActive } from '../event/sidebar' import {getAndActive} from '../event/sidebar'
function loadNested (path, qs, file, next, vm, first) { function loadNested(path, qs, file, next, vm, first) {
path = first ? path : path.replace(/\/$/, '') path = first ? path : path.replace(/\/$/, '')
path = getParentPath(path) path = getParentPath(path)
if (!path) return if (!path) {
return
}
get( get(
vm.router.getFile(path + file) + qs, vm.router.getFile(path + file) + qs,
@ -17,7 +19,7 @@ function loadNested (path, qs, file, next, vm, first) {
).then(next, _ => loadNested(path, qs, file, next, vm)) ).then(next, _ => loadNested(path, qs, file, next, vm))
} }
export function fetchMixin (proto) { export function fetchMixin(proto) {
let last let last
const abort = () => last && last.abort && last.abort() const abort = () => last && last.abort && last.abort()
@ -28,27 +30,39 @@ export function fetchMixin (proto) {
} }
const get404Path = (path, config) => { const get404Path = (path, config) => {
const { notFoundPage, ext } = config const {notFoundPage, ext} = config
const defaultPath = '_404' + (ext || '.md') const defaultPath = '_404' + (ext || '.md')
let key
let path404
switch (typeof notFoundPage) { switch (typeof notFoundPage) {
case 'boolean': case 'boolean':
return defaultPath path404 = defaultPath
break
case 'string': case 'string':
return notFoundPage path404 = notFoundPage
case 'object': break
const key = Object
.keys(notFoundPage)
.sort((a, b) => b.length - a.length)
.find((key) => path.match(new RegExp('^' + key)))
return key && notFoundPage[key] || defaultPath case 'object':
key = Object.keys(notFoundPage)
.sort((a, b) => b.length - a.length)
.find(key => path.match(new RegExp('^' + key)))
path404 = (key && notFoundPage[key]) || defaultPath
break
default:
break
} }
return path404
} }
proto._loadSideAndNav = function (path, qs, loadSidebar, cb) { proto._loadSideAndNav = function (path, qs, loadSidebar, cb) {
return () => { return () => {
if (!loadSidebar) return cb() if (!loadSidebar) {
return cb()
}
const fn = result => { const fn = result => {
this._renderSidebar(result) this._renderSidebar(result)
@ -61,9 +75,9 @@ export function fetchMixin (proto) {
} }
proto._fetch = function (cb = noop) { proto._fetch = function (cb = noop) {
const { path, query } = this.route const {path, query} = this.route
const qs = stringifyQuery(query, ['id']) const qs = stringifyQuery(query, ['id'])
const { loadNavbar, requestHeaders, loadSidebar } = this.config const {loadNavbar, requestHeaders, loadSidebar} = this.config
// Abort last request // Abort last request
const file = this.router.getFile(path) const file = this.router.getFile(path)
@ -73,28 +87,32 @@ export function fetchMixin (proto) {
this.isHTML = /\.html$/g.test(file) this.isHTML = /\.html$/g.test(file)
// Load main content // Load main content
req req.then(
.then( (text, opt) =>
(text, opt) => this._renderMain(text, opt, this._loadSideAndNav(path, qs, loadSidebar, cb)), this._renderMain(
_ => { text,
this._fetchFallbackPage(file, qs, cb) || this._fetch404(file, qs, cb) opt,
} this._loadSideAndNav(path, qs, loadSidebar, cb)
) ),
_ => {
this._fetchFallbackPage(file, qs, cb) || this._fetch404(file, qs, cb)
}
)
// Load nav // Load nav
loadNavbar && loadNavbar &&
loadNested( loadNested(
path, path,
qs, qs,
loadNavbar, loadNavbar,
text => this._renderNav(text), text => this._renderNav(text),
this, this,
true true
) )
} }
proto._fetchCover = function () { proto._fetchCover = function () {
const { coverpage, requestHeaders } = this.config const {coverpage, requestHeaders} = this.config
const query = this.route.query const query = this.route.query
const root = getParentPath(this.route.path) const root = getParentPath(this.route.path)
@ -112,7 +130,7 @@ export function fetchMixin (proto) {
path = cover === true ? '_coverpage' : cover path = cover === true ? '_coverpage' : cover
} }
const coverOnly = !!path && this.config.onlyCover const coverOnly = Boolean(path) && this.config.onlyCover
if (path) { if (path) {
path = this.router.getFile(root + path) path = this.router.getFile(root + path)
this.coverIsHTML = /\.html$/g.test(path) this.coverIsHTML = /\.html$/g.test(path)
@ -137,7 +155,7 @@ export function fetchMixin (proto) {
if (onlyCover) { if (onlyCover) {
done() done()
} else { } else {
this._fetch(result => { this._fetch(() => {
this.$resetEvents() this.$resetEvents()
done() done()
}) })
@ -145,7 +163,7 @@ export function fetchMixin (proto) {
} }
proto._fetchFallbackPage = function (path, qs, cb = noop) { proto._fetchFallbackPage = function (path, qs, cb = noop) {
const { requestHeaders, fallbackLanguages, loadSidebar } = this.config const {requestHeaders, fallbackLanguages, loadSidebar} = this.config
if (!fallbackLanguages) { if (!fallbackLanguages) {
return false return false
@ -160,7 +178,12 @@ export function fetchMixin (proto) {
const req = request(newPath + qs, true, requestHeaders) const req = request(newPath + qs, true, requestHeaders)
req.then( req.then(
(text, opt) => this._renderMain(text, opt, this._loadSideAndNav(path, qs, loadSidebar, cb)), (text, opt) =>
this._renderMain(
text,
opt,
this._loadSideAndNav(path, qs, loadSidebar, cb)
),
() => this._fetch404(path, qs, cb) () => this._fetch404(path, qs, cb)
) )
@ -175,16 +198,16 @@ export function fetchMixin (proto) {
* @private * @private
*/ */
proto._fetch404 = function (path, qs, cb = noop) { proto._fetch404 = function (path, qs, cb = noop) {
const { loadSidebar, requestHeaders, notFoundPage } = this.config const {loadSidebar, requestHeaders, notFoundPage} = this.config
const fnLoadSideAndNav = this._loadSideAndNav(path, qs, loadSidebar, cb) const fnLoadSideAndNav = this._loadSideAndNav(path, qs, loadSidebar, cb)
if (notFoundPage) { if (notFoundPage) {
request(get404Path(path, this.config), true, requestHeaders) const path404 = get404Path(path, this.config)
.then(
(text, opt) => this._renderMain(text, opt, fnLoadSideAndNav), request(this.router.getFile(path404), true, requestHeaders).then(
() => this._renderMain(null, {}, fnLoadSideAndNav) (text, opt) => this._renderMain(text, opt, fnLoadSideAndNav),
) () => this._renderMain(null, {}, fnLoadSideAndNav)
)
return true return true
} }
@ -193,8 +216,8 @@ export function fetchMixin (proto) {
} }
} }
export function initFetch (vm) { export function initFetch(vm) {
const { loadSidebar } = vm.config const {loadSidebar} = vm.config
// Server-Side Rendering // Server-Side Rendering
if (vm.rendered) { if (vm.rendered) {

8
src/core/global-api.js
View file

@ -1,13 +1,13 @@
import * as util from './util' import * as util from './util'
import * as dom from './util/dom' import * as dom from './util/dom'
import { Compiler } from './render/compiler' import {Compiler} from './render/compiler'
import { slugify } from './render/slugify' import {slugify} from './render/slugify'
import { get } from './fetch/ajax' import {get} from './fetch/ajax'
import marked from 'marked' import marked from 'marked'
import prism from 'prismjs' import prism from 'prismjs'
export default function () { export default function () {
window.Docsify = { util, dom, get, slugify } window.Docsify = {util, dom, get, slugify}
window.DocsifyCompiler = Compiler window.DocsifyCompiler = Compiler
window.marked = marked window.marked = marked
window.Prism = prism window.Prism = prism

14
src/core/index.js
View file

@ -1,14 +1,14 @@
import { initMixin } from './init' import {initMixin} from './init'
import { routerMixin } from './router' import {routerMixin} from './router'
import { renderMixin } from './render' import {renderMixin} from './render'
import { fetchMixin } from './fetch' import {fetchMixin} from './fetch'
import { eventMixin } from './event' import {eventMixin} from './event'
import initGlobalAPI from './global-api' import initGlobalAPI from './global-api'
/** /**
* Fork https://github.com/bendrucker/document-ready/blob/master/index.js * Fork https://github.com/bendrucker/document-ready/blob/master/index.js
*/ */
function ready (callback) { function ready(callback) {
const state = document.readyState const state = document.readyState
if (state === 'complete' || state === 'interactive') { if (state === 'complete' || state === 'interactive') {
@ -18,7 +18,7 @@ function ready (callback) {
document.addEventListener('DOMContentLoaded', callback) document.addEventListener('DOMContentLoaded', callback)
} }
function Docsify () { function Docsify() {
this._init() this._init()
} }

16
src/core/init/index.js
View file

@ -1,12 +1,12 @@
import config from '../config' import config from '../config'
import { initLifecycle, callHook } from './lifecycle' import {initLifecycle, callHook} from './lifecycle'
import { initRender } from '../render' import {initRender} from '../render'
import { initRouter } from '../router' import {initRouter} from '../router'
import { initEvent } from '../event' import {initEvent} from '../event'
import { initFetch } from '../fetch' import {initFetch} from '../fetch'
import { isFn } from '../util/core' import {isFn} from '../util/core'
export function initMixin (proto) { export function initMixin(proto) {
proto._init = function () { proto._init = function () {
const vm = this const vm = this
vm.config = config || {} vm.config = config || {}
@ -22,6 +22,6 @@ export function initMixin (proto) {
} }
} }
function initPlugin (vm) { function initPlugin(vm) {
[].concat(vm.config.plugins).forEach(fn => isFn(fn) && fn(vm._lifecycle, vm)) [].concat(vm.config.plugins).forEach(fn => isFn(fn) && fn(vm._lifecycle, vm))
} }

26
src/core/init/lifecycle.js
View file

@ -1,6 +1,6 @@
import { noop } from '../util/core' import {noop} from '../util/core'
export function initLifecycle (vm) { export function initLifecycle(vm) {
const hooks = [ const hooks = [
'init', 'init',
'mounted', 'mounted',
@ -18,28 +18,26 @@ export function initLifecycle (vm) {
}) })
} }
export function callHook (vm, hook, data, next = noop) { export function callHook(vm, hook, data, next = noop) {
const queue = vm._hooks[hook] const queue = vm._hooks[hook]
const step = function (index) { const step = function (index) {
const hook = queue[index] const hook = queue[index]
if (index >= queue.length) { if (index >= queue.length) {
next(data) next(data)
} else { } else if (typeof hook === 'function') {
if (typeof hook === 'function') { if (hook.length === 2) {
if (hook.length === 2) { hook(data, result => {
hook(data, result => { data = result
data = result
step(index + 1)
})
} else {
const result = hook(data)
data = result !== undefined ? result : data
step(index + 1) step(index + 1)
} })
} else { } else {
const result = hook(data)
data = result === undefined ? data : result
step(index + 1) step(index + 1)
} }
} else {
step(index + 1)
} }
} }

81
src/core/render/compiler.js
View file

@ -1,15 +1,15 @@
import marked from 'marked' import marked from 'marked'
import Prism from 'prismjs' import Prism from 'prismjs'
import { helper as helperTpl, tree as treeTpl } from './tpl' import {helper as helperTpl, tree as treeTpl} from './tpl'
import { genTree } from './gen-tree' import {genTree} from './gen-tree'
import { slugify } from './slugify' import {slugify} from './slugify'
import { emojify } from './emojify' import {emojify} from './emojify'
import { isAbsolutePath, getPath } from '../router/util' import {isAbsolutePath, getPath} from '../router/util'
import { isFn, merge, cached, isPrimitive } from '../util/core' import {isFn, merge, cached, isPrimitive} from '../util/core'
const cachedLinks = {} const cachedLinks = {}
export function getAndRemoveConfig (str = '') { export function getAndRemoveConfig(str = '') {
const config = {} const config = {}
if (str) { if (str) {
@ -21,35 +21,37 @@ export function getAndRemoveConfig (str = '') {
.trim() .trim()
} }
return { str, config } return {str, config}
} }
const compileMedia = { const compileMedia = {
markdown (url) { markdown(url) {
return { return {
url url
} }
}, },
iframe (url, title) { iframe(url, title) {
return { return {
code: `<iframe src="${url}" ${title || 'width=100% height=400'}></iframe>` code: `<iframe src="${url}" ${title || 'width=100% height=400'}></iframe>`
} }
}, },
video (url, title) { video(url, title) {
return { return {
code: `<video src="${url}" ${title || 'controls'}>Not Support</video>` code: `<video src="${url}" ${title || 'controls'}>Not Support</video>`
} }
}, },
audio (url, title) { audio(url, title) {
return { return {
code: `<audio src="${url}" ${title || 'controls'}>Not Support</audio>` code: `<audio src="${url}" ${title || 'controls'}>Not Support</audio>`
} }
}, },
code (url, title) { code(url, title) {
let lang = url.match(/\.(\w+)$/) let lang = url.match(/\.(\w+)$/)
lang = title || (lang && lang[1]) lang = title || (lang && lang[1])
if (lang === 'md') lang = 'markdown' if (lang === 'md') {
lang = 'markdown'
}
return { return {
url, url,
@ -59,7 +61,7 @@ const compileMedia = {
} }
export class Compiler { export class Compiler {
constructor (config, router) { constructor(config, router) {
this.config = config this.config = config
this.router = router this.router = router
this.cacheTree = {} this.cacheTree = {}
@ -86,7 +88,9 @@ export class Compiler {
this.compile = cached(text => { this.compile = cached(text => {
let html = '' let html = ''
if (!text) return text if (!text) {
return text
}
if (isPrimitive(text)) { if (isPrimitive(text)) {
html = compile(text) html = compile(text)
@ -101,8 +105,8 @@ export class Compiler {
}) })
} }
compileEmbed (href, title) { compileEmbed(href, title) {
const { str, config } = getAndRemoveConfig(title) const {str, config} = getAndRemoveConfig(title)
let embed let embed
title = str title = str
@ -134,7 +138,7 @@ export class Compiler {
} }
} }
_matchNotCompileLink (link) { _matchNotCompileLink(link) {
const links = this.config.noCompileLinks || [] const links = this.config.noCompileLinks || []
for (var i = 0; i < links.length; i++) { for (var i = 0; i < links.length; i++) {
@ -147,18 +151,18 @@ export class Compiler {
} }
} }
_initRenderer () { _initRenderer() {
const renderer = new marked.Renderer() const renderer = new marked.Renderer()
const { linkTarget, router, contentBase } = this const {linkTarget, router, contentBase} = this
const _self = this const _self = this
const origin = {} const origin = {}
/** /**
* render anchor tag * Render anchor tag
* @link https://github.com/chjj/marked#overriding-renderer-methods * @link https://github.com/chjj/marked#overriding-renderer-methods
*/ */
origin.heading = renderer.heading = function (text, level) { origin.heading = renderer.heading = function (text, level) {
const nextToc = { level, title: text } const nextToc = {level, title: text}
if (/{docsify-ignore}/g.test(text)) { if (/{docsify-ignore}/g.test(text)) {
text = text.replace('{docsify-ignore}', '') text = text.replace('{docsify-ignore}', '')
@ -173,13 +177,13 @@ export class Compiler {
} }
const slug = slugify(text) const slug = slugify(text)
const url = router.toURL(router.getCurrentPath(), { id: slug }) const url = router.toURL(router.getCurrentPath(), {id: slug})
nextToc.slug = url nextToc.slug = url
_self.toc.push(nextToc) _self.toc.push(nextToc)
return `<h${level} id="${slug}"><a href="${url}" data-id="${slug}" class="anchor"><span>${text}</span></a></h${level}>` return `<h${level} id="${slug}"><a href="${url}" data-id="${slug}" class="anchor"><span>${text}</span></a></h${level}>`
} }
// highlight code // Highlight code
origin.code = renderer.code = function (code, lang = '') { origin.code = renderer.code = function (code, lang = '') {
code = code.replace(/@DOCSIFY_QM@/g, '`') code = code.replace(/@DOCSIFY_QM@/g, '`')
const hl = Prism.highlight( const hl = Prism.highlight(
@ -192,7 +196,7 @@ export class Compiler {
origin.link = renderer.link = function (href, title = '', text) { origin.link = renderer.link = function (href, title = '', text) {
let attrs = '' let attrs = ''
const { str, config } = getAndRemoveConfig(title) const {str, config} = getAndRemoveConfig(title)
title = str title = str
if ( if (
@ -200,7 +204,9 @@ export class Compiler {
!_self._matchNotCompileLink(href) && !_self._matchNotCompileLink(href) &&
!config.ignore !config.ignore
) { ) {
if (href === _self.config.homepage) href = 'README' if (href === _self.config.homepage) {
href = 'README'
}
href = router.toURL(href, null, router.getCurrentPath()) href = router.toURL(href, null, router.getCurrentPath())
} else { } else {
attrs += ` target="${linkTarget}"` attrs += ` target="${linkTarget}"`
@ -222,18 +228,21 @@ export class Compiler {
return `<a href="${href}"${attrs}>${text}</a>` return `<a href="${href}"${attrs}>${text}</a>`
} }
origin.paragraph = renderer.paragraph = function (text) { origin.paragraph = renderer.paragraph = function (text) {
let result
if (/^!&gt;/.test(text)) { if (/^!&gt;/.test(text)) {
return helperTpl('tip', text) result = helperTpl('tip', text)
} else if (/^\?&gt;/.test(text)) { } else if (/^\?&gt;/.test(text)) {
return helperTpl('warn', text) result = helperTpl('warn', text)
} else {
result = `<p>${text}</p>`
} }
return `<p>${text}</p>` return result
} }
origin.image = renderer.image = function (href, title, text) { origin.image = renderer.image = function (href, title, text) {
let url = href let url = href
let attrs = '' let attrs = ''
const { str, config } = getAndRemoveConfig(title) const {str, config} = getAndRemoveConfig(title)
title = str title = str
if (config['no-zoom']) { if (config['no-zoom']) {
@ -271,7 +280,7 @@ export class Compiler {
/** /**
* Compile sidebar * Compile sidebar
*/ */
sidebar (text, level) { sidebar(text, level) {
const currentPath = this.router.getCurrentPath() const currentPath = this.router.getCurrentPath()
let html = '' let html = ''
@ -290,13 +299,13 @@ export class Compiler {
/** /**
* Compile sub sidebar * Compile sub sidebar
*/ */
subSidebar (level) { subSidebar(level) {
if (!level) { if (!level) {
this.toc = [] this.toc = []
return return
} }
const currentPath = this.router.getCurrentPath() const currentPath = this.router.getCurrentPath()
const { cacheTree, toc } = this const {cacheTree, toc} = this
toc[0] && toc[0].ignoreAllSubs && toc.splice(0) toc[0] && toc[0].ignoreAllSubs && toc.splice(0)
toc[0] && toc[0].level === 1 && toc.shift() toc[0] && toc[0].level === 1 && toc.shift()
@ -312,14 +321,14 @@ export class Compiler {
return treeTpl(tree, '<ul class="app-sub-sidebar">') return treeTpl(tree, '<ul class="app-sub-sidebar">')
} }
article (text) { article(text) {
return this.compile(text) return this.compile(text)
} }
/** /**
* Compile cover page * Compile cover page
*/ */
cover (text) { cover(text) {
const cacheToc = this.toc.slice() const cacheToc = this.toc.slice()
const html = this.compile(text) const html = this.compile(text)

14
src/core/render/embed.js
View file

@ -1,9 +1,9 @@
import { get } from '../fetch/ajax' import {get} from '../fetch/ajax'
import { merge } from '../util/core' import {merge} from '../util/core'
const cached = {} const cached = {}
function walkFetchEmbed ({ step = 0, embedTokens, compile, fetch }, cb) { function walkFetchEmbed({step = 0, embedTokens, compile, fetch}, cb) {
const token = embedTokens[step] const token = embedTokens[step]
if (!token) { if (!token) {
@ -25,8 +25,8 @@ function walkFetchEmbed ({ step = 0, embedTokens, compile, fetch }, cb) {
) )
} }
} }
cb({ token, embedToken }) cb({token, embedToken})
walkFetchEmbed({ step: ++step, compile, embedTokens, fetch }, cb) walkFetchEmbed({step: ++step, compile, embedTokens, fetch}, cb)
} }
if (process.env.SSR) { if (process.env.SSR) {
@ -36,7 +36,7 @@ function walkFetchEmbed ({ step = 0, embedTokens, compile, fetch }, cb) {
} }
} }
export function prerenderEmbed ({ compiler, raw = '', fetch }, done) { export function prerenderEmbed({compiler, raw = '', fetch}, done) {
let hit let hit
if ((hit = cached[raw])) { if ((hit = cached[raw])) {
return done(hit) return done(hit)
@ -72,7 +72,7 @@ export function prerenderEmbed ({ compiler, raw = '', fetch }, done) {
}) })
let moveIndex = 0 let moveIndex = 0
walkFetchEmbed({ compile, embedTokens, fetch }, ({ embedToken, token }) => { walkFetchEmbed({compile, embedTokens, fetch}, ({embedToken, token}) => {
if (token) { if (token) {
const index = token.index + moveIndex const index = token.index + moveIndex

6
src/core/render/emojify.js
View file

@ -1,10 +1,10 @@
import { inBrowser } from '../util/env' import {inBrowser} from '../util/env'
function replace (m, $1) { function replace(m, $1) {
return '<img class="emoji" src="https://assets-cdn.github.com/images/icons/emoji/' + $1 + '.png" alt="' + $1 + '" />' return '<img class="emoji" src="https://assets-cdn.github.com/images/icons/emoji/' + $1 + '.png" alt="' + $1 + '" />'
} }
export function emojify (text) { export function emojify(text) {
return text return text
.replace(/<(pre|template|code)[^>]*?>[\s\S]+?<\/(pre|template|code)>/g, m => m.replace(/:/g, '__colon__')) .replace(/<(pre|template|code)[^>]*?>[\s\S]+?<\/(pre|template|code)>/g, m => m.replace(/:/g, '__colon__'))
.replace(/:(\w+?):/ig, (inBrowser && window.emojify) || replace) .replace(/:(\w+?):/ig, (inBrowser && window.emojify) || replace)

8
src/core/render/gen-tree.js
View file

@ -1,11 +1,11 @@
/** /**
* gen toc tree * Gen toc tree
* @link https://github.com/killercup/grock/blob/5280ae63e16c5739e9233d9009bc235ed7d79a50/styles/solarized/assets/js/behavior.coffee#L54-L81 * @link https://github.com/killercup/grock/blob/5280ae63e16c5739e9233d9009bc235ed7d79a50/styles/solarized/assets/js/behavior.coffee#L54-L81
* @param {Array} toc * @param {Array} toc
* @param {Number} maxLevel * @param {Number} maxLevel
* @return {Array} * @return {Array}
*/ */
export function genTree (toc, maxLevel) { export function genTree(toc, maxLevel) {
const headlines = [] const headlines = []
const last = {} const last = {}
@ -13,7 +13,9 @@ export function genTree (toc, maxLevel) {
const level = headline.level || 1 const level = headline.level || 1
const len = level - 1 const len = level - 1
if (level > maxLevel) return if (level > maxLevel) {
return
}
if (last[len]) { if (last[len]) {
last[len].children = (last[len].children || []).concat(headline) last[len].children = (last[len].children || []).concat(headline)
} else { } else {

64
src/core/render/index.js
View file

@ -2,38 +2,42 @@ import * as dom from '../util/dom'
import * as tpl from './tpl' import * as tpl from './tpl'
import cssVars from '../util/polyfill/css-vars' import cssVars from '../util/polyfill/css-vars'
import tinydate from 'tinydate' import tinydate from 'tinydate'
import { callHook } from '../init/lifecycle' import {callHook} from '../init/lifecycle'
import { Compiler } from './compiler' import {Compiler} from './compiler'
import { getAndActive, sticky } from '../event/sidebar' import {getAndActive, sticky} from '../event/sidebar'
import { getPath, isAbsolutePath } from '../router/util' import {getPath, isAbsolutePath} from '../router/util'
import { isMobile, inBrowser } from '../util/env' import {isMobile, inBrowser} from '../util/env'
import { isPrimitive } from '../util/core' import {isPrimitive} from '../util/core'
import { scrollActiveSidebar, scroll2Top } from '../event/scroll' import {scrollActiveSidebar, scroll2Top} from '../event/scroll'
import { prerenderEmbed } from './embed' import {prerenderEmbed} from './embed'
function executeScript () { function executeScript() {
const script = dom const script = dom
.findAll('.markdown-section>script') .findAll('.markdown-section>script')
.filter(s => !/template/.test(s.type))[0] .filter(s => !/template/.test(s.type))[0]
if (!script) return false if (!script) {
return false
}
const code = script.innerText.trim() const code = script.innerText.trim()
if (!code) return false if (!code) {
return false
}
setTimeout(_ => { setTimeout(_ => {
window.__EXECUTE_RESULT__ = new Function(code)() window.__EXECUTE_RESULT__ = new Function(code)()
}, 0) }, 0)
} }
function formatUpdated (html, updated, fn) { function formatUpdated(html, updated, fn) {
updated = updated =
typeof fn === 'function' typeof fn === 'function' ?
? fn(updated) fn(updated) :
: typeof fn === 'string' ? tinydate(fn)(new Date(updated)) : updated typeof fn === 'string' ? tinydate(fn)(new Date(updated)) : updated
return html.replace(/{docsify-updated}/g, updated) return html.replace(/{docsify-updated}/g, updated)
} }
function renderMain (html) { function renderMain(html) {
if (!html) { if (!html) {
html = '<h1>404 - Not found</h1>' html = '<h1>404 - Not found</h1>'
} }
@ -42,7 +46,7 @@ function renderMain (html) {
// Render sidebar with the TOC // Render sidebar with the TOC
!this.config.loadSidebar && this._renderSidebar() !this.config.loadSidebar && this._renderSidebar()
// execute script // Execute script
if ( if (
this.config.executeScript !== false && this.config.executeScript !== false &&
typeof window.Vue !== 'undefined' && typeof window.Vue !== 'undefined' &&
@ -58,12 +62,14 @@ function renderMain (html) {
} }
} }
function renderNameLink (vm) { function renderNameLink(vm) {
const el = dom.getNode('.app-name-link') const el = dom.getNode('.app-name-link')
const nameLink = vm.config.nameLink const nameLink = vm.config.nameLink
const path = vm.route.path const path = vm.route.path
if (!el) return if (!el) {
return
}
if (isPrimitive(vm.config.nameLink)) { if (isPrimitive(vm.config.nameLink)) {
el.setAttribute('href', nameLink) el.setAttribute('href', nameLink)
@ -74,14 +80,16 @@ function renderNameLink (vm) {
} }
} }
export function renderMixin (proto) { export function renderMixin(proto) {
proto._renderTo = function (el, content, replace) { proto._renderTo = function (el, content, replace) {
const node = dom.getNode(el) const node = dom.getNode(el)
if (node) node[replace ? 'outerHTML' : 'innerHTML'] = content if (node) {
node[replace ? 'outerHTML' : 'innerHTML'] = content
}
} }
proto._renderSidebar = function (text) { proto._renderSidebar = function (text) {
const { maxLevel, subMaxLevel, loadSidebar } = this.config const {maxLevel, subMaxLevel, loadSidebar} = this.config
this._renderTo('.sidebar-nav', this.compiler.sidebar(text, maxLevel)) this._renderTo('.sidebar-nav', this.compiler.sidebar(text, maxLevel))
const activeEl = getAndActive(this.router, '.sidebar-nav', true, true) const activeEl = getAndActive(this.router, '.sidebar-nav', true, true)
@ -89,15 +97,15 @@ export function renderMixin (proto) {
activeEl.parentNode.innerHTML += activeEl.parentNode.innerHTML +=
this.compiler.subSidebar(subMaxLevel) || '' this.compiler.subSidebar(subMaxLevel) || ''
} else { } else {
// reset toc // Reset toc
this.compiler.subSidebar() this.compiler.subSidebar()
} }
// bind event // Bind event
this._bindEventOnRendered(activeEl) this._bindEventOnRendered(activeEl)
} }
proto._bindEventOnRendered = function (activeEl) { proto._bindEventOnRendered = function (activeEl) {
const { autoHeader, auto2top } = this.config const {autoHeader, auto2top} = this.config
scrollActiveSidebar(this.router) scrollActiveSidebar(this.router)
@ -192,18 +200,18 @@ export function renderMixin (proto) {
} }
proto._updateRender = function () { proto._updateRender = function () {
// render name link // Render name link
renderNameLink(this) renderNameLink(this)
} }
} }
export function initRender (vm) { export function initRender(vm) {
const config = vm.config const config = vm.config
// Init markdown compiler // Init markdown compiler
vm.compiler = new Compiler(config, vm.router) vm.compiler = new Compiler(config, vm.router)
if (inBrowser) { if (inBrowser) {
window['__current_docsify_compiler__'] = vm.compiler window.__current_docsify_compiler__ = vm.compiler
} }
const id = config.el || '#app' const id = config.el || '#app'

4
src/core/render/progressbar.js
View file

@ -6,7 +6,7 @@ let timeId
/** /**
* Init progress component * Init progress component
*/ */
function init () { function init() {
const div = dom.create('div') const div = dom.create('div')
div.classList.add('progress') div.classList.add('progress')
@ -16,7 +16,7 @@ function init () {
/** /**
* Render progress bar * Render progress bar
*/ */
export default function ({ loaded, total, step }) { export default function ({loaded, total, step}) {
let num let num
!barEl && init() !barEl && init()

16
src/core/render/slugify.js
View file

@ -1,12 +1,16 @@
let cache = {} import {hasOwn} from '../util/core'
const re = /[\u2000-\u206F\u2E00-\u2E7F\\'!"#$%&()*+,.\/:;<=>?@\[\]^`{|}~]/g
function lower (string) { let cache = {}
const re = /[\u2000-\u206F\u2E00-\u2E7F\\'!"#$%&()*+,./:;<=>?@[\]^`{|}~]/g
function lower(string) {
return string.toLowerCase() return string.toLowerCase()
} }
export function slugify (str) { export function slugify(str) {
if (typeof str !== 'string') return '' if (typeof str !== 'string') {
return ''
}
let slug = str let slug = str
.trim() .trim()
@ -18,7 +22,7 @@ export function slugify (str) {
.replace(/^(\d)/, '_$1') .replace(/^(\d)/, '_$1')
let count = cache[slug] let count = cache[slug]
count = cache.hasOwnProperty(slug) ? count + 1 : 0 count = hasOwn.call(cache, slug) ? count + 1 : 0
cache[slug] = count cache[slug] = count
if (count) { if (count) {

32
src/core/render/tpl.js
View file

@ -1,12 +1,16 @@
import { isMobile } from '../util/env' import {isMobile} from '../util/env'
/** /**
* Render github corner * Render github corner
* @param {Object} data * @param {Object} data
* @return {String} * @return {String}
*/ */
export function corner (data) { export function corner(data) {
if (!data) return '' if (!data) {
if (!/\/\//.test(data)) data = 'https://github.com/' + data return ''
}
if (!/\/\//.test(data)) {
data = 'https://github.com/' + data
}
data = data.replace(/^git\+/, '') data = data.replace(/^git\+/, '')
return ( return (
@ -23,7 +27,7 @@ export function corner (data) {
/** /**
* Render main content * Render main content
*/ */
export function main (config) { export function main(config) {
const aside = const aside =
'<button class="sidebar-toggle">' + '<button class="sidebar-toggle">' +
'<div class="sidebar-toggle-button">' + '<div class="sidebar-toggle-button">' +
@ -31,9 +35,9 @@ export function main (config) {
'</div>' + '</div>' +
'</button>' + '</button>' +
'<aside class="sidebar">' + '<aside class="sidebar">' +
(config.name (config.name ?
? `<h1><a class="app-name-link" data-nosearch>${config.name}</a></h1>` `<h1><a class="app-name-link" data-nosearch>${config.name}</a></h1>` :
: '') + '') +
'<div class="sidebar-nav"><!--sidebar--></div>' + '<div class="sidebar-nav"><!--sidebar--></div>' +
'</aside>' '</aside>'
@ -49,7 +53,7 @@ export function main (config) {
/** /**
* Cover Page * Cover Page
*/ */
export function cover () { export function cover() {
const SL = ', 100%, 85%' const SL = ', 100%, 85%'
const bgc = const bgc =
'linear-gradient(to left bottom, ' + 'linear-gradient(to left bottom, ' +
@ -70,8 +74,10 @@ export function cover () {
* @param {String} tpl * @param {String} tpl
* @return {String} * @return {String}
*/ */
export function tree (toc, tpl = '') { export function tree(toc, tpl = '') {
if (!toc || !toc.length) return '' if (!toc || !toc.length) {
return ''
}
toc.forEach(node => { toc.forEach(node => {
tpl += `<li><a class="section-link" href="${node.slug}">${ tpl += `<li><a class="section-link" href="${node.slug}">${
@ -85,10 +91,10 @@ export function tree (toc, tpl = '') {
return tpl return tpl
} }
export function helper (className, content) { export function helper(className, content) {
return `<p class="${className}">${content.slice(5).trim()}</p>` return `<p class="${className}">${content.slice(5).trim()}</p>`
} }
export function theme (color) { export function theme(color) {
return `<style>:root{--theme-color: ${color};}</style>` return `<style>:root{--theme-color: ${color};}</style>`
} }

8
src/core/router/history/abstract.js
View file

@ -1,13 +1,13 @@
import { History } from './base' import {History} from './base'
import { parseQuery } from '../util' import {parseQuery} from '../util'
export class AbstractHistory extends History { export class AbstractHistory extends History {
constructor (config) { constructor(config) {
super(config) super(config)
this.mode = 'abstract' this.mode = 'abstract'
} }
parse (path) { parse(path) {
let query = '' let query = ''
const queryIndex = path.indexOf('?') const queryIndex = path.indexOf('?')

38
src/core/router/history/base.js
View file

@ -5,40 +5,40 @@ import {
cleanPath, cleanPath,
replaceSlug replaceSlug
} from '../util' } from '../util'
import { noop, merge } from '../../util/core' import {noop, merge} from '../../util/core'
const cached = {} const cached = {}
function getAlias (path, alias, last) { function getAlias(path, alias, last) {
const match = Object.keys(alias).filter(key => { const match = Object.keys(alias).filter(key => {
const re = cached[key] || (cached[key] = new RegExp(`^${key}$`)) const re = cached[key] || (cached[key] = new RegExp(`^${key}$`))
return re.test(path) && path !== last return re.test(path) && path !== last
})[0] })[0]
return match return match ?
? getAlias(path.replace(cached[match], alias[match]), alias, path) getAlias(path.replace(cached[match], alias[match]), alias, path) :
: path path
} }
function getFileName (path, ext) { function getFileName(path, ext) {
return new RegExp(`\\.(${ext.replace(/^\./, '')}|html)$`, 'g').test(path) return new RegExp(`\\.(${ext.replace(/^\./, '')}|html)$`, 'g').test(path) ?
? path path :
: /\/$/g.test(path) ? `${path}README${ext}` : `${path}${ext}` /\/$/g.test(path) ? `${path}README${ext}` : `${path}${ext}`
} }
export class History { export class History {
constructor (config) { constructor(config) {
this.config = config this.config = config
} }
getBasePath () { getBasePath() {
return this.config.basePath return this.config.basePath
} }
getFile (path = this.getCurrentPath(), isRelative) { getFile(path = this.getCurrentPath(), isRelative) {
const { config } = this const {config} = this
const base = this.getBasePath() const base = this.getBasePath()
const ext = typeof config.ext !== 'string' ? '.md' : config.ext const ext = typeof config.ext === 'string' ? config.ext : '.md'
path = config.alias ? getAlias(path, config.alias) : path path = config.alias ? getAlias(path, config.alias) : path
path = getFileName(path, ext) path = getFileName(path, ext)
@ -52,17 +52,17 @@ export class History {
return path return path
} }
onchange (cb = noop) { onchange(cb = noop) {
cb() cb()
} }
getCurrentPath () {} getCurrentPath() {}
normalize () {} normalize() {}
parse () {} parse() {}
toURL (path, params, currentRoute) { toURL(path, params, currentRoute) {
const local = currentRoute && path[0] === '#' const local = currentRoute && path[0] === '#'
const route = this.parse(replaceSlug(path)) const route = this.parse(replaceSlug(path))

28
src/core/router/history/hash.js
View file

@ -1,27 +1,27 @@
import { History } from './base' import {History} from './base'
import { noop } from '../../util/core' import {noop} from '../../util/core'
import { on } from '../../util/dom' import {on} from '../../util/dom'
import { parseQuery, cleanPath, replaceSlug } from '../util' import {parseQuery, cleanPath, replaceSlug} from '../util'
function replaceHash (path) { function replaceHash(path) {
const i = location.href.indexOf('#') const i = location.href.indexOf('#')
location.replace(location.href.slice(0, i >= 0 ? i : 0) + '#' + path) location.replace(location.href.slice(0, i >= 0 ? i : 0) + '#' + path)
} }
export class HashHistory extends History { export class HashHistory extends History {
constructor (config) { constructor(config) {
super(config) super(config)
this.mode = 'hash' this.mode = 'hash'
} }
getBasePath () { getBasePath() {
const path = window.location.pathname || '' const path = window.location.pathname || ''
const base = this.config.basePath const base = this.config.basePath
return /^(\/|https?:)/g.test(base) ? base : cleanPath(path + '/' + base) return /^(\/|https?:)/g.test(base) ? base : cleanPath(path + '/' + base)
} }
getCurrentPath () { getCurrentPath() {
// We can't use location.hash here because it's not // We can't use location.hash here because it's not
// consistent across browsers - Firefox will pre-decode it! // consistent across browsers - Firefox will pre-decode it!
const href = location.href const href = location.href
@ -29,16 +29,18 @@ export class HashHistory extends History {
return index === -1 ? '' : href.slice(index + 1) return index === -1 ? '' : href.slice(index + 1)
} }
onchange (cb = noop) { onchange(cb = noop) {
on('hashchange', cb) on('hashchange', cb)
} }
normalize () { normalize() {
let path = this.getCurrentPath() let path = this.getCurrentPath()
path = replaceSlug(path) path = replaceSlug(path)
if (path.charAt(0) === '/') return replaceHash(path) if (path.charAt(0) === '/') {
return replaceHash(path)
}
replaceHash('/' + path) replaceHash('/' + path)
} }
@ -47,7 +49,7 @@ export class HashHistory extends History {
* @param {string} [path=location.herf] * @param {string} [path=location.herf]
* @return {object} { path, query } * @return {object} { path, query }
*/ */
parse (path = location.href) { parse(path = location.href) {
let query = '' let query = ''
const hashIndex = path.indexOf('#') const hashIndex = path.indexOf('#')
@ -68,7 +70,7 @@ export class HashHistory extends History {
} }
} }
toURL (path, params, currentRoute) { toURL(path, params, currentRoute) {
return '#' + super.toURL(path, params, currentRoute) return '#' + super.toURL(path, params, currentRoute)
} }
} }

18
src/core/router/history/html5.js
View file

@ -1,15 +1,15 @@
import { History } from './base' import {History} from './base'
import { noop } from '../../util/core' import {noop} from '../../util/core'
import { on } from '../../util/dom' import {on} from '../../util/dom'
import { parseQuery, getPath } from '../util' import {parseQuery, getPath} from '../util'
export class HTML5History extends History { export class HTML5History extends History {
constructor (config) { constructor(config) {
super(config) super(config)
this.mode = 'history' this.mode = 'history'
} }
getCurrentPath () { getCurrentPath() {
const base = this.getBasePath() const base = this.getBasePath()
let path = window.location.pathname let path = window.location.pathname
@ -20,14 +20,14 @@ export class HTML5History extends History {
return (path || '/') + window.location.search + window.location.hash return (path || '/') + window.location.search + window.location.hash
} }
onchange (cb = noop) { onchange(cb = noop) {
on('click', e => { on('click', e => {
const el = e.target.tagName === 'A' ? e.target : e.target.parentNode const el = e.target.tagName === 'A' ? e.target : e.target.parentNode
if (el.tagName === 'A' && !/_blank/.test(el.target)) { if (el.tagName === 'A' && !/_blank/.test(el.target)) {
e.preventDefault() e.preventDefault()
const url = el.href const url = el.href
window.history.pushState({ key: url }, '', url) window.history.pushState({key: url}, '', url)
cb() cb()
} }
}) })
@ -40,7 +40,7 @@ export class HTML5History extends History {
* @param {string} [path=location.href] * @param {string} [path=location.href]
* @return {object} { path, query } * @return {object} { path, query }
*/ */
parse (path = location.href) { parse(path = location.href) {
let query = '' let query = ''
const queryIndex = path.indexOf('?') const queryIndex = path.indexOf('?')

12
src/core/router/index.js
View file

@ -1,21 +1,21 @@
import { HashHistory } from './history/hash' import {HashHistory} from './history/hash'
import { HTML5History } from './history/html5' import {HTML5History} from './history/html5'
import { supportsPushState } from '../util/env' import {supportsPushState} from '../util/env'
import * as dom from '../util/dom' import * as dom from '../util/dom'
export function routerMixin (proto) { export function routerMixin(proto) {
proto.route = {} proto.route = {}
} }
let lastRoute = {} let lastRoute = {}
function updateRender (vm) { function updateRender(vm) {
vm.router.normalize() vm.router.normalize()
vm.route = vm.router.parse() vm.route = vm.router.parse()
dom.body.setAttribute('data-page', vm.route.file) dom.body.setAttribute('data-page', vm.route.file)
} }
export function initRouter (vm) { export function initRouter(vm) {
const config = vm.config const config = vm.config
const mode = config.routerMode || 'hash' const mode = config.routerMode || 'hash'
let router let router

30
src/core/router/util.js
View file

@ -1,9 +1,9 @@
import { cached } from '../util/core' import {cached} from '../util/core'
const decode = decodeURIComponent const decode = decodeURIComponent
const encode = encodeURIComponent const encode = encodeURIComponent
export function parseQuery (query) { export function parseQuery(query) {
const res = {} const res = {}
query = query.trim().replace(/^(\?|#|&)/, '') query = query.trim().replace(/^(\?|#|&)/, '')
@ -22,39 +22,41 @@ export function parseQuery (query) {
return res return res
} }
export function stringifyQuery (obj, ignores = []) { export function stringifyQuery(obj, ignores = []) {
const qs = [] const qs = []
for (const key in obj) { for (const key in obj) {
if (ignores.indexOf(key) > -1) continue if (ignores.indexOf(key) > -1) {
continue
}
qs.push( qs.push(
obj[key] obj[key] ?
? `${encode(key)}=${encode(obj[key])}`.toLowerCase() `${encode(key)}=${encode(obj[key])}`.toLowerCase() :
: encode(key) encode(key)
) )
} }
return qs.length ? `?${qs.join('&')}` : '' return qs.length ? `?${qs.join('&')}` : ''
} }
export function getPath (...args) {
return cleanPath(args.join('/'))
}
export const isAbsolutePath = cached(path => { export const isAbsolutePath = cached(path => {
return /(:|(\/{2}))/g.test(path) return /(:|(\/{2}))/g.test(path)
}) })
export const getParentPath = cached(path => { export const getParentPath = cached(path => {
return /\/$/g.test(path) return /\/$/g.test(path) ?
? path path :
: (path = path.match(/(\S*\/)[^\/]+$/)) ? path[1] : '' (path = path.match(/(\S*\/)[^/]+$/)) ? path[1] : ''
}) })
export const cleanPath = cached(path => { export const cleanPath = cached(path => {
return path.replace(/^\/+/, '/').replace(/([^:])\/{2,}/g, '$1/') return path.replace(/^\/+/, '/').replace(/([^:])\/{2,}/g, '$1/')
}) })
export function getPath(...args) {
return cleanPath(args.join('/'))
}
export const replaceSlug = cached(path => { export const replaceSlug = cached(path => {
return path.replace('#', '?id=') return path.replace('#', '?id=')
}) })

14
src/core/util/core.js
View file

@ -1,9 +1,9 @@
/** /**
* Create a cached version of a pure function. * Create a cached version of a pure function.
*/ */
export function cached (fn) { export function cached(fn) {
const cache = Object.create(null) const cache = Object.create(null)
return function cachedFn (str) { return function (str) {
const key = isPrimitive(str) ? str : JSON.stringify(str) const key = isPrimitive(str) ? str : JSON.stringify(str)
const hit = cache[key] const hit = cache[key]
return hit || (cache[key] = fn(str)) return hit || (cache[key] = fn(str))
@ -17,14 +17,14 @@ export const hyphenate = cached(str => {
return str.replace(/([A-Z])/g, m => '-' + m.toLowerCase()) return str.replace(/([A-Z])/g, m => '-' + m.toLowerCase())
}) })
export const hasOwn = Object.prototype.hasOwnProperty
/** /**
* Simple Object.assign polyfill * Simple Object.assign polyfill
*/ */
export const merge = export const merge =
Object.assign || Object.assign ||
function (to) { function (to) {
const hasOwn = Object.prototype.hasOwnProperty
for (let i = 1; i < arguments.length; i++) { for (let i = 1; i < arguments.length; i++) {
const from = Object(arguments[i]) const from = Object(arguments[i])
@ -41,18 +41,18 @@ export const merge =
/** /**
* Check if value is primitive * Check if value is primitive
*/ */
export function isPrimitive (value) { export function isPrimitive(value) {
return typeof value === 'string' || typeof value === 'number' return typeof value === 'string' || typeof value === 'number'
} }
/** /**
* Perform no operation. * Perform no operation.
*/ */
export function noop () {} export function noop() {}
/** /**
* Check if value is function * Check if value is function
*/ */
export function isFn (obj) { export function isFn(obj) {
return typeof obj === 'function' return typeof obj === 'function'
} }

40
src/core/util/dom.js
View file

@ -1,5 +1,5 @@
import { isFn } from '../util/core' import {isFn} from '../util/core'
import { inBrowser } from './env' import {inBrowser} from './env'
const cacheNode = {} const cacheNode = {}
@ -9,7 +9,7 @@ const cacheNode = {}
* @param {Boolean} noCache * @param {Boolean} noCache
* @return {Element} * @return {Element}
*/ */
export function getNode (el, noCache = false) { export function getNode(el, noCache = false) {
if (typeof el === 'string') { if (typeof el === 'string') {
if (typeof window.Vue !== 'undefined') { if (typeof window.Vue !== 'undefined') {
return find(el) return find(el)
@ -32,7 +32,7 @@ export const head = inBrowser && $.head
* find('nav') => document.querySelector('nav') * find('nav') => document.querySelector('nav')
* find(nav, 'a') => nav.querySelector('a') * find(nav, 'a') => nav.querySelector('a')
*/ */
export function find (el, node) { export function find(el, node) {
return node ? el.querySelector(node) : $.querySelector(el) return node ? el.querySelector(node) : $.querySelector(el)
} }
@ -42,36 +42,38 @@ export function find (el, node) {
* findAll('a') => [].slice.call(document.querySelectorAll('a')) * findAll('a') => [].slice.call(document.querySelectorAll('a'))
* findAll(nav, 'a') => [].slice.call(nav.querySelectorAll('a')) * findAll(nav, 'a') => [].slice.call(nav.querySelectorAll('a'))
*/ */
export function findAll (el, node) { export function findAll(el, node) {
return [].slice.call( return [].slice.call(
node ? el.querySelectorAll(node) : $.querySelectorAll(el) node ? el.querySelectorAll(node) : $.querySelectorAll(el)
) )
} }
export function create (node, tpl) { export function create(node, tpl) {
node = $.createElement(node) node = $.createElement(node)
if (tpl) node.innerHTML = tpl if (tpl) {
node.innerHTML = tpl
}
return node return node
} }
export function appendTo (target, el) { export function appendTo(target, el) {
return target.appendChild(el) return target.appendChild(el)
} }
export function before (target, el) { export function before(target, el) {
return target.insertBefore(el, target.children[0]) return target.insertBefore(el, target.children[0])
} }
export function on (el, type, handler) { export function on(el, type, handler) {
isFn(type) isFn(type) ?
? window.addEventListener(el, type) window.addEventListener(el, type) :
: el.addEventListener(type, handler) el.addEventListener(type, handler)
} }
export function off (el, type, handler) { export function off(el, type, handler) {
isFn(type) isFn(type) ?
? window.removeEventListener(el, type) window.removeEventListener(el, type) :
: el.removeEventListener(type, handler) el.removeEventListener(type, handler)
} }
/** /**
@ -81,10 +83,10 @@ export function off (el, type, handler) {
* toggleClass(el, 'active') => el.classList.toggle('active') * toggleClass(el, 'active') => el.classList.toggle('active')
* toggleClass(el, 'add', 'active') => el.classList.add('active') * toggleClass(el, 'add', 'active') => el.classList.add('active')
*/ */
export function toggleClass (el, type, val) { export function toggleClass(el, type, val) {
el && el.classList[val ? type : 'toggle'](val || type) el && el.classList[val ? type : 'toggle'](val || type)
} }
export function style (content) { export function style(content) {
appendTo(head, create('style', content)) appendTo(head, create('style', content))
} }

2
src/core/util/env.js
View file

@ -13,7 +13,7 @@ export const supportsPushState =
window.history && window.history &&
window.history.pushState && window.history.pushState &&
window.history.replaceState && window.history.replaceState &&
// pushState isn’t reliable on iOS until 5. // PushState isn’t reliable on iOS until 5.
!navigator.userAgent.match( !navigator.userAgent.match(
/((iPod|iPhone|iPad).+\bOS\s+[1-4]\D|WebApps\/.+CFNetwork)/ /((iPod|iPhone|iPad).+\bOS\s+[1-4]\D|WebApps\/.+CFNetwork)/
) )

16
src/core/util/polyfill/css-vars.js
View file

@ -1,7 +1,7 @@
import * as dom from '../dom' import * as dom from '../dom'
import { get } from '../../fetch/ajax' import {get} from '../../fetch/ajax'
function replaceVar (block, color) { function replaceVar(block, color) {
block.innerHTML = block.innerHTML.replace( block.innerHTML = block.innerHTML.replace(
/var\(\s*--theme-color.*?\)/g, /var\(\s*--theme-color.*?\)/g,
color color
@ -10,16 +10,20 @@ function replaceVar (block, color) {
export default function (color) { export default function (color) {
// Variable support // Variable support
if (window.CSS && window.CSS.supports && window.CSS.supports('(--v:red)')) { return } if (window.CSS && window.CSS.supports && window.CSS.supports('(--v:red)')) {
return
}
const styleBlocks = dom.findAll('style:not(.inserted),link') const styleBlocks = dom.findAll('style:not(.inserted),link');
;[].forEach.call(styleBlocks, block => { [].forEach.call(styleBlocks, block => {
if (block.nodeName === 'STYLE') { if (block.nodeName === 'STYLE') {
replaceVar(block, color) replaceVar(block, color)
} else if (block.nodeName === 'LINK') { } else if (block.nodeName === 'LINK') {
const href = block.getAttribute('href') const href = block.getAttribute('href')
if (!/\.css$/.test(href)) return if (!/\.css$/.test(href)) {
return
}
get(href).then(res => { get(href).then(res => {
const style = dom.create('style', res) const style = dom.create('style', res)

4
src/plugins/disqus.js
View file

@ -3,7 +3,7 @@ if (fixedPath !== location.href) {
location.href = fixedPath location.href = fixedPath
} }
function install (hook, vm) { function install(hook, vm) {
const dom = Docsify.dom const dom = Docsify.dom
const disqus = vm.config.disqus const disqus = vm.config.disqus
if (!disqus) { if (!disqus) {
@ -15,7 +15,7 @@ function install (hook, vm) {
script.async = true script.async = true
script.src = `https://${disqus}.disqus.com/embed.js` script.src = `https://${disqus}.disqus.com/embed.js`
script.setAttribute('data-timestamp', +new Date()) script.setAttribute('data-timestamp', Number(new Date()))
dom.appendTo(dom.body, script) dom.appendTo(dom.body, script)
}) })

8
src/plugins/emoji.js
View file

@ -887,12 +887,12 @@ const AllGithubEmoji = [
'zzz' 'zzz'
] ]
// emoji from All-Github-Emoji-Icons // Emoji from All-Github-Emoji-Icons
// https://github.com/scotch-io/All-Github-Emoji-Icons // https://github.com/scotch-io/All-Github-Emoji-Icons
window.emojify = function (match, $1) { window.emojify = function (match, $1) {
return AllGithubEmoji.indexOf($1) === -1 return AllGithubEmoji.indexOf($1) === -1 ?
? match match :
: '<img class="emoji" src="https://assets-cdn.github.com/images/icons/emoji/' + '<img class="emoji" src="https://assets-cdn.github.com/images/icons/emoji/' +
$1 + $1 +
'.png" alt="' + '.png" alt="' +
$1 + $1 +

2
src/plugins/external-script.js
View file

@ -1,4 +1,4 @@
function handleExternalScript () { function handleExternalScript() {
const container = Docsify.dom.getNode('#main') const container = Docsify.dom.getNode('#main')
const scripts = Docsify.dom.findAll(container, 'script') const scripts = Docsify.dom.findAll(container, 'script')

2
src/plugins/front-matter/index.js
View file

@ -2,7 +2,7 @@ import parser from './parser'
const install = function (hook, vm) { const install = function (hook, vm) {
hook.beforeEach(content => { hook.beforeEach(content => {
const { attributes, body } = parser(content) const {attributes, body} = parser(content)
Docsify.util.merge(vm.config, attributes.config) Docsify.util.merge(vm.config, attributes.config)

8
src/plugins/ga.js
View file

@ -1,23 +1,23 @@
// From https://github.com/egoist/vue-ga/blob/master/src/index.js // From https://github.com/egoist/vue-ga/blob/master/src/index.js
function appendScript () { function appendScript() {
const script = document.createElement('script') const script = document.createElement('script')
script.async = true script.async = true
script.src = 'https://www.google-analytics.com/analytics.js' script.src = 'https://www.google-analytics.com/analytics.js'
document.body.appendChild(script) document.body.appendChild(script)
} }
function init (id) { function init(id) {
appendScript() appendScript()
window.ga = window.ga =
window.ga || window.ga ||
function () { function () {
;(window.ga.q = window.ga.q || []).push(arguments) (window.ga.q = window.ga.q || []).push(arguments)
} }
window.ga.l = Number(new Date()) window.ga.l = Number(new Date())
window.ga('create', id, 'auto') window.ga('create', id, 'auto')
} }
function collect () { function collect() {
if (!window.ga) { if (!window.ga) {
init($docsify.ga) init($docsify.ga)
} }

2
src/plugins/gitalk.js
View file

@ -1,4 +1,4 @@
function install (hook, vm) { function install(hook) {
const dom = Docsify.dom const dom = Docsify.dom
hook.mounted(_ => { hook.mounted(_ => {

24
src/plugins/search/component.js
View file

@ -1,8 +1,8 @@
import { search } from './search' import {search} from './search'
let NO_DATA_TEXT = '' let NO_DATA_TEXT = ''
function style () { function style() {
const code = ` const code = `
.sidebar { .sidebar {
padding-top: 0; padding-top: 0;
@ -91,7 +91,7 @@ function style () {
Docsify.dom.style(code) Docsify.dom.style(code)
} }
function tpl (opts, defaultValue = '') { function tpl(opts, defaultValue = '') {
const html = const html =
`<div class="input-wrap"> `<div class="input-wrap">
<input type="search" value="${defaultValue}" /> <input type="search" value="${defaultValue}" />
@ -112,7 +112,7 @@ function tpl (opts, defaultValue = '') {
Docsify.dom.before(aside, el) Docsify.dom.before(aside, el)
} }
function doSearch (value) { function doSearch(value) {
const $search = Docsify.dom.find('div.search') const $search = Docsify.dom.find('div.search')
const $panel = Docsify.dom.find($search, '.results-panel') const $panel = Docsify.dom.find($search, '.results-panel')
const $clearBtn = Docsify.dom.find($search, '.clear-button') const $clearBtn = Docsify.dom.find($search, '.clear-button')
@ -140,7 +140,7 @@ function doSearch (value) {
$panel.innerHTML = html || `<p class="empty">${NO_DATA_TEXT}</p>` $panel.innerHTML = html || `<p class="empty">${NO_DATA_TEXT}</p>`
} }
function bindEvents () { function bindEvents() {
const $search = Docsify.dom.find('div.search') const $search = Docsify.dom.find('div.search')
const $input = Docsify.dom.find($search, 'input') const $input = Docsify.dom.find($search, 'input')
const $inputWrap = Docsify.dom.find($search, '.input-wrap') const $inputWrap = Docsify.dom.find($search, '.input-wrap')
@ -157,7 +157,7 @@ function bindEvents () {
timeId = setTimeout(_ => doSearch(e.target.value.trim()), 100) timeId = setTimeout(_ => doSearch(e.target.value.trim()), 100)
}) })
Docsify.dom.on($inputWrap, 'click', e => { Docsify.dom.on($inputWrap, 'click', e => {
// click input outside // Click input outside
if (e.target.tagName !== 'INPUT') { if (e.target.tagName !== 'INPUT') {
$input.value = '' $input.value = ''
doSearch() doSearch()
@ -165,10 +165,12 @@ function bindEvents () {
}) })
} }
function updatePlaceholder (text, path) { function updatePlaceholder(text, path) {
const $input = Docsify.dom.getNode('.search input[type="search"]') const $input = Docsify.dom.getNode('.search input[type="search"]')
if (!$input) return if (!$input) {
return
}
if (typeof text === 'string') { if (typeof text === 'string') {
$input.placeholder = text $input.placeholder = text
} else { } else {
@ -177,7 +179,7 @@ function updatePlaceholder (text, path) {
} }
} }
function updateNoData (text, path) { function updateNoData(text, path) {
if (typeof text === 'string') { if (typeof text === 'string') {
NO_DATA_TEXT = text NO_DATA_TEXT = text
} else { } else {
@ -186,7 +188,7 @@ function updateNoData (text, path) {
} }
} }
export function init (opts, vm) { export function init(opts, vm) {
const keywords = vm.router.parse().query.s const keywords = vm.router.parse().query.s
style() style()
@ -195,7 +197,7 @@ export function init (opts, vm) {
keywords && setTimeout(_ => doSearch(keywords), 500) keywords && setTimeout(_ => doSearch(keywords), 500)
} }
export function update (opts, vm) { export function update(opts, vm) {
updatePlaceholder(opts.placeholder, vm.route.path) updatePlaceholder(opts.placeholder, vm.route.path)
updateNoData(opts.noData, vm.route.path) updateNoData(opts.noData, vm.route.path)
} }

6
src/plugins/search/index.js
View file

@ -1,5 +1,5 @@
import { init as initComponet, update as updateComponent } from './component' import {init as initComponet, update as updateComponent} from './component'
import { init as initSearch } from './search' import {init as initSearch} from './search'
const CONFIG = { const CONFIG = {
placeholder: 'Type to search', placeholder: 'Type to search',
@ -10,7 +10,7 @@ const CONFIG = {
} }
const install = function (hook, vm) { const install = function (hook, vm) {
const { util } = Docsify const {util} = Docsify
const opts = vm.config.search || CONFIG const opts = vm.config.search || CONFIG
if (Array.isArray(opts)) { if (Array.isArray(opts)) {

52
src/plugins/search/search.js
View file

@ -1,23 +1,23 @@
let INDEXS = {} let INDEXS = {}
let helper let helper
function escapeHtml (string) { function escapeHtml(string) {
const entityMap = { const entityMap = {
'&': '&amp;', '&': '&amp;',
'<': '&lt;', '<': '&lt;',
'>': '&gt;', '>': '&gt;',
'"': '&quot;', '"': '&quot;',
"'": '&#39;', '\'': '&#39;',
'/': '&#x2F;' '/': '&#x2F;'
} }
return String(string).replace(/[&<>"'\/]/g, s => entityMap[s]) return String(string).replace(/[&<>"'/]/g, s => entityMap[s])
} }
function getAllPaths (router) { function getAllPaths(router) {
const paths = [] const paths = []
helper.dom.findAll('a:not([data-nosearch])').map(node => { helper.dom.findAll('a:not([data-nosearch])').forEach(node => {
const href = node.href const href = node.href
const originHref = node.getAttribute('href') const originHref = node.getAttribute('href')
const path = router.parse(href).path const path = router.parse(href).path
@ -34,12 +34,12 @@ function getAllPaths (router) {
return paths return paths
} }
function saveData (maxAge) { function saveData(maxAge) {
localStorage.setItem('docsify.search.expires', Date.now() + maxAge) localStorage.setItem('docsify.search.expires', Date.now() + maxAge)
localStorage.setItem('docsify.search.index', JSON.stringify(INDEXS)) localStorage.setItem('docsify.search.index', JSON.stringify(INDEXS))
} }
export function genIndex (path, content = '', router, depth) { export function genIndex(path, content = '', router, depth) {
const tokens = window.marked.lexer(content) const tokens = window.marked.lexer(content)
const slugify = window.Docsify.slugify const slugify = window.Docsify.slugify
const index = {} const index = {}
@ -47,18 +47,18 @@ export function genIndex (path, content = '', router, depth) {
tokens.forEach(token => { tokens.forEach(token => {
if (token.type === 'heading' && token.depth <= depth) { if (token.type === 'heading' && token.depth <= depth) {
slug = router.toURL(path, { id: slugify(token.text) }) slug = router.toURL(path, {id: slugify(token.text)})
index[slug] = { slug, title: token.text, body: '' } index[slug] = {slug, title: token.text, body: ''}
} else { } else {
if (!slug) return if (!slug) {
return
}
if (!index[slug]) { if (!index[slug]) {
index[slug] = { slug, title: '', body: '' } index[slug] = {slug, title: '', body: ''}
} else if (index[slug].body) {
index[slug].body += '\n' + (token.text || '')
} else { } else {
if (index[slug].body) { index[slug].body = token.text
index[slug].body += '\n' + (token.text || '')
} else {
index[slug].body = token.text
}
} }
} }
}) })
@ -70,7 +70,7 @@ export function genIndex (path, content = '', router, depth) {
* @param {String} query * @param {String} query
* @returns {Array} * @returns {Array}
*/ */
export function search (query) { export function search(query) {
const matchingResults = [] const matchingResults = []
let data = [] let data = []
Object.keys(INDEXS).forEach(key => { Object.keys(INDEXS).forEach(key => {
@ -78,7 +78,7 @@ export function search (query) {
}) })
query = query.trim() query = query.trim()
let keywords = query.split(/[\s\-\，\\/]+/) let keywords = query.split(/[\s\-，\\/]+/)
if (keywords.length !== 1) { if (keywords.length !== 1) {
keywords = [].concat(query, keywords) keywords = [].concat(query, keywords)
} }
@ -92,7 +92,7 @@ export function search (query) {
const postUrl = post.slug || '' const postUrl = post.slug || ''
if (postTitle && postContent) { if (postTitle && postContent) {
keywords.forEach((keyword, i) => { keywords.forEach(keyword => {
// From https://github.com/sindresorhus/escape-string-regexp // From https://github.com/sindresorhus/escape-string-regexp
const regEx = new RegExp( const regEx = new RegExp(
keyword.replace(/[|\\{}()[\]^$+*?.]/g, '\\$&'), keyword.replace(/[|\\{}()[\]^$+*?.]/g, '\\$&'),
@ -108,7 +108,9 @@ export function search (query) {
isMatch = false isMatch = false
} else { } else {
isMatch = true isMatch = true
if (indexContent < 0) indexContent = 0 if (indexContent < 0) {
indexContent = 0
}
let start = 0 let start = 0
let end = 0 let end = 0
@ -116,7 +118,9 @@ export function search (query) {
start = indexContent < 11 ? 0 : indexContent - 10 start = indexContent < 11 ? 0 : indexContent - 10
end = start === 0 ? 70 : indexContent + keyword.length + 60 end = start === 0 ? 70 : indexContent + keyword.length + 60
if (end > postContent.length) end = postContent.length if (end > postContent.length) {
end = postContent.length
}
const matchContent = const matchContent =
'...' + '...' +
@ -144,7 +148,7 @@ export function search (query) {
return matchingResults return matchingResults
} }
export function init (config, vm) { export function init(config, vm) {
helper = Docsify helper = Docsify
const isAuto = config.paths === 'auto' const isAuto = config.paths === 'auto'
@ -163,7 +167,9 @@ export function init (config, vm) {
let count = 0 let count = 0
paths.forEach(path => { paths.forEach(path => {
if (INDEXS[path]) return count++ if (INDEXS[path]) {
return count++
}
helper helper
.get(vm.router.getFile(path), false, vm.config.requestHeaders) .get(vm.router.getFile(path), false, vm.config.requestHeaders)

2
src/plugins/zoom-image.js
View file

@ -1,6 +1,6 @@
import mediumZoom from 'medium-zoom' import mediumZoom from 'medium-zoom'
function install (hook) { function install(hook) {
let zoom let zoom
hook.doneEach(_ => { hook.doneEach(_ => {

112
src/themes/basic/_coverpage.css
View file

@ -1,112 +0,0 @@
section.cover {
align-items: center;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
display: none;
&.show {
display: flex;
}
&.has-mask .mask {
background-color: $color-bg;
opacity: 0.8;
position: absolute;
top: 0;
size: 100%;
}
.cover-main {
flex: 1;
margin: -20px 16px 0;
text-align: center;
z-index: 1;
}
a {
color: inherit;
text-decoration: none;
&:hover {
text-decoration: none;
}
}
p {
line-height: 1.5rem;
margin: 1em 0;
}
h1 {
color: inherit;
font-size: 2.5rem;
font-weight: 300;
margin: 0.625rem 0 2.5rem;
position: relative;
text-align: center;
a {
display: block;
}
small {
bottom: -0.4375rem;
font-size: 1rem;
position: absolute;
}
}
blockquote {
font-size: 1.5rem;
text-align: center;
}
ul {
line-height: 1.8;
list-style-type: none;
margin: 1em auto;
max-width: 500px;
padding: 0;
}
.cover-main > p:last-child a {
border-color: var(--theme-color, $color-primary);
border-radius: 2rem;
border-style: solid;
border-width: 1px;
box-sizing: border-box;
color: var(--theme-color, $color-primary);
display: inline-block;
font-size: 1.05rem;
letter-spacing: 0.1rem;
margin: 0.5rem 1rem;
padding: 0.75em 2rem;
text-decoration: none;
transition: all 0.15s ease;
&:last-child {
background-color: var(--theme-color, $color-primary);
color: #fff;
&:hover {
color: inherit;
opacity: 0.8;
}
}
&:hover {
color: inherit;
}
}
blockquote > p > a {
border-bottom: 2px solid var(--theme-color, $color-primary);
transition: color 0.3s;
&:hover {
color: var(--theme-color, $color-primary);
}
}
}

95
src/themes/basic/_coverpage.styl Normal file
View file

@ -0,0 +1,95 @@
section.cover
align-items center
background-position center center
background-repeat no-repeat
background-size cover
height 100vh
display none
&.show
display flex
&.has-mask .mask
background-color $color-bg
opacity 0.8
position absolute
top 0
height 100%
width 100%
.cover-main
flex 1
margin -20px 16px 0
text-align center
z-index 1
a
color inherit
text-decoration none
&:hover
text-decoration none
p
line-height 1.5rem
margin 1em 0
h1
color inherit
font-size 2.5rem
font-weight 300
margin 0.625rem 0 2.5rem
position relative
text-align center
a
display block
small
bottom -0.4375rem
font-size 1rem
position absolute
blockquote
font-size 1.5rem
text-align center
ul
line-height 1.8
list-style-type none
margin 1em auto
max-width 500px
padding 0
.cover-main > p:last-child a
border-color var(--theme-color, $color-primary)
border-radius 2rem
border-style solid
border-width 1px
box-sizing border-box
color var(--theme-color, $color-primary)
display inline-block
font-size 1.05rem
letter-spacing 0.1rem
margin 0.5rem 1rem
padding 0.75em 2rem
text-decoration none
transition all 0.15s ease
&:last-child
background-color var(--theme-color, $color-primary)
color #fff
&:hover
color inherit
opacity 0.8
&:hover
color inherit
blockquote > p > a
border-bottom 2px solid var(--theme-color, $color-primary)
transition color 0.3s
&:hover
color var(--theme-color, $color-primary)

571
src/themes/basic/_layout.css
View file

@ -1,571 +0,0 @@
* {
-webkit-font-smoothing: antialiased;
-webkit-overflow-scrolling: touch;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-text-size-adjust: none;
-webkit-touch-callout: none;
box-sizing: border-box;
}
body:not(.ready) {
overflow: hidden;
[data-cloak],
.app-nav,
> nav {
display: none;
}
}
div#app {
font-size: 30px;
font-weight: lighter;
margin: 40vh auto;
text-align: center;
&:empty::before {
content: 'Loading...';
}
}
.emoji {
height: 1.2rem;
vertical-align: middle;
}
.progress {
background-color: var(--theme-color, $color-primary);
height: 2px;
left: 0px;
position: fixed;
right: 0px;
top: 0px;
transition: width 0.2s, opacity 0.4s;
width: 0%;
z-index: 999999;
}
.search a:hover {
color: var(--theme-color, $color-primary);
}
.search .search-keyword {
color: var(--theme-color, $color-primary);
font-style: normal;
font-weight: bold;
}
html,
body {
height: 100%;
}
body {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
color: $color-text;
font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
font-size: 15px;
letter-spacing: 0;
margin: 0;
overflow-x: hidden;
}
img {
max-width: 100%;
}
a[disabled] {
cursor: not-allowed;
opacity: 0.6;
}
kbd {
border: solid 1px #ccc;
border-radius: 3px;
display: inline-block;
font-size: 12px !important;
line-height: 12px;
margin-bottom: 3px;
padding: 3px 5px;
vertical-align: middle;
}
.task-list-item {
list-style-type: none;
}
li input[type='checkbox'] {
margin: 0 0.2em 0.25em -1.6em;
vertical-align: middle;
}
/* navbar */
.app-nav {
margin: 25px 60px 0 0;
position: absolute;
right: 0;
text-align: right;
z-index: 10;
&.no-badge {
margin-right: 25px;
}
p {
margin: 0;
}
> a {
margin: 0 1rem;
padding: 5px 0;
}
ul,
li {
display: inline-block;
list-style: none;
margin: 0;
}
a {
color: inherit;
font-size: 16px;
text-decoration: none;
transition: color 0.3s;
&:hover {
color: var(--theme-color, $color-primary);
}
&.active {
border-bottom: 2px solid var(--theme-color, $color-primary);
color: var(--theme-color, $color-primary);
}
}
/* navbar dropdown */
li {
display: inline-block;
margin: 0 1rem;
padding: 5px 0;
position: relative;
ul {
background-color: #fff;
border: 1px solid #ddd;
border-bottom-color: #ccc;
border-radius: 4px;
box-sizing: border-box;
display: none;
max-height: calc(100vh - 61px);
overflow-y: auto;
padding: 10px 0;
position: absolute;
right: -15px;
text-align: left;
top: 100%;
white-space: nowrap;
li {
display: block;
font-size: 14px;
line-height: 1rem;
margin: 0;
margin: 8px 14px;
white-space: nowrap;
}
a {
display: block;
font-size: inherit;
margin: 0;
padding: 0;
&.active {
border-bottom: 0;
}
}
}
&:hover ul {
display: block;
}
}
}
/* github corner */
.github-corner {
border-bottom: 0;
position: fixed;
right: 0;
text-decoration: none;
top: 0;
z-index: 1;
&:hover .octo-arm {
animation: octocat-wave 560ms ease-in-out;
}
svg {
color: $color-bg;
fill: var(--theme-color, $color-primary);
height: 80px;
width: 80px;
}
}
/* main */
main {
display: block;
position: relative;
size: 100vw 100%;
z-index: 0;
}
main.hidden {
display: none;
}
.anchor {
display: inline-block;
text-decoration: none;
transition: all 0.3s;
span {
color: $color-text;
}
&:hover {
text-decoration: underline;
}
}
/* sidebar */
.sidebar {
border-right: 1px solid rgba(0, 0, 0, 0.07);
overflow-y: auto;
padding: 40px 0 0;
position: absolute 0 * 0 0;
transition: transform 250ms ease-out;
width: $sidebar-width;
z-index: 20;
> h1 {
margin: 0 auto 1rem;
font-size: 1.5rem;
font-weight: 300;
text-align: center;
a {
color: inherit;
text-decoration: none;
}
.app-nav {
display: block;
position: static;
}
}
.sidebar-nav {
line-height: 2em;
padding-bottom: 40px;
}
li.collapse {
.app-sub-sidebar {
display: none;
}
}
ul {
margin: 0;
padding: 0;
}
li > p {
font-weight: 700;
margin: 0;
}
ul,
ul li {
list-style: none;
}
ul li a {
border-bottom: none;
display: block;
}
ul li ul {
padding-left: 20px;
}
&::-webkit-scrollbar {
width: 4px;
}
&::-webkit-scrollbar-thumb {
background: transparent;
border-radius: 4px;
}
&:hover::-webkit-scrollbar-thumb {
background: rgba(136, 136, 136, 0.4);
}
&:hover::-webkit-scrollbar-track {
background: rgba(136, 136, 136, 0.1);
}
}
/* sidebar toggle */
.sidebar-toggle {
background-color: transparent;
background-color: rgba($color-bg, 0.8);
border: 0;
outline: none;
outline: none;
padding: 10px;
position: absolute * * 0 0;
text-align: center;
transition: opacity 0.3s;
width: 30px;
width: calc($sidebar-width - 16px);
z-index: 30;
.sidebar-toggle-button:hover {
opacity: 0.4;
}
span {
background-color: var(--theme-color, $color-primary);
display: block;
margin-bottom: 4px;
size: 16px 2px;
}
}
body.sticky {
.sidebar,
.sidebar-toggle {
position: fixed;
}
}
/* main content */
.content {
padding-top: 60px;
position: absolute 0 0 0 $sidebar-width;
transition: left 250ms ease;
}
/* markdown content found on pages */
.markdown-section {
margin: 0 auto;
max-width: 800px;
padding: 30px 15px 40px 15px;
position: relative;
> * {
box-sizing: border-box;
font-size: inherit;
}
> :first-child {
margin-top: 0 !important;
}
}
.markdown-section hr {
border: none;
border-bottom: 1px solid #eee;
margin: 2em 0;
}
.markdown-section iframe {
border: 1px solid #eee;
}
.markdown-section table {
border-collapse: collapse;
border-spacing: 0;
display: block;
margin-bottom: 1rem;
overflow: auto;
width: 100%;
}
.markdown-section th {
border: 1px solid #ddd;
font-weight: bold;
padding: 6px 13px;
}
.markdown-section td {
border: 1px solid #ddd;
padding: 6px 13px;
}
.markdown-section tr {
border-top: 1px solid #ccc;
&:nth-child(2n) {
background-color: #f8f8f8;
}
}
.markdown-section p.tip {
background-color: #f8f8f8;
border-bottom-right-radius: 2px;
border-left: 4px solid #f66;
border-top-right-radius: 2px;
margin: 2em 0;
padding: 12px 24px 12px 30px;
position: relative;
&:before {
background-color: #f66;
border-radius: 100%;
color: $color-bg;
content: '!';
font-family: 'Dosis', 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
font-size: 14px;
font-weight: bold;
left: -12px;
line-height: 20px;
position: absolute;
size: 20px;
text-align: center;
top: 14px;
}
code {
background-color: #efefef;
}
em {
color: $color-text;
}
}
.markdown-section p.warn {
background: rgba($color-primary, 0.1);
border-radius: 2px;
padding: 1rem;
}
body.close {
.sidebar {
transform: translateX(-$sidebar-width);
}
.sidebar-toggle {
width: auto;
}
.content {
left: 0;
}
}
@media print {
.github-corner,
.sidebar-toggle,
.sidebar,
.app-nav {
display: none;
}
}
@media screen and (max-width: 768px) {
.github-corner,
.sidebar-toggle,
.sidebar {
position: fixed;
}
.app-nav {
margin-top: 16px;
}
.app-nav li ul {
top: 30px;
}
main {
height: auto;
overflow-x: hidden;
}
.sidebar {
left: -$sidebar-width;
transition: transform 250ms ease-out;
}
.content {
left: 0;
max-width: 100vw;
position: static;
padding-top: 20px;
transition: transform 250ms ease;
}
.app-nav,
.github-corner {
transition: transform 250ms ease-out;
}
.sidebar-toggle {
background-color: transparent;
width: auto;
padding: 30px 30px 10px 10px;
}
body.close {
.sidebar {
transform: translateX($sidebar-width);
}
.sidebar-toggle {
background-color: rgba($color-bg, 0.8);
transition: 1s background-color;
width: calc($sidebar-width - 16px);
padding: 10px;
}
.content {
transform: translateX($sidebar-width);
}
.app-nav,
.github-corner {
display: none;
}
}
.github-corner {
&:hover .octo-arm {
animation: none;
}
.octo-arm {
animation: octocat-wave 560ms ease-in-out;
}
}
}
@keyframes octocat-wave {
0%,
100% {
transform: rotate(0);
}
20%,
60% {
transform: rotate(-25deg);
}
40%,
80% {
transform: rotate(10deg);
}
}

467
src/themes/basic/_layout.styl Normal file
View file

@ -0,0 +1,467 @@
*
-webkit-font-smoothing antialiased
-webkit-overflow-scrolling touch
-webkit-tap-highlight-color rgba(0, 0, 0, 0)
-webkit-text-size-adjust none
-webkit-touch-callout none
box-sizing border-box
body:not(.ready)
overflow hidden
[data-cloak], .app-nav, > nav
display none
div#app
font-size 30px
font-weight lighter
margin 40vh auto
text-align center
&:empty::before
content 'Loading...'
.emoji
height 1.2rem
vertical-align middle
.progress
background-color var(--theme-color, $color-primary)
height 2px
left 0px
position fixed
right 0px
top 0px
transition width 0.2s, opacity 0.4s
width 0%
z-index 999999
.search a:hover
color var(--theme-color, $color-primary)
.search .search-keyword
color var(--theme-color, $color-primary)
font-style normal
font-weight bold
html, body
height 100%
body
-moz-osx-font-smoothing grayscale
-webkit-font-smoothing antialiased
color $color-text
font-family 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif
font-size 15px
letter-spacing 0
margin 0
overflow-x hidden
img
max-width 100%
a[disabled]
cursor not-allowed
opacity 0.6
kbd
border solid 1px #ccc
border-radius 3px
display inline-block
font-size 12px !important
line-height 12px
margin-bottom 3px
padding 3px 5px
vertical-align middle
.task-list-item
list-style-type none
li input[type='checkbox']
margin 0 0.2em 0.25em -1.6em
vertical-align middle
/* navbar */
.app-nav
margin 25px 60px 0 0
position absolute
right 0
text-align right
z-index 10
&.no-badge
margin-right 25px
p
margin 0
> a
margin 0 1rem
padding 5px 0
ul, li
display inline-block
list-style none
margin 0
a
color inherit
font-size 16px
text-decoration none
transition color 0.3s
&:hover
color var(--theme-color, $color-primary)
&.active
border-bottom 2px solid var(--theme-color, $color-primary)
color var(--theme-color, $color-primary)
/* navbar dropdown */
li
display inline-block
margin 0 1rem
padding 5px 0
position relative
ul
background-color #fff
border 1px solid #ddd
border-bottom-color #ccc
border-radius 4px
box-sizing border-box
display none
max-height calc(100vh - 61px)
overflow-y auto
padding 10px 0
position absolute
right -15px
text-align left
top 100%
white-space nowrap
li
display block
font-size 14px
line-height 1rem
margin 0
margin 8px 14px
white-space nowrap
a
display block
font-size inherit
margin 0
padding 0
&.active
border-bottom 0
&:hover ul
display block
/* github corner */
.github-corner
border-bottom 0
position fixed
right 0
text-decoration none
top 0
z-index 1
&:hover .octo-arm
animation octocat-wave 560ms ease-in-out
svg
color $color-bg
fill var(--theme-color, $color-primary)
height 80px
width 80px
/* main */
main
display block
position relative
width 100vw
height 100%
z-index 0
main.hidden
display none
.anchor
display inline-block
text-decoration none
transition all 0.3s
span
color $color-text
&:hover
text-decoration underline
/* sidebar */
.sidebar
border-right 1px solid rgba(0, 0, 0, 0.07)
overflow-y auto
padding 40px 0 0
position absolute
top 0
bottom 0
left 0
transition transform 250ms ease-out
width $sidebar-width
z-index 20
> h1
margin 0 auto 1rem
font-size 1.5rem
font-weight 300
text-align center
a
color inherit
text-decoration none
.app-nav
display block
position static
.sidebar-nav
line-height 2em
padding-bottom 40px
li.collapse
.app-sub-sidebar
display none
ul
margin 0
padding 0
li > p
font-weight 700
margin 0
ul, ul li
list-style none
ul li a
border-bottom none
display block
ul li ul
padding-left 20px
&::-webkit-scrollbar
width 4px
&::-webkit-scrollbar-thumb
background transparent
border-radius 4px
&:hover::-webkit-scrollbar-thumb
background rgba(136, 136, 136, 0.4)
&:hover::-webkit-scrollbar-track
background rgba(136, 136, 136, 0.1)
/* sidebar toggle */
.sidebar-toggle
background-color transparent
background-color rgba($color-bg, 0.8)
border 0
outline none
padding 10px
position absolute
bottom 0
left 0
text-align center
transition opacity 0.3s
width $sidebar-width - 16px
z-index 30
.sidebar-toggle-button:hover
opacity 0.4
span
background-color var(--theme-color, $color-primary)
display block
margin-bottom 4px
width 16px
height 2px
body.sticky
.sidebar, .sidebar-toggle
position fixed
/* main content */
.content
padding-top 60px
position absolute
top 0
right 0
bottom 0
left $sidebar-width
transition left 250ms ease
/* markdown content found on pages */
.markdown-section
margin 0 auto
max-width 800px
padding 30px 15px 40px 15px
position relative
> *
box-sizing border-box
font-size inherit
> :first-child
margin-top 0 !important
.markdown-section hr
border none
border-bottom 1px solid #eee
margin 2em 0
.markdown-section iframe
border 1px solid #eee
.markdown-section table
border-collapse collapse
border-spacing 0
display block
margin-bottom 1rem
overflow auto
width 100%
.markdown-section th
border 1px solid #ddd
font-weight bold
padding 6px 13px
.markdown-section td
border 1px solid #ddd
padding 6px 13px
.markdown-section tr
border-top 1px solid #ccc
&:nth-child(2n)
background-color #f8f8f8
.markdown-section p.tip
background-color #f8f8f8
border-bottom-right-radius 2px
border-left 4px solid #f66
border-top-right-radius 2px
margin 2em 0
padding 12px 24px 12px 30px
position relative
&:before
background-color #f66
border-radius 100%
color $color-bg
content '!'
font-family 'Dosis', 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif
font-size 14px
font-weight bold
left -12px
line-height 20px
position absolute
height 20px
width 20px
text-align center
top 14px
code
background-color #efefef
em
color $color-text
.markdown-section p.warn
background rgba($color-primary, 0.1)
border-radius 2px
padding 1rem
body.close
.sidebar
transform translateX(-$sidebar-width)
.sidebar-toggle
width auto
.content
left 0
@media print
.github-corner, .sidebar-toggle, .sidebar, .app-nav
display none
@media screen and (max-width: 768px)
.github-corner, .sidebar-toggle, .sidebar
position fixed
.app-nav
margin-top 16px
.app-nav li ul
top 30px
main
height auto
overflow-x hidden
.sidebar
left -$sidebar-width
transition transform 250ms ease-out
.content
left 0
max-width 100vw
position static
padding-top 20px
transition transform 250ms ease
.app-nav, .github-corner
transition transform 250ms ease-out
.sidebar-toggle
background-color transparent
width auto
padding 30px 30px 10px 10px
body.close
.sidebar
transform translateX($sidebar-width)
.sidebar-toggle
background-color rgba($color-bg, 0.8)
transition 1s background-color
width $sidebar-width - 16px
padding 10px
.content
transform translateX($sidebar-width)
.app-nav, .github-corner
display none
.github-corner
&:hover .octo-arm
animation none
.octo-arm
animation octocat-wave 560ms ease-in-out
@keyframes octocat-wave
0%, 100%
transform rotate(0)
20%, 60%
transform rotate(-25deg)
40%, 80%
transform rotate(10deg)

241
src/themes/buble.css
View file

@ -1,241 +0,0 @@
@import url('https://fonts.googleapis.com/css?family=Inconsolata|Inconsolata-Bold');
$color-primary: #0074d9;
$color-bg: #fff;
$color-text: #34495e;
$sidebar-width: 16rem;
@import 'basic/layout';
@import 'basic/coverpage';
/* sidebar */
.sidebar {
color: #364149;
background-color: $color-bg;
a {
color: #666;
text-decoration: none;
}
li {
list-style: none;
margin: 0;
padding: 0.2em 0 0.2em 1rem;
}
ul li ul {
padding: 0;
}
li.active {
a {
color: #333;
}
background-color: #eee;
}
}
.markdown-section h1,
.markdown-section h2,
.markdown-section h3,
.markdown-section h4,
.markdown-section strong {
color: #333;
font-weight: 400;
}
.markdown-section a {
color: var(--theme-color, $color-primary);
font-weight: 400;
}
.markdown-section p,
.markdown-section ul,
.markdown-section ol {
line-height: 1.6rem;
margin: 0 0 1em 0;
word-spacing: 0.05rem;
}
.markdown-section h1 {
font-size: 2rem;
font-weight: 500;
margin: 0 0 1rem;
}
.markdown-section h2 {
font-size: 1.8rem;
font-weight: 400;
margin: 0 0 1rem 0;
padding: 1rem 0 0 0;
}
.markdown-section h3 {
font-size: 1.5rem;
margin: 52px 0 1.2rem;
}
.markdown-section h4 {
font-size: 1.25rem;
}
.markdown-section h5 {
font-size: 1rem;
}
.markdown-section h6 {
color: #777;
font-size: 1rem;
}
.markdown-section figure,
.markdown-section p,
.markdown-section ul,
.markdown-section ol {
margin: 1.2em 0;
}
.markdown-section ul,
.markdown-section ol {
padding-left: 1.5rem;
}
.markdown-section li {
line-height: 1.5;
margin: 0;
}
.markdown-section blockquote {
border-left: 4px solid var(--theme-color, $color-primary);
color: #858585;
margin: 2em 0;
padding-left: 20px;
}
.markdown-section blockquote p {
font-weight: 600;
margin-left: 0;
}
.markdown-section iframe {
margin: 1em 0;
}
.markdown-section em {
color: #7f8c8d;
}
.markdown-section code {
background-color: #f9f9f9;
border-radius: 3px;
font-family: Inconsolata;
padding: 0.2em 0.4rem;
white-space: nowrap;
}
.markdown-section pre {
background-color: #f9f9f9;
border-left: 2px solid #eee;
font-family: Inconsolata;
font-size: 16px;
margin: 0 0 1em 0;
padding: 8px;
padding: 0 10px 12px 0;
overflow: auto;
word-wrap: normal;
}
/* code highlight */
.token.cdata,
.token.comment,
.token.doctype,
.token.prolog {
color: #93a1a1; /* base1 */
}
.token.punctuation {
color: #586e75; /* base01 */
}
.namespace {
opacity: 0.7;
}
.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
color: #268bd2; /* blue */
}
.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.url,
.token.inserted {
color: #2aa198; /* cyan */
}
.token.entity {
color: #657b83; /* base00 */
background: #eee8d5; /* base2 */
}
.token.atrule,
.token.attr-value,
.token.keyword {
color: #a11; /* green */
}
.token.function {
color: #b58900; /* yellow */
}
.token.regex,
.token.important,
.token.variable {
color: #cb4b16; /* orange */
}
.token.important,
.token.bold {
font-weight: bold;
}
.token.italic {
font-style: italic;
}
.token.entity {
cursor: help;
}
.markdown-section pre > code {
background-color: #f8f8f8;
border-radius: 2px;
display: block;
font-family: Inconsolata;
line-height: 1.1rem;
max-width: inherit;
overflow: inherit;
padding: 20px 0.8em 20px;
position: relative;
white-space: inherit;
}
.markdown-section code::after,
.markdown-section code::before {
letter-spacing: 0.05rem;
}
code .token {
-webkit-font-smoothing: initial;
-moz-osx-font-smoothing: initial;
min-height: 1.5rem;
}

172
src/themes/buble.styl Normal file
View file

@ -0,0 +1,172 @@
@import url('https://fonts.googleapis.com/css?family=Inconsolata|Inconsolata-Bold')
$color-primary = #0074d9
$color-bg = #fff
$color-text = #34495e
$sidebar-width = 16rem
@import 'basic/_layout'
@import 'basic/_coverpage'
/* sidebar */
.sidebar
color #364149
background-color $color-bg
a
color #666
text-decoration none
li
list-style none
margin 0
padding 0.2em 0 0.2em 1rem
ul li ul
padding 0
li.active
a
color #333
background-color #eee
.markdown-section h1, .markdown-section h2, .markdown-section h3, .markdown-section h4, .markdown-section strong
color #333
font-weight 400
.markdown-section a
color var(--theme-color, $color-primary)
font-weight 400
.markdown-section p, .markdown-section ul, .markdown-section ol
line-height 1.6rem
margin 0 0 1em 0
word-spacing 0.05rem
.markdown-section h1
font-size 2rem
font-weight 500
margin 0 0 1rem
.markdown-section h2
font-size 1.8rem
font-weight 400
margin 0 0 1rem 0
padding 1rem 0 0 0
.markdown-section h3
font-size 1.5rem
margin 52px 0 1.2rem
.markdown-section h4
font-size 1.25rem
.markdown-section h5
font-size 1rem
.markdown-section h6
color #777
font-size 1rem
.markdown-section figure, .markdown-section p, .markdown-section ul, .markdown-section ol
margin 1.2em 0
.markdown-section ul, .markdown-section ol
padding-left 1.5rem
.markdown-section li
line-height 1.5
margin 0
.markdown-section blockquote
border-left 4px solid var(--theme-color, $color-primary)
color #858585
margin 2em 0
padding-left 20px
.markdown-section blockquote p
font-weight 600
margin-left 0
.markdown-section iframe
margin 1em 0
.markdown-section em
color #7f8c8d
.markdown-section code
background-color #f9f9f9
border-radius 3px
font-family Inconsolata
padding 0.2em 0.4rem
white-space nowrap
.markdown-section pre
background-color #f9f9f9
border-left 2px solid #eee
font-family Inconsolata
font-size 16px
margin 0 0 1em 0
padding 8px
padding 0 10px 12px 0
overflow auto
word-wrap normal
/* code highlight */
.token.cdata, .token.comment, .token.doctype, .token.prolog
color #93a1a1 /* base1 */
.token.punctuation
color #586e75 /* base01 */
.namespace
opacity 0.7
.token.property, .token.tag, .token.boolean, .token.number, .token.constant, .token.symbol, .token.deleted
color #268bd2 /* blue */
.token.selector, .token.attr-name, .token.string, .token.char, .token.builtin, .token.url, .token.inserted
color #2aa198 /* cyan */
.token.entity
color #657b83 /* base00 */
background #eee8d5 /* base2 */
.token.atrule, .token.attr-value, .token.keyword
color #a11 /* green */
.token.function
color #b58900 /* yellow */
.token.regex, .token.important, .token.variable
color #cb4b16 /* orange */
.token.important, .token.bold
font-weight bold
.token.italic
font-style italic
.token.entity
cursor help
.markdown-section pre > code
background-color #f8f8f8
border-radius 2px
display block
font-family Inconsolata
line-height 1.1rem
max-width inherit
overflow inherit
padding 20px 0.8em 20px
position relative
white-space inherit
.markdown-section code::after, .markdown-section code::before
letter-spacing 0.05rem
code .token
-webkit-font-smoothing initial
-moz-osx-font-smoothing initial
min-height 1.5rem

300
src/themes/dark.css
View file

@ -1,300 +0,0 @@
@import url('https://fonts.googleapis.com/css?family=Roboto+Mono|Source+Sans+Pro:300,400,600');
$color-primary: #ea6f5a;
$color-bg: #3f3f3f;
$color-text: #c8c8c8;
$sidebar-width: 300px;
@import 'basic/layout';
@import 'basic/coverpage';
body {
background-color: $color-bg;
}
/* sidebar */
.sidebar {
background-color: $color-bg;
color: #c8c8c8;
li {
margin: 6px 15px;
}
ul li a {
color: #c8c8c8;
font-size: 14px;
overflow: hidden;
text-decoration: none;
text-overflow: ellipsis;
white-space: nowrap;
&:hover {
text-decoration: underline;
}
}
ul li ul {
padding: 0;
}
ul li.active > a {
color: var(--theme-color, $color-primary);
font-weight: 600;
}
}
/* markdown content found on pages */
.markdown-section h1,
.markdown-section h2,
.markdown-section h3,
.markdown-section h4,
.markdown-section strong {
color: #657b83;
font-weight: 600;
}
.markdown-section a {
color: var(--theme-color, $color-primary);
font-weight: 600;
}
.markdown-section h1 {
font-size: 2rem;
margin: 0 0 1rem;
}
.markdown-section h2 {
font-size: 1.75rem;
margin: 45px 0 0.8rem;
}
.markdown-section h3 {
font-size: 1.5rem;
margin: 40px 0 0.6rem;
}
.markdown-section h4 {
font-size: 1.25rem;
}
.markdown-section h5 {
font-size: 1rem;
}
.markdown-section h6 {
color: #777;
font-size: 1rem;
}
.markdown-section figure,
.markdown-section p,
.markdown-section ul,
.markdown-section ol {
margin: 1.2em 0;
}
.markdown-section p,
.markdown-section ul,
.markdown-section ol {
line-height: 1.6rem;
word-spacing: 0.05rem;
}
.markdown-section ul,
.markdown-section ol {
padding-left: 1.5rem;
}
.markdown-section blockquote {
border-left: 4px solid var(--theme-color, $color-primary);
color: #858585;
margin: 2em 0;
padding-left: 20px;
}
.markdown-section blockquote p {
font-weight: 600;
margin-left: 0;
}
.markdown-section iframe {
margin: 1em 0;
}
.markdown-section em {
color: #7f8c8d;
}
.markdown-section code {
background-color: #282828;
border-radius: 2px;
color: #657b83;
font-family: 'Roboto Mono', Monaco, courier, monospace;
font-size: 0.8rem;
margin: 0 2px;
padding: 3px 5px;
white-space: pre-wrap;
}
.markdown-section pre {
-moz-osx-font-smoothing: initial;
-webkit-font-smoothing: initial;
background-color: #282828;
font-family: 'Roboto Mono', Monaco, courier, monospace;
line-height: 1.5rem;
margin: 1.2em 0;
overflow: auto;
padding: 0 1.4rem;
position: relative;
word-wrap: normal;
}
/* code highlight */
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: #8e908c;
}
.token.namespace {
opacity: 0.7;
}
.token.boolean,
.token.number {
color: #c76b29;
}
.token.punctuation {
color: #525252;
}
.token.property {
color: #c08b30;
}
.token.tag {
color: #2973b7;
}
.token.string {
color: var(--theme-color, $color-primary);
}
.token.selector {
color: #6679cc;
}
.token.attr-name {
color: #2973b7;
}
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
color: #22a2c9;
}
.token.attr-value,
.token.control,
.token.directive,
.token.unit {
color: var(--theme-color, $color-primary);
}
.token.keyword {
color: #e96900;
}
.token.statement,
.token.regex,
.token.atrule {
color: #22a2c9;
}
.token.placeholder,
.token.variable {
color: #3d8fd1;
}
.token.deleted {
text-decoration: line-through;
}
.token.inserted {
border-bottom: 1px dotted #202746;
text-decoration: none;
}
.token.italic {
font-style: italic;
}
.token.important,
.token.bold {
font-weight: bold;
}
.token.important {
color: #c94922;
}
.token.entity {
cursor: help;
}
.markdown-section pre > code {
-moz-osx-font-smoothing: initial;
-webkit-font-smoothing: initial;
background-color: #282828;
border-radius: 2px;
color: #657b83;
display: block;
font-family: 'Roboto Mono', Monaco, courier, monospace;
font-size: 0.8rem;
line-height: inherit;
margin: 0 2px;
max-width: inherit;
overflow: inherit;
padding: 2.2em 5px;
white-space: inherit;
}
.markdown-section code::after,
.markdown-section code::before {
letter-spacing: 0.05rem;
}
code .token {
-moz-osx-font-smoothing: initial;
-webkit-font-smoothing: initial;
min-height: 1.5rem;
}
pre::after {
color: #ccc;
content: attr(data-lang);
font-size: 0.6rem;
font-weight: 600;
height: 15px;
line-height: 15px;
padding: 5px 10px 0;
position: absolute;
right: 0;
text-align: right;
top: 0;
}
.markdown-section p.tip {
background-color: #282828;
color: #657b83;
}
input[type='search'] {
background: #4f4f4f;
border-color: #4f4f4f;
color: #c8c8c8;
}

225
src/themes/dark.styl Normal file
View file

@ -0,0 +1,225 @@
@import url('https://fonts.googleapis.com/css?family=Roboto+Mono|Source+Sans+Pro:300,400,600')
$color-primary = #ea6f5a
$color-bg = #3f3f3f
$color-text = #c8c8c8
$sidebar-width = 300px
@import 'basic/_layout'
@import 'basic/_coverpage'
body
background-color $color-bg
/* sidebar */
.sidebar
background-color $color-bg
color #c8c8c8
li
margin 6px 15px
ul li a
color #c8c8c8
font-size 14px
overflow hidden
text-decoration none
text-overflow ellipsis
white-space nowrap
&:hover
text-decoration underline
ul li ul
padding 0
ul li.active > a
color var(--theme-color, $color-primary)
font-weight 600
/* markdown content found on pages */
.markdown-section h1, .markdown-section h2, .markdown-section h3, .markdown-section h4, .markdown-section strong
color #657b83
font-weight 600
.markdown-section a
color var(--theme-color, $color-primary)
font-weight 600
.markdown-section h1
font-size 2rem
margin 0 0 1rem
.markdown-section h2
font-size 1.75rem
margin 45px 0 0.8rem
.markdown-section h3
font-size 1.5rem
margin 40px 0 0.6rem
.markdown-section h4
font-size 1.25rem
.markdown-section h5
font-size 1rem
.markdown-section h6
color #777
font-size 1rem
.markdown-section figure, .markdown-section p, .markdown-section ul, .markdown-section ol
margin 1.2em 0
.markdown-section p, .markdown-section ul, .markdown-section ol
line-height 1.6rem
word-spacing 0.05rem
.markdown-section ul, .markdown-section ol
padding-left 1.5rem
.markdown-section blockquote
border-left 4px solid var(--theme-color, $color-primary)
color #858585
margin 2em 0
padding-left 20px
.markdown-section blockquote p
font-weight 600
margin-left 0
.markdown-section iframe
margin 1em 0
.markdown-section em
color #7f8c8d
.markdown-section code
background-color #282828
border-radius 2px
color #657b83
font-family 'Roboto Mono', Monaco, courier, monospace
font-size 0.8rem
margin 0 2px
padding 3px 5px
white-space pre-wrap
.markdown-section pre
-moz-osx-font-smoothing initial
-webkit-font-smoothing initial
background-color #282828
font-family 'Roboto Mono', Monaco, courier, monospace
line-height 1.5rem
margin 1.2em 0
overflow auto
padding 0 1.4rem
position relative
word-wrap normal
/* code highlight */
.token.comment, .token.prolog, .token.doctype, .token.cdata
color #8e908c
.token.namespace
opacity 0.7
.token.boolean, .token.number
color #c76b29
.token.punctuation
color #525252
.token.property
color #c08b30
.token.tag
color #2973b7
.token.string
color var(--theme-color, $color-primary)
.token.selector
color #6679cc
.token.attr-name
color #2973b7
.token.entity, .token.url, .language-css .token.string, .style .token.string
color #22a2c9
.token.attr-value, .token.control, .token.directive, .token.unit
color var(--theme-color, $color-primary)
.token.keyword
color #e96900
.token.statement, .token.regex, .token.atrule
color #22a2c9
.token.placeholder, .token.variable
color #3d8fd1
.token.deleted
text-decoration line-through
.token.inserted
border-bottom 1px dotted #202746
text-decoration none
.token.italic
font-style italic
.token.important, .token.bold
font-weight bold
.token.important
color #c94922
.token.entity
cursor help
.markdown-section pre > code
-moz-osx-font-smoothing initial
-webkit-font-smoothing initial
background-color #282828
border-radius 2px
color #657b83
display block
font-family 'Roboto Mono', Monaco, courier, monospace
font-size 0.8rem
line-height inherit
margin 0 2px
max-width inherit
overflow inherit
padding 2.2em 5px
white-space inherit
.markdown-section code::after, .markdown-section code::before
letter-spacing 0.05rem
code .token
-moz-osx-font-smoothing initial
-webkit-font-smoothing initial
min-height 1.5rem
pre::after
color #ccc
content attr(data-lang)
font-size 0.6rem
font-weight 600
height 15px
line-height 15px
padding 5px 10px 0
position absolute
right 0
text-align right
top 0
.markdown-section p.tip
background-color #282828
color #657b83
input[type='search']
background #4f4f4f
border-color #4f4f4f
color #c8c8c8

6
src/themes/pure.css
View file

@ -1,6 +0,0 @@
$color-primary: #000;
$color-bg: #fff;
$color-text: #000;
$sidebar-width: 300px;
@import 'basic/layout';
@import 'basic/coverpage';

7
src/themes/pure.styl Normal file
View file

@ -0,0 +1,7 @@
$color-primary = #000
$color-bg = #fff
$color-text = #000
$sidebar-width = 300px
@import 'basic/_layout'
@import 'basic/_coverpage'

299
src/themes/vue.css
View file

@ -1,299 +0,0 @@
@import url('https://fonts.googleapis.com/css?family=Roboto+Mono|Source+Sans+Pro:300,400,600');
$color-primary: #42b983;
$color-bg: #fff;
$color-text: #34495e;
$sidebar-width: 300px;
@import 'basic/layout';
@import 'basic/coverpage';
body {
background-color: $color-bg;
}
/* sidebar */
.sidebar {
background-color: $color-bg;
color: #364149;
li {
margin: 6px 0 6px 15px;
}
ul li a {
color: #505d6b;
font-size: 14px;
font-weight: normal;
overflow: hidden;
text-decoration: none;
text-overflow: ellipsis;
white-space: nowrap;
&:hover {
text-decoration: underline;
}
}
ul li ul {
padding: 0;
}
ul li.active > a {
border-right: 2px solid;
color: var(--theme-color, $color-primary);
font-weight: 600;
}
}
.app-sub-sidebar {
li {
&::before {
content: '-';
padding-right: 4px;
float: left;
}
}
}
/* markdown content found on pages */
.markdown-section h1,
.markdown-section h2,
.markdown-section h3,
.markdown-section h4,
.markdown-section strong {
color: #2c3e50;
font-weight: 600;
}
.markdown-section a {
color: var(--theme-color, $color-primary);
font-weight: 600;
}
.markdown-section h1 {
font-size: 2rem;
margin: 0 0 1rem;
}
.markdown-section h2 {
font-size: 1.75rem;
margin: 45px 0 0.8rem;
}
.markdown-section h3 {
font-size: 1.5rem;
margin: 40px 0 0.6rem;
}
.markdown-section h4 {
font-size: 1.25rem;
}
.markdown-section h5 {
font-size: 1rem;
}
.markdown-section h6 {
color: #777;
font-size: 1rem;
}
.markdown-section figure,
.markdown-section p {
margin: 1.2em 0;
}
.markdown-section p,
.markdown-section ul,
.markdown-section ol {
line-height: 1.6rem;
word-spacing: 0.05rem;
}
.markdown-section ul,
.markdown-section ol {
padding-left: 1.5rem;
}
.markdown-section blockquote {
border-left: 4px solid var(--theme-color, $color-primary);
color: #858585;
margin: 2em 0;
padding-left: 20px;
}
.markdown-section blockquote p {
font-weight: 600;
margin-left: 0;
}
.markdown-section iframe {
margin: 1em 0;
}
.markdown-section em {
color: #7f8c8d;
}
.markdown-section code {
background-color: #f8f8f8;
border-radius: 2px;
color: #e96900;
font-family: 'Roboto Mono', Monaco, courier, monospace;
font-size: 0.8rem;
margin: 0 2px;
padding: 3px 5px;
white-space: pre-wrap;
}
.markdown-section pre {
-moz-osx-font-smoothing: initial;
-webkit-font-smoothing: initial;
background-color: #f8f8f8;
font-family: 'Roboto Mono', Monaco, courier, monospace;
line-height: 1.5rem;
margin: 1.2em 0;
overflow: auto;
padding: 0 1.4rem;
position: relative;
word-wrap: normal;
}
/* code highlight */
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: #8e908c;
}
.token.namespace {
opacity: 0.7;
}
.token.boolean,
.token.number {
color: #c76b29;
}
.token.punctuation {
color: #525252;
}
.token.property {
color: #c08b30;
}
.token.tag {
color: #2973b7;
}
.token.string {
color: var(--theme-color, $color-primary);
}
.token.selector {
color: #6679cc;
}
.token.attr-name {
color: #2973b7;
}
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
color: #22a2c9;
}
.token.attr-value,
.token.control,
.token.directive,
.token.unit {
color: var(--theme-color, $color-primary);
}
.token.keyword {
color: #e96900;
}
.token.statement,
.token.regex,
.token.atrule {
color: #22a2c9;
}
.token.placeholder,
.token.variable {
color: #3d8fd1;
}
.token.deleted {
text-decoration: line-through;
}
.token.inserted {
border-bottom: 1px dotted #202746;
text-decoration: none;
}
.token.italic {
font-style: italic;
}
.token.important,
.token.bold {
font-weight: bold;
}
.token.important {
color: #c94922;
}
.token.entity {
cursor: help;
}
.markdown-section pre > code {
-moz-osx-font-smoothing: initial;
-webkit-font-smoothing: initial;
background-color: #f8f8f8;
border-radius: 2px;
color: #525252;
display: block;
font-family: 'Roboto Mono', Monaco, courier, monospace;
font-size: 0.8rem;
line-height: inherit;
margin: 0 2px;
max-width: inherit;
overflow: inherit;
padding: 2.2em 5px;
white-space: inherit;
}
.markdown-section code::after,
.markdown-section code::before {
letter-spacing: 0.05rem;
}
code .token {
-moz-osx-font-smoothing: initial;
-webkit-font-smoothing: initial;
min-height: 1.5rem;
}
pre::after {
color: #ccc;
content: attr(data-lang);
font-size: 0.6rem;
font-weight: 600;
height: 15px;
line-height: 15px;
padding: 5px 10px 0;
position: absolute;
right: 0;
text-align: right;
top: 0;
}

225
src/themes/vue.styl Normal file
View file

@ -0,0 +1,225 @@
@import url('https://fonts.googleapis.com/css?family=Roboto+Mono|Source+Sans+Pro:300,400,600')
$color-primary = #42b983
$color-bg = #fff
$color-text = #34495e
$sidebar-width = 300px
@import 'basic/_layout'
@import 'basic/_coverpage'
body
background-color $color-bg
/* sidebar */
.sidebar
background-color $color-bg
color #364149
li
margin 6px 0 6px 15px
ul li a
color #505d6b
font-size 14px
font-weight normal
overflow hidden
text-decoration none
text-overflow ellipsis
white-space nowrap
&:hover
text-decoration underline
ul li ul
padding 0
ul li.active > a
border-right 2px solid
color var(--theme-color, $color-primary)
font-weight 600
.app-sub-sidebar
li
&::before
content '-'
padding-right 4px
float left
/* markdown content found on pages */
.markdown-section h1, .markdown-section h2, .markdown-section h3, .markdown-section h4, .markdown-section strong
color #2c3e50
font-weight 600
.markdown-section a
color var(--theme-color, $color-primary)
font-weight 600
.markdown-section h1
font-size 2rem
margin 0 0 1rem
.markdown-section h2
font-size 1.75rem
margin 45px 0 0.8rem
.markdown-section h3
font-size 1.5rem
margin 40px 0 0.6rem
.markdown-section h4
font-size 1.25rem
.markdown-section h5
font-size 1rem
.markdown-section h6
color #777
font-size 1rem
.markdown-section figure, .markdown-section p
margin 1.2em 0
.markdown-section p, .markdown-section ul, .markdown-section ol
line-height 1.6rem
word-spacing 0.05rem
.markdown-section ul, .markdown-section ol
padding-left 1.5rem
.markdown-section blockquote
border-left 4px solid var(--theme-color, $color-primary)
color #858585
margin 2em 0
padding-left 20px
.markdown-section blockquote p
font-weight 600
margin-left 0
.markdown-section iframe
margin 1em 0
.markdown-section em
color #7f8c8d
.markdown-section code
background-color #f8f8f8
border-radius 2px
color #e96900
font-family 'Roboto Mono', Monaco, courier, monospace
font-size 0.8rem
margin 0 2px
padding 3px 5px
white-space pre-wrap
.markdown-section pre
-moz-osx-font-smoothing initial
-webkit-font-smoothing initial
background-color #f8f8f8
font-family 'Roboto Mono', Monaco, courier, monospace
line-height 1.5rem
margin 1.2em 0
overflow auto
padding 0 1.4rem
position relative
word-wrap normal
/* code highlight */
.token.comment, .token.prolog, .token.doctype, .token.cdata
color #8e908c
.token.namespace
opacity 0.7
.token.boolean, .token.number
color #c76b29
.token.punctuation
color #525252
.token.property
color #c08b30
.token.tag
color #2973b7
.token.string
color var(--theme-color, $color-primary)
.token.selector
color #6679cc
.token.attr-name
color #2973b7
.token.entity, .token.url, .language-css .token.string, .style .token.string
color #22a2c9
.token.attr-value, .token.control, .token.directive, .token.unit
color var(--theme-color, $color-primary)
.token.keyword
color #e96900
.token.statement, .token.regex, .token.atrule
color #22a2c9
.token.placeholder, .token.variable
color #3d8fd1
.token.deleted
text-decoration line-through
.token.inserted
border-bottom 1px dotted #202746
text-decoration none
.token.italic
font-style italic
.token.important, .token.bold
font-weight bold
.token.important
color #c94922
.token.entity
cursor help
.markdown-section pre > code
-moz-osx-font-smoothing initial
-webkit-font-smoothing initial
background-color #f8f8f8
border-radius 2px
color #525252
display block
font-family 'Roboto Mono', Monaco, courier, monospace
font-size 0.8rem
line-height inherit
margin 0 2px
max-width inherit
overflow inherit
padding 2.2em 5px
white-space inherit
.markdown-section code::after, .markdown-section code::before
letter-spacing 0.05rem
code .token
-moz-osx-font-smoothing initial
-webkit-font-smoothing initial
min-height 1.5rem
pre::after
color #ccc
content attr(data-lang)
font-size 0.6rem
font-weight 600
height 15px
line-height 15px
padding 5px 10px 0
position absolute
right 0
text-align right
top 0