-> v1.2.0

* Add homepage option, fixed #30

* Add custom basePath support, resolve #31

CHANGELOG.md

@@ -1,3 +1,20 @@
+## 1.2.0
+### Features
+- custom basePath
+- custom homepage
+
+## 1.1.7
+### Bug fixes
+- Optimize progress bar
+
+## 1.1.6
+### Features
+- Add logo 😂
+
+### Bug fixes
+- Remove table background color
+- Fixed highlight sidebar using chinese ids
+
 ## 1.1.5
 ### Features
 - Add table style

README.md

@@ -1,15 +1,25 @@
-# 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)
+<p align="center">
+  <a href="https://docsify.js.org">
+    <img alt="docsify" src="./media/docsify.png">
+  </a>
+</p>
 
->🃏 A magical documentation site generator.
+<p align="center">
+  A magical documentation site generator.
+</p>
+
+<p align="center">
+  <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>
 
 ## Links
 - [Documentation](https://docsify.js.org)
 - [CLI](https://github.com/QingWei-Li/docsify-cli)
 
 ## Features
-- Easy and lightweight
+- Easy and lightweight (~12kb gzipped)
 - Custom themes
 - No build
 
@@ -50,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 : )
 
@@ -65,7 +79,3 @@ These open-source projects are using docsify to generate their sites. Pull reque
 ## License
 MIT
 
-## Support on Beerpay
-Hey dude! Help me out for a couple of :beers:!
-
-[![Beerpay](https://beerpay.io/QingWei-Li/docsify/badge.svg?style=beer-square)](https://beerpay.io/QingWei-Li/docsify)  [![Beerpay](https://beerpay.io/QingWei-Li/docsify/make-wish.svg?style=flat-square)](https://beerpay.io/QingWei-Li/docsify?focus=wish)

docs/README.md

@@ -1,9 +1,13 @@
-# docsify
+<p align="center">
+  <img alt="docsify" src="https://cloud.githubusercontent.com/assets/7565692/21292094/5c206de4-c533-11e6-9493-29ea67b01dde.png">
+</p>
 
-> A magical documentation site generator.
+<p align="center">
+  A magical documentation site generator.
+</p>
 
 ## Features
-- Easy and lightweight
+- Easy and lightweight (~12kb gzipped)
 - Custom themes
 - No build
 
@@ -98,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
@@ -156,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>
@@ -213,7 +223,7 @@ If you write a sub level list, it will generate a dropdown list.
   - [chinese](/zh-cn)
 ```
 
-### router
+#### router
 
 Hash router. You can replace `404.html` with `index.html`.
 
@@ -221,7 +231,7 @@ Hash router. You can replace `404.html` with `index.html`.
 <script src="/lib/docsify.js" data-router></script>
 ```
 
-### auto2top
+#### auto2top
 
 Scroll to the top on changing hash.
 
@@ -230,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/index.html

@@ -3,6 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <title>docsify - A magical documentation site generator.</title>
+  <link rel="icon" href="favicon.ico">
   <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/lib/themes/vue.css">

docs/zh-cn.md

@@ -1,11 +1,15 @@
-# docsify
+<p align="center">
+  <img alt="docsify" src="https://cloud.githubusercontent.com/assets/7565692/21292094/5c206de4-c533-11e6-9493-29ea67b01dde.png">
+</p>
 
-> 无需构建快速生成文档页
+<p align="center">
+  无需构建快速生成文档页
+</p>
 
 ## 特性
 - 无需构建，写完 markdown 直接发布
 - 支持自定义主题
-- 容易使用并且轻量
+- 容易使用并且轻量 (~12kb gzipped)
 
 ## 快速上手
 
@@ -97,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)
 
 ### 配置参数
 
@@ -157,6 +162,7 @@ Sidebar 开关按钮
 #### load-sidebar
 
 读取侧边栏配置文件，如果配置，默认加载当前目录下的 `_sidebar.md`。如果文件不存在，会显示 TOC 作为侧边栏内容。如果你有二级目录，也应该放置一份配置文件。
+**如果用 `_` 开头作为文件名，你应该在文档目录下添加 `.nojekyll`，阻止 GitHub Pages 忽略下划线开头的文件。**
 
 ```html
 <script src="/lib/docsify.js" data-load-sidebar></script>
@@ -214,7 +220,7 @@ Sidebar 开关按钮
 ```
 
 
-### router
+#### router
 
 开启 hash router 功能，此时可以创建 `index.html` 作为入口文件，同时多页面切换不会重新加载资源。资源路径会被替换成 `/#/` 的形式。
 
@@ -222,7 +228,7 @@ Sidebar 开关按钮
 <script src="/lib/docsify.js" data-router></script>
 ```
 
-### auto2top
+#### auto2top
 
 切换路由时自动跳转到页面顶部
 
@@ -231,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) {
@@ -127,7 +132,7 @@ function scrollActiveSidebar () {
 
     if (href !== '/') { href = href.match(/#([^#]+)$/g)[0].slice(1); }
 
-    nav[href] = li;
+    nav[decodeURIComponent(href)] = li;
   }
 
   function highlight () {
@@ -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.5",
+  "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/event.js

@@ -18,7 +18,7 @@ export function scrollActiveSidebar () {
 
     if (href !== '/') href = href.match(/#([^#]+)$/g)[0].slice(1)
 
-    nav[href] = li
+    nav[decodeURIComponent(href)] = li
   }
 
   function highlight () {

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/themes/basic/_layout.css

@@ -241,6 +241,7 @@ main {
   overflow: auto;
   border-spacing: 0;
   border-collapse: collapse;
+  margin-bottom: 1em;
 }
 
 .markdown-section th {
@@ -255,7 +256,6 @@ main {
 }
 
 .markdown-section tr {
-  background-color: #fff;
   border-top: 1px solid #ccc;
   &:nth-child(2n) {
     background-color: #f8f8f8;

src/themes/buble.css

@@ -54,6 +54,8 @@ body {
 .markdown-section ul,
 .markdown-section ol {
   word-spacing: 0.05em;
+  line-height: 1.6em;
+  margin: 0 0 1em 0;
 }
 
 .markdown-section h1 {
@@ -95,13 +97,6 @@ body {
   margin: 1.2em 0;
 }
 
-.markdown-section p,
-.markdown-section ul,
-.markdown-section ol {
-  margin: 0 0 1em 0;
-  line-height: 1.5;
-}
-
 .markdown-section ul,
 .markdown-section ol {
   padding-left: 1.5em;

src/themes/vue.css

@@ -55,12 +55,6 @@ body {
   font-weight: 600;
 }
 
-.markdown-section p,
-.markdown-section ul,
-.markdown-section ol {
-  word-spacing: 0.05em;
-}
-
 .markdown-section h1 {
   margin: 0 0 1em;
   font-size: 2em;
@@ -100,6 +94,7 @@ body {
 .markdown-section ul,
 .markdown-section ol {
   line-height: 1.6em;
+  word-spacing: 0.05em;
 }
 
 .markdown-section ul,

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 }) => {