archive-gh-me/docsify
1
0
Fork 0
mirror of https://github.com/docsifyjs/docsify.git synced 2025-12-08 19:55:52 +00:00
Code Issues Projects Releases Wiki Activity

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
parent 9b3b4454de
commit 8352a1e489
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
64 changed files with 4246 additions and 5512 deletions
Show Stats 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
node_modules
node_modules
build
server.js

23
.eslintrc
View File

@ -1,15 +1,20 @@
{
"extends": [
"vue"
],
"parserOptions": {
"ecmaVersion": 8
},
"env": {
"browser": true
"extends": "xo-space/browser",
"rules": {
"semi": [2, "never"],
"no-return-assign": "off",
"no-unused-expressions": "off",
"no-new-func": "off",
"no-multi-assign": "off",
"no-mixed-operators": "off",
"max-params": "off",
"no-script-url": "off",
"camelcase": "off",
"no-warning-comments": "off"
},
"globals": {
"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
npm run bootstrap && npm run dev
open http://localhost:3000
```
## 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')
var buble = require('rollup-plugin-buble')
var commonjs = require('rollup-plugin-commonjs')
var nodeResolve = require('rollup-plugin-node-resolve')
var string = require('rollup-plugin-string')
var uglify = require('rollup-plugin-uglify')
var replace = require('rollup-plugin-replace')
var isProd = process.argv[process.argv.length - 1] !== '--dev'
var version = process.env.VERSION || require('../package.json').version
const rollup = require('rollup')
const buble = require('rollup-plugin-buble')
const commonjs = require('rollup-plugin-commonjs')
const nodeResolve = require('rollup-plugin-node-resolve')
const uglify = require('rollup-plugin-uglify')
const replace = require('rollup-plugin-replace')
const isProd = process.env.NODE_ENV === 'production'
const 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({
input: 'src/' + opts.entry,
input: opts.input,
plugins: (opts.plugins || []).concat([
string({ include: '**/*.css' }),
buble(),
commonjs(),
nodeResolve(),
@ -23,8 +23,8 @@ var build = function (opts) {
})
])
})
.then(function (bundle) {
var dest = 'lib/' + (opts.output || opts.entry)
.then(function(bundle) {
var dest = 'lib/' + (opts.output || opts.input)
console.log(dest)
bundle.write({
@ -33,45 +33,86 @@ var build = function (opts) {
strict: false
})
})
.catch(function (err) {
.catch(function(err) {
console.error(err)
})
}
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 => {
const buildCore = function() {
build({
entry: 'plugins/' + item.entry,
output: 'plugins/' + item.name + '.js'
input: 'src/core/index.js',
output: 'docsify.js'
})
})
if (isProd) {
build({
entry: 'core/index.js',
output: 'docsify.min.js',
plugins: [uglify()]
})
plugins.forEach(item => {
if (isProd) {
build({
entry: 'plugins/' + item.entry,
output: 'plugins/' + item.name + '.min.js',
input: 'src/core/index.js',
output: 'docsify.min.js',
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.
Example:
Example:
- 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 display 404 page.

10
dev.html → index.html
View File

@ -1,5 +1,6 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>docsify</title>
@ -14,6 +15,7 @@
}
</style>
</head>
<body>
<div id="app"></div>
<script>
@ -22,6 +24,7 @@
'.*?/changelog': 'https://raw.githubusercontent.com/QingWei-Li/docsify/master/CHANGELOG',
'/.*/_navbar.md': '/_navbar.md'
},
notFoundPage: '_404.html',
auto2top: true,
basePath: '/docs/',
executeScript: true,
@ -33,11 +36,11 @@
mergeNavbar: true,
formatUpdated: '{MM}/{DD} {HH}:{mm}',
plugins: [
function(hook, vm) {
function (hook, vm) {
hook.beforeEach(function (html) {
var url = 'https://github.com/QingWei-Li/docsify/blob/master/' + vm.route.file
var editHtml = '[:memo: Edit Document](' + url + ')\n'
return editHtml
+ html
+ '\n----\n'
@ -50,4 +53,5 @@
</script>
<script src="/lib/docsify.js"></script>
</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"
},
"main": "lib/docsify.js",
"files": [
"lib",
"src",
"themes"
],
"files": ["lib", "src", "themes"],
"scripts": {
"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",
"dev:build": "rimraf lib themes && mkdir themes && node build/build --dev && node build/build-css --dev",
"dev:watch": "nodemon -w ./src/ -e js,css --exec \"npm run dev:build\"",
"dev": "concurrently \"node app\" \"npm run dev:watch\"",
"build:ssr": "node build/build-ssr",
"test": "eslint {src,packages} --fix",
"pub:next": "RELEASE_TAG=next sh build/release.sh",
"serve": "node server",
"serve:ssr": "cross-env SSR=1 node server",
"dev": "run-p serve watch:*",
"dev:ssr": "run-p serve:ssr watch:*",
"lint": "eslint {src,packages} --fix",
"test": "run-p lint",
"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",
"postinstall": "opencollective postinstall"
},
@ -40,16 +47,16 @@
"tweezer.js": "^1.4.0"
},
"devDependencies": {
"concurrently": "^3.5.1",
"autoprefixer-stylus": "^0.14.0",
"chokidar": "^2.0.2",
"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-config-vue": "^2.0.2",
"eslint-plugin-vue": "^4.0.1",
"eslint-config-xo-space": "^0.18.0",
"lerna": "^2.5.1",
"nodemon": "^1.14.7",
"postcss": "^5.2.16",
"postcss-salad": "^1.0.8",
"live-server": "^1.2.0",
"npm-run-all": "^4.1.2",
"rimraf": "^2.6.2",
"rollup": "^0.53.3",
"rollup-plugin-async": "^1.2.0",
@ -57,17 +64,10 @@
"rollup-plugin-commonjs": "^8.2.6",
"rollup-plugin-node-resolve": "^3.0.0",
"rollup-plugin-replace": "^2.0.0",
"rollup-plugin-string": "^2.0.2",
"rollup-plugin-uglify": "^2.0.1",
"serve-static": "^1.13.1"
"stylus": "^0.54.5"
},
"keywords": [
"doc",
"docs",
"documentation",
"creator",
"generator"
],
"keywords": ["doc", "docs", "documentation", "creator", "generator"],
"collective": {
"type": "opencollective",
"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 fetch from 'node-fetch'
import { AbstractHistory } from '../../src/core/router/history/abstract'
import { Compiler } from '../../src/core/render/compiler'
import { isAbsolutePath } from '../../src/core/router/util'
import { readFileSync } from 'fs'
import { resolve, basename } from 'path'
import {AbstractHistory} from '../../src/core/router/history/abstract'
import {Compiler} from '../../src/core/render/compiler'
import {isAbsolutePath} from '../../src/core/router/util'
import {readFileSync} from 'fs'
import {resolve, basename} from 'path'
import resolvePathname from 'resolve-pathname'
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)
}
function mainTpl (config) {
function mainTpl(config) {
let html = `<nav class="app-nav${
config.repo ? '' : ' no-badge'
}"><!--navbar--></nav>`
@ -31,7 +31,7 @@ function mainTpl (config) {
}
export default class Renderer {
constructor ({ template, config, cache }) {
constructor({template, config, cache}) {
this.html = template
this.config = config = Object.assign({}, config, {
routerMode: 'history'
@ -51,15 +51,15 @@ export default class Renderer {
this.template = this.html
}
_getPath (url) {
_getPath(url) {
const file = this.router.getFile(url)
return isAbsolutePath(file) ? file : cwd(`./${file}`)
}
async renderToString (url) {
async renderToString(url) {
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)
this._renderHtml('main', await this._render(mainFile, 'main'))
@ -100,15 +100,16 @@ export default class Renderer {
return html
}
_renderHtml (match, content) {
_renderHtml(match, content) {
this.html = this.html.replace(new RegExp(`<!--${match}-->`, 'g'), content)
return this.html
}
async _render (path, type) {
async _render(path, type) {
let html = await this._loadFile(path)
const { subMaxLevel, maxLevel } = this.config
const {subMaxLevel, maxLevel} = this.config
let tokens
switch (type) {
case 'sidebar':
@ -122,7 +123,7 @@ export default class Renderer {
html = this.compiler.cover(html)
break
case 'main':
const tokens = await new Promise(r => {
tokens = await new Promise(r => {
prerenderEmbed(
{
fetch: url => this._loadFile(this._getPath(url)),
@ -144,13 +145,15 @@ export default class Renderer {
return html
}
async _loadFile (filePath) {
async _loadFile(filePath) {
debug('docsify')(`load > ${filePath}`)
let content
try {
if (isAbsolutePath(filePath)) {
const res = await fetch(filePath)
if (!res.ok) throw Error()
if (!res.ok) {
throw Error()
}
content = await res.text()
this.lock = 0
} else {
@ -166,8 +169,11 @@ export default class Renderer {
}
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(
{
@ -37,18 +37,30 @@ const script =
if (script) {
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)) {
config[prop] = val === '' ? true : val
if (isPrimitive(val)) {
config[prop] = val === '' ? true : val
}
}
}
if (config.loadSidebar === true) config.loadSidebar = '_sidebar' + config.ext
if (config.loadNavbar === true) 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 = ''
if (config.loadSidebar === true) {
config.loadSidebar = '_sidebar' + config.ext
}
if (config.loadNavbar === true) {
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

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

@ -1,9 +1,9 @@
import { isMobile } from '../util/env'
import { body, on } from '../util/dom'
import {isMobile} from '../util/env'
import {body, on} from '../util/dom'
import * as sidebar from './sidebar'
import { scrollIntoView } from './scroll'
import {scrollIntoView} from './scroll'
export function eventMixin (proto) {
export function eventMixin(proto) {
proto.$resetEvents = function () {
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
sidebar.btn('button.sidebar-toggle', 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 Tweezer from 'tweezer.js'
@ -8,8 +8,10 @@ let scroller = null
let enableScrollEvent = true
let coverHeight = 0
function scrollTo (el) {
if (scroller) scroller.stop()
function scrollTo(el) {
if (scroller) {
scroller.stop()
}
enableScrollEvent = false
scroller = new Tweezer({
start: window.pageYOffset,
@ -24,8 +26,10 @@ function scrollTo (el) {
.begin()
}
function highlight (path) {
if (!enableScrollEvent) return
function highlight(path) {
if (!enableScrollEvent) {
return
}
const sidebar = dom.getNode('.sidebar')
const anchors = dom.findAll('.anchor')
const wrap = dom.find(sidebar, '.sidebar-nav')
@ -38,22 +42,28 @@ function highlight (path) {
const node = anchors[i]
if (node.offsetTop > top) {
if (!last) last = node
if (!last) {
last = node
}
break
} else {
last = node
}
}
if (!last) return
if (!last) {
return
}
const li = nav[getNavKey(path, last.getAttribute('data-id'))]
if (!li || li === active) return
if (!li || li === active) {
return
}
active && active.classList.remove('active')
li.classList.add('active')
active = li
// scroll into view
// Scroll into view
// https://github.com/vuejs/vuejs.org/blob/master/themes/vue/source/js/common.js#L282-L297
if (!hoverOver && dom.body.classList.contains('sticky')) {
const height = sidebar.clientHeight
@ -68,11 +78,11 @@ function highlight (path) {
}
}
function getNavKey (path, id) {
function getNavKey(path, id) {
return `${path}?id=${id}`
}
export function scrollActiveSidebar (router) {
export function scrollActiveSidebar(router) {
const cover = dom.find('.cover.show')
coverHeight = cover ? cover.offsetHeight : 0
@ -82,18 +92,26 @@ export function scrollActiveSidebar (router) {
for (let i = 0, len = lis.length; i < len; i += 1) {
const li = lis[i]
const a = li.querySelector('a')
if (!a) continue
if (!a) {
continue
}
let href = a.getAttribute('href')
if (href !== '/') {
const { query: { id }, path } = router.parse(href)
if (id) href = getNavKey(path, id)
const {query: {id}, path} = router.parse(href)
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()
dom.off('scroll', () => highlight(path))
dom.on('scroll', () => highlight(path))
@ -105,8 +123,10 @@ export function scrollActiveSidebar (router) {
})
}
export function scrollIntoView (path, id) {
if (!id) return
export function scrollIntoView(path, id) {
if (!id) {
return
}
const section = dom.find('#' + id)
section && scrollTo(section)
@ -120,6 +140,6 @@ export function scrollIntoView (path, id) {
const scrollEl = dom.$.scrollingElement || dom.$.documentElement
export function scroll2Top (offset = 0) {
export function scroll2Top(offset = 0) {
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'
const title = dom.$.title
/**
* Toggle button
*/
export function btn (el, router) {
export function btn(el) {
const toggle = _ => dom.body.classList.toggle('close')
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)
dom.on(el, 'click', ({ target }) => {
dom.on(el, 'click', ({target}) => {
if (
target.nodeName === 'A' &&
target.nextSibling &&
@ -36,9 +36,11 @@ export function collapse (el, router) {
})
}
export function sticky () {
export function sticky() {
const cover = dom.getNode('section.cover')
if (!cover) return
if (!cover) {
return
}
const coverHeight = cover.getBoundingClientRect().height
if (window.pageYOffset >= coverHeight || cover.classList.contains('hidden')) {
@ -56,7 +58,7 @@ export function sticky () {
* @param {Boolean} autoTitle auto set title
* @return {element}
*/
export function getAndActive (router, el, isParent, autoTitle) {
export function getAndActive(router, el, isParent, autoTitle) {
el = dom.getNode(el)
const links = dom.findAll(el, 'a')

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

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

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

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

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

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

14
src/core/index.js
View File

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

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

@ -1,12 +1,12 @@
import config from '../config'
import { initLifecycle, callHook } from './lifecycle'
import { initRender } from '../render'
import { initRouter } from '../router'
import { initEvent } from '../event'
import { initFetch } from '../fetch'
import { isFn } from '../util/core'
import {initLifecycle, callHook} from './lifecycle'
import {initRender} from '../render'
import {initRouter} from '../router'
import {initEvent} from '../event'
import {initFetch} from '../fetch'
import {isFn} from '../util/core'
export function initMixin (proto) {
export function initMixin(proto) {
proto._init = function () {
const vm = this
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))
}

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 = [
'init',
'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 step = function (index) {
const hook = queue[index]
if (index >= queue.length) {
next(data)
} else {
if (typeof hook === 'function') {
if (hook.length === 2) {
hook(data, result => {
data = result
step(index + 1)
})
} else {
const result = hook(data)
data = result !== undefined ? result : data
} else if (typeof hook === 'function') {
if (hook.length === 2) {
hook(data, result => {
data = result
step(index + 1)
}
})
} else {
const result = hook(data)
data = result === undefined ? data : result
step(index + 1)
}
} else {
step(index + 1)
}
}

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

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

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

@ -1,9 +1,9 @@
import { get } from '../fetch/ajax'
import { merge } from '../util/core'
import {get} from '../fetch/ajax'
import {merge} from '../util/core'
const cached = {}
function walkFetchEmbed ({ step = 0, embedTokens, compile, fetch }, cb) {
function walkFetchEmbed({step = 0, embedTokens, compile, fetch}, cb) {
const token = embedTokens[step]
if (!token) {
@ -25,8 +25,8 @@ function walkFetchEmbed ({ step = 0, embedTokens, compile, fetch }, cb) {
)
}
}
cb({ token, embedToken })
walkFetchEmbed({ step: ++step, compile, embedTokens, fetch }, cb)
cb({token, embedToken})
walkFetchEmbed({step: ++step, compile, embedTokens, fetch}, cb)
}
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
if ((hit = cached[raw])) {
return done(hit)
@ -72,7 +72,7 @@ export function prerenderEmbed ({ compiler, raw = '', fetch }, done) {
})
let moveIndex = 0
walkFetchEmbed({ compile, embedTokens, fetch }, ({ embedToken, token }) => {
walkFetchEmbed({compile, embedTokens, fetch}, ({embedToken, token}) => {
if (token) {
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 + '" />'
}
export function emojify (text) {
export function emojify(text) {
return text
.replace(/<(pre|template|code)[^>]*?>[\s\S]+?<\/(pre|template|code)>/g, m => m.replace(/:/g, '__colon__'))
.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
* @param {Array} toc
* @param {Number} maxLevel
* @return {Array}
*/
export function genTree (toc, maxLevel) {
export function genTree(toc, maxLevel) {
const headlines = []
const last = {}
@ -13,7 +13,9 @@ export function genTree (toc, maxLevel) {
const level = headline.level || 1
const len = level - 1
if (level > maxLevel) return
if (level > maxLevel) {
return
}
if (last[len]) {
last[len].children = (last[len].children || []).concat(headline)
} 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 cssVars from '../util/polyfill/css-vars'
import tinydate from 'tinydate'
import { callHook } from '../init/lifecycle'
import { Compiler } from './compiler'
import { getAndActive, sticky } from '../event/sidebar'
import { getPath, isAbsolutePath } from '../router/util'
import { isMobile, inBrowser } from '../util/env'
import { isPrimitive } from '../util/core'
import { scrollActiveSidebar, scroll2Top } from '../event/scroll'
import { prerenderEmbed } from './embed'
import {callHook} from '../init/lifecycle'
import {Compiler} from './compiler'
import {getAndActive, sticky} from '../event/sidebar'
import {getPath, isAbsolutePath} from '../router/util'
import {isMobile, inBrowser} from '../util/env'
import {isPrimitive} from '../util/core'
import {scrollActiveSidebar, scroll2Top} from '../event/scroll'
import {prerenderEmbed} from './embed'
function executeScript () {
function executeScript() {
const script = dom
.findAll('.markdown-section>script')
.filter(s => !/template/.test(s.type))[0]
if (!script) return false
if (!script) {
return false
}
const code = script.innerText.trim()
if (!code) return false
if (!code) {
return false
}
setTimeout(_ => {
window.__EXECUTE_RESULT__ = new Function(code)()
}, 0)
}
function formatUpdated (html, updated, fn) {
function formatUpdated(html, updated, fn) {
updated =
typeof fn === 'function'
? fn(updated)
: typeof fn === 'string' ? tinydate(fn)(new Date(updated)) : updated
typeof fn === 'function' ?
fn(updated) :
typeof fn === 'string' ? tinydate(fn)(new Date(updated)) : updated
return html.replace(/{docsify-updated}/g, updated)
}
function renderMain (html) {
function renderMain(html) {
if (!html) {
html = '<h1>404 - Not found</h1>'
}
@ -42,7 +46,7 @@ function renderMain (html) {
// Render sidebar with the TOC
!this.config.loadSidebar && this._renderSidebar()
// execute script
// Execute script
if (
this.config.executeScript !== false &&
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 nameLink = vm.config.nameLink
const path = vm.route.path
if (!el) return
if (!el) {
return
}
if (isPrimitive(vm.config.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) {
const node = dom.getNode(el)
if (node) node[replace ? 'outerHTML' : 'innerHTML'] = content
if (node) {
node[replace ? 'outerHTML' : 'innerHTML'] = content
}
}
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))
const activeEl = getAndActive(this.router, '.sidebar-nav', true, true)
@ -89,15 +97,15 @@ export function renderMixin (proto) {
activeEl.parentNode.innerHTML +=
this.compiler.subSidebar(subMaxLevel) || ''
} else {
// reset toc
// Reset toc
this.compiler.subSidebar()
}
// bind event
// Bind event
this._bindEventOnRendered(activeEl)
}
proto._bindEventOnRendered = function (activeEl) {
const { autoHeader, auto2top } = this.config
const {autoHeader, auto2top} = this.config
scrollActiveSidebar(this.router)
@ -192,18 +200,18 @@ export function renderMixin (proto) {
}
proto._updateRender = function () {
// render name link
// Render name link
renderNameLink(this)
}
}
export function initRender (vm) {
export function initRender(vm) {
const config = vm.config
// Init markdown compiler
vm.compiler = new Compiler(config, vm.router)
if (inBrowser) {
window['__current_docsify_compiler__'] = vm.compiler
window.__current_docsify_compiler__ = vm.compiler
}
const id = config.el || '#app'

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

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

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

@ -1,12 +1,16 @@
let cache = {}
const re = /[\u2000-\u206F\u2E00-\u2E7F\\'!"#$%&()*+,.\/:;<=>?@\[\]^`{|}~]/g
import {hasOwn} from '../util/core'
function lower (string) {
let cache = {}
const re = /[\u2000-\u206F\u2E00-\u2E7F\\'!"#$%&()*+,./:;<=>?@[\]^`{|}~]/g
function lower(string) {
return string.toLowerCase()
}
export function slugify (str) {
if (typeof str !== 'string') return ''
export function slugify(str) {
if (typeof str !== 'string') {
return ''
}
let slug = str
.trim()
@ -18,7 +22,7 @@ export function slugify (str) {
.replace(/^(\d)/, '_$1')
let count = cache[slug]
count = cache.hasOwnProperty(slug) ? count + 1 : 0
count = hasOwn.call(cache, slug) ? count + 1 : 0
cache[slug] = 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
* @param {Object} data
* @return {String}
*/
export function corner (data) {
if (!data) return ''
if (!/\/\//.test(data)) data = 'https://github.com/' + data
export function corner(data) {
if (!data) {
return ''
}
if (!/\/\//.test(data)) {
data = 'https://github.com/' + data
}
data = data.replace(/^git\+/, '')
return (
@ -23,7 +27,7 @@ export function corner (data) {
/**
* Render main content
*/
export function main (config) {
export function main(config) {
const aside =
'<button class="sidebar-toggle">' +
'<div class="sidebar-toggle-button">' +
@ -31,9 +35,9 @@ export function main (config) {
'</div>' +
'</button>' +
'<aside class="sidebar">' +
(config.name
? `<h1><a class="app-name-link" data-nosearch>${config.name}</a></h1>`
: '') +
(config.name ?
`<h1><a class="app-name-link" data-nosearch>${config.name}</a></h1>` :
'') +
'<div class="sidebar-nav"><!--sidebar--></div>' +
'</aside>'
@ -49,7 +53,7 @@ export function main (config) {
/**
* Cover Page
*/
export function cover () {
export function cover() {
const SL = ', 100%, 85%'
const bgc =
'linear-gradient(to left bottom, ' +
@ -70,8 +74,10 @@ export function cover () {
* @param {String} tpl
* @return {String}
*/
export function tree (toc, tpl = '') {
if (!toc || !toc.length) return ''
export function tree(toc, tpl = '') {
if (!toc || !toc.length) {
return ''
}
toc.forEach(node => {
tpl += `<li><a class="section-link" href="${node.slug}">${
@ -85,10 +91,10 @@ export function tree (toc, tpl = '') {
return tpl
}
export function helper (className, content) {
export function helper(className, content) {
return `<p class="${className}">${content.slice(5).trim()}</p>`
}
export function theme (color) {
export function theme(color) {
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 { parseQuery } from '../util'
import {History} from './base'
import {parseQuery} from '../util'
export class AbstractHistory extends History {
constructor (config) {
constructor(config) {
super(config)
this.mode = 'abstract'
}
parse (path) {
parse(path) {
let query = ''
const queryIndex = path.indexOf('?')

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

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

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

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

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

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

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

@ -1,21 +1,21 @@
import { HashHistory } from './history/hash'
import { HTML5History } from './history/html5'
import { supportsPushState } from '../util/env'
import {HashHistory} from './history/hash'
import {HTML5History} from './history/html5'
import {supportsPushState} from '../util/env'
import * as dom from '../util/dom'
export function routerMixin (proto) {
export function routerMixin(proto) {
proto.route = {}
}
let lastRoute = {}
function updateRender (vm) {
function updateRender(vm) {
vm.router.normalize()
vm.route = vm.router.parse()
dom.body.setAttribute('data-page', vm.route.file)
}
export function initRouter (vm) {
export function initRouter(vm) {
const config = vm.config
const mode = config.routerMode || 'hash'
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 encode = encodeURIComponent
export function parseQuery (query) {
export function parseQuery(query) {
const res = {}
query = query.trim().replace(/^(\?|#|&)/, '')
@ -22,39 +22,41 @@ export function parseQuery (query) {
return res
}
export function stringifyQuery (obj, ignores = []) {
export function stringifyQuery(obj, ignores = []) {
const qs = []
for (const key in obj) {
if (ignores.indexOf(key) > -1) continue
if (ignores.indexOf(key) > -1) {
continue
}
qs.push(
obj[key]
? `${encode(key)}=${encode(obj[key])}`.toLowerCase()
: encode(key)
obj[key] ?
`${encode(key)}=${encode(obj[key])}`.toLowerCase() :
encode(key)
)
}
return qs.length ? `?${qs.join('&')}` : ''
}
export function getPath (...args) {
return cleanPath(args.join('/'))
}
export const isAbsolutePath = cached(path => {
return /(:|(\/{2}))/g.test(path)
})
export const getParentPath = cached(path => {
return /\/$/g.test(path)
? path
: (path = path.match(/(\S*\/)[^\/]+$/)) ? path[1] : ''
return /\/$/g.test(path) ?
path :
(path = path.match(/(\S*\/)[^/]+$/)) ? path[1] : ''
})
export const cleanPath = cached(path => {
return path.replace(/^\/+/, '/').replace(/([^:])\/{2,}/g, '$1/')
})
export function getPath(...args) {
return cleanPath(args.join('/'))
}
export const replaceSlug = cached(path => {
return path.replace('#', '?id=')
})

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

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

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

@ -1,5 +1,5 @@
import { isFn } from '../util/core'
import { inBrowser } from './env'
import {isFn} from '../util/core'
import {inBrowser} from './env'
const cacheNode = {}
@ -9,7 +9,7 @@ const cacheNode = {}
* @param {Boolean} noCache
* @return {Element}
*/
export function getNode (el, noCache = false) {
export function getNode(el, noCache = false) {
if (typeof el === 'string') {
if (typeof window.Vue !== 'undefined') {
return find(el)
@ -32,7 +32,7 @@ export const head = inBrowser && $.head
* find('nav') => document.querySelector('nav')
* find(nav, 'a') => nav.querySelector('a')
*/
export function find (el, node) {
export function find(el, node) {
return node ? el.querySelector(node) : $.querySelector(el)
}
@ -42,36 +42,38 @@ export function find (el, node) {
* findAll('a') => [].slice.call(document.querySelectorAll('a'))
* findAll(nav, 'a') => [].slice.call(nav.querySelectorAll('a'))
*/
export function findAll (el, node) {
export function findAll(el, node) {
return [].slice.call(
node ? el.querySelectorAll(node) : $.querySelectorAll(el)
)
}
export function create (node, tpl) {
export function create(node, tpl) {
node = $.createElement(node)
if (tpl) node.innerHTML = tpl
if (tpl) {
node.innerHTML = tpl
}
return node
}
export function appendTo (target, el) {
export function appendTo(target, el) {
return target.appendChild(el)
}
export function before (target, el) {
export function before(target, el) {
return target.insertBefore(el, target.children[0])
}
export function on (el, type, handler) {
isFn(type)
? window.addEventListener(el, type)
: el.addEventListener(type, handler)
export function on(el, type, handler) {
isFn(type) ?
window.addEventListener(el, type) :
el.addEventListener(type, handler)
}
export function off (el, type, handler) {
isFn(type)
? window.removeEventListener(el, type)
: el.removeEventListener(type, handler)
export function off(el, type, handler) {
isFn(type) ?
window.removeEventListener(el, type) :
el.removeEventListener(type, handler)
}
/**
@ -81,10 +83,10 @@ export function off (el, type, handler) {
* toggleClass(el, 'active') => el.classList.toggle('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)
}
export function style (content) {
export function 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.pushState &&
window.history.replaceState &&
// pushState isn’t reliable on iOS until 5.
// PushState isn’t reliable on iOS until 5.
!navigator.userAgent.match(
/((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 { get } from '../../fetch/ajax'
import {get} from '../../fetch/ajax'
function replaceVar (block, color) {
function replaceVar(block, color) {
block.innerHTML = block.innerHTML.replace(
/var\(\s*--theme-color.*?\)/g,
color
@ -10,16 +10,20 @@ function replaceVar (block, color) {
export default function (color) {
// 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')
;[].forEach.call(styleBlocks, block => {
const styleBlocks = dom.findAll('style:not(.inserted),link');
[].forEach.call(styleBlocks, block => {
if (block.nodeName === 'STYLE') {
replaceVar(block, color)
} else if (block.nodeName === 'LINK') {
const href = block.getAttribute('href')
if (!/\.css$/.test(href)) return
if (!/\.css$/.test(href)) {
return
}
get(href).then(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
}
function install (hook, vm) {
function install(hook, vm) {
const dom = Docsify.dom
const disqus = vm.config.disqus
if (!disqus) {
@ -15,7 +15,7 @@ function install (hook, vm) {
script.async = true
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)
})

8
src/plugins/emoji.js
View File

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

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

@ -1,4 +1,4 @@
function handleExternalScript () {
function handleExternalScript() {
const container = Docsify.dom.getNode('#main')
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) {
hook.beforeEach(content => {
const { attributes, body } = parser(content)
const {attributes, body} = parser(content)
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
function appendScript () {
function appendScript() {
const script = document.createElement('script')
script.async = true
script.src = 'https://www.google-analytics.com/analytics.js'
document.body.appendChild(script)
}
function init (id) {
function init(id) {
appendScript()
window.ga =
window.ga ||
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('create', id, 'auto')
}
function collect () {
function collect() {
if (!window.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
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 = ''
function style () {
function style() {
const code = `
.sidebar {
padding-top: 0;
@ -91,7 +91,7 @@ function style () {
Docsify.dom.style(code)
}
function tpl (opts, defaultValue = '') {
function tpl(opts, defaultValue = '') {
const html =
`<div class="input-wrap">
<input type="search" value="${defaultValue}" />
@ -112,7 +112,7 @@ function tpl (opts, defaultValue = '') {
Docsify.dom.before(aside, el)
}
function doSearch (value) {
function doSearch(value) {
const $search = Docsify.dom.find('div.search')
const $panel = Docsify.dom.find($search, '.results-panel')
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>`
}
function bindEvents () {
function bindEvents() {
const $search = Docsify.dom.find('div.search')
const $input = Docsify.dom.find($search, 'input')
const $inputWrap = Docsify.dom.find($search, '.input-wrap')
@ -157,7 +157,7 @@ function bindEvents () {
timeId = setTimeout(_ => doSearch(e.target.value.trim()), 100)
})
Docsify.dom.on($inputWrap, 'click', e => {
// click input outside
// Click input outside
if (e.target.tagName !== 'INPUT') {
$input.value = ''
doSearch()
@ -165,10 +165,12 @@ function bindEvents () {
})
}
function updatePlaceholder (text, path) {
function updatePlaceholder(text, path) {
const $input = Docsify.dom.getNode('.search input[type="search"]')
if (!$input) return
if (!$input) {
return
}
if (typeof text === 'string') {
$input.placeholder = text
} else {
@ -177,7 +179,7 @@ function updatePlaceholder (text, path) {
}
}
function updateNoData (text, path) {
function updateNoData(text, path) {
if (typeof text === 'string') {
NO_DATA_TEXT = text
} 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
style()
@ -195,7 +197,7 @@ export function init (opts, vm) {
keywords && setTimeout(_ => doSearch(keywords), 500)
}
export function update (opts, vm) {
export function update(opts, vm) {
updatePlaceholder(opts.placeholder, 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 initSearch } from './search'
import {init as initComponet, update as updateComponent} from './component'
import {init as initSearch} from './search'
const CONFIG = {
placeholder: 'Type to search',
@ -10,7 +10,7 @@ const CONFIG = {
}
const install = function (hook, vm) {
const { util } = Docsify
const {util} = Docsify
const opts = vm.config.search || CONFIG
if (Array.isArray(opts)) {

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

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