-> v1.2.0

* Add homepage option, fixed #30

* Add custom basePath support, resolve #31

CHANGELOG.md

@@ -1,3 +1,12 @@
+## 1.2.0
+### Features
+- custom basePath
+- custom homepage
+
+## 1.1.7
+### Bug fixes
+- Optimize progress bar
+
 ## 1.1.6
 ### Features
 - Add logo 😂

README.md

@@ -9,8 +9,8 @@
 </p>
 
 <p align="center">
-  <a href="https://travis-ci.org/QingWei-Li/docsify"><img alt="Travis Status" src="https://travis-ci.org/QingWei-Li/docsify.svg?branch=master"></a>
-  <a href="https://www.npmjs.com/package/docsify"><img alt="npm" src="https://img.shields.io/npm/v/docsify.svg"></a>
+  <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://beerpay.io/QingWei-Li/docsify"><img alt="npm" src="https://beerpay.io/QingWei-Li/docsify/badge.svg?style=beer-square"></a>
 </p>
 
@@ -19,7 +19,7 @@
 - [CLI](https://github.com/QingWei-Li/docsify-cli)
 
 ## Features
-- Easy and lightweight (~12kB gzipped)
+- Easy and lightweight (~12kb gzipped)
 - Custom themes
 - No build
 
@@ -60,6 +60,10 @@ index.html
 </html>
 ```
 
+## CDN
+- UNPKG [https://unpkg.com/docsify/](https://unpkg.com/docsify/)
+- jsDelivr [http://www.jsdelivr.com/projects/docsify](http://www.jsdelivr.com/projects/docsify)
+
 ## Showcase
 These open-source projects are using docsify to generate their sites. Pull requests welcome : )
 

docs/README.md

@@ -7,7 +7,7 @@
 </p>
 
 ## Features
-- Easy and lightweight (~12kB gzipped)
+- Easy and lightweight (~12kb gzipped)
 - Custom themes
 - No build
 
@@ -102,6 +102,11 @@ Code in `404.html`
 </nav>
 ```
 
+
+### CDN
+- UNPKG [https://unpkg.com/docsify/](https://unpkg.com/docsify/)
+- jsDelivr [http://www.jsdelivr.com/projects/docsify](http://www.jsdelivr.com/projects/docsify)
+
 ### Options
 
 #### repo
@@ -160,6 +165,7 @@ Custom sidebar. if it'set, the TOC will be disabeld. Bind global variables on th
 #### load-sidebar
 
 Load sidebar markdown file. If it is configured, load  the current directory `_sidebar.md` by default. If the file isn't exist, sidebar will appear 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>
@@ -234,3 +240,24 @@ Scroll to the top on changing hash.
 <script src="/lib/docsify.js" data-auto2top></script>
 ```
 
+#### homepage
+
+`README.md` will be render as homepage for your website in 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:
+
+```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>
+```
+
+
+#### 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>
+```

docs/zh-cn.md

@@ -9,7 +9,7 @@
 ## 特性
 - 无需构建，写完 markdown 直接发布
 - 支持自定义主题
-- 容易使用并且轻量 (~12kB gzipped)
+- 容易使用并且轻量 (~12kb gzipped)
 
 ## 快速上手
 
@@ -101,9 +101,10 @@ docsify serve docs
 </nav>
 ```
 
-### CDN
 
-目前可用的 CDN 有 [UNPKG](unpkg.com/docsify)，如果觉得访问较慢可以将文件放到 Pages 的目录下。
+### CDN
+- UNPKG [https://unpkg.com/docsify/](https://unpkg.com/docsify/)
+- jsDelivr [http://www.jsdelivr.com/projects/docsify](http://www.jsdelivr.com/projects/docsify)
 
 ### 配置参数
 
@@ -161,6 +162,7 @@ Sidebar 开关按钮
 #### load-sidebar
 
 读取侧边栏配置文件，如果配置，默认加载当前目录下的 `_sidebar.md`。如果文件不存在，会显示 TOC 作为侧边栏内容。如果你有二级目录，也应该放置一份配置文件。
+**如果用 `_` 开头作为文件名，你应该在文档目录下添加 `.nojekyll`，阻止 GitHub Pages 忽略下划线开头的文件。**
 
 ```html
 <script src="/lib/docsify.js" data-load-sidebar></script>
@@ -235,3 +237,24 @@ Sidebar 开关按钮
 <script src="/lib/docsify.js" data-auto2top></script>
 ```
 
+#### homepage
+
+默认情况下网站会将根目录下 `README.md` 作为首页渲染，但是有些时候我们想指定其他文件，甚至想直接将 repo 下的 README 作为首页。你可以这样做：
+
+
+```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>
+```
+
+#### 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>
+```

lib/docsify.js

@@ -21,8 +21,13 @@ function load (url, method, loading) {
       if ( error === void 0 ) error = function () {};
 
       if (loading) {
+        var id = setInterval(function (_) { return loading({ step: Math.floor(Math.random() * 5 + 1) }); },
+        500);
         xhr.addEventListener('progress', loading);
-        xhr.addEventListener('loaded', loading);
+        xhr.addEventListener('loadend', function (evt) {
+          loading(evt);
+          clearInterval(id);
+        });
       }
       xhr.addEventListener('error', error);
       xhr.addEventListener('load', function (ref) {
@@ -2466,8 +2471,9 @@ function renderSidebar (content) {
 function renderLoading (ref) {
   var loaded = ref.loaded;
   var total = ref.total;
+  var step = ref.step;
 
-  var num = Math.floor(loaded / total * 100);
+  var num;
 
   if (!CACHE.loading) {
     var div = document.createElement('div');
@@ -2476,13 +2482,19 @@ function renderLoading (ref) {
     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(function (_) {
+    clearTimeout(renderLoading.cacheTimeout);
+    renderLoading.cacheTimeout = setTimeout(function (_) {
       CACHE.loading.style.opacity = 0;
       CACHE.loading.style.width = '0%';
     }, 200);
@@ -2506,6 +2518,8 @@ var OPTIONS = {
   loadSidebar: null,
   loadNavbar: null,
   router: false,
+  homepage: 'README.md',
+  basePath: '',
   auto2top: false
 };
 var script = document.currentScript || [].slice.call(document.getElementsByTagName('script')).pop();
@@ -2528,8 +2542,9 @@ var cacheRoute = null;
 var cacheXhr = null;
 
 var mainRender = function (cb) {
-  var route = getRoute();
+  var route = OPTIONS.basePath + getRoute();
   if (cacheRoute === route) { return cb() }
+
   var wait;
   var basePath = cacheRoute = route;
 
@@ -2539,13 +2554,18 @@ var mainRender = function (cb) {
     basePath = basePath.match(/(\S*\/)[^\/]+$/)[1];
   }
 
+  var page;
+  if (!route) {
+    page = OPTIONS.homepage || 'README.md';
+  } else if (/\/$/.test(route)) {
+    page = route + "README.md";
+  } else {
+    page = route + ".md";
+  }
+
   cacheXhr && cacheXhr.abort && cacheXhr.abort();
   // Render markdown file
-  cacheXhr = load(
-    (!route || /\/$/.test(route)) ? (route + "README.md") : (route + ".md"),
-    'GET',
-    renderLoading);
-
+  cacheXhr = load(page, 'GET', renderLoading);
   cacheXhr.then(function (result) {
     renderArticle(result);
     if (OPTIONS.loadSidebar) {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "docsify",
-  "version": "1.1.6",
+  "version": "1.2.0",
   "description": "A magical documentation generator.",
   "main": "lib/docsify.js",
   "files": [
@@ -10,7 +10,7 @@
   ],
   "scripts": {
     "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 --exec 'npm run build'",
+    "dev": "node app.js & nodemon -w src -e js,css --exec 'npm run build'",
     "test": "eslint src test"
   },
   "repository": {

src/index.js

@@ -11,6 +11,8 @@ const OPTIONS = {
   loadSidebar: null,
   loadNavbar: null,
   router: false,
+  homepage: 'README.md',
+  basePath: '',
   auto2top: false
 }
 const script = document.currentScript || [].slice.call(document.getElementsByTagName('script')).pop()
@@ -33,8 +35,9 @@ let cacheRoute = null
 let cacheXhr = null
 
 const mainRender = function (cb) {
-  const route = getRoute()
+  const route = OPTIONS.basePath + getRoute()
   if (cacheRoute === route) return cb()
+
   let wait
   let basePath = cacheRoute = route
 
@@ -44,13 +47,18 @@ const mainRender = function (cb) {
     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`
+  }
+
   cacheXhr && cacheXhr.abort && cacheXhr.abort()
   // Render markdown file
-  cacheXhr = load(
-    (!route || /\/$/.test(route)) ? `${route}README.md` : `${route}.md`,
-    'GET',
-    render.renderLoading)
-
+  cacheXhr = load(page, 'GET', render.renderLoading)
   cacheXhr.then(result => {
     render.renderArticle(result)
     if (OPTIONS.loadSidebar) {

src/render.js

@@ -114,8 +114,8 @@ export function renderSidebar (content) {
  * render loading bar
  * @return {[type]} [description]
  */
-export function renderLoading ({ loaded, total }) {
-  const num = Math.floor(loaded / total * 100)
+export function renderLoading ({ loaded, total, step }) {
+  let num
 
   if (!CACHE.loading) {
     const div = document.createElement('div')
@@ -124,13 +124,19 @@ export function renderLoading ({ loaded, total }) {
     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(_ => {
+    clearTimeout(renderLoading.cacheTimeout)
+    renderLoading.cacheTimeout = setTimeout(_ => {
       CACHE.loading.style.opacity = 0
       CACHE.loading.style.width = '0%'
     }, 200)

src/util.js

@@ -14,8 +14,14 @@ export function load (url, method = 'GET', loading) {
   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('loaded', loading)
+        xhr.addEventListener('loadend', evt => {
+          loading(evt)
+          clearInterval(id)
+        })
       }
       xhr.addEventListener('error', error)
       xhr.addEventListener('load', ({ target }) => {