[release] 4.1.8

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 4.1.8(since 4.1.1) / 2017-05-31
+
+  * fix(pure-css):add coverpage style, fixed #165
+  * feat: add edit button demo, close #162
+  * fix some ssr bugs
+
 ## 4.1.0 / 2017-05-30 🎂 to me
 
 

build/build-cover.js

@@ -0,0 +1,11 @@
+var fs = require('fs')
+var read = fs.readFileSync
+var write = fs.writeFileSync
+var version = process.env.VERSION || require('../package.json').version
+
+var file = __dirname + '/../docs/_coverpage.md'
+var cover = read(file, 'utf8').toString()
+
+console.log('Replace version number in cover page...')
+cover = cover.replace(/<small>(\S+)?<\/small>/g, '<small>' + version + '</small>')
+write(file, cover)

build/build-ssr.js

@@ -1,13 +1,16 @@
 var rollup = require('rollup')
 var buble = require('rollup-plugin-buble')
 var async = require('rollup-plugin-async')
-var isProd = process.argv[process.argv.length - 1] !== '--dev'
+var replace = require('rollup-plugin-replace')
 
 rollup
   .rollup({
     entry: 'packages/docsify-server-renderer/index.js',
     plugins: [
       async(),
+      replace({
+        __VERSION__: process.env.VERSION || require('../package.json').version
+      }),
       buble({
         transforms: {
           generator: false

build/build.js

@@ -4,7 +4,9 @@ var commonjs = require('rollup-plugin-commonjs')
 var nodeResolve = require('rollup-plugin-node-resolve')
 var string = require('rollup-plugin-string')
 var uglify = require('rollup-plugin-uglify')
+var replace = require('rollup-plugin-replace')
 var isProd = process.argv[process.argv.length - 1] !== '--dev'
+var version = process.env.VERSION || require('../package.json').version
 
 var build = function (opts) {
   rollup
@@ -14,7 +16,10 @@ var build = function (opts) {
         string({ include: '**/*.css' }),
         buble(),
         commonjs(),
-        nodeResolve()
+        nodeResolve(),
+        replace({
+          __VERSION__: version
+        })
       ])
     })
     .then(function (bundle) {

dev.html

@@ -28,15 +28,23 @@
     executeScript: true,
     loadNavbar: true,
     loadSidebar: true,
+    coverpage: true,
     name: 'docsify',
     subMaxLevel: 2,
     mergeNavbar: true,
     formatUpdated: '{MM}/{DD} {HH}:{mm}',
     routerMode: 'history',
     plugins: [
-      function(hook) {
+      function(hook, vm) {
         hook.beforeEach(function (html) {
-          return html += '\n> Last modified {docsify-updated}'
+          var url = 'https://github.com/QingWei-Li/docsify/blob/master' + vm.router.getFile()
+          var editHtml = '[:memo: Edit Document](' + url + ')\n'
+
+          return editHtml
+            + html
+            + '\n----\n'
+            + 'Last modified {docsify-updated} '
+            + editHtml
         })
       }
     ]

docs/_coverpage.md

@@ -1,6 +1,6 @@
 ![logo](_media/icon.svg)
 
-# docsify <small>4.0</small>
+# docsify <small>4.1.8</small>
 
 > A magical documentation site generator.
 

docs/de-de/ssr.md

@@ -2,6 +2,8 @@
 
 See https://docsify.now.sh
 
+Repo in https://github.com/QingWei-Li/docsify-ssr-demo
+
 ## Why SSR?
 - Better SEO
 - Feeling cool
@@ -11,24 +13,24 @@ See https://docsify.now.sh
 Install `now` and `docsify-cli` in your project.
 
 ```bash
-npm i now -g
-npm i docsify-cli -D
+npm i now docsify-cli -D
 ```
 
- Edit `package.json`. If the documentation in `./docs` subdirectory.
+Edit `package.json`. If the documentation in `./docs` subdirectory.
 
 ```json
 {
   "name": "my-project",
   "scripts": {
-    "start": "docsify start ."
+    "start": "docsify start . -c ssr.config.js",
+    "deploy": "now -p"
   },
   "files": [
     "docs"
   ],
   "docsify": {
     "config": {
-      "basePath": "/docs/",
+      "basePath": 'https://docsify.js.org/',
       "loadSidebar": true,
       "loadNavbar": true,
       "coverpage": true,
@@ -38,10 +40,7 @@ npm i docsify-cli -D
 }
 ```
 
- Remove `index.html`
-
-
-!> The `basePath` just like webpack `publicPath`. You should config it if your docs is in the subdirectory.
+!> The `basePath` just like webpack `publicPath`. We can use local or remote files.
 
 We can preview in the local to see if it works.
 

docs/de-de/write-a-plugin.md

@@ -47,6 +47,8 @@ window.$docsify = {
 
 ## Beispiel
 
+### footer
+
 Füge jeder Seite eine footer Komponente hinzu:
 
 ```js
@@ -68,3 +70,25 @@ window.$docsify = {
   ]
 }
 ```
+
+
+### Edit Button
+
+```js
+window.$docsify = {
+  plugins: [
+    function(hook, vm) {
+      hook.beforeEach(function (html) {
+        var url = 'https://github.com/QingWei-Li/docsify/blob/master/docs' + vm.route.file
+        var editHtml = '[📝 EDIT DOCUMENT](' + url + ')\n'
+
+        return editHtml
+          + html
+          + '\n----\n'
+          + 'Last modified {docsify-updated} '
+          + editHtml
+      })
+    }
+  ]
+}
+```

docs/index.html

@@ -51,9 +51,16 @@
     },
     formatUpdated: '{MM}/{DD} {HH}:{mm}',
     plugins: [
-      function(hook) {
+      function(hook, vm) {
         hook.beforeEach(function (html) {
-          return html += '\n> Last modified {docsify-updated}'
+          var url = 'https://github.com/QingWei-Li/docsify/blob/master/docs' + vm.route.file
+          var editHtml = '[:memo: Edit Document](' + url + ')\n'
+
+          return editHtml
+            + html
+            + '\n----\n'
+            + 'Last modified {docsify-updated} '
+            + editHtml
         })
       }
     ]

docs/ssr.md

@@ -2,6 +2,8 @@
 
 See https://docsify.now.sh
 
+Repo in https://github.com/QingWei-Li/docsify-ssr-demo
+
 ## Why SSR?
 - Better SEO
 - Feeling cool
@@ -11,8 +13,7 @@ See https://docsify.now.sh
 Install `now` and `docsify-cli` in your project.
 
 ```bash
-npm i now -g
-npm i docsify-cli -D
+npm i now docsify-cli -D
 ```
 
 Edit `package.json`. If the documentation in `./docs` subdirectory.
@@ -21,14 +22,15 @@ Edit `package.json`. If the documentation in `./docs` subdirectory.
 {
   "name": "my-project",
   "scripts": {
-    "start": "docsify start ."
+    "start": "docsify start . -c ssr.config.js",
+    "deploy": "now -p"
   },
   "files": [
     "docs"
   ],
   "docsify": {
     "config": {
-      "basePath": "/docs/",
+      "basePath": 'https://docsify.js.org/',
       "loadSidebar": true,
       "loadNavbar": true,
       "coverpage": true,
@@ -38,9 +40,7 @@ Edit `package.json`. If the documentation in `./docs` subdirectory.
 }
 ```
 
-Remove `index.html`
-
-!> The `basePath` just like webpack `publicPath`. You should config it if your docs is in the subdirectory.
+!> The `basePath` just like webpack `publicPath`. We can use local or remote files.
 
 We can preview in the local to see if it works.
 

docs/write-a-plugin.md

@@ -47,6 +47,8 @@ window.$docsify = {
 
 ## Example
 
+#### footer
+
 Add footer component in each pages.
 
 ```js
@@ -68,3 +70,24 @@ window.$docsify = {
   ]
 }
 ```
+
+### Edit Button
+
+```js
+window.$docsify = {
+  plugins: [
+    function(hook, vm) {
+      hook.beforeEach(function (html) {
+        var url = 'https://github.com/QingWei-Li/docsify/blob/master/docs' + vm.route.file
+        var editHtml = '[📝 EDIT DOCUMENT](' + url + ')\n'
+
+        return editHtml
+          + html
+          + '\n----\n'
+          + 'Last modified {docsify-updated} '
+          + editHtml
+      })
+    }
+  ]
+}
+```

docs/zh-cn/ssr.md

@@ -1,67 +1,61 @@
-# Server client renderer
+# 服务端渲染（SSR）
 
-See https://docsify.now.sh
+先看例子 https://docsify.now.sh
 
-## Why SSR?
-- Better SEO
-- Feeling cool
+项目地址在 https://github.com/QingWei-Li/docsify-ssr-demo
 
-## Quick start
+![](https://dn-mhke0kuv.qbox.me/2bfef08c592706108055.png)
 
-Install `now` and `docsify-cli` in your project.
+文档依旧是部署在 GitHub Pages 上，Node 服务部署在 now.sh 里，渲染的内容是从 GitHub Pages 上同步过来的。所以静态部署文档的服务器和服务端渲染的 Node 服务器是分开的，也就是说你还是可以用之前的方式更新文档，并不需要每次都部署。
+
+
+
+## 快速开始
+
+如果你熟悉 `now` 的使用，接下来的介绍就很简单了。先创建一个新项目，并安装 `now` 和 `docsify-cli`。
 
 ```bash
-npm i now -g
-npm i docsify-cli -D
+mkdir my-ssr-demo && cd my-ssr-demo
+npm init -y
+npm i now docsify-cli -D
 ```
 
-2. Edit `package.json`. If the documentation in `./docs` subdirectory.
+配置 `package.json`
 
 ```json
 {
-  "name": "my-project",
   "scripts": {
-    "start": "docsify start ."
+    "start": "docsify start .",
+    "deploy": "now -p"
   },
-  "files": [
-    "docs"
-  ],
   "docsify": {
     "config": {
-      "basePath": "/docs/",
+      "basePath": "https://docsify.js.org/",
       "loadSidebar": true,
-      "loadNavbar": true,
-      "coverpage": true,
-      "name": "docsify"
+      "loadNavbar": true
     }
   }
 }
 ```
 
+如果你还没有创建文档，可以参考[之前的文章](https://zhuanlan.zhihu.com/p/24540753)。其中 `basePath` 为文档所在的路径，可以填你的 docsify 文档网站。
 
-Remove `index.html`
+配置可以单独写在配置文件内，然后通过 `--config config.js` 加载。
 
-!> The `basePath` just like webpack `publicPath`. You should config it if your docs is in the subdirectory.
+渲染的基础模版也可以自定义，配置在 `template` 属性上，例如
 
-We can preview in the local to see if it works.
-
-```bash
-npm start
-
-# open http://localhost:4000
+```js
+"docsify": {
+    "template": "./ssr.html",
+    "config": {
+      "basePath": "https://docsify.js.org/",
+      "loadSidebar": true,
+      "loadNavbar": true
+    }
+  }
 ```
 
-Publish it!
-
-```bash
-now -p
-```
-
-Now, You have a support for SSR the docs site.
-
-## Custom template
-
-You can provide a templte for entire page's HTML. such as
+*ssr.html*
 
 ```html
 <!DOCTYPE html>
@@ -69,41 +63,39 @@ You can provide a templte for entire page's HTML. such as
 <head>
   <meta charset="UTF-8">
   <title>docsify</title>
+  <link rel="icon" href="_media/favicon.ico">
+  <meta name="keywords" content="doc,docs,documentation,gitbook,creator,generator,github,jekyll,github-pages">
+  <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" title="vue">
+  <link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css" title="vue">
 </head>
 <body>
   <!--inject-app-->
   <!--inject-config-->
 </body>
-<script src="//unpkg.com/docsify/lib/docsify.js"></script>
-<script src="//unpkg.com/docsify/lib/plugins/search.js"></script>
-<script src="//unpkg.com/prismjs/components/prism-bash.min.js"></script>
-<script src="//unpkg.com/prismjs/components/prism-markdown.min.js"></script>
-<script src="//unpkg.com/prismjs/components/prism-nginx.min.js"></script>
+<script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
+<script src="//unpkg.com/docsify/lib/plugins/search.min.js"></script>
 </html>
+
 ```
 
-The template should contain these comments for rendered app content.
- - `<!--inject-app-->`
- - `<!--inject-config-->`
+其中 `<!--inject-app-->` 和 `<!--inject-config-->` 为占位符，会自动将渲染后的 html 和配置内容注入到页面上。
 
-## Configuration
+现在，你可以运行 `npm start` 预览效果，如果没有问题就通过 `npm run deploy` 部署服务。
 
-You can configure it in a special config file, or `package.json`.
+```bash
+npm start
+# open http://localhost:4000
 
-```js
-module.exports = {
-  template: './ssr.html',
-  config: {
-   // docsify config
-  }
-}
+npm run deploy
+# now ...
 ```
 
-## Deploy for your VPS
 
-You can run `docsify start` directly on your Node server, or write your own server app with `docsify-server-renderer`.
+
+## 更多玩法
+
+`docsify start` 其实是依赖了 [`docsify-server-renderer`](https://npmarket.surge.sh/?name=docsify-server-renderer) 模块，如果你感兴趣，你完全可以用它自己实现一个 server，可以加入缓存等功能。
 
 ```js
 var Renderer = require('docsify-server-renderer')
@@ -122,3 +114,5 @@ renderer.renderToString(url)
   .then(html => {})
   .catch(err => {})
 ```
+
+当然文档文件和 server 也是可以部署在一起的，`basePath` 不是一个 URL 的话就会当做文件路径处理，也就是从服务器上加载资源。

docs/zh-cn/write-a-plugin.md

@@ -46,6 +46,9 @@ window.$docsify = {
 
 ## 例子
 
+
+### footer
+
 给每个页面的末尾加上 `footer`
 
 ```js
@@ -66,4 +69,26 @@ window.$docsify = {
     }
   ]
 }
+```
+
+
+### Edit Button
+
+```js
+window.$docsify = {
+  plugins: [
+    function(hook, vm) {
+      hook.beforeEach(function (html) {
+        var url = 'https://github.com/QingWei-Li/docsify/blob/master/docs' + vm.route.file
+        var editHtml = '[📝 EDIT DOCUMENT](' + url + ')\n'
+
+        return editHtml
+          + html
+          + '\n----\n'
+          + 'Last modified {docsify-updated} '
+          + editHtml
+      })
+    }
+  ]
+}
 ```

lib/docsify.js

@@ -3741,6 +3741,11 @@ eventMixin(proto);
  */
 initGlobalAPI();
 
+/**
+ * Version
+ */
+Docsify.version = '4.1.8';
+
 /**
  * Run Docsify
  */

package.json

@@ -1,6 +1,6 @@
 {
   "name": "docsify",
-  "version": "4.1.7",
+  "version": "4.1.8",
   "description": "A magical documentation generator.",
   "author": {
     "name": "qingwei-li",
@@ -20,7 +20,7 @@
     "themes"
   ],
   "scripts": {
-    "build": "rm -rf lib themes && node build/build && mkdir lib/themes && mkdir themes && node build/build-css && npm run build:ssr",
+    "build": "rm -rf lib themes && node build/build && mkdir lib/themes && mkdir themes && node build/build-css && npm run build:ssr && node build/build-cover",
     "dev:build": "rm -rf lib themes && mkdir themes && node build/build --dev && node build/build-css --dev",
     "dev": "node app & nodemon -w src -e js,css --exec 'npm run dev:build'",
     "build:ssr": "node build/build-ssr",
@@ -47,6 +47,7 @@
     "rollup-plugin-buble": "^0.15.0",
     "rollup-plugin-commonjs": "^8.0.2",
     "rollup-plugin-node-resolve": "^2.0.0",
+    "rollup-plugin-replace": "^1.1.1",
     "rollup-plugin-string": "^2.0.2",
     "rollup-plugin-uglify": "^1.0.1",
     "serve-static": "^1.12.1"

packages/docsify-server-renderer/index.js

@@ -139,3 +139,5 @@ export default class Renderer {
     }
   }
 }
+
+Renderer.version = '__VERSION__'

packages/docsify-server-renderer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "docsify-server-renderer",
-  "version": "4.1.7",
+  "version": "4.1.8",
   "description": "docsify server renderer",
   "author": {
     "name": "qingwei-li",

src/core/index.js

@@ -22,6 +22,11 @@ eventMixin(proto)
  */
 initGlobalAPI()
 
+/**
+ * Version
+ */
+Docsify.version = '__VERSION__'
+
 /**
  * Run Docsify
  */

src/themes/pure.css

@@ -3,3 +3,4 @@ $color-bg: #fff;
 $color-text: #000;
 $sidebar-width: 300px;
 @import "basic/layout";
+@import "basic/coverpage";