[release] 4.1.8

CHANGELOG.md

@@ -1,6 +1,12 @@
 # Changelog
 
-## 4.1.0 / 2017-05-30
+## 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
 
 
   * feat: Support server client renderer [See detail](//docsify.js.org/#/ssr)

README.md

@@ -27,6 +27,7 @@
 - Multiple themes
 - Useful plugin API
 - Compatible with IE10+
+- Support SSR ([example](https://github.com/QingWei-Li/docsify-ssr-demo))
 
 ## Quick start
 

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,12 +1,21 @@
 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()
+      async(),
+      replace({
+        __VERSION__: process.env.VERSION || require('../package.json').version
+      }),
+      buble({
+        transforms: {
+          generator: false
+        }
+      })
     ],
     onwarn: function() {}
   })

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>3.7</small>
+# docsify <small>4.1.8</small>
 
 > A magical documentation site generator.
 

docs/_sidebar.md

@@ -18,6 +18,6 @@
   - [Vue compatibility](vue.md)
   - [CDN](cdn.md)
   - [Offline Mode(PWA)](pwa.md)
-  - [(Server-client renderer(SSR)](ssr.md)
+  - [Server-client renderer(SSR)](ssr.md)
 
 - [Changelog](changelog.md)

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,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 docs"
+    "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,7 +40,7 @@ Edit `package.json`. If the documentation in `./docs` subdirectory.
 }
 ```
 
-!> 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.
 
@@ -91,7 +93,7 @@ You can configure it in a special config file, or `package.json`.
 
 ```js
 module.exports = {
-  tempate: './ssr.html',
+  template: './ssr.html',
   config: {
    // docsify config
   }

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

@@ -36,8 +36,6 @@
     maxLevel: 4,
     subMaxLevel: 2,
     name: 'docsify',
-    // basePath: '/docs/',
-    routerMode: 'history',
     search: {
       noData: {
         '/de-de/': 'Keine Ergebnisse!',
@@ -53,16 +51,23 @@
     },
     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
         })
       }
     ]
   }
 </script>
-<script src="//unpkg.com/docsify@next/lib/docsify.min.js"></script>
-<script src="//unpkg.com/docsify@next/lib/plugins/search.min.js"></script>
+<script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
+<script src="//unpkg.com/docsify/lib/plugins/search.min.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>

docs/ssr.config.js

@@ -1,33 +0,0 @@
-module.exports = {
-  config: {
-    alias: {
-      '/de-de/changelog': '/changelog',
-      '/zh-cn/changelog': '/changelog',
-      '/changelog': 'https://raw.githubusercontent.com/QingWei-Li/docsify/master/CHANGELOG'
-    },
-    auto2top: true,
-    coverpage: true,
-    executeScript: true,
-    loadSidebar: true,
-    loadNavbar: true,
-    mergeNavbar: true,
-    maxLevel: 4,
-    subMaxLevel: 2,
-    basePath: '/docs/',
-    name: 'docsify',
-    search: {
-      noData: {
-        '/de-de/': 'Keine Ergebnisse!',
-        '/zh-cn/': '没有结果!',
-        '/': 'No results!'
-      },
-      paths: 'auto',
-      placeholder: {
-        '/de-de/': 'Suche',
-        '/zh-cn/': '搜索',
-        '/': 'Search'
-      }
-    }
-  },
-  template: './docs/ssr.html'
-}

docs/ssr.html

@@ -1,29 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<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="/themes/vue.css" title="vue">
-  <!-- <link rel="stylesheet" href="//unpkg.com/docsify@next/lib/themes/dark.css" title="dark" disabled> -->
-  <!-- <link rel="stylesheet" href="//unpkg.com/docsify@next/lib/themes/buble.css" title="buble" disabled> -->
-  <!-- <link rel="stylesheet" href="//unpkg.com/docsify@next/lib/themes/pure.css" title="pure" disabled> -->
-  <style>
-    nav.app-nav li ul {
-      min-width: 100px;
-    }
-  </style>
-</head>
-<body>
-  <!--inject-app-->
-  <!--inject-config-->
-</body>
-<script src="/lib/docsify.js"></script>
-<!-- <script src="/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>
-</html>

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 docs"
+    "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,7 +40,7 @@ Edit `package.json`. If the documentation in `./docs` subdirectory.
 }
 ```
 
-!> 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.
 
@@ -91,7 +93,7 @@ You can configure it in a special config file, or `package.json`.
 
 ```js
 module.exports = {
-  tempate: './ssr.html',
+  template: './ssr.html',
   config: {
    // docsify config
   }

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,64 +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
 ```
 
-Edit `package.json`. If the documentation in `./docs` subdirectory.
+配置 `package.json`
 
 ```json
 {
-  "name": "my-project",
   "scripts": {
-    "start": "docsify start docs"
+    "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
     }
   }
 }
 ```
 
-!> The `basePath` just like webpack `publicPath`. You should config it if your docs is in the subdirectory.
+如果你还没有创建文档，可以参考[之前的文章](https://zhuanlan.zhihu.com/p/24540753)。其中 `basePath` 为文档所在的路径，可以填你的 docsify 文档网站。
 
-We can preview in the local to see if it works.
+配置可以单独写在配置文件内，然后通过 `--config config.js` 加载。
 
-```bash
-npm start
+渲染的基础模版也可以自定义，配置在 `template` 属性上，例如
 
-# 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>
@@ -66,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 = {
-  tempate: './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')
@@ -119,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

@@ -2741,7 +2741,7 @@ function getPath () {
 }
 
 var isAbsolutePath = cached(function (path) {
-  return /(:|(\/{2}))/.test(path)
+  return /(:|(\/{2}))/g.test(path)
 });
 
 var getParentPath = cached(function (path) {
@@ -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.0",
+  "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

@@ -5,6 +5,8 @@ import { Compiler } from '../../src/core/render/compiler'
 import { isAbsolutePath } from '../../src/core/router/util'
 import { readFileSync } from 'fs'
 import { resolve, basename } from 'path'
+import resolvePathname from 'resolve-pathname'
+import debug from 'debug'
 
 function cwd (...args) {
   return resolve(process.cwd(), ...args)
@@ -94,7 +96,7 @@ export default class Renderer {
       case 'sidebar':
         html = this.compiler.sidebar(html, maxLevel) +
           `<script>window.__SUB_SIDEBAR__ = ${JSON.stringify(
-            this.compiler.subSidebar(html, subMaxLevel)
+            this.compiler.subSidebar(subMaxLevel)
           )}</script>`
         break
       case 'cover':
@@ -111,10 +113,12 @@ export default class Renderer {
   }
 
   async _loadFile (filePath) {
+    debug('docsify')(`load > ${filePath}`)
     let content
     try {
       if (isAbsolutePath(filePath)) {
         const res = await fetch(filePath)
+        if (!res.ok) throw Error()
         content = await res.text()
         this.lock = 0
       } else {
@@ -131,7 +135,9 @@ export default class Renderer {
 
       const fileName = basename(filePath)
 
-      return await this._loadFile(cwd(filePath, '../..', fileName))
+      return await this._loadFile(resolvePathname(`../${fileName}`, filePath))
     }
   }
 }
+
+Renderer.version = '__VERSION__'

packages/docsify-server-renderer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "docsify-server-renderer",
-  "version": "4.1.0",
+  "version": "4.1.8",
   "description": "docsify server renderer",
   "author": {
     "name": "qingwei-li",
@@ -15,6 +15,8 @@
     "test": "echo 'hello'"
   },
   "dependencies": {
-    "node-fetch": "^1.7.0"
+    "debug": "^2.6.8",
+    "node-fetch": "^1.7.0",
+    "resolve-pathname": "^2.1.0"
   }
 }

src/core/index.js

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

src/core/router/util.js

@@ -36,7 +36,7 @@ export function getPath (...args) {
 }
 
 export const isAbsolutePath = cached(path => {
-  return /(:|(\/{2}))/.test(path)
+  return /(:|(\/{2}))/g.test(path)
 })
 
 export const getParentPath = cached(path => {

src/themes/pure.css

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