From 8210a19dd3b6ef2545c86ce3a0eb8010fba9b0e3 Mon Sep 17 00:00:00 2001 From: "qingwei.li" Date: Sat, 26 Nov 2016 14:09:06 +0800 Subject: [PATCH 0001/1051] Remove plugins --- README.md | 8 +++- build/build.js | 4 -- docs/404.html | 4 +- docs/README.md | 6 +++ docs/lib | 1 + docs/themes | 1 + src/docsify.js | 24 +++++------ src/plugins/nav.js | 10 ----- src/render.js | 34 +++++++++++---- themes/vue.css | 104 +++++++++++++++++++++------------------------ 10 files changed, 102 insertions(+), 94 deletions(-) create mode 120000 docs/lib create mode 120000 docs/themes delete mode 100644 src/plugins/nav.js diff --git a/README.md b/README.md index 57f2d51..cbc5872 100644 --- a/README.md +++ b/README.md @@ -1,12 +1,16 @@ -# docsify [WIP] +# docsify [![Build Status](https://travis-ci.org/QingWei-Li/docsify.svg?branch=master)](https://travis-ci.org/QingWei-Li/docsify) [![npm](https://img.shields.io/npm/v/docsify.svg)](https://www.npmjs.com/package/docsify) >🃏 A magical documentation site generator. +## CLI +[https://github.com/QingWei-Li/docsify-cli](https://github.com/QingWei-Li/docsify-cli) + ## Features - Easy and lightweight -- Custom themes and plugins +- Custom themes +- No build ## Quick start Such as [./docs](https://github.com/QingWei-Li/docsify/tree/master/docs), Create `404.html` and `README.md` into `/docs`. diff --git a/build/build.js b/build/build.js index 51c2ab4..84f974f 100644 --- a/build/build.js +++ b/build/build.js @@ -46,7 +46,3 @@ build({ plugins: [commonjs(), nodeResolve(), uglify()], inline: false }) -build({ - entry: 'plugins/nav.js', - moduleName: 'Docsify.Nav' -}) diff --git a/docs/404.html b/docs/404.html index 1df852a..7ba80b4 100644 --- a/docs/404.html +++ b/docs/404.html @@ -3,10 +3,10 @@ - +
- + diff --git a/docs/README.md b/docs/README.md index 57f2d51..daa4b67 100644 --- a/docs/README.md +++ b/docs/README.md @@ -25,5 +25,11 @@ Such as [./docs](https://github.com/QingWei-Li/docsify/tree/master/docs), Create ``` +```javascript +import Vue from 'vue' + +Vue.use(ElementUI) +``` + ## License MIT diff --git a/docs/lib b/docs/lib new file mode 120000 index 0000000..dc598c5 --- /dev/null +++ b/docs/lib @@ -0,0 +1 @@ +../lib \ No newline at end of file diff --git a/docs/themes b/docs/themes new file mode 120000 index 0000000..de90031 --- /dev/null +++ b/docs/themes @@ -0,0 +1 @@ +../themes \ No newline at end of file diff --git a/src/docsify.js b/src/docsify.js index 5dea446..123cb83 100644 --- a/src/docsify.js +++ b/src/docsify.js @@ -5,7 +5,16 @@ import bindEvent from './bind-event' const DEFAULT_OPTS = { el: '#app', title: document.title, - sep: ' - ' + sep: ' - ', + repo: '' +} + +const script = document.currentScript || [].slice.call(document.getElementsByTagName('script')).pop() + +if (script) { + for (const prop in DEFAULT_OPTS) { + DEFAULT_OPTS[prop] = script.getAttribute('data-' + prop) || DEFAULT_OPTS[prop] + } } class Docsify { @@ -39,17 +48,8 @@ class Docsify { } render (content) { - document.title = this.loc.slice(1) + this.opts.sep + this.opts.title - this.dom[this.replace ? 'outerHTML' : 'innerHTML'] = render(content) - } -} - -Docsify.use = function () { - const plugin = arguments[0] - if (typeof plugin === 'function') { - plugin.call(Docsify) - } else { - throw TypeError('[docsify] Invalid plugin ' + plugin.name) + document.title = this.loc.slice(1) + this.opts.title + this.dom[this.replace ? 'outerHTML' : 'innerHTML'] = render(content, this.opts) } } diff --git a/src/plugins/nav.js b/src/plugins/nav.js deleted file mode 100644 index eecc236..0000000 --- a/src/plugins/nav.js +++ /dev/null @@ -1,10 +0,0 @@ -const Nav = function () { - console.log(this) -} -Nav.name = 'Doscify.Nav' - -if (window.Docsify) { - window.Docsify.use(Nav) -} - -export default Nav diff --git a/src/render.js b/src/render.js index a8db0e9..89cda29 100644 --- a/src/render.js +++ b/src/render.js @@ -2,6 +2,15 @@ import marked from 'marked' import Prism from 'prismjs' import genToc from './gen-toc' +const cornerTpl = ` + + + +` const toc = [] const renderer = new marked.Renderer() @@ -16,18 +25,27 @@ renderer.heading = function (text, level) { return `${text}` } -marked.setOptions({ - renderer, - highlight (code, lang) { - return Prism.highlight(code, Prism.languages[lang] || Prism.languages.markup) - } -}) -export default function (content) { +// highlight code +renderer.code = function (code, lang) { + const hl = Prism.highlight(code, Prism.languages[lang] || Prism.languages.markup) + + return `
${hl}
` +} +marked.setOptions({ renderer }) + +export default function (content, opts = {}) { + let corner = '' + + if (opts.repo) { + const repo = /\/\//.test(opts.repo) ? opts.repo : ('https://github.com/' + opts.repo) + corner = cornerTpl.replace(/{{repo}}/g, repo) + } + const section = `
${marked(content)}
` const sidebar = `` - return `
${sidebar}${section}
` + return `${corner}
${sidebar}${section}
` } diff --git a/themes/vue.css b/themes/vue.css index d8f180e..d897874 100644 --- a/themes/vue.css +++ b/themes/vue.css @@ -1,4 +1,4 @@ -@import url('https://fonts.googleapis.com/css?family=Roboto+Mono|Source+Sans+Pro:300,400,600'); +s@import url('https://fonts.googleapis.com/css?family=Roboto+Mono|Source+Sans+Pro:300,400,600'); * { -webkit-box-sizing: border-box; @@ -11,6 +11,43 @@ -webkit-font-smoothing: antialiased; } +/* github corner */ +.github-corner { + display: block; + position: relative; + z-index: 10; +} + +.github-corner svg { + border: 0; + color: #fff; + fill: #42b983; + position: absolute; + right: 0; + top: 0; + 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%; } @@ -97,7 +134,7 @@ main { padding-top: 20px; } -@media screen(max-width: 600px) { +@media screen and (max-width: 600px) { .sidebar { left: -300px; } @@ -226,19 +263,18 @@ main { padding: 3px 5px; white-space: nowrap; font-size: 0.8em; + font-family: 'Roboto Mono', Monaco, courier, monospace; + background-color: #f8f8f8; } .markdown-section pre { - padding: 1.2em 1.4em; - line-height: 1.5em; - margin: 0; -} - -.markdown-section code, .markdown-section pre { font-family: 'Roboto Mono', Monaco, courier, monospace; - -webkit-font-smoothing: initial; -moz-osx-font-smoothing: initial; + -webkit-font-smoothing: initial; background-color: #f8f8f8; + line-height: 1.5em; + margin: 1.2em 0; + padding: 1.2em 1.4em; } /* code highlight */ @@ -337,26 +373,6 @@ main { cursor: help; } -/* overrides color-values for the Line Numbers plugin - * http://prismjs.com/plugins/line-numbers/ - */ -.line-numbers .line-numbers-rows { - border-right-color: #dfe2f1; -} - -.line-numbers-rows > span:before { - color: #979db4; -} - -/* overrides color-values for the Line Highlight plugin - * http://prismjs.com/plugins/line-highlight/ - */ -.line-highlight { - background: rgba(107, 115, 148, 0.2); - background: -webkit-linear-gradient(left, rgba(107, 115, 148, 0.2) 70%, rgba(107, 115, 148, 0)); - background: linear-gradient(to right, rgba(107, 115, 148, 0.2) 70%, rgba(107, 115, 148, 0)); -} - .markdown-section pre>code { -moz-osx-font-smoothing: initial; -webkit-font-smoothing: initial; @@ -372,8 +388,7 @@ main { white-space: inherit; } -.markdown-section code:after, .markdown-section code:before { - content: none; +.markdown-section code::after, .markdown-section code::before { letter-spacing: 0.05em; } @@ -393,11 +408,9 @@ pre code { border-radius: 2px; } -pre code.lang-html:after, -pre code.lang-js:after, -pre code.lang-bash:after, -pre code.lang-css:after { +pre code::after { color: #ccc; + content: attr(data-lang); font-size: 0.75em; font-weight: 600; height: 15px; @@ -409,22 +422,6 @@ pre code.lang-css:after { top: 0; } -pre code.lang-html:after { - content: 'HTML'; -} - -pre code.lang-js:after { - content: 'JS'; -} - -pre code.lang-bash:after { - content: 'Shell'; -} - -pre code.lang-css:after { - content: 'CSS'; -} - .content img { max-width: 100%; } @@ -440,8 +437,3 @@ pre code.lang-css:after { vertical-align: middle; width: 280px; } - -/* these aren't in gitbook at the moment, but leaving them in for future reference */ -img { - border: none; -} From 681a51a52d6083d04da330e1ad74ffde435749a6 Mon Sep 17 00:00:00 2001 From: "qingwei.li" Date: Sat, 26 Nov 2016 14:28:21 +0800 Subject: [PATCH 0002/1051] fix build file --- build/build.js | 22 ++++------------------ docs/404.html | 2 +- package.json | 2 +- 3 files changed, 6 insertions(+), 20 deletions(-) diff --git a/build/build.js b/build/build.js index 84f974f..abbbfb1 100644 --- a/build/build.js +++ b/build/build.js @@ -15,10 +15,6 @@ var build = function (opts) { console.log(dest) bundle.write({ - globals: !opts.inline ? { - marked: 'marked', - prismjs: 'Prism' - } : {}, format: 'umd', moduleName: opts.moduleName || 'Docsify', dest: dest @@ -27,22 +23,12 @@ var build = function (opts) { } build({ - entry: 'docsify.js' + entry: 'docsify.js', + output: 'docsify.js', + plugins: [commonjs(), nodeResolve()] }) build({ entry: 'docsify.js', output: 'docsify.min.js', - plugins: [uglify()] -}) -build({ - entry: 'docsify.js', - output: 'docsify.pack.js', - plugins: [commonjs(), nodeResolve()], - inline: false -}) -build({ - entry: 'docsify.js', - output: 'docsify.pack.min.js', - plugins: [commonjs(), nodeResolve(), uglify()], - inline: false + plugins: [commonjs(), nodeResolve(), uglify()] }) diff --git a/docs/404.html b/docs/404.html index 7ba80b4..b7f8cea 100644 --- a/docs/404.html +++ b/docs/404.html @@ -8,5 +8,5 @@
- + diff --git a/package.json b/package.json index f967c3e..0a5d432 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "docsify", "version": "0.0.5", "description": "A magical documentation generator.", - "main": "lib/docsify.pack.js", + "main": "lib/docsify.js", "files": [ "lib", "src", From 1bf7b23d33010444d5436b045caf67c418f00b12 Mon Sep 17 00:00:00 2001 From: "qingwei.li" Date: Sat, 26 Nov 2016 17:24:32 +0800 Subject: [PATCH 0003/1051] Add chiniese doc --- README.md | 2 +- docs/404.html | 5 +++ docs/README.md | 91 ++++++++++++++++++++++++++++++++++------- docs/zh-cn.md | 100 ++++++++++++++++++++++++++++++++++++++++++++++ src/bind-event.js | 8 ++-- src/docsify.js | 17 +++++++- src/gen-toc.js | 10 +++-- themes/vue.css | 51 ++++++++++++++--------- 8 files changed, 242 insertions(+), 42 deletions(-) create mode 100644 docs/zh-cn.md diff --git a/README.md b/README.md index cbc5872..19815e6 100644 --- a/README.md +++ b/README.md @@ -13,7 +13,7 @@ - No build ## Quick start -Such as [./docs](https://github.com/QingWei-Li/docsify/tree/master/docs), Create `404.html` and `README.md` into `/docs`. +Create `404.html` and `README.md` into `/docs`. 404.html diff --git a/docs/404.html b/docs/404.html index b7f8cea..5834379 100644 --- a/docs/404.html +++ b/docs/404.html @@ -2,10 +2,15 @@ + Docsify +
diff --git a/docs/README.md b/docs/README.md index daa4b67..67f8306 100644 --- a/docs/README.md +++ b/docs/README.md @@ -1,17 +1,23 @@ -# docsify [WIP] -[![Build Status](https://travis-ci.org/QingWei-Li/docsify.svg?branch=master)](https://travis-ci.org/QingWei-Li/docsify) -[![npm](https://img.shields.io/npm/v/docsify.svg)](https://www.npmjs.com/package/docsify) +# docsify ->🃏 A magical documentation site generator. +> A magical documentation site generator. ## Features - Easy and lightweight -- Custom themes and plugins +- Custom themes +- No build -## Quick start -Such as [./docs](https://github.com/QingWei-Li/docsify/tree/master/docs), Create `404.html` and `README.md` into `/docs`. +## Quick Start -404.html +### Create a project +First create a project, then create a `docs` folder +```shell +mkdir my-project && cd my-project +mkdir docs && cd docs +``` + +### Create entry file +Create a `404.html` file ```html @@ -20,16 +26,73 @@ Such as [./docs](https://github.com/QingWei-Li/docsify/tree/master/docs), Create - + +
+ ``` -```javascript -import Vue from 'vue' +Create `README.md` as the main page -Vue.use(ElementUI) +``` +# Title + +## balabala ``` -## License -MIT +### Deploy! +Push and open the **GitHub Pages** feature +![image](https://cloud.githubusercontent.com/assets/7565692/20639058/e65e6d22-b3f3-11e6-9b8b-6309c89826f2.png) + +## CLI + +Easy to setup and preivew a docs. + +### Install +```shell +npm i docsify-cli -g +``` + +### Setup + +Setup a boilerplate docs +```shell +docsify init docs +``` + +### Preview +Preview and serve your docs using +```shell +docsify serve docs +``` + +Read more [docsify-cli](https://github.com/QingWei-Li/docsify-cli) + +## Themes +Currently available `vue.css` and `buble.css` +```html + + +``` + +## More + +### Multiple pages +If you need other pages, directly create the markdown file, such as `guide.md` is `/guide`. + +### Navbar +Code in `404.html` + +```html + +``` + +### GitHub Corner +Modify your `404.html` +```html + +``` diff --git a/docs/zh-cn.md b/docs/zh-cn.md new file mode 100644 index 0000000..143296e --- /dev/null +++ b/docs/zh-cn.md @@ -0,0 +1,100 @@ +# docsify + +> 无需构建快速生成文档页 + +## 特性 +- 无需构建,写完 markdown 直接发布 +- 支持自定义主题 +- 容易使用并且轻量 + +## 快速上手 + +### 创建项目 +新建一个空项目,接着创建一个 `docs` 目录并进入到 docs 目录下 +```shell +mkdir my-project && cd my-project +mkdir docs && cd docs +``` + +### 创建入口文件 +创建一个 `404.html` 文件,内容为 +```html + + + + + + + +
+ + + +``` + +新建 `README.md` 文件,作为主页面 + +``` +# Title + +## balabala +``` + +### 部署! +将项目 `push` 到 GitHub 仓库后到设置页面开启 **GitHub Pages** 功能,选择 `docs/` 选项 +![image](https://cloud.githubusercontent.com/assets/7565692/20639058/e65e6d22-b3f3-11e6-9b8b-6309c89826f2.png) + +## 命令行工具 + +方便快速创建文档目录,会读取项目的 `package.json` 里的选项作为 docsify 的配置,支持本地预览。 + +### 安装 +```shell +npm i docsify-cli -g +``` + +### 初始化文档 + +默认初始化在当前目录,推荐将文档放在 `docs` 目录下 +```shell +docsify init docs +``` + +### 启动本地服务 +启动一个 server 方便预览,打开 http://localhost:3000 +```shell +docsify serve docs +``` + +更多选项参考 [docsify-cli](https://github.com/QingWei-Li/docsify-cli) + +## 主题 +目前提供 vue.css 和 buble.css,直接修改 `404.html` 里的 cdn 地址即可 +```html + + +``` + +## 更多功能 + +### 多页面 +`README.md` 作为主页面,如果需要其他页面,直接在文档目录下创建对应的 `*.md` 文件,例如创建一个 `guide.md` 那么对应的路由就是 `/guide`。 + +### 导航 +导航需要自己写在 `404.html` 文件里,效果参考本文档 + +```html + +``` + +### GitHub Corner +参考本文档的右上角的 GitHub 图标,如果要开启的话,将 `404.html` 里的 script 改成 + +```html + +``` + + diff --git a/src/bind-event.js b/src/bind-event.js index 4dd5219..60ac35c 100644 --- a/src/bind-event.js +++ b/src/bind-event.js @@ -18,12 +18,12 @@ function scrollActiveSidebar () { const node = anchors[i].parentNode const bcr = node.getBoundingClientRect() - if (bcr.top < 150 && bcr.bottom > 150) { - const li = nav[ node.id ] + if (bcr.top < 10 && bcr.bottom > 10) { + const li = nav[node.id] if (li === active) return - if (active) active.classList.remove('active') + if (active) active.setAttribute('class', '') - li.classList.add('active') + li.setAttribute('class', 'active') active = li return diff --git a/src/docsify.js b/src/docsify.js index 123cb83..6e8f60f 100644 --- a/src/docsify.js +++ b/src/docsify.js @@ -33,6 +33,9 @@ class Docsify { this.loc = document.location.pathname if (/\/$/.test(this.loc)) this.loc += 'README' this.load() + + const nav = document.querySelector('nav') + if (nav) this.activeNav(nav) } load () { @@ -48,9 +51,21 @@ class Docsify { } render (content) { - document.title = this.loc.slice(1) + this.opts.title + if (this.loc.slice(1) !== 'README') { + document.title = this.loc.slice(1) + this.opts.title + } 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') + } + }) + } } window.addEventListener('load', () => { diff --git a/src/gen-toc.js b/src/gen-toc.js index d8bfdc1..01a8ed3 100644 --- a/src/gen-toc.js +++ b/src/gen-toc.js @@ -14,8 +14,8 @@ const tocToTree = function (toc) { last[len].children.push(headline) } else { headlines.push(headline) - last[level] = headline } + last[level] = headline }) return headlines @@ -27,13 +27,15 @@ const buildHeadlinesTree = function (tree, tpl = '') { tree.forEach((node) => { tpl += `
  • ${node.title}
  • ` if (node.children) { - tpl += `
    • ${buildHeadlinesTree(node.children)}` + tpl += `
      • ${buildHeadlinesTree(node.children)}
      ` } }) - return tpl + '
    ' + return tpl } export default function (toc) { - return buildHeadlinesTree(tocToTree(toc), '