mirror of
https://github.com/wahyd4/docsify.git
synced 2026-08-09 13:26:34 +10:00
Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
7c4b0b7c74 | ||
|
|
98d1b19bea | ||
|
|
0709239c77 | ||
|
|
73cc43c6bd | ||
|
|
9d096b03a4 | ||
|
|
2af035ff45 | ||
|
|
3979f5cd3f | ||
|
|
9abae495ac | ||
|
|
d179ade7df | ||
|
|
d79c7655cd | ||
|
|
af5d2934e4 | ||
|
|
129bd4d3a0 | ||
|
|
abaf5c0849 | ||
|
|
336efb30cb | ||
|
|
fb8bf89d73 | ||
|
|
8630591bd2 | ||
|
|
c47ff83073 | ||
|
|
69e500bd33 | ||
|
|
000a1fcdf0 | ||
|
|
b84544960f | ||
|
|
28a004840d | ||
|
|
ff44152d12 | ||
|
|
b6bfad8579 | ||
|
|
e93f6b95ea | ||
|
|
5c58629e69 | ||
|
|
55826691eb | ||
|
|
64093c0567 | ||
|
|
c998fad98e | ||
|
|
0a2e1ddf11 | ||
|
|
4a7df99224 | ||
|
|
6c6f687925 | ||
|
|
ddc13aa280 | ||
|
|
f997280ab1 | ||
|
|
458e262a26 | ||
|
|
d971948f10 | ||
|
|
a309d3041e | ||
|
|
557a165349 | ||
|
|
d9eedf609e | ||
|
|
aa939147c6 | ||
|
|
67c1d0cd7d | ||
|
|
06892e6de4 | ||
|
|
439a1e6841 | ||
|
|
f540e3c4fc | ||
|
|
2ffef062db | ||
|
|
db7db5af8b | ||
|
|
a418096a29 | ||
|
|
90b490c9c1 | ||
|
|
7915027418 | ||
|
|
87b373b841 | ||
|
|
510ae37a04 | ||
|
|
ef53a07f49 | ||
|
|
9defe1bf7d | ||
|
|
b87f6ae5e8 | ||
|
|
b8b9dbc872 | ||
|
|
f7779b01d9 | ||
|
|
1c935b2fd7 | ||
|
|
114955558e | ||
|
|
847cf3b656 | ||
|
|
356b937d44 | ||
|
|
8df57f0bc2 | ||
|
|
73dfbf5be3 | ||
|
|
ecba3f1b05 | ||
|
|
e5452243b1 | ||
|
|
8b1000a4a5 | ||
|
|
897283418a | ||
|
|
7be6baae7a | ||
|
|
24ab3d4d10 | ||
|
|
424a243c5c | ||
|
|
9ce47c48af | ||
|
|
4e7485aa1f | ||
|
|
cb592e7bf0 | ||
|
|
3c01d1f82d | ||
|
|
00253d3148 | ||
|
|
d23881ba7c | ||
|
|
f0a99c0d1d | ||
|
|
b952a3a08c | ||
|
|
2bb8641303 | ||
|
|
66d7919fa9 | ||
|
|
580767bf78 | ||
|
|
d6b996f4c1 | ||
|
|
b4e0d54d7b | ||
|
|
b15b286c5c | ||
|
|
5ab86271c2 | ||
|
|
9638eee50d | ||
|
|
375a1dd3e1 | ||
|
|
3069ad3928 | ||
|
|
b287f57c86 | ||
|
|
e932ff66b9 | ||
|
|
7a10e4aecf | ||
|
|
41e7ef6863 | ||
|
|
7ce166501b | ||
|
|
b9aeb4a922 | ||
|
|
9ac8293c0a | ||
|
|
aa3121eca2 | ||
|
|
0e615abbdc | ||
|
|
cb2b191ba1 | ||
|
|
6adcfffba9 | ||
|
|
f165470265 | ||
|
|
bbb7b4a9d6 | ||
|
|
540095ee35 | ||
|
|
bd354094c0 | ||
|
|
6e81e66441 | ||
|
|
67f9083ff7 | ||
|
|
383b976ddd | ||
|
|
54ba970552 | ||
|
|
16623c9301 | ||
|
|
668c5ca714 | ||
|
|
d0861d7427 | ||
|
|
97669e0d28 | ||
|
|
a0408b7a38 | ||
|
|
f917da8214 | ||
|
|
64309beee9 | ||
|
|
4c8c0349e6 | ||
|
|
91b6720219 | ||
|
|
c93ba1ea16 | ||
|
|
4f5a150c17 | ||
|
|
801df6ae3e | ||
|
|
6c2e7dca99 | ||
|
|
a39eddba74 | ||
|
|
50addfdac6 | ||
|
|
b14fcf7d1c | ||
|
|
3b02b8fc39 | ||
|
|
039c7a7a6f | ||
|
|
0101492dd4 | ||
|
|
60fc73c691 | ||
|
|
476d49bc1f | ||
|
|
73456e6fac | ||
|
|
f9d75ab931 | ||
|
|
f93f9ceb09 | ||
|
|
b57712dd5a | ||
|
|
f2d894932b | ||
|
|
48912a0b79 | ||
|
|
73a193d602 | ||
|
|
30b6644f21 | ||
|
|
d343ff5b21 | ||
|
|
3bf932a81c | ||
|
|
c8bb66955d | ||
|
|
e5e1e07e1a | ||
|
|
9ba989c86c | ||
|
|
ab34cc97f9 | ||
|
|
3fbcd876ae | ||
|
|
3af5ca5cd4 | ||
|
|
74ee0cf6bc | ||
|
|
46dd542b48 | ||
|
|
cc7bdf5df2 | ||
|
|
9a1db6ed43 | ||
|
|
9d30ac7435 | ||
|
|
f8a68b87c7 | ||
|
|
7dc47cc4d4 | ||
|
|
7d995d8362 | ||
|
|
1fdfaf0b6b | ||
|
|
fe33e2d506 | ||
|
|
6463dd3bae | ||
|
|
299c31dff9 | ||
|
|
aa1d84b513 | ||
|
|
14a4c2f77d | ||
|
|
e58c17fdc6 | ||
|
|
8b719238e6 | ||
|
|
7f0b1089c0 | ||
|
|
2610e25040 | ||
|
|
ec53f1e307 | ||
|
|
670cc68a28 | ||
|
|
844ba3e022 | ||
|
|
9092b22246 | ||
|
|
d175ba6913 | ||
|
|
2574778605 | ||
|
|
44a255103c | ||
|
|
440635aeeb | ||
|
|
a8cc8e46cd | ||
|
|
626227be4d | ||
|
|
c4f02027a8 | ||
|
|
8f3eb17dbf | ||
|
|
61d2474202 | ||
|
|
41be8176a6 | ||
|
|
864935bfc1 | ||
|
|
b977715d42 | ||
|
|
84871ca09e | ||
|
|
200dcf61ce | ||
|
|
816b6e2035 | ||
|
|
e4a35d9dcf | ||
|
|
02a0adb872 | ||
|
|
e48518b42a | ||
|
|
4d56be2f10 | ||
|
|
19bf043cf8 | ||
|
|
a74cf6ceaf | ||
|
|
0f966e2eb1 | ||
|
|
d07ddaa85d | ||
|
|
dd361b34b9 | ||
|
|
1a7c6c094c | ||
|
|
35d3bd1647 | ||
|
|
e09b6f218f | ||
|
|
4d7772035f | ||
|
|
6540e7370d | ||
|
|
f3853d8e7f | ||
|
|
93ddf08615 | ||
|
|
7c05d729b4 | ||
|
|
5953ef7739 | ||
|
|
d556282471 | ||
|
|
ec58149aad | ||
|
|
e15c53a6b8 | ||
|
|
f450b118ee | ||
|
|
6ac7d4f66f | ||
|
|
17806def5a | ||
|
|
ea03583d3d | ||
|
|
37e7984e7e | ||
|
|
fc2e5b6fb9 | ||
|
|
94f00053d7 | ||
|
|
029f92e341 | ||
|
|
8041c82e6d | ||
|
|
5e38b702cd | ||
|
|
136ef2881e | ||
|
|
50006d2ceb | ||
|
|
657ad7d59c | ||
|
|
eba21726d7 |
+2
-1
@@ -1,3 +1,4 @@
|
||||
.DS_Store
|
||||
*.log
|
||||
node_modules
|
||||
yarn.lock
|
||||
/themes
|
||||
@@ -1,3 +1,6 @@
|
||||
sudo: false
|
||||
cache:
|
||||
directories:
|
||||
- $HOME/.yarn-cache
|
||||
language: node_js
|
||||
node_js: stable
|
||||
|
||||
+262
@@ -0,0 +1,262 @@
|
||||
## 1.9.0
|
||||
|
||||
### Bug fixes
|
||||
- Destroys the vue instance when the route is changed
|
||||
|
||||
### Features
|
||||
- Add `!>` and `?>` doc helper.
|
||||
|
||||
### Break change
|
||||
- Remove `!` doc helper.
|
||||
|
||||
## 1.8.0
|
||||
### Bug fixes
|
||||
- Using `v-pre` skip compilation.
|
||||
|
||||
### Features
|
||||
- Execute script when vue exists.
|
||||
|
||||
## 1.7.4
|
||||
### Bug fixes
|
||||
- Fix bugs caused by the previous version
|
||||
|
||||
## 1.7.3
|
||||
### Bug fixes
|
||||
- Add `hr` style
|
||||
- Fixed option is an empty string
|
||||
|
||||
## 1.7.2
|
||||
### Bug fixes
|
||||
- Fix sidebar click event in mobile browser.
|
||||
|
||||
## 1.7.1
|
||||
### Bug fixes
|
||||
- Fix sidebar style in mobile browser.
|
||||
|
||||
## 1.7.0
|
||||
|
||||
### Bug fixes
|
||||
- Fixed custom cover background, fixed #52
|
||||
- Fixed sticky sidebar
|
||||
|
||||
## Features
|
||||
- Add `name` and `nameLink`
|
||||
|
||||
## 1.6.1
|
||||
### Bug fixes
|
||||
- Fixed sidebar bug when the coverpage exist
|
||||
|
||||
## 1.6.0
|
||||
### Features
|
||||
- Improve sidebar performance. The active item is automatically scrolled in the visible view.
|
||||
- New doc helper: `! `. e.g. `! content` will be rendered as `<p class="tip">content</p>`
|
||||
|
||||
## 1.5.2
|
||||
### Bug fixes
|
||||
- Fixed number at the beginning of the slug
|
||||
|
||||
## 1.5.1
|
||||
### Bug fixes
|
||||
- Remove HTML tag when handling slug
|
||||
|
||||
## 1.5.0
|
||||
|
||||
### Bug fixes
|
||||
- Fix slugify.
|
||||
- Fix nav highlight.
|
||||
|
||||
### Features
|
||||
- Initialize the configuration by `window.$docsify`.
|
||||
- Markdown parser is configurable.
|
||||
|
||||
## 1.4.3
|
||||
### Bug fixes
|
||||
- Tweak style.
|
||||
|
||||
## 1.4.2
|
||||
|
||||
### Bug fixes
|
||||
- Fix toggle button style.
|
||||
- Support `mailto`, `tel`, etc. href type
|
||||
- Fix scroll to top.
|
||||
|
||||
|
||||
## 1.4.1
|
||||
### Bug fixes
|
||||
- Fix generate slug.
|
||||
|
||||
## 1.4.0 Happly new year 🎉
|
||||
### Features
|
||||
- Display TOC in the custom sidebar, `data-sub-max-level`.
|
||||
- Custom background in coverpage.
|
||||
|
||||
### Bug fixes
|
||||
- Fix scroll highlight when Vue exist.
|
||||
|
||||
## 1.3.5
|
||||
### Bug fixes
|
||||
- Fix vue
|
||||
|
||||
## 1.3.4
|
||||
### Bug fixes
|
||||
|
||||
- Supports [vuep](https://github.com/QingWei-Li/vuep)
|
||||
|
||||
## 1.3.3
|
||||
### Bug fixes
|
||||
- Fixed cover rendering timing
|
||||
|
||||
## 1.3.2
|
||||
|
||||
### Bug fixes
|
||||
- Fixed render link
|
||||
|
||||
## 1.3.1
|
||||
|
||||
### Bug fixes
|
||||
- Fixed cover page style
|
||||
- Generate the correct link when rendering the article
|
||||
|
||||
## 1.3.0
|
||||
### Features
|
||||
- Add cover page
|
||||
- add `<kbd>` style
|
||||
- headling can be cliked
|
||||
|
||||
### Bug fixes
|
||||
- sidebar highlight
|
||||
|
||||
|
||||
### break change
|
||||
- Navbar no longer fixed at the top
|
||||
|
||||
## 1.2.0
|
||||
### Features
|
||||
- custom basePath
|
||||
- custom homepage
|
||||
|
||||
## 1.1.7
|
||||
### Bug fixes
|
||||
- Optimize progress bar
|
||||
|
||||
## 1.1.6
|
||||
### Features
|
||||
- Add logo 😂
|
||||
|
||||
### Bug fixes
|
||||
- Remove table background color
|
||||
- Fixed highlight sidebar using chinese ids
|
||||
|
||||
## 1.1.5
|
||||
### Features
|
||||
- Add table style
|
||||
|
||||
### Bug fixes
|
||||
- Not fixed position of hte navbar in the mobile browser
|
||||
- Correct calculation of whether the mobile browser
|
||||
|
||||
## 1.1.4
|
||||
### Bug fixes
|
||||
- Fixed chinese auchor link
|
||||
|
||||
## 1.1.3
|
||||
### Bug fixes
|
||||
- Optimize progress bar again
|
||||
|
||||
## 1.1.2
|
||||
### Bug fixes
|
||||
- fix failed `auto2top` in mobile
|
||||
|
||||
|
||||
## 1.1.1
|
||||
### Bug fixes
|
||||
- Optimize progress bar
|
||||
|
||||
## 1.1.0
|
||||
## Features
|
||||
- Add progress bar
|
||||
- Add `auto2top` option for hash router
|
||||
|
||||
## 1.0.3
|
||||
### Bug fixes
|
||||
- Fix cache
|
||||
|
||||
## 1.0.2
|
||||
### Bug fixes
|
||||
- Fix binding events bug, fixed #24
|
||||
- Fix regular expression, fixed #23
|
||||
|
||||
## 1.0.1
|
||||
### Bug fixes
|
||||
- `img` style
|
||||
|
||||
## 1.0.0
|
||||
## Features
|
||||
- Support hash router
|
||||
|
||||
### Bug fixes
|
||||
- Improved scrolling on mobile
|
||||
|
||||
## 0.7.0
|
||||
### Breaking change
|
||||
- `themes/` was removed, only exists in the npm package.
|
||||
|
||||
### Bug fixes
|
||||
- Fix style.
|
||||
- Fix sidebar animation again.
|
||||
|
||||
## 0.6.1
|
||||
### Bug fixes
|
||||
- In the mobile, it should collapse the sidebar when toggle is clicked.
|
||||
- Fix the dropdown list style.
|
||||
- Fix sidebar animation.
|
||||
|
||||
## 0.6.0
|
||||
### Features
|
||||
- Navbar support dropdown list, #6
|
||||
- Sidebar with toggle
|
||||
|
||||
### Bug fixes
|
||||
- Fix ineffective option, fixed #10
|
||||
|
||||
## 0.5.0
|
||||
### Features
|
||||
- Custom sidebars and navbars by markdown file
|
||||
|
||||
## 0.4.2
|
||||
### Bug fixes
|
||||
- Correct catch ajax error
|
||||
|
||||
## 0.4.1
|
||||
### Bug fixes
|
||||
- catch ajax error
|
||||
|
||||
## 0.4.0
|
||||
### Features
|
||||
- Custom sidebar
|
||||
|
||||
### Bug fixes
|
||||
- Fix undefined language
|
||||
|
||||
## 0.3.1
|
||||
### Bug fixes
|
||||
- Strip HTML tag when rendering the headings
|
||||
|
||||
## 0.3.0
|
||||
### Features
|
||||
- Add minified css files
|
||||
- Add max level option
|
||||
- Add pure.css
|
||||
|
||||
## 0.2.1
|
||||
### Bug fixes
|
||||
- Fix vue.css
|
||||
|
||||
## 0.2.0
|
||||
### Bug fixes
|
||||
- Fix route
|
||||
- Remove dynamic title
|
||||
|
||||
## 0.1.0
|
||||
### Features
|
||||
- Add buble.css
|
||||
@@ -1,6 +1,6 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2016 cinwell.li
|
||||
Copyright (c) 2016 - 2017 cinwell.li
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
|
||||
@@ -1,22 +1,32 @@
|
||||
# docsify
|
||||
[](https://travis-ci.org/QingWei-Li/docsify)
|
||||
[](https://www.npmjs.com/package/docsify)
|
||||
<p align="center">
|
||||
<a href="https://docsify.js.org">
|
||||
<img alt="docsify" src="./media/docsify.png">
|
||||
</a>
|
||||
</p>
|
||||
|
||||
>🃏 A magical documentation site generator.
|
||||
<p align="center">
|
||||
A magical documentation site generator.
|
||||
</p>
|
||||
|
||||
<p align="center">
|
||||
<a href="https://travis-ci.org/QingWei-Li/docsify"><img alt="Travis Status" src="https://img.shields.io/travis/rust-lang/rust/master.svg?style=flat-square"></a>
|
||||
<a href="https://www.npmjs.com/package/docsify"><img alt="npm" src="https://img.shields.io/npm/v/docsify.svg?style=flat-square"></a>
|
||||
<a href="https://github.com/vuejs/vue"><img alt="code style" src="https://img.shields.io/badge/code%20style-vue-orange.svg?style=flat-square"></a>
|
||||
</p>
|
||||
|
||||
## Links
|
||||
- [Documentation](https://qingwei-li.github.io/docsify)
|
||||
- [Documentation](https://docsify.js.org)
|
||||
- [CLI](https://github.com/QingWei-Li/docsify-cli)
|
||||
|
||||
## Features
|
||||
- Easy and lightweight
|
||||
- Custom themes
|
||||
- No build
|
||||
- Simple and lightweight (~13kB gzipped)
|
||||
- Multiple themes
|
||||
- Not build static html files
|
||||
|
||||
## Quick start
|
||||
Create `404.html` and `README.md` into `/docs`.
|
||||
Create a `index.html` and using `hash router`.
|
||||
|
||||
404.html
|
||||
index.html
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
@@ -25,15 +35,56 @@ Create `404.html` and `README.md` into `/docs`.
|
||||
<meta charset="UTF-8">
|
||||
<link rel="stylesheet" href="//unpkg.com/docsify/themes/vue.css">
|
||||
</head>
|
||||
<body></body>
|
||||
<script src="//unpkg.com/docsify"></script>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
</body>
|
||||
<script src="//unpkg.com/docsify" data-router></script>
|
||||
</html>
|
||||
```
|
||||
|
||||
## How to contribute
|
||||
## CDN
|
||||
- UNPKG [https://unpkg.com/docsify/](https://unpkg.com/docsify/)
|
||||
- jsDelivr [http://www.jsdelivr.com/projects/docsify](http://www.jsdelivr.com/projects/docsify)
|
||||
|
||||
- Fork it and clone!
|
||||
- Run `npm i && npm run dev`
|
||||
## Showcase
|
||||
These open-source projects are using docsify to generate their sites. Pull requests welcome : )
|
||||
|
||||
- [docsify](https://docsify.js.org) - A magical documentation site generator.
|
||||
- [Snipaste](https://docs.snipaste.com/) - A new way to boost your productivity.
|
||||
- [puck](https://puck.zz173.com/) - A small & magical php framework.
|
||||
- [Samaritan](http://samaritan.stockdb.org) - An Algorithmic Trading Framework for Digital Currency.
|
||||
- [Vudash](http://vudash.github.io/vudash/) - Powerful, Flexible, Open Source dashboards for anything
|
||||
- [Trilogy](http://trilogy.js.org) - No-hassle SQLite with a Promise-based, document store style API.
|
||||
|
||||
## Similar projects
|
||||
- [docute](https://github.com/egoist/docute) - 📜 Effortlessly documentation done right
|
||||
- [docpress](https://github.com/docpress/docpress) - Documentation website generator
|
||||
|
||||
## Contributing
|
||||
|
||||
- Fork it!
|
||||
- Create your feature branch: `git checkout -b my-new-feature`
|
||||
- Commit your changes: `git commit -am 'Add some feature'`
|
||||
- Push to the branch: `git push origin my-new-feature`
|
||||
- Submit a pull request :D
|
||||
|
||||
|
||||
## Development
|
||||
|
||||
### prepare
|
||||
```bash
|
||||
npm i && npm run dev
|
||||
open http://localhost:3000
|
||||
```
|
||||
|
||||
### More Language Highlight
|
||||
|
||||
```html
|
||||
<script src="//unpkg.com/docsify"></script>
|
||||
<script src="//unpkg.com/prismjs/components/prism-bash.js"></script>
|
||||
<script src="//unpkg.com/prismjs/components/prism-php.js"></script>
|
||||
```
|
||||
|
||||
## License
|
||||
MIT
|
||||
|
||||
|
||||
@@ -2,13 +2,11 @@ var serveStatic = require('serve-static')
|
||||
var http = require('http')
|
||||
var fs = require('fs')
|
||||
|
||||
var notfound = fs.readFileSync('404.dev.html')
|
||||
|
||||
http.createServer(function (req, res) {
|
||||
serveStatic('.')(req, res, function () {
|
||||
res.writeHead(404, { 'Content-Type': 'text/html' })
|
||||
res.end(notfound)
|
||||
res.end(fs.readFileSync('dev.html'))
|
||||
})
|
||||
}).listen(3000)
|
||||
}).listen(3000, '0.0.0.0')
|
||||
|
||||
console.log(`\nListening at http://localhost:3000\n`)
|
||||
console.log(`\nListening at http://0.0.0.0:3000\n`)
|
||||
|
||||
@@ -0,0 +1,38 @@
|
||||
var fs = require('fs')
|
||||
var cssnano = require('cssnano').process
|
||||
var resolve = require('path').resolve
|
||||
var postcss = require('postcss')
|
||||
|
||||
var processor = postcss([require('postcss-salad')])
|
||||
|
||||
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)
|
||||
cssnano(loadLib(file))
|
||||
.then(function (result) {
|
||||
saveMin(file, result.css)
|
||||
console.log('cssnao - ' + file)
|
||||
})
|
||||
}).catch(function (err) {
|
||||
console.log(err)
|
||||
})
|
||||
})
|
||||
|
||||
+4
-1
@@ -15,11 +15,14 @@ var build = function (opts) {
|
||||
|
||||
console.log(dest)
|
||||
bundle.write({
|
||||
format: 'umd',
|
||||
format: 'iife',
|
||||
moduleName: opts.moduleName || 'Docsify',
|
||||
dest: dest
|
||||
})
|
||||
})
|
||||
.catch(function (err) {
|
||||
console.error(err)
|
||||
})
|
||||
}
|
||||
|
||||
build({
|
||||
|
||||
@@ -3,14 +3,10 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<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/buble.css">
|
||||
<link rel="stylesheet" href="/themes/vue.css">
|
||||
</head>
|
||||
<body>
|
||||
<nav>
|
||||
<a href="/">En</a>
|
||||
<a href="/zh-cn">中文</a>
|
||||
</nav>
|
||||
<body class="">
|
||||
<div id="app"></div>
|
||||
</body>
|
||||
<script src="/lib/docsify.js" data-repo="qingwei-li/docsify"></script>
|
||||
<script src="/lib/docsify.js" data-repo="qingwei-li/docsify" data-name="docsify" data-auto2top data-sidebar-toggle data-router></script>
|
||||
</html>
|
||||
@@ -1,18 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Docsify</title>
|
||||
<meta name="description" content="A magical documentation generator.">
|
||||
<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="//unpkg.com/docsify/themes/vue.css">
|
||||
</head>
|
||||
<body>
|
||||
<nav>
|
||||
<a href="/docsify/">En</a>
|
||||
<a href="/docsify/zh-cn">中文</a>
|
||||
</nav>
|
||||
<div id="app"></div>
|
||||
</body>
|
||||
<script src="//unpkg.com/docsify" data-repo="qingwei-li/docsify"></script>
|
||||
</html>
|
||||
@@ -0,0 +1 @@
|
||||
docsify.js.org
|
||||
+435
-27
@@ -1,23 +1,14 @@
|
||||
# docsify
|
||||
|
||||
> A magical documentation site generator.
|
||||
|
||||
## Features
|
||||
- Easy and lightweight
|
||||
- Custom themes
|
||||
- No build
|
||||
|
||||
## Quick Start
|
||||
|
||||
### Create a project
|
||||
First create a project, then create a `docs` folder
|
||||
```shell
|
||||
```bash
|
||||
mkdir my-project && cd my-project
|
||||
mkdir docs && cd docs
|
||||
```
|
||||
|
||||
### Create entry file
|
||||
Create a `404.html` file
|
||||
Create a `index.html` file
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
@@ -29,70 +20,487 @@ Create a `404.html` file
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
</body>
|
||||
<script src="//unpkg.com/docsify"></script>
|
||||
<script src="//unpkg.com/docsify" data-router></script>
|
||||
</html>
|
||||
```
|
||||
|
||||
Create `README.md` as the main page
|
||||
|
||||
```
|
||||
```markdown
|
||||
# Title
|
||||
|
||||
## balabala
|
||||
## blabla
|
||||
```
|
||||
|
||||
### Deploy!
|
||||
Push and open the **GitHub Pages** feature
|
||||
Push code and activate **GitHub Pages** via your repo's settings
|
||||

|
||||
|
||||
## CLI
|
||||
|
||||
Easy to setup and preivew a docs.
|
||||
Easy to setup and preview a docs.
|
||||
|
||||
### Install
|
||||
```shell
|
||||
```bash
|
||||
npm i docsify-cli -g
|
||||
```
|
||||
|
||||
### Setup
|
||||
|
||||
Setup a boilerplate docs
|
||||
```shell
|
||||
```bash
|
||||
docsify init docs
|
||||
```
|
||||
|
||||
### Preview
|
||||
Preview and serve your docs using
|
||||
```shell
|
||||
```bash
|
||||
docsify serve docs
|
||||
```
|
||||
|
||||
Read more [docsify-cli](https://github.com/QingWei-Li/docsify-cli)
|
||||
|
||||
## Themes
|
||||
|
||||
|
||||
## More
|
||||
|
||||
### Themes
|
||||
Currently available `vue.css` and `buble.css`
|
||||
```html
|
||||
<link rel="stylesheet" href="//unpkg.com/docsify/themes/vue.css">
|
||||
<link rel="stylesheet" href="//unpkg.com/docsify/themes/buble.css">
|
||||
```
|
||||
|
||||
## More
|
||||
Minified files
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css">
|
||||
<link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/buble.css">
|
||||
```
|
||||
|
||||
### Multiple pages
|
||||
If you need other pages, directly create the markdown file, such as `guide.md` is `/guide`.
|
||||
If you need other pages, directly create the markdown file, such as `guide.md` is `/#/guide`.
|
||||
|
||||
### Navbar
|
||||
Code in `404.html`
|
||||
Code in `index.html`
|
||||
|
||||
```html
|
||||
<nav>
|
||||
<a href="/docsify/">En</a>
|
||||
<a href="/docsify/zh-cn">中文</a>
|
||||
<a href="/#/docsify/">En</a>
|
||||
<a href="/#/docsify/zh-cn">中文</a>
|
||||
</nav>
|
||||
```
|
||||
|
||||
### GitHub Corner
|
||||
Modify your `404.html`
|
||||
### CDN
|
||||
- UNPKG [https://unpkg.com/docsify/](https://unpkg.com/docsify/)
|
||||
- jsDelivr [http://www.jsdelivr.com/projects/docsify](http://www.jsdelivr.com/projects/docsify)
|
||||
|
||||
|
||||
### Cover Page
|
||||
|
||||
Generate a cover page with markdown. Create a `_coverpage.md` and set `data-coverpage` in the script tag.
|
||||
|
||||
```markdown
|
||||

|
||||
|
||||
# docsify <small>1.2.0</small>
|
||||
|
||||
> A magical documentation site generator.
|
||||
|
||||
- Simple and lightweight (~12kb gzipped)
|
||||
- Multiple themes
|
||||
- Not build static html files
|
||||
|
||||
|
||||
[GitHub](https://github.com/QingWei-Li/docsify/)
|
||||
[Get Started](#quick-start)
|
||||
```
|
||||
|
||||
#### Custom background
|
||||
Currently the background of the cover page is generated randomly. We can customize the background color, or add a background image.
|
||||
|
||||
```markdown
|
||||
# docsify <small>1.2.0</small>
|
||||
|
||||
> xxx
|
||||
|
||||
[GitHub](https://github.com/QingWei-Li/docsify/)
|
||||
[Get Started](#quick-start)
|
||||
|
||||
<!-- background image -->
|
||||

|
||||
<!-- background color -->
|
||||

|
||||
```
|
||||
|
||||
### Markdown parser
|
||||
|
||||
Docsify uses [marked](https://github.com/chjj/marked) to parse markdown. We can configure it
|
||||
|
||||
```js
|
||||
window.$docsify = {
|
||||
markdown: {
|
||||
smartypants: true
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
And it can even be customized
|
||||
|
||||
```js
|
||||
window.$docsify = {
|
||||
markdown: function(marked) {
|
||||
// ...
|
||||
|
||||
return marked
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Doc Helpers
|
||||
#### p.tip
|
||||
|
||||
`!> ` add your content will rendered as `<p class="tip">content</p>`
|
||||
|
||||
```markdown
|
||||
!> Important **information**
|
||||
```
|
||||
|
||||
It will be rendered
|
||||
|
||||
```html
|
||||
<p class="tip">Important <strong>information</strong></p>
|
||||
```
|
||||
|
||||
e.g.
|
||||
|
||||
!> Important **information**
|
||||
|
||||
|
||||
#### p.warn
|
||||
|
||||
```markdown
|
||||
?> todo info
|
||||
```
|
||||
|
||||
?> todo info
|
||||
|
||||
### Combining Vue
|
||||
We can write the Vue syntax directly in the markdown file, when the Vue library is loaded into `index.html`. Default will automatically initialize a Vue instance, of course, we can also manually.
|
||||
|
||||
index.html
|
||||
```html
|
||||
<script src="//unpkg.com/vue"></script>
|
||||
<script src="//unpkg.com/docsify" data-router></script>
|
||||
```
|
||||
|
||||
```markdown
|
||||
<ul>
|
||||
<li v-for="i in 10">{{ i }}</li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
Manual initialization
|
||||
|
||||
```markdown
|
||||
<div>
|
||||
<input type="text" v-model="msg">
|
||||
<p>Hello, {{ msg }}</p>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
new Vue({
|
||||
el: 'main',
|
||||
data: { msg: 'Docsify' }
|
||||
})
|
||||
</script>
|
||||
```
|
||||
|
||||
## Options
|
||||
|
||||
You can add configurations in the script tag attributes or with `window.$docsify`.
|
||||
|
||||
### repo
|
||||
Display the [GitHub Corner](http://tholman.com/github-corners/) widget.
|
||||
|
||||
```html
|
||||
<script src="//unpkg.com/docsify" data-repo="your/repo"></script>
|
||||
```
|
||||
|
||||
|
||||
```js
|
||||
window.$docsify = {
|
||||
repo: 'your/repo'
|
||||
}
|
||||
```
|
||||
|
||||
### max-level
|
||||
TOC level.
|
||||
|
||||
```html
|
||||
<script src="//unpkg.com/docsify" data-max-level="6"></script>
|
||||
```
|
||||
|
||||
```js
|
||||
window.$docsify = {
|
||||
maxLevel: 6
|
||||
}
|
||||
```
|
||||
|
||||
### el
|
||||
Root element.
|
||||
|
||||
```html
|
||||
<script src="//unpkg.com/docsify" data-el="#app"></script>
|
||||
```
|
||||
|
||||
```js
|
||||
window.$docsify = {
|
||||
el: '#app'
|
||||
}
|
||||
```
|
||||
|
||||
### sidebar-toggle
|
||||
|
||||
Sidebar with toggle
|
||||
|
||||
```html
|
||||
<script src="//unpkg.com/docsify" data-sidebar-toggle></script>
|
||||
```
|
||||
|
||||
```js
|
||||
window.$docsify = {
|
||||
sidebarToggle: true
|
||||
}
|
||||
```
|
||||
|
||||
### sidebar
|
||||
|
||||
Custom sidebar. If it's set, the TOC will be disabled. Bind global variables on the `data-sidebar`.
|
||||
|
||||

|
||||
|
||||
```html
|
||||
<script>
|
||||
window.sidebar = [
|
||||
{ slug: '/', title: 'Home' },
|
||||
{
|
||||
slug: '/pageA',
|
||||
title: 'page A',
|
||||
children: [
|
||||
{ slug: '/pageA/childrenB', title: 'children B' }
|
||||
]
|
||||
},
|
||||
{ slug: '/PageC', title: 'Page C' }
|
||||
]
|
||||
</script>
|
||||
<script src="/lib/docsify.js" data-sidebar="sidebar"></script>
|
||||
```
|
||||
|
||||
|
||||
```js
|
||||
window.$docsify = {
|
||||
sidebar: 'sidebar'
|
||||
}
|
||||
```
|
||||
|
||||
### load-sidebar
|
||||
|
||||
Load sidebar markdown file. If it is configured, load the current directory `_sidebar.md` by default. If the file doesn't exist, the sidebar will appear as a TOC.
|
||||
** you should add `.nojekyll` into docs folder to prevent GitHub Pages from ignoring the `_sidebar.md`**
|
||||
|
||||
```html
|
||||
<script src="/lib/docsify.js" data-load-sidebar></script>
|
||||
```
|
||||
|
||||
You can specify a file:
|
||||
|
||||
```html
|
||||
<script src="/lib/docsify.js" data-load-sidebar="_sidebar.md"></script>
|
||||
```
|
||||
|
||||
```js
|
||||
window.$docsify = {
|
||||
loadSidebar: '_sidebar.md'
|
||||
}
|
||||
```
|
||||
|
||||
The contents of the file can be:
|
||||
|
||||
```markdown
|
||||
- [Home](/)
|
||||
- [Installation](/installation)
|
||||
- Essentials
|
||||
- [Getting Started](/getting-started)
|
||||
- [Dynamic Route Matching](/dynamic-matching)
|
||||
- [Nested Routes](/nested-routes)
|
||||
```
|
||||
|
||||
### sub-max-level
|
||||
|
||||
Display TOC in the custom sidebar. The default value is 0.
|
||||
|
||||
|
||||
```html
|
||||
<script src="/lib/docsify.js" data-load-sidebar data-max-sub-level="4"></script>
|
||||
```
|
||||
|
||||
|
||||
```js
|
||||
window.$docsify = {
|
||||
maxSubLevel: 4
|
||||
}
|
||||
```
|
||||
|
||||
### load-navbar
|
||||
|
||||
Load navbar markdown file. If it is configured, load the current directory `_navbar.md` by default.
|
||||
|
||||
```html
|
||||
<script src="/lib/docsify.js" data-load-navbar></script>
|
||||
```
|
||||
|
||||
You can specify a file:
|
||||
|
||||
```html
|
||||
<script src="/lib/docsify.js" data-load-navbar="_navbar.md"></script>
|
||||
```
|
||||
|
||||
```js
|
||||
window.$docsify = {
|
||||
loadNavbar: '_navbar.md'
|
||||
}
|
||||
```
|
||||
|
||||
The contents of the file can be:
|
||||
|
||||
```markdown
|
||||
- [en](/)
|
||||
- [chinese](/zh-cn)
|
||||
```
|
||||
|
||||
If you write a sub level list, it will generate a dropdown list.
|
||||
|
||||
```markdown
|
||||
- [download](/download)
|
||||
- language
|
||||
- [en](/)
|
||||
- [chinese](/zh-cn)
|
||||
```
|
||||
|
||||
### router
|
||||
|
||||
Hash router.
|
||||
|
||||
```html
|
||||
<script src="/lib/docsify.js" data-router></script>
|
||||
```
|
||||
|
||||
```js
|
||||
window.$docsify = {
|
||||
router: true
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
### auto2top
|
||||
|
||||
Scroll to the top on changing hash.
|
||||
|
||||
|
||||
```html
|
||||
<script src="/lib/docsify.js" data-auto2top></script>
|
||||
<!-- Set offset top -->
|
||||
<script src="/lib/docsify.js" data-auto2top="50"></script>
|
||||
```
|
||||
|
||||
```js
|
||||
window.$docsify = {
|
||||
auto2top: true,
|
||||
// auto2top: 50
|
||||
}
|
||||
```
|
||||
|
||||
### homepage
|
||||
|
||||
`README.md` will be rendered as a homepage for your website in the docs folder, but sometimes we want to specify another file as a homepage, or even use the `README.md` in your repo. We can use (need `data-router`):
|
||||
|
||||
```html
|
||||
<script src="/lib/docsify.js" data-homepage="https://raw.githubusercontent.com/QingWei-Li/docsify/master/README.md"></script>
|
||||
<!-- Or using `Welcome.md` as homepge -->
|
||||
<script src="/lib/docsify.js" data-homepage="Welcome.md"></script>
|
||||
```
|
||||
|
||||
|
||||
```js
|
||||
window.$docsify = {
|
||||
homepage: true
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
### basePath
|
||||
|
||||
If your HTML entry file and the markdown files are in different directories, we can use:
|
||||
|
||||
```html
|
||||
<script src="/lib/docsify.js" data-base-path="/base/"></script>
|
||||
|
||||
<!-- Even if the docs is on another site 😄 -->
|
||||
<script src="/lib/docsify.js" data-base-path="https://docsify.js.org/"></script>
|
||||
```
|
||||
|
||||
|
||||
```js
|
||||
window.$docsify = {
|
||||
basePath: '/base/'
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
### coverpage
|
||||
|
||||
Generate cover page.
|
||||
|
||||
```html
|
||||
<script src="/lib/docsify.js" data-coverpage></script>
|
||||
<!-- or -->
|
||||
<script src="/lib/docsify.js" data-coverpage="other.md"></script>
|
||||
```
|
||||
|
||||
```js
|
||||
window.$docsify = {
|
||||
coverpage: true
|
||||
}
|
||||
```
|
||||
|
||||
### name
|
||||
|
||||
Project name. It is displayed in the sidebar.
|
||||
|
||||
```html
|
||||
<script src="/lib/docsify.js" data-name="docsify"></script>
|
||||
```
|
||||
|
||||
```js
|
||||
window.$docsify = {
|
||||
name: 'docsify'
|
||||
}
|
||||
```
|
||||
|
||||
### nameLink
|
||||
|
||||
Name link. The default value is `window.location.pathname`.
|
||||
|
||||
|
||||
```html
|
||||
<script src="/lib/docsify.js" data-name-link="/"></script>
|
||||
```
|
||||
|
||||
```js
|
||||
window.$docsify = {
|
||||
nameLink: '/'
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,13 @@
|
||||

|
||||
|
||||
# docsify <small>1.9.0</small>
|
||||
|
||||
> A magical documentation site generator.
|
||||
|
||||
- Simple and lightweight (~13kB gzipped)
|
||||
- Multiple themes
|
||||
- Not build static html files
|
||||
|
||||
|
||||
[GitHub](https://github.com/QingWei-Li/docsify/)
|
||||
[Get Started](#quick-start)
|
||||
@@ -0,0 +1,30 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="122px" height="94px" viewBox="0 0 122 94" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 41.2 (35397) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>icon</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs>
|
||||
<path d="M144.453286,104 C177.038086,104 203.453286,77.5848002 203.453286,45 C203.453286,12.4151998 177.038086,-14 144.453286,-14 C111.868486,-14 114.603207,13.6754846 114.603207,46.2602848 C114.603207,78.845085 111.868486,104 144.453286,104 Z" id="path-1"></path>
|
||||
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-2">
|
||||
<feOffset dx="7" dy="-10" in="SourceAlpha" result="shadowOffsetInner1"></feOffset>
|
||||
<feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
|
||||
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
|
||||
</filter>
|
||||
</defs>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="icon" transform="translate(-98.000000, 2.000000)">
|
||||
<g id="body" transform="translate(159.000000, 45.000000) rotate(-90.000000) translate(-159.000000, -45.000000) ">
|
||||
<use fill="#2ECE53" fill-rule="evenodd" xlink:href="#path-1"></use>
|
||||
<use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
|
||||
<use stroke="#0E1320" stroke-width="4" xlink:href="#path-1"></use>
|
||||
</g>
|
||||
<circle id="left-eye" fill="#000000" cx="139" cy="38" r="7"></circle>
|
||||
<circle id="right-eye" fill="#000000" cx="183" cy="38" r="7"></circle>
|
||||
<g id="light" transform="translate(112.000000, 10.000000)" fill="#FFFFFF">
|
||||
<circle cx="2" cy="28" r="2"></circle>
|
||||
<path d="M12.2551528,-1.65016666 C12.1154537,-2.17684986 12.4455583,-2.60381096 13.011574,-2.60381096 L14.9928363,-2.60381096 C15.5502953,-2.60381096 16.1214654,-2.16566487 16.2594657,-1.64268776 C16.2594657,-1.64268776 17.4280152,2.48668594 17.9030739,6.45786647 C18.3781327,10.429047 18.3171359,10.4652901 18.3171359,12.1782569 C18.3171359,16.9413523 16.2076398,26.4389164 16.2076398,26.4389164 C16.0941814,26.9676035 15.558852,27.396189 14.9928363,27.396189 L13.011574,27.396189 C12.454115,27.396189 12.1166642,26.9691757 12.2568366,26.4301177 C12.2568366,26.4301177 13.4260575,22.2288768 13.9640759,17.9859148 C14.5020943,13.7429529 14.309594,15.2982629 14.5626609,12.3723978 C14.9355337,8.06138047 12.2551528,-1.65016666 12.2551528,-1.65016666 Z" id="light-line" transform="translate(15.271433, 12.396189) scale(-1, 1) rotate(-48.000000) translate(-15.271433, -12.396189) "></path>
|
||||
</g>
|
||||
<path d="M159.5,78.3050108 C169.164983,78.3050108 177,70.4699939 177,60.8050108 C177,51.1400277 169.688728,56.4616841 160.023745,56.4616841 C150.358762,56.4616841 142,51.1400277 142,60.8050108 C142,70.4699939 149.835017,78.3050108 159.5,78.3050108 Z" id="mouth" fill="#000000"></path>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
@@ -0,0 +1,27 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>docsify - A magical documentation site generator.</title>
|
||||
<link rel="icon" href="favicon.ico">
|
||||
<meta name="description" content="A magical documentation generator.">
|
||||
<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="//unpkg.com/docsify/lib/themes/vue.css">
|
||||
</head>
|
||||
<body>
|
||||
<nav>
|
||||
<a href="#/">En</a>
|
||||
<a href="#/zh-cn">中文</a>
|
||||
</nav>
|
||||
<div id="app"></div>
|
||||
</body>
|
||||
<script
|
||||
src="//unpkg.com/docsify/lib/docsify.min.js"
|
||||
data-max-level="4"
|
||||
data-sidebar-toggle
|
||||
data-coverpage
|
||||
data-name="docsify"
|
||||
data-router></script>
|
||||
<script src="//unpkg.com/prismjs/components/prism-bash.min.js"></script>
|
||||
<script src="//unpkg.com/prismjs/components/prism-markdown.min.js"></script>
|
||||
</html>
|
||||
+432
-19
@@ -1,23 +1,20 @@
|
||||
# docsify
|
||||
|
||||
> 无需构建快速生成文档页
|
||||
|
||||
## 特性
|
||||
- 无需构建,写完 markdown 直接发布
|
||||
- 支持自定义主题
|
||||
- 容易使用并且轻量
|
||||
- 容易使用并且轻量 (~12kb gzipped)
|
||||
|
||||
## 快速上手
|
||||
|
||||
### 创建项目
|
||||
新建一个空项目,接着创建一个 `docs` 目录并进入到 docs 目录下
|
||||
```shell
|
||||
```bash
|
||||
mkdir my-project && cd my-project
|
||||
mkdir docs && cd docs
|
||||
```
|
||||
|
||||
### 创建入口文件
|
||||
创建一个 `404.html` 文件,内容为
|
||||
创建一个 `index.html` 文件,内容为
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
@@ -28,7 +25,7 @@ mkdir docs && cd docs
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
</body>
|
||||
<script src="//unpkg.com/docsify"></script>
|
||||
<script src="//unpkg.com/docsify" data-router></script>
|
||||
</html>
|
||||
```
|
||||
|
||||
@@ -49,52 +46,468 @@ mkdir docs && cd docs
|
||||
方便快速创建文档目录,会读取项目的 `package.json` 里的选项作为 docsify 的配置,支持本地预览。
|
||||
|
||||
### 安装
|
||||
```shell
|
||||
```bash
|
||||
npm i docsify-cli -g
|
||||
```
|
||||
|
||||
### 初始化文档
|
||||
|
||||
默认初始化在当前目录,推荐将文档放在 `docs` 目录下
|
||||
```shell
|
||||
```bash
|
||||
docsify init docs
|
||||
```
|
||||
|
||||
### 启动本地服务
|
||||
启动一个 server 方便预览,打开 http://localhost:3000
|
||||
```shell
|
||||
```bash
|
||||
docsify serve docs
|
||||
```
|
||||
|
||||
更多选项参考 [docsify-cli](https://github.com/QingWei-Li/docsify-cli)
|
||||
|
||||
## 主题
|
||||
目前提供 vue.css 和 buble.css,直接修改 `404.html` 里的 cdn 地址即可
|
||||
|
||||
## 更多功能
|
||||
|
||||
### 主题
|
||||
目前提供 vue.css 和 buble.css,直接修改 `index.html` 里的 cdn 地址即可
|
||||
```html
|
||||
<link rel="stylesheet" href="//unpkg.com/docsify/themes/vue.css">
|
||||
<link rel="stylesheet" href="//unpkg.com/docsify/themes/buble.css">
|
||||
```
|
||||
|
||||
## 更多功能
|
||||
压缩版
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css">
|
||||
<link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/buble.css">
|
||||
```
|
||||
|
||||
### 多页面
|
||||
`README.md` 作为主页面,如果需要其他页面,直接在文档目录下创建对应的 `*.md` 文件,例如创建一个 `guide.md` 那么对应的路由就是 `/guide`。
|
||||
`README.md` 作为主页面,如果需要其他页面,直接在文档目录下创建对应的 `*.md` 文件,例如创建一个 `guide.md` 那么对应的路由就是 `/#/guide`。
|
||||
|
||||
### 导航
|
||||
导航需要自己写在 `404.html` 文件里,效果参考本文档
|
||||
导航需要自己写在 `index.html` 文件里,效果参考本文档
|
||||
|
||||
```html
|
||||
<nav>
|
||||
<a href="/docsify/">En</a>
|
||||
<a href="/docsify/zh-cn">中文</a>
|
||||
<a href="/#/docsify/">En</a>
|
||||
<a href="/#/docsify/zh-cn">中文</a>
|
||||
</nav>
|
||||
```
|
||||
|
||||
### GitHub Corner
|
||||
参考本文档的右上角的 GitHub 图标,如果要开启的话,将 `404.html` 里的 script 改成
|
||||
|
||||
|
||||
### CDN
|
||||
- UNPKG [https://unpkg.com/docsify/](https://unpkg.com/docsify/)
|
||||
- jsDelivr [http://www.jsdelivr.com/projects/docsify](http://www.jsdelivr.com/projects/docsify)
|
||||
|
||||
### 封面
|
||||
|
||||
只需要写几行简单的 markdown 就可以拥有一页精致的封面,通过添加 `data-coverpage` 属性,并创建 `_coverpage.md`,按照下面的格式书写即可。
|
||||
|
||||
```markdown
|
||||

|
||||
|
||||
# docsify <small>1.2.0</small>
|
||||
|
||||
> A magical documentation site generator.
|
||||
|
||||
- Simple and lightweight (~12kb gzipped)
|
||||
- Multiple themes
|
||||
- Not build static html files
|
||||
|
||||
|
||||
[GitHub](https://github.com/QingWei-Li/docsify/)
|
||||
[Get Started](#quick-start)
|
||||
```
|
||||
|
||||
|
||||
#### 自定义封面背景
|
||||
默认的背景是随机生成的,你可以自定义背景色或者背景图片。只需要在文档末尾用添加图片的 Markdown 语法
|
||||
|
||||
```markdown
|
||||
# docsify <small>1.2.0</small>
|
||||
|
||||
> xxx
|
||||
|
||||
[GitHub](https://github.com/QingWei-Li/docsify/)
|
||||
[Get Started](#quick-start)
|
||||
|
||||
<!-- 背景图片 -->
|
||||

|
||||
<!-- 背景色 -->
|
||||

|
||||
```
|
||||
|
||||
### 自定义 Markdown parser
|
||||
|
||||
默认使用 [marked](https://github.com/chjj/marked) 处理 markdown 部分,你可以修改默认配置
|
||||
|
||||
```js
|
||||
window.$docsify = {
|
||||
markdown: {
|
||||
smartypants: true
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
甚至可以完全定制化
|
||||
|
||||
```js
|
||||
window.$docsify = {
|
||||
markdown: function(marked) {
|
||||
// ...
|
||||
|
||||
return marked
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 文档助手
|
||||
#### 内置「提示」语法
|
||||
|
||||
`!>`后面接内容,会渲染成带 tip 类名的段落。
|
||||
|
||||
```markdown
|
||||
!> 提示信息,**支持其他 markdown 语法**
|
||||
```
|
||||
|
||||
将被渲染成
|
||||
|
||||
```html
|
||||
<p class="tip">提示信息<strong>支持其他 markdown 语法</strong></p>
|
||||
```
|
||||
|
||||
效果
|
||||
|
||||
!> 适合显示醒目的内容
|
||||
|
||||
#### 内置「警示」语法
|
||||
|
||||
`?>`后面接内容,会渲染成带 warn 类名的段落。
|
||||
|
||||
```markdown
|
||||
?> 警示内容样式
|
||||
```
|
||||
|
||||
效果
|
||||
|
||||
?> 警示内容样式
|
||||
|
||||
### 结合 Vue
|
||||
|
||||
`index.html` 内引入 Vue 后,可以在文档里直接写 Vue 语法。默认会自己初始化一个 Vue 示例,当然我们也可以手动初始化一个实例。
|
||||
|
||||
index.html
|
||||
```html
|
||||
<script src="//unpkg.com/vue"></script>
|
||||
<script src="//unpkg.com/docsify" data-router></script>
|
||||
```
|
||||
|
||||
```markdown
|
||||
<ul>
|
||||
<li v-for="i in 10">{{ i }}</li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
手动初始化示例
|
||||
|
||||
```markdown
|
||||
<div>
|
||||
<input type="text" v-model="msg">
|
||||
<p>Hello, {{ msg }}</p>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
new Vue({
|
||||
el: 'main',
|
||||
data: { msg: 'Docsify' }
|
||||
})
|
||||
</script>
|
||||
```
|
||||
|
||||
## 配置参数
|
||||
|
||||
你可以通过在标签上添加属性的方式,或者给 `window.$docsify` 传配置信息。
|
||||
|
||||
### repo
|
||||
参考本文档的右上角的 GitHub 图标,如果要开启的话,将 `index.html` 里的 script 改成
|
||||
|
||||
```html
|
||||
<script src="//unpkg.com/docsify" data-repo="your/repo"></script>
|
||||
```
|
||||
|
||||
|
||||
```js
|
||||
window.$docsify = {
|
||||
repo: 'your/repo'
|
||||
}
|
||||
```
|
||||
|
||||
### max-level
|
||||
目录最大展开层级,默认值为 6
|
||||
|
||||
```html
|
||||
<script src="//unpkg.com/docsify" data-max-level="6"></script>
|
||||
```
|
||||
|
||||
|
||||
```js
|
||||
window.$docsify = {
|
||||
maxLevel: 6
|
||||
}
|
||||
```
|
||||
|
||||
### el
|
||||
替换节点元素,默认为 `#app`
|
||||
```html
|
||||
<script src="//unpkg.com/docsify" data-el="#app"></script>
|
||||
```
|
||||
|
||||
|
||||
```js
|
||||
window.$docsify = {
|
||||
el: '#app'
|
||||
}
|
||||
```
|
||||
|
||||
### sidebar-toggle
|
||||
|
||||
Sidebar 开关按钮
|
||||
|
||||
```html
|
||||
<script src="//unpkg.com/docsify" data-sidebar-toggle></script>
|
||||
```
|
||||
|
||||
|
||||
```js
|
||||
window.$docsify = {
|
||||
sidebarToggle: true
|
||||
}
|
||||
```
|
||||
|
||||
### sidebar
|
||||
|
||||
设置后 TOC 功能将不可用,适合导航较多的文档,`data-sidebar` 传入全局变量名。
|
||||
|
||||

|
||||
|
||||
```html
|
||||
<script>
|
||||
window.sidebar = [
|
||||
{ slug: '/', title: 'Home' },
|
||||
{
|
||||
slug: '/pageA',
|
||||
title: 'page A',
|
||||
children: [
|
||||
{ slug: '/pageA/childrenB', title: 'children B' }
|
||||
]
|
||||
},
|
||||
{ slug: '/PageC', title: 'Page C' }
|
||||
]
|
||||
</script>
|
||||
<script src="/lib/docsify.js" data-sidebar="sidebar"></script>
|
||||
```
|
||||
|
||||
|
||||
```js
|
||||
window.$docsify = {
|
||||
sidebar: 'sidebar'
|
||||
}
|
||||
```
|
||||
|
||||
### load-sidebar
|
||||
|
||||
读取侧边栏配置文件,如果配置,默认加载当前目录下的 `_sidebar.md`。如果文件不存在,会显示 TOC 作为侧边栏内容。如果你有二级目录,也应该放置一份配置文件。
|
||||
**如果用 `_` 开头作为文件名,你应该在文档目录下添加 `.nojekyll`,阻止 GitHub Pages 忽略下划线开头的文件。**
|
||||
|
||||
```html
|
||||
<script src="/lib/docsify.js" data-load-sidebar></script>
|
||||
```
|
||||
|
||||
|
||||
你可以指定侧边栏文件名
|
||||
|
||||
```html
|
||||
<script src="/lib/docsify.js" data-load-sidebar="_sidebar.md"></script>
|
||||
```
|
||||
|
||||
```js
|
||||
window.$docsify = {
|
||||
loadSidebar: '_sidebar.md'
|
||||
}
|
||||
```
|
||||
|
||||
`_sidebar.md` 的内容可以是这样的
|
||||
|
||||
```markdown
|
||||
- [Home](/)
|
||||
- [Installation](/installation)
|
||||
- Essentials
|
||||
- [Getting Started](/getting-started)
|
||||
- [Dynamic Route Matching](/dynamic-matching)
|
||||
- [Nested Routes](/nested-routes)
|
||||
```
|
||||
|
||||
### sub-max-level
|
||||
|
||||
显示 TOC 在自定义的侧边栏里,默认最大显示 0 层。
|
||||
|
||||
|
||||
```html
|
||||
<script src="/lib/docsify.js" data-load-sidebar data-max-sub-level="4"></script>
|
||||
```
|
||||
|
||||
```js
|
||||
window.$docsify = {
|
||||
maxSubLevel: 4
|
||||
}
|
||||
```
|
||||
|
||||
### load-navbar
|
||||
|
||||
读取导航配置文件,如果配置,默认加载当前目录下的 `_navbar.md`。如果文件不存在,会显示 html 里定义的导航栏。
|
||||
|
||||
```html
|
||||
<script src="/lib/docsify.js" data-load-navbar></script>
|
||||
```
|
||||
|
||||
你可以指定导航栏文件名
|
||||
|
||||
```html
|
||||
<script src="/lib/docsify.js" data-load-navbar="_navbar.md"></script>
|
||||
```
|
||||
|
||||
```js
|
||||
window.$docsify = {
|
||||
loadNavbar: '_navbar.md'
|
||||
}
|
||||
```
|
||||
|
||||
`_navbar.md` 的内容可以是这样
|
||||
|
||||
```markdown
|
||||
- [en](/)
|
||||
- [中文](/zh-cn)
|
||||
```
|
||||
|
||||
当然也支持二级列表,将生成一个下拉列表
|
||||
```markdown
|
||||
- [download](/download)
|
||||
- language
|
||||
- [en](/)
|
||||
- [中文](/zh-cn)
|
||||
```
|
||||
|
||||
|
||||
### router
|
||||
|
||||
开启 hash router 功能,同时多页面切换不会重新加载资源。资源路径会被替换成 `/#/` 的形式。
|
||||
|
||||
```html
|
||||
<script src="/lib/docsify.js" data-router></script>
|
||||
```
|
||||
|
||||
```js
|
||||
window.$docsify = {
|
||||
router: true
|
||||
}
|
||||
```
|
||||
|
||||
### auto2top
|
||||
|
||||
切换路由时自动跳转到页面顶部
|
||||
|
||||
|
||||
```html
|
||||
<script src="/lib/docsify.js" data-auto2top></script>
|
||||
```
|
||||
|
||||
```js
|
||||
window.$docsify = {
|
||||
auto2top: true
|
||||
}
|
||||
```
|
||||
|
||||
### homepage
|
||||
|
||||
默认情况下网站会将根目录下 `README.md` 作为首页渲染,但是有些时候我们想指定其他文件,甚至想直接将 repo 下的 README 作为首页。你可以这样做(需要设置 `data-router`):
|
||||
|
||||
|
||||
```html
|
||||
<script src="/lib/docsify.js" data-homepage="https://raw.githubusercontent.com/QingWei-Li/docsify/master/README.md"></script>
|
||||
<!-- 或者将 Welcome.md 作为首页 -->
|
||||
<script src="/lib/docsify.js" data-homepage="Welcome.md"></script>
|
||||
```
|
||||
|
||||
```js
|
||||
window.$docsify = {
|
||||
homepage: true
|
||||
}
|
||||
```
|
||||
|
||||
### basePath
|
||||
|
||||
指定加载文档的路径,如果你的 HTML 入口文件和文档是放在不同地方,你可以设置:
|
||||
|
||||
```html
|
||||
<script src="/lib/docsify.js" data-base-path="/base/"></script>
|
||||
|
||||
<!-- 甚至文档是在其他站点下 😄 -->
|
||||
<script src="/lib/docsify.js" data-base-path="https://docsify.js.org/"></script>
|
||||
```
|
||||
|
||||
|
||||
```js
|
||||
window.$docsify = {
|
||||
basePath: '/base/'
|
||||
}
|
||||
```
|
||||
|
||||
### coverpage
|
||||
|
||||
生成封面,参考 [#封面](/zh-cn#封面).
|
||||
|
||||
```html
|
||||
<script src="/lib/docsify.js" data-coverpage></script>
|
||||
<!-- or -->
|
||||
<script src="/lib/docsify.js" data-coverpage="other.md"></script>
|
||||
|
||||
```
|
||||
|
||||
|
||||
```js
|
||||
window.$docsify = {
|
||||
coverpage: true
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
### name
|
||||
|
||||
项目名,将显示在侧边栏。
|
||||
|
||||
```html
|
||||
<script src="/lib/docsify.js" data-name="docsify"></script>
|
||||
```
|
||||
|
||||
```js
|
||||
window.$docsify = {
|
||||
name: 'docsify'
|
||||
}
|
||||
```
|
||||
|
||||
### nameLink
|
||||
|
||||
项目名链接,默认为 `window.location.pathname`。
|
||||
|
||||
```html
|
||||
<script src="/lib/docsify.js" data-name-link="/"></script>
|
||||
```
|
||||
|
||||
```js
|
||||
window.$docsify = {
|
||||
nameLink: '/'
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
+704
-208
File diff suppressed because it is too large
Load Diff
Vendored
+2
-1
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Binary file not shown.
|
After Width: | Height: | Size: 9.6 KiB |
+10
-7
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "docsify",
|
||||
"version": "0.2.1",
|
||||
"version": "1.9.0",
|
||||
"description": "A magical documentation generator.",
|
||||
"main": "lib/docsify.js",
|
||||
"files": [
|
||||
@@ -9,8 +9,8 @@
|
||||
"themes"
|
||||
],
|
||||
"scripts": {
|
||||
"build": "node build/build.js",
|
||||
"dev": "node app.js & nodemon --watch src themes --exec 'npm run build'",
|
||||
"build": "rm -rf lib themes && node build/build.js && mkdir lib/themes && mkdir themes && node build/build-css.js",
|
||||
"dev": "node app.js & nodemon -w src -e js,css --exec 'npm run build'",
|
||||
"test": "eslint src test"
|
||||
},
|
||||
"repository": {
|
||||
@@ -25,16 +25,19 @@
|
||||
"generator"
|
||||
],
|
||||
"author": "qingwei-li <cinwell.li@gmail.com> (https://github.com/QingWei-Li)",
|
||||
"homepage": "https://QingWei-Li.github.io/docsify",
|
||||
"homepage": "https://docsify.js.org",
|
||||
"license": "MIT",
|
||||
"devDependencies": {
|
||||
"cssnano": "^3.8.1",
|
||||
"eslint": "^3.10.2",
|
||||
"eslint-config-vue": "^2.0.1",
|
||||
"eslint-plugin-vue": "^1.0.0",
|
||||
"nodemon": "^1.11.0",
|
||||
"rollup": "^0.36.3",
|
||||
"rollup-plugin-buble": "^0.14.0",
|
||||
"rollup-plugin-commonjs": "^5.0.5",
|
||||
"postcss": "^5.2.6",
|
||||
"postcss-salad": "^1.0.5",
|
||||
"rollup": "^0.41.1",
|
||||
"rollup-plugin-buble": "^0.15.0",
|
||||
"rollup-plugin-commonjs": "^7.0.0",
|
||||
"rollup-plugin-node-resolve": "^2.0.0",
|
||||
"rollup-plugin-uglify": "^1.0.1",
|
||||
"serve-static": "^1.11.1"
|
||||
|
||||
-10
@@ -1,10 +0,0 @@
|
||||
export default function (url, options = {}) {
|
||||
const xhr = new XMLHttpRequest()
|
||||
|
||||
xhr.open(options.method || 'get', url)
|
||||
xhr.send()
|
||||
|
||||
return {
|
||||
then: cb => xhr.addEventListener('load', cb)
|
||||
}
|
||||
}
|
||||
@@ -1,51 +0,0 @@
|
||||
function scrollActiveSidebar () {
|
||||
if (/mobile/i.test(navigator.userAgent)) return
|
||||
|
||||
const anchors = document.querySelectorAll('.anchor')
|
||||
const nav = {}
|
||||
const lis = document.querySelectorAll('.sidebar li')
|
||||
let active = null
|
||||
|
||||
for (let i = 0, len = lis.length; i < len; i += 1) {
|
||||
const li = lis[i]
|
||||
const a = li.querySelector('a')
|
||||
|
||||
nav[a.getAttribute('href').slice(1)] = li
|
||||
}
|
||||
|
||||
function highlight () {
|
||||
for (let i = 0, len = anchors.length; i < len; i += 1) {
|
||||
const node = anchors[i].parentNode
|
||||
const bcr = node.getBoundingClientRect()
|
||||
|
||||
if (bcr.top < 10 && bcr.bottom > 10) {
|
||||
const li = nav[node.id]
|
||||
if (li === active) return
|
||||
if (active) active.setAttribute('class', '')
|
||||
|
||||
li.setAttribute('class', 'active')
|
||||
active = li
|
||||
|
||||
return
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
document.querySelector('main .content').addEventListener('scroll', highlight)
|
||||
highlight()
|
||||
|
||||
function scrollIntoView () {
|
||||
const id = window.location.hash.slice(1)
|
||||
if (!id) return
|
||||
const section = document.querySelector('#' + id)
|
||||
|
||||
if (section) section.scrollIntoView()
|
||||
}
|
||||
|
||||
window.addEventListener('hashchange', scrollIntoView)
|
||||
scrollIntoView()
|
||||
}
|
||||
|
||||
export default function () {
|
||||
scrollActiveSidebar()
|
||||
}
|
||||
+134
@@ -0,0 +1,134 @@
|
||||
import { isMobile } from './util'
|
||||
|
||||
/**
|
||||
* Active sidebar when scroll
|
||||
* @link https://buble.surge.sh/
|
||||
*/
|
||||
export function scrollActiveSidebar () {
|
||||
if (isMobile()) return
|
||||
|
||||
let hoveredOverSidebar = false
|
||||
const anchors = document.querySelectorAll('.anchor')
|
||||
const sidebar = document.querySelector('aside.sidebar')
|
||||
const nav = {}
|
||||
const lis = sidebar.querySelectorAll('li')
|
||||
let active = sidebar.querySelector('li.active')
|
||||
|
||||
for (let i = 0, len = lis.length; i < len; i += 1) {
|
||||
const li = lis[i]
|
||||
let href = li.querySelector('a').getAttribute('href')
|
||||
|
||||
if (href !== '/') {
|
||||
const match = href.match('#([^#]+)$')
|
||||
if (match && match.length) href = match[0].slice(1)
|
||||
}
|
||||
|
||||
nav[decodeURIComponent(href)] = li
|
||||
}
|
||||
|
||||
function highlight () {
|
||||
const top = document.body.scrollTop
|
||||
let last
|
||||
|
||||
for (let i = 0, len = anchors.length; i < len; i += 1) {
|
||||
const node = anchors[i]
|
||||
|
||||
if (node.offsetTop > top) {
|
||||
if (!last) last = node
|
||||
break
|
||||
} else {
|
||||
last = node
|
||||
}
|
||||
}
|
||||
if (!last) return
|
||||
const li = nav[last.getAttribute('data-id')]
|
||||
|
||||
if (!li || li === active) return
|
||||
if (active) active.classList.remove('active')
|
||||
|
||||
li.classList.add('active')
|
||||
active = li
|
||||
!hoveredOverSidebar && !sticky.noSticky && active.scrollIntoView(false)
|
||||
}
|
||||
|
||||
window.removeEventListener('scroll', highlight)
|
||||
window.addEventListener('scroll', highlight)
|
||||
sidebar.addEventListener('mouseover', () => { hoveredOverSidebar = true })
|
||||
sidebar.addEventListener('mouseleave', () => { hoveredOverSidebar = false })
|
||||
}
|
||||
|
||||
export function scrollIntoView () {
|
||||
const id = window.location.hash.match(/#[^#\/]+$/g)
|
||||
if (!id || !id.length) return
|
||||
const section = document.querySelector(decodeURIComponent(id[0]))
|
||||
|
||||
if (section) setTimeout(() => section.scrollIntoView(), 0)
|
||||
|
||||
return section
|
||||
}
|
||||
|
||||
/**
|
||||
* Acitve link
|
||||
*/
|
||||
export function activeLink (dom, activeParent) {
|
||||
const host = window.location.href
|
||||
|
||||
dom = typeof dom === 'object' ? dom : document.querySelector(dom)
|
||||
if (!dom) return
|
||||
let target
|
||||
|
||||
;[].slice.call(dom.querySelectorAll('a'))
|
||||
.sort((a, b) => b.href.length - a.href.length)
|
||||
.forEach(node => {
|
||||
if (host.indexOf(node.href) === 0 && !target) {
|
||||
activeParent
|
||||
? node.parentNode.classList.add('active')
|
||||
: node.classList.add('active')
|
||||
target = node
|
||||
} else {
|
||||
activeParent
|
||||
? node.parentNode.classList.remove('active')
|
||||
: node.classList.remove('active')
|
||||
}
|
||||
})
|
||||
|
||||
return target
|
||||
}
|
||||
|
||||
/**
|
||||
* sidebar toggle
|
||||
*/
|
||||
export function bindToggle (dom) {
|
||||
dom = typeof dom === 'object' ? dom : document.querySelector(dom)
|
||||
if (!dom) return
|
||||
const body = document.body
|
||||
|
||||
dom.addEventListener('click', () => body.classList.toggle('close'))
|
||||
|
||||
if (isMobile()) {
|
||||
const sidebar = document.querySelector('aside.sidebar')
|
||||
sidebar.addEventListener('click', () => {
|
||||
body.classList.toggle('close')
|
||||
setTimeout(() => activeLink(sidebar, true), 0)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
export function scroll2Top (offset = 0) {
|
||||
document.body.scrollTop = offset === true ? 0 : Number(offset)
|
||||
}
|
||||
|
||||
export function sticky () {
|
||||
sticky.dom = sticky.dom || document.querySelector('section.cover')
|
||||
const coverHeight = sticky.dom.getBoundingClientRect().height
|
||||
|
||||
return (function () {
|
||||
if (window.pageYOffset >= coverHeight || sticky.dom.classList.contains('hidden')) {
|
||||
document.body.classList.add('sticky')
|
||||
sticky.noSticky = false
|
||||
} else {
|
||||
document.body.classList.remove('sticky')
|
||||
sticky.noSticky = true
|
||||
}
|
||||
})()
|
||||
}
|
||||
@@ -1,41 +0,0 @@
|
||||
/**
|
||||
* @link from https://github.com/killercup/grock/blob/5280ae63e16c5739e9233d9009bc235ed7d79a50/styles/solarized/assets/js/behavior.coffee#L54-L81
|
||||
*/
|
||||
const tocToTree = function (toc) {
|
||||
const headlines = []
|
||||
const last = {}
|
||||
|
||||
toc.forEach(headline => {
|
||||
const level = headline.level || 1
|
||||
const len = level - 1
|
||||
|
||||
if (last[len]) {
|
||||
last[len].children = last[len].children || []
|
||||
last[len].children.push(headline)
|
||||
} else {
|
||||
headlines.push(headline)
|
||||
}
|
||||
last[level] = headline
|
||||
})
|
||||
|
||||
return headlines
|
||||
}
|
||||
|
||||
const buildHeadlinesTree = function (tree, tpl = '') {
|
||||
if (!tree || !tree.length) return ''
|
||||
|
||||
tree.forEach((node) => {
|
||||
tpl += `<li><a class="section-link" href="#${node.slug}">${node.title}</a></li>`
|
||||
if (node.children) {
|
||||
tpl += `<li><ul class="children">${buildHeadlinesTree(node.children)}</li></ul>`
|
||||
}
|
||||
})
|
||||
|
||||
return tpl
|
||||
}
|
||||
|
||||
export default function (toc) {
|
||||
var tree = tocToTree(toc)
|
||||
var result = buildHeadlinesTree(tree, '<ul>')
|
||||
return result
|
||||
}
|
||||
+98
-54
@@ -1,70 +1,114 @@
|
||||
import ajax from './ajax'
|
||||
import render from './render'
|
||||
import bindEvent from './bind-event'
|
||||
import { load, camel2kebab, isNil, getRoute, merge } from './util'
|
||||
import { scrollIntoView, activeLink } from './event'
|
||||
import * as render from './render'
|
||||
|
||||
const DEFAULT_OPTS = {
|
||||
const OPTIONS = merge({
|
||||
el: '#app',
|
||||
repo: ''
|
||||
}
|
||||
|
||||
repo: '',
|
||||
maxLevel: 6,
|
||||
subMaxLevel: 0,
|
||||
sidebar: '',
|
||||
sidebarToggle: false,
|
||||
loadSidebar: null,
|
||||
loadNavbar: null,
|
||||
router: false,
|
||||
homepage: 'README.md',
|
||||
coverpage: '',
|
||||
basePath: '',
|
||||
auto2top: false,
|
||||
name: '',
|
||||
nameLink: window.location.pathname
|
||||
}, window.$docsify)
|
||||
const script = document.currentScript || [].slice.call(document.getElementsByTagName('script')).pop()
|
||||
|
||||
// load configuration for script attribute
|
||||
if (script) {
|
||||
for (const prop in DEFAULT_OPTS) {
|
||||
DEFAULT_OPTS[prop] = script.getAttribute('data-' + prop) || DEFAULT_OPTS[prop]
|
||||
for (const prop in OPTIONS) {
|
||||
const val = script.getAttribute('data-' + camel2kebab(prop))
|
||||
OPTIONS[prop] = isNil(val) ? OPTIONS[prop] : (val || true)
|
||||
}
|
||||
if (OPTIONS.loadSidebar === true) OPTIONS.loadSidebar = '_sidebar.md'
|
||||
if (OPTIONS.loadNavbar === true) OPTIONS.loadNavbar = '_navbar.md'
|
||||
if (OPTIONS.coverpage === true) OPTIONS.coverpage = '_coverpage.md'
|
||||
if (OPTIONS.repo === true) OPTIONS.repo = ''
|
||||
if (OPTIONS.name === true) OPTIONS.name = ''
|
||||
if (OPTIONS.sidebar) OPTIONS.sidebar = window[OPTIONS.sidebar]
|
||||
}
|
||||
|
||||
class Docsify {
|
||||
constructor (opts) {
|
||||
Docsify.installed = true
|
||||
// load options
|
||||
render.init(OPTIONS)
|
||||
|
||||
this.opts = Object.assign({}, opts, DEFAULT_OPTS)
|
||||
let cacheRoute = null
|
||||
let cacheXhr = null
|
||||
|
||||
this.replace = true
|
||||
this.dom = document.querySelector(this.opts.el)
|
||||
if (!this.dom) {
|
||||
this.dom = document.body
|
||||
this.replace = false
|
||||
const mainRender = function (cb) {
|
||||
const route = OPTIONS.basePath + getRoute()
|
||||
if (cacheRoute === route) return cb()
|
||||
|
||||
let basePath = cacheRoute = route
|
||||
|
||||
if (!/\//.test(basePath)) {
|
||||
basePath = ''
|
||||
} else if (basePath && !/\/$/.test(basePath)) {
|
||||
basePath = basePath.match(/(\S*\/)[^\/]+$/)[1]
|
||||
}
|
||||
|
||||
let page
|
||||
if (!route) {
|
||||
page = OPTIONS.homepage || 'README.md'
|
||||
} else if (/\/$/.test(route)) {
|
||||
page = `${route}README.md`
|
||||
} else {
|
||||
page = `${route}.md`
|
||||
}
|
||||
|
||||
// Render Cover page
|
||||
if (OPTIONS.coverpage && page === OPTIONS.homepage) {
|
||||
load(OPTIONS.coverpage).then(render.renderCover)
|
||||
}
|
||||
|
||||
cacheXhr && cacheXhr.abort && cacheXhr.abort()
|
||||
// Render markdown file
|
||||
cacheXhr = load(page, 'GET', render.renderLoading)
|
||||
cacheXhr.then(result => {
|
||||
render.renderArticle(result)
|
||||
// clear cover
|
||||
if (OPTIONS.coverpage && page !== OPTIONS.homepage) render.renderCover()
|
||||
// render sidebar
|
||||
if (OPTIONS.loadSidebar) {
|
||||
const renderSidebar = result => { render.renderSidebar(result); cb() }
|
||||
|
||||
load(basePath + OPTIONS.loadSidebar).then(renderSidebar,
|
||||
_ => load(OPTIONS.loadSidebar).then(renderSidebar))
|
||||
} else {
|
||||
cb()
|
||||
}
|
||||
this.loc = document.location.pathname
|
||||
if (/\/$/.test(this.loc)) this.loc += 'README'
|
||||
this.load()
|
||||
}, _ => render.renderArticle(null))
|
||||
|
||||
const nav = document.querySelector('nav')
|
||||
if (nav) this.activeNav(nav)
|
||||
}
|
||||
|
||||
load () {
|
||||
ajax(`${this.loc}.md`).then(res => {
|
||||
const target = res.target
|
||||
if (target.status >= 400) {
|
||||
this.render('not found')
|
||||
} else {
|
||||
this.render(res.target.response)
|
||||
bindEvent()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
render (content) {
|
||||
this.dom[this.replace ? 'outerHTML' : 'innerHTML'] = render(content, this.opts)
|
||||
}
|
||||
|
||||
activeNav (elm) {
|
||||
const host = document.location.origin + document.location.pathname
|
||||
|
||||
;[].slice.call(elm.querySelectorAll('a')).forEach(node => {
|
||||
if (node.href === host) {
|
||||
node.setAttribute('class', 'active')
|
||||
}
|
||||
})
|
||||
// Render navbar
|
||||
if (OPTIONS.loadNavbar) {
|
||||
load(basePath + OPTIONS.loadNavbar).then(render.renderNavbar,
|
||||
_ => load(OPTIONS.loadNavbar).then(render.renderNavbar))
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('load', () => {
|
||||
if (Docsify.installed) return
|
||||
new Docsify()
|
||||
})
|
||||
const Docsify = function () {
|
||||
const dom = document.querySelector(OPTIONS.el) || document.body
|
||||
const replace = dom !== document.body
|
||||
const main = function () {
|
||||
mainRender(_ => {
|
||||
scrollIntoView()
|
||||
activeLink('nav')
|
||||
})
|
||||
}
|
||||
|
||||
export default Docsify
|
||||
// Render app
|
||||
render.renderApp(dom, replace)
|
||||
main()
|
||||
if (OPTIONS.router) {
|
||||
if (!/^#\//.test(window.location.hash)) window.location.hash = '#/'
|
||||
window.addEventListener('hashchange', main)
|
||||
}
|
||||
}
|
||||
|
||||
export default Docsify()
|
||||
|
||||
+211
-35
@@ -1,51 +1,227 @@
|
||||
import marked from 'marked'
|
||||
import Prism from 'prismjs'
|
||||
import genToc from './gen-toc'
|
||||
import * as tpl from './tpl'
|
||||
import * as event from './event'
|
||||
import { genTree, getRoute, isMobile, slugify, merge } from './util'
|
||||
|
||||
const cornerTpl = `
|
||||
<a href="{{repo}}" class="github-corner" aria-label="View source on Github">
|
||||
<svg viewBox="0 0 250 250" aria-hidden="true">
|
||||
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
|
||||
<path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
|
||||
<path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path>
|
||||
</svg>
|
||||
</a>
|
||||
`
|
||||
const toc = []
|
||||
const renderer = new marked.Renderer()
|
||||
let OPTIONS = {}
|
||||
let markdown = marked
|
||||
let toc = []
|
||||
const CACHE = {}
|
||||
|
||||
const renderTo = function (dom, content) {
|
||||
dom = typeof dom === 'object' ? dom : document.querySelector(dom)
|
||||
dom.innerHTML = content
|
||||
slugify.clear()
|
||||
|
||||
return dom
|
||||
}
|
||||
|
||||
/**
|
||||
* render anchor tag
|
||||
* @link https://github.com/chjj/marked#overriding-renderer-methods
|
||||
* init render
|
||||
* @param {Object} options
|
||||
*/
|
||||
renderer.heading = function (text, level) {
|
||||
const slug = text.toLowerCase().replace(/[\s\n\t]+/g, '-')
|
||||
export function init (options) {
|
||||
OPTIONS = options
|
||||
|
||||
toc.push({ level, slug, title: text })
|
||||
const renderer = new marked.Renderer()
|
||||
/**
|
||||
* render anchor tag
|
||||
* @link https://github.com/chjj/marked#overriding-renderer-methods
|
||||
*/
|
||||
renderer.heading = function (text, level) {
|
||||
const slug = slugify(text)
|
||||
let route = ''
|
||||
|
||||
return `<h${level} id="${slug}"><a href="#${slug}" class="anchor"></a>${text}</h${level}>`
|
||||
}
|
||||
if (OPTIONS.router) {
|
||||
route = `#/${getRoute()}`
|
||||
}
|
||||
|
||||
// highlight code
|
||||
renderer.code = function (code, lang) {
|
||||
const hl = Prism.highlight(code, Prism.languages[lang] || Prism.languages.markup)
|
||||
toc.push({ level, slug: `${route}#${encodeURIComponent(slug)}`, title: text })
|
||||
|
||||
return `<pre data-lang="${lang}"><code class="lang-${lang}">${hl}</code></pre>`
|
||||
}
|
||||
marked.setOptions({ renderer })
|
||||
return `<h${level} id="${slug}"><a href="${route}#${slug}" data-id="${slug}" class="anchor"><span>${text}</span></a></h${level}>`
|
||||
}
|
||||
// highlight code
|
||||
renderer.code = function (code, lang = '') {
|
||||
const hl = Prism.highlight(code, Prism.languages[lang] || Prism.languages.markup)
|
||||
|
||||
export default function (content, opts = {}) {
|
||||
let corner = ''
|
||||
return `<pre v-pre data-lang="${lang}"><code class="lang-${lang}">${hl}</code></pre>`
|
||||
}
|
||||
renderer.link = function (href, title, text) {
|
||||
if (OPTIONS.router && !/:/.test(href)) {
|
||||
href = `#/${href}`.replace(/\/\//g, '/')
|
||||
}
|
||||
|
||||
if (opts.repo) {
|
||||
const repo = /\/\//.test(opts.repo) ? opts.repo : ('https://github.com/' + opts.repo)
|
||||
corner = cornerTpl.replace(/{{repo}}/g, repo)
|
||||
return `<a href="${href}" title="${title || ''}">${text}</a>`
|
||||
}
|
||||
renderer.paragraph = function (text) {
|
||||
if (/^!>/.test(text)) {
|
||||
return tpl.helper('tip', text)
|
||||
} else if (/^\?>/.test(text)) {
|
||||
return tpl.helper('warn', text)
|
||||
}
|
||||
return `<p>${text}</p>`
|
||||
}
|
||||
|
||||
const section = `<section class="content">
|
||||
<article class="markdown-section">${marked(content)}</article>
|
||||
</section>`
|
||||
const sidebar = `<aside class="sidebar">${genToc(toc)}</aside>`
|
||||
if (typeof OPTIONS.markdown === 'function') {
|
||||
markdown.setOptions({ renderer })
|
||||
markdown = OPTIONS.markdown.call(this, markdown)
|
||||
} else {
|
||||
markdown.setOptions(merge({ renderer }, OPTIONS.markdown))
|
||||
}
|
||||
}
|
||||
|
||||
return `${corner}<main>${sidebar}${section}</main>`
|
||||
/**
|
||||
* App
|
||||
*/
|
||||
export function renderApp (dom, replace) {
|
||||
const nav = document.querySelector('nav') || document.createElement('nav')
|
||||
|
||||
if (!OPTIONS.repo) nav.classList.add('no-badge')
|
||||
|
||||
dom[replace ? 'outerHTML' : 'innerHTML'] = tpl.corner(OPTIONS.repo) +
|
||||
(OPTIONS.coverpage ? tpl.cover() : '') +
|
||||
tpl.main(OPTIONS.sidebarToggle ? tpl.toggle() : '')
|
||||
document.body.insertBefore(nav, document.body.children[0])
|
||||
|
||||
// bind toggle
|
||||
event.bindToggle('button.sidebar-toggle')
|
||||
// bind sticky effect
|
||||
if (OPTIONS.coverpage) {
|
||||
!isMobile() && window.addEventListener('scroll', event.sticky)
|
||||
} else {
|
||||
document.body.classList.add('sticky')
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* article
|
||||
*/
|
||||
export function renderArticle (content) {
|
||||
renderTo('article', content ? markdown(content) : 'not found')
|
||||
if (!OPTIONS.sidebar && !OPTIONS.loadSidebar) renderSidebar()
|
||||
|
||||
if (content && typeof Vue !== 'undefined') {
|
||||
const script = content.match('<script[^>]*?>([^<]+)</script>')
|
||||
|
||||
script && document.body.querySelector('article script').remove()
|
||||
CACHE.vm && CACHE.vm.$destroy()
|
||||
CACHE.vm = script
|
||||
? new Function(`return ${script[1].trim()}`)()
|
||||
: new Vue({ el: 'main' }) // eslint-disable-line
|
||||
CACHE.vm && CACHE.vm.$nextTick(_ => event.scrollActiveSidebar())
|
||||
}
|
||||
if (OPTIONS.auto2top) setTimeout(() => event.scroll2Top(OPTIONS.auto2top), 0)
|
||||
}
|
||||
|
||||
/**
|
||||
* navbar
|
||||
*/
|
||||
export function renderNavbar (content) {
|
||||
if (CACHE.navbar && CACHE.navbar === content) return
|
||||
CACHE.navbar = content
|
||||
|
||||
if (content) renderTo('nav', markdown(content))
|
||||
event.activeLink('nav')
|
||||
}
|
||||
|
||||
/**
|
||||
* sidebar
|
||||
*/
|
||||
export function renderSidebar (content) {
|
||||
let html
|
||||
|
||||
if (content) {
|
||||
html = markdown(content)
|
||||
// find url tag
|
||||
html = html.match(/<ul[^>]*>([\s\S]+)<\/ul>/g)[0]
|
||||
} else if (OPTIONS.sidebar) {
|
||||
html = tpl.tree(OPTIONS.sidebar, '<ul>')
|
||||
} else {
|
||||
html = tpl.tree(genTree(toc, OPTIONS.maxLevel), '<ul>')
|
||||
}
|
||||
|
||||
html = (OPTIONS.name ? `<h1><a href="${OPTIONS.nameLink}">${OPTIONS.name}</a></h1>` : '') + html
|
||||
renderTo('aside.sidebar', html)
|
||||
const target = event.activeLink('aside.sidebar', true)
|
||||
if (target) renderSubSidebar(target)
|
||||
toc = []
|
||||
|
||||
event.scrollActiveSidebar()
|
||||
}
|
||||
|
||||
export function renderSubSidebar (target) {
|
||||
if (!OPTIONS.subMaxLevel) return
|
||||
target.parentNode.innerHTML += tpl.tree(genTree(toc, OPTIONS.subMaxLevel), '<ul>')
|
||||
}
|
||||
|
||||
/**
|
||||
* Cover Page
|
||||
*/
|
||||
export function renderCover (content) {
|
||||
renderCover.dom = renderCover.dom || document.querySelector('section.cover')
|
||||
if (!content) {
|
||||
renderCover.dom.classList.remove('show')
|
||||
return
|
||||
}
|
||||
renderCover.dom.classList.add('show')
|
||||
if (renderCover.rendered) return event.sticky()
|
||||
|
||||
// render cover
|
||||
const cacheToc = toc.slice()
|
||||
let html = markdown(content)
|
||||
const match = html.trim().match('<p><img[^s]+src="(.*?)"[^a]+alt="(.*?)">([^<]*?)</p>$')
|
||||
|
||||
toc = cacheToc.slice()
|
||||
|
||||
// render background
|
||||
if (match) {
|
||||
const coverEl = document.querySelector('section.cover')
|
||||
|
||||
if (match[2] === 'color') {
|
||||
coverEl.style.background = match[1] + (match[3] || '')
|
||||
} else {
|
||||
coverEl.classList.add('has-mask')
|
||||
coverEl.style.backgroundImage = `url(${match[1]})`
|
||||
}
|
||||
html = html.replace(match[0], '')
|
||||
}
|
||||
|
||||
renderTo('.cover-main', html)
|
||||
renderCover.rendered = true
|
||||
|
||||
event.sticky()
|
||||
}
|
||||
|
||||
/**
|
||||
* render loading bar
|
||||
* @return {[type]} [description]
|
||||
*/
|
||||
export function renderLoading ({ loaded, total, step }) {
|
||||
let num
|
||||
|
||||
if (!CACHE.loading) {
|
||||
const div = document.createElement('div')
|
||||
|
||||
div.classList.add('progress')
|
||||
document.body.appendChild(div)
|
||||
CACHE.loading = div
|
||||
}
|
||||
if (step) {
|
||||
num = parseInt(CACHE.loading.style.width, 10) + step
|
||||
num = num > 80 ? 80 : num
|
||||
} else {
|
||||
num = Math.floor(loaded / total * 100)
|
||||
}
|
||||
|
||||
CACHE.loading.style.opacity = 1
|
||||
CACHE.loading.style.width = num >= 95 ? '100%' : num + '%'
|
||||
|
||||
if (num >= 95) {
|
||||
clearTimeout(renderLoading.cacheTimeout)
|
||||
renderLoading.cacheTimeout = setTimeout(_ => {
|
||||
CACHE.loading.style.opacity = 0
|
||||
CACHE.loading.style.width = '0%'
|
||||
}, 200)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,101 @@
|
||||
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 {
|
||||
position: absolute;
|
||||
size: 100%;
|
||||
background-color: $color-bg;
|
||||
opacity: .8;
|
||||
}
|
||||
|
||||
.cover-main {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
margin: -20px 16px 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 1em 0;
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
font-size: 2.5rem;
|
||||
position: relative;
|
||||
margin: .625rem 0 2.5rem;
|
||||
font-weight: 300;
|
||||
color: inherit;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
}
|
||||
|
||||
small {
|
||||
position: absolute;
|
||||
bottom: -.4375rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
blockquote {
|
||||
text-align: center;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
ul {
|
||||
max-width: 500px;
|
||||
list-style-type: none;
|
||||
margin: 1em auto;
|
||||
padding: 0;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.cover-main p:last-child a {
|
||||
border-radius: 2em;
|
||||
border: 1px solid $color-primary;
|
||||
box-sizing: border-box;
|
||||
color: $color-primary;
|
||||
font-size: 1.05em;
|
||||
letter-spacing: 0.1em;
|
||||
padding: 0.75em 2em;
|
||||
text-decoration: none;
|
||||
transition: all 0.15s ease;
|
||||
margin-right: 1em;
|
||||
display: inline-block;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
background-color: $color-primary;
|
||||
color: #fff;
|
||||
|
||||
&:hover {
|
||||
opacity: .8;
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,459 @@
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
-webkit-text-size-adjust: none;
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.progress {
|
||||
background-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;
|
||||
}
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
|
||||
font-size: 15px;
|
||||
letter-spacing: 0;
|
||||
margin: 0;
|
||||
overflow-x: hidden;
|
||||
color: $color-text;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
kbd {
|
||||
display: inline-block;
|
||||
padding: 3px 5px;
|
||||
margin-bottom : 3px;
|
||||
font-size: 12px !important;
|
||||
line-height: 12px;
|
||||
vertical-align: middle;
|
||||
border: solid 1px #ccc;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
/* navbar */
|
||||
nav {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
z-index: 10;
|
||||
margin: 25px 60px 0 0;
|
||||
text-align: right;
|
||||
|
||||
&.no-badge {
|
||||
margin-right: 25px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
ul, li {
|
||||
list-style: none;
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
margin: 0 1em;
|
||||
padding: 5px 0;
|
||||
font-size: 16px;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
transition: color .3s;
|
||||
|
||||
&:hover {
|
||||
color: $color-primary;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: $color-primary;
|
||||
border-bottom: 2px solid $color-primary;
|
||||
}
|
||||
}
|
||||
|
||||
/* navbar dropdown */
|
||||
li {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
|
||||
ul {
|
||||
border-radius: 2px;
|
||||
background-color: rgba($color-bg, .6);
|
||||
border: 1px solid $color-primary;
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
top: 26px;
|
||||
transform-origin: 100% 0%;
|
||||
transform: scale(1, 0);
|
||||
transition: opacity .4s ease-out, transform .2s ease;
|
||||
transition-delay: .3s;
|
||||
|
||||
li {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
padding: 4px 10px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
&.active {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover ul {
|
||||
opacity: 1;
|
||||
transform: scale(1, 1);
|
||||
transition: opacity .4s ease, transform .2s ease-out;
|
||||
transition-delay: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* github corner */
|
||||
.github-corner {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
text-decoration: none;
|
||||
border-bottom: 0;
|
||||
|
||||
&:hover .octo-arm {
|
||||
animation:octocat-wave 560ms ease-in-out;
|
||||
}
|
||||
|
||||
svg {
|
||||
color: $color-bg;
|
||||
height: 80px;
|
||||
width: 80px;
|
||||
fill: $color-primary;
|
||||
}
|
||||
}
|
||||
|
||||
/* main */
|
||||
main {
|
||||
display: block;
|
||||
size: 100vw 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.anchor {
|
||||
text-decoration: none;
|
||||
transition: all .3s;
|
||||
display: inline-block;
|
||||
|
||||
span {
|
||||
color: $color-text;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
/* sidebar */
|
||||
.sidebar {
|
||||
overflow-y: auto;
|
||||
padding: 40px 0;
|
||||
position: absolute 0 * 0 0;
|
||||
transition: transform 250ms ease-out;
|
||||
width: $sidebar-width;
|
||||
z-index: 20;
|
||||
margin-bottom: 40px;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: inherit;
|
||||
left: calc($sidebar-width - 1px);
|
||||
top: 0;
|
||||
height: 100vh;
|
||||
border-right: 1px solid rgba(0, 0, 0, .07);
|
||||
}
|
||||
|
||||
> h1 {
|
||||
text-align: center;
|
||||
margin: 0 auto 1em;
|
||||
font-size: 1.5em;
|
||||
font-weight: 300;
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
ul, ul li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
ul li a {
|
||||
display: block;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
ul li ul {
|
||||
padding-left: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
/* sidebar toggle */
|
||||
.sidebar-toggle {
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
outline: none;
|
||||
position: absolute * * 0 0;
|
||||
text-align: center;
|
||||
transition: opacity .3s;
|
||||
width: 30px;
|
||||
z-index: 30;
|
||||
outline: none;
|
||||
width: calc($sidebar-width - 16px);
|
||||
padding: 10px;
|
||||
background-color: rgba($color-bg, .8);
|
||||
|
||||
.sidebar-toggle-button:hover {
|
||||
opacity: .4;
|
||||
}
|
||||
|
||||
span {
|
||||
background-color: $color-primary;
|
||||
display: block;
|
||||
size: 16px 2px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
body.sticky {
|
||||
.sidebar, .sidebar-toggle {
|
||||
position: fixed;
|
||||
}
|
||||
}
|
||||
|
||||
/* main content */
|
||||
.content {
|
||||
position: absolute 0 0 0 $sidebar-width;
|
||||
padding-top: 20px;
|
||||
transition: left 250ms ease;
|
||||
}
|
||||
|
||||
/* markdown content found on pages */
|
||||
.markdown-section {
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
max-width: 800px;
|
||||
padding: 20px 15px 40px 15px;
|
||||
|
||||
> * {
|
||||
box-sizing: border-box;
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
>:first-child {
|
||||
margin-top: 0!important;
|
||||
}
|
||||
}
|
||||
|
||||
.markdown-section hr {
|
||||
border: none;
|
||||
margin: 2em 0;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.markdown-section table {
|
||||
display: block;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
border-spacing: 0;
|
||||
border-collapse: collapse;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.markdown-section th {
|
||||
font-weight: bold;
|
||||
padding: 6px 13px;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.markdown-section td {
|
||||
padding: 6px 13px;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.markdown-section tr {
|
||||
border-top: 1px solid #ccc;
|
||||
&:nth-child(2n) {
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
}
|
||||
|
||||
.markdown-section p.tip {
|
||||
padding: 12px 24px 12px 30px;
|
||||
margin: 2em 0;
|
||||
border-left: 4px solid #f66;
|
||||
background-color: #f8f8f8;
|
||||
position: relative;
|
||||
border-bottom-right-radius: 2px;
|
||||
border-top-right-radius: 2px;
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
top: 14px;
|
||||
left: -12px;
|
||||
background-color: #f66;
|
||||
color: $color-bg;
|
||||
content: "!";
|
||||
size: 20px;
|
||||
border-radius: 100%;
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
font-weight: bold;
|
||||
font-family: 'Dosis', 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
code {
|
||||
background-color: #efefef;
|
||||
}
|
||||
|
||||
em {
|
||||
color: $color-text;
|
||||
}
|
||||
}
|
||||
|
||||
.markdown-section p.warn {
|
||||
padding: 1em;
|
||||
background: rgba($color-primary, 0.1);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
body.close {
|
||||
.sidebar {
|
||||
transform: translateX(-$sidebar-width);
|
||||
}
|
||||
|
||||
.sidebar-toggle {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.content {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.github-corner, .sidebar-toggle, .sidebar {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
margin-bottom: 0;
|
||||
border-right: 1px solid rgba(0, 0, 0, .07);
|
||||
|
||||
&::after {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
|
||||
nav {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
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;
|
||||
transition: transform 250ms ease;
|
||||
}
|
||||
|
||||
nav, .github-corner {
|
||||
transition: transform 250ms ease-out;
|
||||
}
|
||||
|
||||
.sidebar-toggle {
|
||||
width: auto;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
body.close {
|
||||
.sidebar {
|
||||
transform: translateX($sidebar-width);
|
||||
}
|
||||
|
||||
.sidebar-toggle {
|
||||
width: calc($sidebar-width - 16px);
|
||||
background-color: rgba($color-bg, .8);
|
||||
transition: 1s background-color;
|
||||
}
|
||||
|
||||
.content {
|
||||
transform: translateX($sidebar-width);
|
||||
}
|
||||
|
||||
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); }
|
||||
}
|
||||
@@ -0,0 +1,240 @@
|
||||
@import url('https://fonts.googleapis.com/css?family=Inconsolata|Inconsolata-Bold');
|
||||
|
||||
$color-primary: #0074D9;
|
||||
$color-bg: #fff;
|
||||
$color-text: #34495e;
|
||||
$sidebar-width: 16em;
|
||||
|
||||
@import "basic/layout";
|
||||
@import "basic/coverpage";
|
||||
|
||||
/* sidebar */
|
||||
.sidebar {
|
||||
color: #364149;
|
||||
background-color: $color-bg;
|
||||
|
||||
a {
|
||||
color: #666;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
padding: 0.2em 0 0.2em 1em;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
ul li ul {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
li.active {
|
||||
background-color: #eee;
|
||||
|
||||
a {
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.markdown-section h1,
|
||||
.markdown-section h2,
|
||||
.markdown-section h3,
|
||||
.markdown-section h4,
|
||||
.markdown-section strong {
|
||||
font-weight: 400;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.markdown-section a {
|
||||
color: $color-primary;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.markdown-section p,
|
||||
.markdown-section ul,
|
||||
.markdown-section ol {
|
||||
word-spacing: 0.05em;
|
||||
line-height: 1.6em;
|
||||
margin: 0 0 1em 0;
|
||||
}
|
||||
|
||||
.markdown-section h1 {
|
||||
margin: 0 0 1em;
|
||||
font-size: 2em;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.markdown-section h2 {
|
||||
padding: 1rem 0 0 0;
|
||||
margin: 0 0 1rem 0;
|
||||
font-size: 1.8em;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.markdown-section h3 {
|
||||
margin: 52px 0 1.2em;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
|
||||
.markdown-section h4 {
|
||||
font-size: 1.25em;
|
||||
}
|
||||
|
||||
.markdown-section h5 {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.markdown-section h6 {
|
||||
font-size: 1em;
|
||||
color: #777;
|
||||
}
|
||||
|
||||
.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.5em;
|
||||
}
|
||||
|
||||
.markdown-section li {
|
||||
margin: 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.markdown-section blockquote {
|
||||
color: #858585;
|
||||
border-left: 4px solid $color-primary;
|
||||
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;
|
||||
padding: 0.2em 0.4em;
|
||||
border-radius: 3px;
|
||||
white-space: pre;
|
||||
font-family: Inconsolata;
|
||||
}
|
||||
|
||||
.markdown-section pre {
|
||||
background-color: #f9f9f9;
|
||||
border-left: 2px solid #eee;
|
||||
padding: 8px;
|
||||
margin: 0 0 1em 0;
|
||||
font-family: Inconsolata;
|
||||
padding: 0 10px 12px 0;
|
||||
font-size: 16px;
|
||||
overflow: auto;
|
||||
word-wrap: normal;
|
||||
}
|
||||
|
||||
/* code highlight */
|
||||
.token.comment,
|
||||
.token.prolog,
|
||||
.token.doctype,
|
||||
.token.cdata {
|
||||
color: #93a1a1; /* base1 */
|
||||
}
|
||||
|
||||
.token.punctuation {
|
||||
color: #586e75; /* base01 */
|
||||
}
|
||||
|
||||
.namespace {
|
||||
opacity: .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 {
|
||||
display: block;
|
||||
font-family: Inconsolata;
|
||||
overflow: inherit;
|
||||
max-width: inherit;
|
||||
position: relative;
|
||||
background-color: #f8f8f8;
|
||||
padding: 20px 0.8em 20px;
|
||||
line-height: 1.1em;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.markdown-section code::after, .markdown-section code::before {
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
code .token {
|
||||
min-height: 1.5em;
|
||||
-webkit-font-smoothing: initial;
|
||||
-moz-osx-font-smoothing: initial;
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
$color-primary: #000;
|
||||
$color-bg: #fff;
|
||||
$color-text: #000;
|
||||
$sidebar-width: 300px;
|
||||
@import "basic/layout";
|
||||
@@ -1,187 +1,49 @@
|
||||
@import url('https://fonts.googleapis.com/css?family=Roboto+Mono|Source+Sans+Pro:300,400,600');
|
||||
|
||||
* {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
-webkit-text-size-adjust: none;
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
$color-primary: #42b983;
|
||||
$color-bg: #fff;
|
||||
$color-text: #34495e;
|
||||
$sidebar-width: 300px;
|
||||
|
||||
/* navbar */
|
||||
nav {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
z-index: 10;
|
||||
margin: 25px 60px 0 0;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
nav a {
|
||||
margin: 0 1em;
|
||||
padding: 5px 0;
|
||||
font-size: 16px;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
transition: color .3s;
|
||||
}
|
||||
|
||||
nav a:hover {
|
||||
color: #42b983;
|
||||
}
|
||||
|
||||
nav a.active {
|
||||
color: #42b983;
|
||||
border-bottom: 2px solid #42b983;
|
||||
}
|
||||
|
||||
/* github corner */
|
||||
.github-corner {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.github-corner svg {
|
||||
color: #fff;
|
||||
fill: #42b983;
|
||||
height: 80px;
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
.github-corner:hover .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); }
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
.github-corner:hover .octo-arm {
|
||||
animation: none;
|
||||
}
|
||||
.github-corner .octo-arm {
|
||||
animation: octocat-wave 560ms ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
}
|
||||
@import "basic/layout";
|
||||
@import "basic/coverpage";
|
||||
|
||||
body {
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
background-color: #fff;
|
||||
color: #34495e;
|
||||
font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
|
||||
font-size: 15px;
|
||||
letter-spacing: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* main */
|
||||
main {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
background-color: $color-bg;
|
||||
}
|
||||
|
||||
/* sidebar */
|
||||
.sidebar {
|
||||
background-color: #fff;
|
||||
border-right: 1px solid rgba(0,0,0,.07);
|
||||
bottom: 0;
|
||||
color: #364149;
|
||||
overflow-y: auto;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 300px;
|
||||
z-index: 1;
|
||||
padding-top: 40px;
|
||||
}
|
||||
background-color: $color-bg;
|
||||
|
||||
.sidebar ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.sidebar ul, .sidebar ul li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.sidebar ul li a {
|
||||
color: #7f8c8d;
|
||||
display: block;
|
||||
padding: 6px 15px;
|
||||
border-bottom: none;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.sidebar ul li a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.sidebar ul li.active>a {
|
||||
color: #42b983;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.sidebar ul li ul {
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
/* main content */
|
||||
.content {
|
||||
bottom: 0;
|
||||
left: 300px;
|
||||
overflow-y: auto;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
overflow-x: hidden;
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
.sidebar {
|
||||
left: -300px;
|
||||
li {
|
||||
margin: 6px 15px;
|
||||
}
|
||||
|
||||
.content {
|
||||
left: 0;
|
||||
ul li a {
|
||||
color: #7f8c8d;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
ul li ul {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
ul li.active>a {
|
||||
color: $color-primary;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
/* markdown content found on pages */
|
||||
.markdown-section {
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
max-width: 800px;
|
||||
padding: 20px 15px 40px 15px;
|
||||
}
|
||||
|
||||
.markdown-section * {
|
||||
box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
.markdown-section>:first-child {
|
||||
margin-top: 0!important;
|
||||
}
|
||||
|
||||
.markdown-section h1,
|
||||
.markdown-section h2,
|
||||
.markdown-section h3,
|
||||
@@ -192,34 +54,25 @@ main {
|
||||
}
|
||||
|
||||
.markdown-section a {
|
||||
color: #42b983;
|
||||
color: $color-primary;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.markdown-section p,
|
||||
.markdown-section ul,
|
||||
.markdown-section ol {
|
||||
word-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.markdown-section h1 {
|
||||
margin: 0 0 1em;
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.markdown-section h2 {
|
||||
border-bottom: 1px solid #ddd;
|
||||
font-size: 1.75em;
|
||||
margin: 45px 0 0.8em;
|
||||
padding-bottom: 0.7em;
|
||||
}
|
||||
|
||||
.markdown-section h3 {
|
||||
margin: 52px 0 1.2em;
|
||||
margin: 40px 0 .6em;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
|
||||
.markdown-section h4 {
|
||||
font-size: 1.25em;
|
||||
}
|
||||
@@ -244,6 +97,7 @@ main {
|
||||
.markdown-section ul,
|
||||
.markdown-section ol {
|
||||
line-height: 1.6em;
|
||||
word-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.markdown-section ul,
|
||||
@@ -253,7 +107,7 @@ main {
|
||||
|
||||
.markdown-section blockquote {
|
||||
color: #858585;
|
||||
border-left: 4px solid #42b983;
|
||||
border-left: 4px solid $color-primary;
|
||||
margin: 2em 0;
|
||||
padding-left: 20px;
|
||||
}
|
||||
@@ -289,8 +143,10 @@ main {
|
||||
font-family: 'Roboto Mono', Monaco, courier, monospace;
|
||||
line-height: 1.5em;
|
||||
margin: 1.2em 0;
|
||||
padding: 1.2em 1.4em;
|
||||
padding: 0 1.4em;
|
||||
position: relative;
|
||||
overflow: auto;
|
||||
word-wrap: normal;
|
||||
}
|
||||
|
||||
/* code highlight */
|
||||
@@ -323,7 +179,7 @@ main {
|
||||
}
|
||||
|
||||
.token.string {
|
||||
color: #42b983;
|
||||
color: $color-primary;
|
||||
}
|
||||
|
||||
.token.selector {
|
||||
@@ -345,7 +201,7 @@ main {
|
||||
.token.control,
|
||||
.token.directive,
|
||||
.token.unit {
|
||||
color: #42b983;
|
||||
color: $color-primary;
|
||||
}
|
||||
|
||||
.token.keyword {
|
||||
@@ -400,8 +256,10 @@ main {
|
||||
font-size: 0.8em;
|
||||
line-height: inherit;
|
||||
margin: 0 2px;
|
||||
padding: 3px 5px;
|
||||
overflow: inherit;
|
||||
padding: 2.2em 5px;
|
||||
white-space: inherit;
|
||||
max-width: inherit;
|
||||
}
|
||||
|
||||
.markdown-section code::after, .markdown-section code::before {
|
||||
@@ -414,19 +272,10 @@ code .token {
|
||||
-moz-osx-font-smoothing: initial;
|
||||
}
|
||||
|
||||
pre code {
|
||||
overflow-x: auto;
|
||||
padding: 0;
|
||||
background-color: #f8f8f8;
|
||||
padding: 0.8em 0.8em 0.4em;
|
||||
line-height: 1.1em;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
pre::after {
|
||||
color: #ccc;
|
||||
content: attr(data-lang);
|
||||
font-size: 0.75em;
|
||||
font-size: 0.6em;
|
||||
font-weight: 600;
|
||||
height: 15px;
|
||||
line-height: 15px;
|
||||
@@ -436,19 +285,3 @@ pre::after {
|
||||
text-align: right;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.content img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.content span.light {
|
||||
color: #7f8c8d;
|
||||
}
|
||||
|
||||
.content span.info {
|
||||
display: inline-block;
|
||||
font-size: 0.85em;
|
||||
margin-left: 20px;
|
||||
vertical-align: middle;
|
||||
width: 280px;
|
||||
}
|
||||
+77
@@ -0,0 +1,77 @@
|
||||
import { isMobile } from './util'
|
||||
/**
|
||||
* Render github corner
|
||||
* @param {Object} data
|
||||
* @return {String}
|
||||
*/
|
||||
export function corner (data) {
|
||||
if (!data) return ''
|
||||
if (!/\/\//.test(data)) data = 'https://github.com/' + data
|
||||
data = data.replace(/^git\+/, '')
|
||||
|
||||
return `
|
||||
<a href="${data}" class="github-corner" aria-label="View source on Github">
|
||||
<svg viewBox="0 0 250 250" aria-hidden="true">
|
||||
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
|
||||
<path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
|
||||
<path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path>
|
||||
</svg>
|
||||
</a>`
|
||||
}
|
||||
|
||||
/**
|
||||
* Render main content
|
||||
*/
|
||||
export function main (tpl) {
|
||||
const aside = `${tpl}<aside class="sidebar"></aside>`
|
||||
|
||||
return (isMobile() ? `${aside}<main>` : `<main>${aside}`) +
|
||||
`<section class="content">
|
||||
<article class="markdown-section"></article>
|
||||
</section>
|
||||
</main>`
|
||||
}
|
||||
|
||||
/**
|
||||
* Cover Page
|
||||
*/
|
||||
export function cover () {
|
||||
const SL = ', 100%, 85%'
|
||||
const bgc = `linear-gradient(to left bottom, hsl(${Math.floor(Math.random() * 255) + SL}) 0%, hsl(${Math.floor(Math.random() * 255) + SL}) 100%)`
|
||||
|
||||
return `<section class="cover" style="background: ${bgc}">
|
||||
<div class="cover-main"></div>
|
||||
<div class="mask"></div>
|
||||
</section>`
|
||||
}
|
||||
|
||||
export function toggle () {
|
||||
return `<button class="sidebar-toggle">
|
||||
<div class="sidebar-toggle-button">
|
||||
<span></span><span></span><span></span>
|
||||
</div>
|
||||
</button>`
|
||||
}
|
||||
|
||||
/**
|
||||
* Render tree
|
||||
* @param {Array} tree
|
||||
* @param {String} tpl
|
||||
* @return {String}
|
||||
*/
|
||||
export function tree (toc, tpl = '') {
|
||||
if (!toc || !toc.length) return ''
|
||||
|
||||
toc.forEach(node => {
|
||||
tpl += `<li><a class="section-link" href="${node.slug}">${node.title}</a></li>`
|
||||
if (node.children) {
|
||||
tpl += `<li><ul class="children">${tree(node.children)}</li></ul>`
|
||||
}
|
||||
})
|
||||
|
||||
return tpl
|
||||
}
|
||||
|
||||
export function helper (className, content) {
|
||||
return `<p class="${className}">${content.slice(5).trim()}</p>`
|
||||
}
|
||||
+159
@@ -0,0 +1,159 @@
|
||||
/**
|
||||
* Simple ajax
|
||||
* @param {String} url
|
||||
* @param {String} [method=GET]
|
||||
* @param {Function} [loading] handle loading
|
||||
* @return {Promise}
|
||||
*/
|
||||
export function load (url, method = 'GET', loading) {
|
||||
const xhr = new XMLHttpRequest()
|
||||
|
||||
xhr.open(method, url)
|
||||
xhr.send()
|
||||
|
||||
return {
|
||||
then: function (success, error = function () {}) {
|
||||
if (loading) {
|
||||
const id = setInterval(_ =>
|
||||
loading({ step: Math.floor(Math.random() * 5 + 1) }),
|
||||
500)
|
||||
xhr.addEventListener('progress', loading)
|
||||
xhr.addEventListener('loadend', evt => {
|
||||
loading(evt)
|
||||
clearInterval(id)
|
||||
})
|
||||
}
|
||||
xhr.addEventListener('error', error)
|
||||
xhr.addEventListener('load', ({ target }) => {
|
||||
target.status >= 400 ? error(target) : success(target.response)
|
||||
})
|
||||
},
|
||||
abort: () => xhr.readyState !== 4 && xhr.abort()
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 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) {
|
||||
const headlines = []
|
||||
const last = {}
|
||||
|
||||
toc.forEach(headline => {
|
||||
const level = headline.level || 1
|
||||
const len = level - 1
|
||||
|
||||
if (level > maxLevel) return
|
||||
if (last[len]) {
|
||||
last[len].children = last[len].children || []
|
||||
last[len].children.push(headline)
|
||||
} else {
|
||||
headlines.push(headline)
|
||||
}
|
||||
last[level] = headline
|
||||
})
|
||||
|
||||
return headlines
|
||||
}
|
||||
|
||||
/**
|
||||
* camel to kebab
|
||||
* @link https://github.com/bokuweb/kebab2camel/blob/master/index.js
|
||||
* @param {String} str
|
||||
* @return {String}
|
||||
*/
|
||||
export function camel2kebab (str) {
|
||||
return str.replace(/([A-Z])/g, m => '-' + m.toLowerCase())
|
||||
}
|
||||
|
||||
/**
|
||||
* is nil
|
||||
* @param {Object} object
|
||||
* @return {Boolean}
|
||||
*/
|
||||
export function isNil (o) {
|
||||
return o === null || o === undefined
|
||||
}
|
||||
|
||||
let cacheRoute = null
|
||||
let cacheHash = null
|
||||
|
||||
/**
|
||||
* hash route
|
||||
*/
|
||||
export function getRoute () {
|
||||
const loc = window.location
|
||||
if (cacheHash === loc.hash && !isNil(cacheRoute)) return cacheRoute
|
||||
|
||||
let route = loc.hash.match(/^#\/([^#]+)/)
|
||||
|
||||
if (route && route.length === 2) {
|
||||
route = route[1]
|
||||
} else {
|
||||
route = /^#\//.test(loc.hash) ? '' : loc.pathname
|
||||
}
|
||||
cacheRoute = route
|
||||
cacheHash = loc.hash
|
||||
|
||||
return route
|
||||
}
|
||||
|
||||
export function isMobile () {
|
||||
return document.body.clientWidth <= 600
|
||||
}
|
||||
|
||||
export function slugify (string) {
|
||||
const re = /[\u2000-\u206F\u2E00-\u2E7F\\'!"#$%&()*+,.\/:;<=>?@\[\]^`{|}~]/g
|
||||
const maintainCase = false
|
||||
const replacement = '-'
|
||||
|
||||
slugify.occurrences = slugify.occurrences || {}
|
||||
|
||||
if (typeof string !== 'string') return ''
|
||||
if (!maintainCase) string = string.toLowerCase()
|
||||
|
||||
let slug = string.trim()
|
||||
.replace(/<[^>\d]+>/g, '')
|
||||
.replace(re, '')
|
||||
.replace(/\s/g, replacement)
|
||||
.replace(/-+/g, replacement)
|
||||
.replace(/^(\d)/, '_$1')
|
||||
let occurrences = slugify.occurrences[slug]
|
||||
|
||||
if (slugify.occurrences.hasOwnProperty(slug)) {
|
||||
occurrences++
|
||||
} else {
|
||||
occurrences = 0
|
||||
}
|
||||
|
||||
slugify.occurrences[slug] = occurrences
|
||||
|
||||
if (occurrences) {
|
||||
slug = slug + '-' + occurrences
|
||||
}
|
||||
|
||||
return slug
|
||||
}
|
||||
|
||||
slugify.clear = function () {
|
||||
slugify.occurrences = {}
|
||||
}
|
||||
|
||||
const hasOwnProperty = Object.prototype.hasOwnProperty
|
||||
export const merge = Object.assign || function (to) {
|
||||
for (let i = 1; i < arguments.length; i++) {
|
||||
const from = Object(arguments[i])
|
||||
|
||||
for (const key in from) {
|
||||
if (hasOwnProperty.call(from, key)) {
|
||||
to[key] = from[key]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return to
|
||||
}
|
||||
@@ -1,405 +0,0 @@
|
||||
@import url('https://fonts.googleapis.com/css?family=Inconsolata|Inconsolata-Bold');
|
||||
|
||||
* {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
-webkit-text-size-adjust: none;
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
/* navbar */
|
||||
nav {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
z-index: 10;
|
||||
margin: 25px 60px 0 0;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
nav a {
|
||||
margin: 0 1em;
|
||||
padding: 5px 0;
|
||||
font-size: 16px;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
transition: color .3s;
|
||||
}
|
||||
|
||||
nav a:hover {
|
||||
color: #0074D9;
|
||||
}
|
||||
|
||||
nav a.active {
|
||||
color: #0074D9;
|
||||
border-bottom: 2px solid #0074D9;
|
||||
}
|
||||
|
||||
/* github corner */
|
||||
.github-corner {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.github-corner svg {
|
||||
color: #fff;
|
||||
fill: #0074D9;
|
||||
height: 80px;
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
.github-corner:hover .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); }
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
.github-corner:hover .octo-arm {
|
||||
animation: none;
|
||||
}
|
||||
.github-corner .octo-arm {
|
||||
animation: octocat-wave 560ms ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
background-color: #fff;
|
||||
color: #34495e;
|
||||
font-family: 'Source Sans Pro', arial, sans-serif;
|
||||
font-weight: 400px;
|
||||
font-size: 15px;
|
||||
letter-spacing: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* main */
|
||||
main {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* sidebar */
|
||||
.sidebar {
|
||||
background-color: #fff;
|
||||
border-right: 1px solid rgba(0,0,0,.07);
|
||||
bottom: 0;
|
||||
color: #364149;
|
||||
overflow-y: auto;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 14em;
|
||||
z-index: 1;
|
||||
padding-top: 40px;
|
||||
}
|
||||
|
||||
.sidebar ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.sidebar ul, .sidebar ul li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.sidebar a {
|
||||
color: #666;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.sidebar li {
|
||||
list-style: none;
|
||||
padding: 0.2em 0.2em 0.2em 1em;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.sidebar .active {
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
.sidebar .active a {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* main content */
|
||||
.content {
|
||||
bottom: 0;
|
||||
left: 14em;
|
||||
overflow-y: auto;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
overflow-x: hidden;
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
.sidebar {
|
||||
left: -14em;
|
||||
}
|
||||
|
||||
.content {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* markdown content found on pages */
|
||||
.markdown-section {
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
max-width: 64em;
|
||||
padding: 20px 15px 40px 15px;
|
||||
}
|
||||
|
||||
.markdown-section * {
|
||||
box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
.markdown-section>:first-child {
|
||||
margin-top: 0!important;
|
||||
}
|
||||
|
||||
.markdown-section h1,
|
||||
.markdown-section h2,
|
||||
.markdown-section h3,
|
||||
.markdown-section h4,
|
||||
.markdown-section strong {
|
||||
font-weight: 400;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.markdown-section a {
|
||||
color: #0074D9;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.markdown-section p,
|
||||
.markdown-section ul,
|
||||
.markdown-section ol {
|
||||
word-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.markdown-section h1 {
|
||||
margin: 0 0 1em;
|
||||
font-size: 2em;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.markdown-section h2 {
|
||||
padding: 1rem 0 0 0;
|
||||
margin: 0 0 1rem 0;
|
||||
font-size: 1.8em;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.markdown-section h3 {
|
||||
margin: 52px 0 1.2em;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
|
||||
.markdown-section h4 {
|
||||
font-size: 1.25em;
|
||||
}
|
||||
|
||||
.markdown-section h5 {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.markdown-section h6 {
|
||||
font-size: 1em;
|
||||
color: #777;
|
||||
}
|
||||
|
||||
.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 {
|
||||
margin: 0 0 1em 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.markdown-section ul,
|
||||
.markdown-section ol {
|
||||
padding-left: 1.5em;
|
||||
}
|
||||
|
||||
.markdown-section li {
|
||||
margin: 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.markdown-section blockquote {
|
||||
color: #858585;
|
||||
border-left: 4px solid #0074D9;
|
||||
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;
|
||||
padding: 0.2em 0.4em;
|
||||
border-radius: 3px;
|
||||
white-space: pre;
|
||||
font-family: Inconsolata;
|
||||
}
|
||||
|
||||
.markdown-section pre {
|
||||
background-color: #f9f9f9;
|
||||
border-left: 2px solid #eee;
|
||||
padding: 8px;
|
||||
margin: 0 0 1em 0;
|
||||
font-family: Inconsolata;
|
||||
padding: 12px 10px 12px 12px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/* code highlight */
|
||||
.token.comment,
|
||||
.token.prolog,
|
||||
.token.doctype,
|
||||
.token.cdata {
|
||||
color: #93a1a1; /* base1 */
|
||||
}
|
||||
|
||||
.token.punctuation {
|
||||
color: #586e75; /* base01 */
|
||||
}
|
||||
|
||||
.namespace {
|
||||
opacity: .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 {
|
||||
display: block;
|
||||
font-family: Inconsolata;
|
||||
line-height: 1.2em;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.markdown-section code::after, .markdown-section code::before {
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
code .token {
|
||||
min-height: 1.5em;
|
||||
-webkit-font-smoothing: initial;
|
||||
-moz-osx-font-smoothing: initial;
|
||||
}
|
||||
|
||||
pre code {
|
||||
overflow-x: auto;
|
||||
position: relative;
|
||||
padding: 0;
|
||||
background-color: #f8f8f8;
|
||||
padding: 0.8em 0.8em 0.4em;
|
||||
line-height: 1.1em;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.content img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.content span.light {
|
||||
color: #7f8c8d;
|
||||
}
|
||||
|
||||
.content span.info {
|
||||
display: inline-block;
|
||||
font-size: 0.85em;
|
||||
margin-left: 20px;
|
||||
vertical-align: middle;
|
||||
width: 280px;
|
||||
}
|
||||
Reference in New Issue
Block a user