diff --git a/README.md b/README.md index 57f2d512..cbc58723 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 51c2ab44..84f974f9 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 1df852ae..7ba80b49 100644 --- a/docs/404.html +++ b/docs/404.html @@ -3,10 +3,10 @@ - +
- + diff --git a/docs/README.md b/docs/README.md index 57f2d512..daa4b67f 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 00000000..dc598c56 --- /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 00000000..de900312 --- /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 5dea4465..123cb83a 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 eecc2367..00000000 --- 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 a8db0e9b..89cda29b 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 d8f180e3..d8978748 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; -}