chore: add changelog 4.3.6

In my humble opinion, the doc of this project might have a better file structure for multiple languages

.travis.yml

@@ -1,9 +1,3 @@
 sudo: false
-cache:
-  directories:
-    - $HOME/.yarn-cache
 language: node_js
 node_js: stable
-os:
-  - linux
-  - osx

CHANGELOG.md

@@ -1,7 +1,95 @@
+<a name="4.3.6"></a>
+## [4.3.6](https://github.com/QingWei-Li/docsify/compare/v4.3.5...v4.3.6) (2017-09-21)
+
+
+### Bug Fixes
+
+* style for codesponsor plugin ([08afec7](https://github.com/QingWei-Li/docsify/commit/08afec7))
+
+
+
+<a name="4.3.5"></a>
+## [4.3.5](https://github.com/QingWei-Li/docsify/compare/v4.3.4...v4.3.5) (2017-09-20)
+
+
+### Bug Fixes
+
+* missed symbol ([#254](https://github.com/QingWei-Li/docsify/issues/254)) ([6c702d3](https://github.com/QingWei-Li/docsify/commit/6c702d3))
+
+
+### Features
+
+* **plugin:** add codesponsor plugin ([46ac4c3](https://github.com/QingWei-Li/docsify/commit/46ac4c3))
+
+
+
+<a name="4.3.4"></a>
+## [4.3.4](https://github.com/QingWei-Li/docsify/compare/v4.3.3...v4.3.4) (2017-09-07)
+
+
+### Bug Fixes
+
+* scroll position issue, fixed [#234](https://github.com/QingWei-Li/docsify/issues/234) ([388ed3d](https://github.com/QingWei-Li/docsify/commit/388ed3d))
+
+
+
+<a name="4.3.3"></a>
+## [4.3.3](https://github.com/QingWei-Li/docsify/compare/v4.3.2...v4.3.3) (2017-09-06)
+
+
+### Bug Fixes
+
+* **buble.css:** tweaks code block style, fixed [#249](https://github.com/QingWei-Li/docsify/issues/249) ([9d43051](https://github.com/QingWei-Li/docsify/commit/9d43051))
+
+
+### Features
+
+* add doc for react and vue demo box plugin ([#247](https://github.com/QingWei-Li/docsify/issues/247)) ([f0aca19](https://github.com/QingWei-Li/docsify/commit/f0aca19))
+
+
+
+<a name="4.3.2"></a>
+## [4.3.2](https://github.com/QingWei-Li/docsify/compare/v4.3.1...v4.3.2) (2017-09-01)
+
+
+### Bug Fixes
+
+* sidebar highlight ([f82f419](https://github.com/QingWei-Li/docsify/commit/f82f419))
+
+
+### Features
+
+* add Edit on github plugin (thanks [@njleonzhang](https://github.com/njleonzhang)) ([a0e1ea8](https://github.com/QingWei-Li/docsify/commit/a0e1ea8))
+
+
+
+<a name="4.3.1"></a>
+## [4.3.1](https://github.com/QingWei-Li/docsify/compare/v4.2.9...v4.3.1) (2017-08-30)
+
+
+### Features
+
+* **markdown:** supports mermaid [#137](https://github.com/QingWei-Li/docsify/issues/137) ([f4800e0](https://github.com/QingWei-Li/docsify/commit/f4800e0))
+
+
+
+<a name="4.3.0"></a>
+# [4.3.0](https://github.com/QingWei-Li/docsify/compare/v4.2.9...v4.3.0) (2017-08-17)
+
+
+### Features
+
+* **markdown:** supports mermaid [#137](https://github.com/QingWei-Li/docsify/issues/137) ([f4800e0](https://github.com/QingWei-Li/docsify/commit/f4800e0))
+
+
+
 <a name="4.2.9"></a>
 ## [4.2.9](https://github.com/QingWei-Li/docsify/compare/v4.2.8...v4.2.9) (2017-08-15)
 
 
+### Bug Fixes
+
+* ensure document ready before init Docsify [#233](https://github.com/QingWei-Li/docsify/issues/233)
 
 <a name="4.2.8"></a>
 ## [4.2.8](https://github.com/QingWei-Li/docsify/compare/v4.2.7...v4.2.8) (2017-08-10)

README.md

@@ -13,9 +13,12 @@
   <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://cdnjs.com/libraries/docsify"><img alt="cdnjs" src="https://img.shields.io/cdnjs/v/docsify.svg?style=flat-square"></a>
   <a href="https://github.com/QingWei-Li/donate"><img alt="donate" src="https://img.shields.io/badge/%24-donate-ff69b4.svg?style=flat-square"></a>
-  <a href="https://app.fossa.io/projects/git%2Bhttps%3A%2F%2Fgithub.com%2FQingWei-Li%2Fdocsify?ref=badge_shield" alt="FOSSA Status"><img src="https://app.fossa.io/api/projects/git%2Bhttps%3A%2F%2Fgithub.com%2FQingWei-Li%2Fdocsify.svg?type=shield"/></a>
 </p>
 
+
+<a target='_blank' rel='nofollow' href='https://app.codesponsor.io/link/YdWAqnN2kHQmLtFQhEddaaPT/QingWei-Li/docsify'>  <img alt='Sponsor' width='888' height='68' src='https://app.codesponsor.io/embed/YdWAqnN2kHQmLtFQhEddaaPT/QingWei-Li/docsify.svg' /></a>
+
+
 ## Links
 
 - [Documentation](https://docsify.js.org)
@@ -76,6 +79,8 @@ These projects are using docsify to generate their sites. Pull requests welcome
 | [commitlint](https://marionebl.github.io/commitlint/) | Lint commit messages |
 | [vue-data-tables](https://github.com/njleonzhang/vue-data-tables/) | A simple and customizable data table，based on vue2 and element-ui. |
 | [Noty](http://ned.im/noty/) | A Dependency-free notification library |
+| [xTeko](https://docs.xteko.com/) | Addins framework for Pin 3.0 |
+| [vue2-datatable-component](https://github.com/OneWayTech/vue2-datatable) | The best Datatable for Vue.js 2.x which never sucks |
 
 ## Similar projects
 
@@ -105,3 +110,4 @@ open http://localhost:3000
 MIT
 
 [![FOSSA Status](https://app.fossa.io/api/projects/git%2Bhttps%3A%2F%2Fgithub.com%2FQingWei-Li%2Fdocsify.svg?type=large)](https://app.fossa.io/projects/git%2Bhttps%3A%2F%2Fgithub.com%2FQingWei-Li%2Fdocsify?ref=badge_large)
+

build/build.js

@@ -47,7 +47,8 @@ var plugins = [
   { name: 'emoji', entry: 'emoji.js' },
   { name: 'external-script', entry: 'external-script.js' },
   { name: 'front-matter', entry: 'front-matter/index.js' },
-  { name: 'zoom-image', entry: 'zoom-image.js' }
+  { name: 'zoom-image', entry: 'zoom-image.js' },
+  { name: 'codesponsor', entry: 'codesponsor.js' }
 ]
 
 plugins.forEach(item => {

dev.html

@@ -29,7 +29,7 @@
     loadSidebar: true,
     coverpage: true,
     name: 'docsify',
-    subMaxLevel: 0,
+    subMaxLevel: 2,
     mergeNavbar: true,
     formatUpdated: '{MM}/{DD} {HH}:{mm}',
     plugins: [

docs/_coverpage.md

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

docs/de-de/markdown.md

@@ -28,3 +28,30 @@ window.$docsify = {
   }
 }
 ```
+
+
+## Supports mermaid
+
+```js
+// Import mermaid
+//  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.css">
+//  <script src="//cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
+
+mermaid.initialize({ startOnLoad: false });
+
+window.$docsify = {
+  markdown: {
+    renderer: {
+      code: function(code, lang) {
+        if (lang === "mermaid") {
+          return (
+            '<div class="mermaid">' + mermaid.render(lang, code) + "</div>"
+          );
+        }
+        return this.origin.code.apply(this, arguments);
+      }
+    }
+  }
+}
+```
+

docs/de-de/plugins.md

@@ -96,3 +96,23 @@ Medium's Bilderzoom. Basierend auf [zoom-image](https://github.com/egoist/zoom-i
 ```html
 <script src="//unpkg.com/docsify/lib/plugins/zoom-image.min.js"></script>
 ```
+
+## Edit on github
+
+Add `Edit on github` button on every pages. provided by 3rd party, check [document](https://github.com/njleonzhang/docsify-edit-on-github)
+
+
+## CodeSponsor
+
+See https://codesponsor.io
+
+
+```html
+<script>
+  window.$docsify = {
+    codesponsor: 'id'
+  }
+</script>
+<script src="//unpkg.com/docsify/lib/plugins/codesponsor.min.js"></script>
+```
+

docs/index.html

@@ -7,10 +7,10 @@
   <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="//cdn.jsdelivr.net/npm/docsify@latest/lib/themes/vue.css" title="vue">
-  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify@latest/lib/themes/dark.css" title="dark" disabled>
-  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify@latest/lib/themes/buble.css" title="buble" disabled>
-  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify@latest/lib/themes/pure.css" title="pure" disabled>
+  <link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css" title="vue">
+  <link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/dark.css" title="dark" disabled>
+  <link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/buble.css" title="buble" disabled>
+  <link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/pure.css" title="pure" disabled>
   <style>
     nav.app-nav li ul {
       min-width: 100px;
@@ -34,6 +34,8 @@
     mergeNavbar: true,
     maxLevel: 4,
     subMaxLevel: 2,
+    codesponsor: '7c9Ms7xRs-j_y_8abU03DA',
+    ga: 'UA-106147152-1',
     name: 'docsify',
     search: {
       noData: {
@@ -65,9 +67,11 @@
     ]
   }
 </script>
-<script src="//cdn.jsdelivr.net/npm/docsify@latest/lib/docsify.min.js"></script>
-<script src="//cdn.jsdelivr.net/npm/docsify@latest/lib/plugins/search.min.js"></script>
-<script src="//cdn.jsdelivr.net/npm/prismjs/components/prism-bash.min.js"></script>
-<script src="//cdn.jsdelivr.net/npm/prismjs/components/prism-markdown.min.js"></script>
-<script src="//cdn.jsdelivr.net/npm/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>
+<script src="//unpkg.com/docsify/lib/plugins/codesponsor.min.js"></script>
+<script src="//unpkg.com/docsify/lib/plugins/ga.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>
 </html>

docs/markdown.md

@@ -28,3 +28,28 @@ window.$docsify = {
   }
 }
 ```
+
+## Supports mermaid
+
+```js
+// Import mermaid
+//  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.css">
+//  <script src="//cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
+
+mermaid.initialize({ startOnLoad: false });
+
+window.$docsify = {
+  markdown: {
+    renderer: {
+      code: function(code, lang) {
+        if (lang === "mermaid") {
+          return (
+            '<div class="mermaid">' + mermaid.render(lang, code) + "</div>"
+          );
+        }
+        return this.origin.code.apply(this, arguments);
+      }
+    }
+  }
+}
+```

docs/plugins.md

@@ -96,3 +96,30 @@ Medium's Image Zoom. Based on [zoom-image](https://github.com/egoist/zoom-image)
 ```html
 <script src="//unpkg.com/docsify/lib/plugins/zoom-image.min.js"></script>
 ```
+
+## Edit on github
+
+Add `Edit on github` button on every pages. provided by 3rd party, check [document](https://github.com/njleonzhang/docsify-edit-on-github)
+
+## Demo code with instant preview and jsfiddle integration
+
+With this plugin, sample code can be rendered on the page instantly, so that the readers can see the preview immediately.
+When readers expand the demo box, the source code and description are shown there. if they click the button `Try in Jsfiddle`,
+`jsfiddle.net` will be open with the code of this sample, which allow readers to revise the code and try on their own.
+
+[Vue](https://njleonzhang.github.io/docsify-demo-box-vue/) and [React](https://njleonzhang.github.io/docsify-demo-box-react/) are both supported.
+
+## CodeSponsor
+
+See https://codesponsor.io
+
+
+```html
+<script>
+  window.$docsify = {
+    codesponsor: 'id'
+  }
+</script>
+<script src="//unpkg.com/docsify/lib/plugins/codesponsor.min.js"></script>
+```
+

docs/vue.md

@@ -28,7 +28,7 @@ Then you can immediately write Vue code at Markdown file. `new Vue({ el: '#main'
 <ul>
   <li v-for="i in 10">{{ i }}</li>
 </ul>
-``
+```
 
 <ul>
   <li v-for="i in 10">{{ i }}</li>

docs/zh-cn/markdown.md

@@ -27,4 +27,30 @@ window.$docsify = {
     return marked
   }
 }
-```
+```
+
+
+## Supports mermaid
+
+```js
+// Import mermaid
+//  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.css">
+//  <script src="//cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
+
+mermaid.initialize({ startOnLoad: false });
+
+window.$docsify = {
+  markdown: {
+    renderer: {
+      code: function(code, lang) {
+        if (lang === "mermaid") {
+          return (
+            '<div class="mermaid">' + mermaid.render(lang, code) + "</div>"
+          );
+        }
+        return this.origin.code.apply(this, arguments);
+      }
+    }
+  }
+}
+```

docs/zh-cn/plugins.md

@@ -90,3 +90,24 @@ Medium's 风格的图片缩放插件. 基于 [zoom-image](https://github.com/ego
 ```html
 <script src="//unpkg.com/docsify/lib/plugins/zoom-image.js"></script>
 ```
+
+
+## Edit on github
+
+Add `Edit on github` button on every pages. provided by 3rd party, check [document](https://github.com/njleonzhang/docsify-edit-on-github)
+
+
+## CodeSponsor
+
+See https://codesponsor.io
+
+
+```html
+<script>
+  window.$docsify = {
+    codesponsor: 'id'
+  }
+</script>
+<script src="//unpkg.com/docsify/lib/plugins/codesponsor.min.js"></script>
+```
+

lib/docsify.js

@@ -80,7 +80,7 @@ var config = merge({
   mergeNavbar: false,
   formatUpdated: '',
   externalLinkTarget: '_blank',
-  routerModel: 'hash',
+  routerMode: 'hash',
   noCompileLinks: []
 }, window.$docsify);
 
@@ -238,6 +238,11 @@ function toggleClass (el, type, val) {
   el && el.classList[val ? type : 'toggle'](val || type);
 }
 
+function style (content) {
+  appendTo(head, create('style', content));
+}
+
+
 
 var dom = Object.freeze({
 	getNode: getNode,
@@ -251,7 +256,8 @@ var dom = Object.freeze({
 	before: before,
 	on: on,
 	off: off,
-	toggleClass: toggleClass
+	toggleClass: toggleClass,
+	style: style
 });
 
 var inBrowser = typeof window !== 'undefined';
@@ -484,10 +490,10 @@ var cssVars = function (color) {
       if (!/\.css$/.test(href)) { return }
 
       get(href).then(function (res) {
-        var style = create('style', res);
+        var style$$1 = create('style', res);
 
-        head.appendChild(style);
-        replaceVar(style, color);
+        head.appendChild(style$$1);
+        replaceVar(style$$1, color);
       });
     }
   });
@@ -2817,11 +2823,13 @@ Compiler.prototype._initRenderer = function _initRenderer () {
     var router = ref.router;
     var contentBase = ref.contentBase;
   var _self = this;
+  var origin = {};
+
   /**
    * render anchor tag
    * @link https://github.com/chjj/marked#overriding-renderer-methods
    */
-  renderer.heading = function (text, level) {
+  origin.heading = renderer.heading = function (text, level) {
     var nextToc = { level: level, title: text };
 
     if (/{docsify-ignore}/g.test(text)) {
@@ -2844,14 +2852,14 @@ Compiler.prototype._initRenderer = function _initRenderer () {
     return ("<h" + level + " id=\"" + slug + "\"><a href=\"" + url + "\" data-id=\"" + slug + "\" class=\"anchor\"><span>" + text + "</span></a></h" + level + ">")
   };
   // highlight code
-  renderer.code = function (code, lang) {
+  origin.code = renderer.code = function (code, lang) {
       if ( lang === void 0 ) lang = '';
 
     var hl = prism.highlight(code, prism.languages[lang] || prism.languages.markup);
 
     return ("<pre v-pre data-lang=\"" + lang + "\"><code class=\"lang-" + lang + "\">" + hl + "</code></pre>")
   };
-  renderer.link = function (href, title, text) {
+  origin.link = renderer.link = function (href, title, text) {
     var blank = '';
 
     if (!/:|(\/{2})/.test(href) &&
@@ -2875,7 +2883,7 @@ Compiler.prototype._initRenderer = function _initRenderer () {
     }
     return ("<a href=\"" + href + "\"" + (title || '') + blank + ">" + text + "</a>")
   };
-  renderer.paragraph = function (text) {
+  origin.paragraph = renderer.paragraph = function (text) {
     if (/^!&gt;/.test(text)) {
       return helper('tip', text)
     } else if (/^\?&gt;/.test(text)) {
@@ -2883,7 +2891,7 @@ Compiler.prototype._initRenderer = function _initRenderer () {
     }
     return ("<p>" + text + "</p>")
   };
-  renderer.image = function (href, title, text) {
+  origin.image = renderer.image = function (href, title, text) {
     var url = href;
     var titleHTML = title ? (" title=\"" + title + "\"") : '';
 
@@ -2894,6 +2902,8 @@ Compiler.prototype._initRenderer = function _initRenderer () {
     return ("<img src=\"" + url + "\" data-origin=\"" + href + "\" alt=\"" + text + "\"" + titleHTML + ">")
   };
 
+  renderer.origin = origin;
+
   return renderer
 };
 
@@ -3027,15 +3037,128 @@ function getAndActive (router, el, isParent, autoTitle) {
   return target
 }
 
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) { descriptor.writable = true; } Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) { defineProperties(Constructor.prototype, protoProps); } if (staticProps) { defineProperties(Constructor, staticProps); } return Constructor; }; }();
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+var Tweezer = function () {
+  function Tweezer() {
+    var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+
+    _classCallCheck(this, Tweezer);
+
+    this.duration = opts.duration || 1000;
+    this.ease = opts.easing || this._defaultEase;
+    this.start = opts.start;
+    this.end = opts.end;
+
+    this.frame = null;
+    this.next = null;
+    this.isRunning = false;
+    this.events = {};
+    this.direction = this.start < this.end ? 'up' : 'down';
+  }
+
+  _createClass(Tweezer, [{
+    key: 'begin',
+    value: function begin() {
+      if (!this.isRunning && this.next !== this.end) {
+        this.frame = window.requestAnimationFrame(this._tick.bind(this));
+      }
+      return this;
+    }
+  }, {
+    key: 'stop',
+    value: function stop() {
+      window.cancelAnimationFrame(this.frame);
+      this.isRunning = false;
+      this.frame = null;
+      this.timeStart = null;
+      this.next = null;
+      return this;
+    }
+  }, {
+    key: 'on',
+    value: function on(name, handler) {
+      this.events[name] = this.events[name] || [];
+      this.events[name].push(handler);
+      return this;
+    }
+  }, {
+    key: 'emit',
+    value: function emit(name, val) {
+      var _this = this;
+
+      var e = this.events[name];
+      e && e.forEach(function (handler) {
+        return handler.call(_this, val);
+      });
+    }
+  }, {
+    key: '_tick',
+    value: function _tick(currentTime) {
+      this.isRunning = true;
+
+      var lastTick = this.next || this.start;
+
+      if (!this.timeStart) { this.timeStart = currentTime; }
+      this.timeElapsed = currentTime - this.timeStart;
+      this.next = Math.round(this.ease(this.timeElapsed, this.start, this.end - this.start, this.duration));
+
+      if (this._shouldTick(lastTick)) {
+        this.emit('tick', this.next);
+        this.frame = window.requestAnimationFrame(this._tick.bind(this));
+      } else {
+        this.emit('tick', this.end);
+        this.emit('done', null);
+      }
+    }
+  }, {
+    key: '_shouldTick',
+    value: function _shouldTick(lastTick) {
+      return {
+        up: this.next < this.end && lastTick <= this.next,
+        down: this.next > this.end && lastTick >= this.next
+      }[this.direction];
+    }
+  }, {
+    key: '_defaultEase',
+    value: function _defaultEase(t, b, c, d) {
+      if ((t /= d / 2) < 1) { return c / 2 * t * t + b; }
+      return -c / 2 * (--t * (t - 2) - 1) + b;
+    }
+  }]);
+
+  return Tweezer;
+}();
+
 var nav = {};
 var hoverOver = false;
+var scroller = null;
+var enableScrollEvent = true;
+var coverHeight = 0;
+
+function scrollTo (el) {
+  if (scroller) { scroller.stop(); }
+  enableScrollEvent = false;
+  scroller = new Tweezer({
+    start: window.scrollY,
+    end: el.getBoundingClientRect().top + window.scrollY,
+    duration: 500
+  })
+  .on('tick', function (v) { return window.scrollTo(0, v); })
+  .on('done', function () { enableScrollEvent = true; scroller = null; })
+  .begin();
+}
 
 function highlight () {
+  if (!enableScrollEvent) { return }
   var sidebar = getNode('.sidebar');
   var anchors = findAll('.anchor');
   var wrap = find(sidebar, '.sidebar-nav');
   var active = find(sidebar, 'li.active');
-  var top = body.scrollTop;
+  var doc = document.documentElement;
+  var top = (doc && doc.scrollTop || document.body.scrollTop) - coverHeight;
   var last;
 
   for (var i = 0, len = anchors.length; i < len; i += 1) {
@@ -3079,7 +3202,8 @@ function highlight () {
 }
 
 function scrollActiveSidebar (router) {
-  if (isMobile) { return }
+  var cover = find('.cover.show');
+  coverHeight = cover ? cover.offsetHeight : 0;
 
   var sidebar = getNode('.sidebar');
   var lis = findAll(sidebar, 'li');
@@ -3094,9 +3218,11 @@ function scrollActiveSidebar (router) {
       href = router.parse(href).query.id;
     }
 
-    nav[decodeURIComponent(href)] = li;
+    if (href) { nav[decodeURIComponent(href)] = li; }
   }
 
+  if (isMobile) { return }
+
   off('scroll', highlight);
   on('scroll', highlight);
   on(sidebar, 'mouseover', function () { hoverOver = true; });
@@ -3104,8 +3230,16 @@ function scrollActiveSidebar (router) {
 }
 
 function scrollIntoView (id) {
+  if (!id) { return }
+
   var section = find('#' + id);
-  section && section.scrollIntoView();
+  section && scrollTo(section);
+
+  var li = nav[id];
+  var sidebar = getNode('.sidebar');
+  var active = find(sidebar, 'li.active');
+  active && active.classList.remove('active');
+  li && li.classList.add('active');
 }
 
 var scrollEl = $.scrollingElement || $.documentElement;
@@ -3822,7 +3956,7 @@ initGlobalAPI();
 /**
  * Version
  */
-Docsify.version = '4.2.9';
+Docsify.version = '4.3.6';
 
 /**
  * Run Docsify

lib/plugins/codesponsor.js

@@ -0,0 +1,64 @@
+(function () {
+'use strict';
+
+var DEFAULT_OPTIONS = {
+  theme: 'light',
+  image: 'show'
+};
+
+function tpl (id, options) {
+  var qs = [];
+
+  for (var key in options) {
+    qs.push((key + "=" + (options[key])));
+  }
+
+  var div = Docsify.dom.create('div');
+
+  Docsify.dom.toggleClass(div, 'codesponsor');
+  div.innerHTML = "<iframe\n      scrolling=0\n      frameborder=0\n      width=250\n      height=250\n      id=\"code-sponsor-embed-iframe\"\n      src=\"https://app.codesponsor.io/widgets/" + id + "?" + (qs.join('&')) + "\">\n    </iframe>";
+
+  return div
+}
+
+function appIframe (id, opts) {
+  var html = tpl(id, opts);
+
+  Docsify.dom.before(Docsify.dom.find('section.content'), html);
+}
+
+function appendStyle () {
+  Docsify.dom.style("\n    .codesponsor {\n      position: relative;\n      float: right;\n      right: 10px;\n      top: 10px;\n    }\n\n    @media screen and (min-width: 1600px) {\n      body.sticky .codesponsor {\n        position: fixed;\n      }\n\n      .codesponsor {\n        position: absolute;\n        bottom: 10px;\n        top: auto;\n        float: none;\n      }\n    }\n  ");
+}
+
+var install = function (hook, vm) {
+  var config = vm.config.codesponsor;
+  var id;
+
+  if (typeof config === 'string') {
+    id = config;
+    config = {};
+  } else {
+    id = config.id;
+  }
+
+  var opts = Docsify.util.merge(DEFAULT_OPTIONS, config);
+
+  if (!id) {
+    throw Error('codesponsor plugin need id')
+  }
+
+  if (Docsify.util.isMobile) {
+    return
+  }
+
+  // Append style
+  hook.ready(function () {
+    appendStyle();
+    appIframe(id, opts);
+  });
+};
+
+window.$docsify.plugins = [].concat(install, window.$docsify.plugins);
+
+}());

lib/plugins/codesponsor.min.js

@@ -0,0 +1 @@
+!function(){"use strict";function o(o,n){var i=[];for(var s in n)i.push(s+"="+n[s]);var e=Docsify.dom.create("div");return Docsify.dom.toggleClass(e,"codesponsor"),e.innerHTML='<iframe\n      scrolling=0\n      frameborder=0\n      width=250\n      height=250\n      id="code-sponsor-embed-iframe"\n      src="https://app.codesponsor.io/widgets/'+o+"?"+i.join("&")+'">\n    </iframe>',e}function n(n,i){var s=o(n,i);Docsify.dom.before(Docsify.dom.find("section.content"),s)}function i(){Docsify.dom.style("\n    .codesponsor {\n      position: relative;\n      float: right;\n      right: 10px;\n      top: 10px;\n    }\n\n    @media screen and (min-width: 1600px) {\n      body.sticky .codesponsor {\n        position: fixed;\n      }\n\n      .codesponsor {\n        position: absolute;\n        bottom: 10px;\n        top: auto;\n        float: none;\n      }\n    }\n  ")}var s={theme:"light",image:"show"},e=function(o,e){var t,r=e.config.codesponsor;"string"==typeof r?(t=r,r={}):t=r.id;var c=Docsify.util.merge(s,r);if(!t)throw Error("codesponsor plugin need id");Docsify.util.isMobile||o.ready(function(){i(),n(t,c)})};window.$docsify.plugins=[].concat(e,window.$docsify.plugins)}();

lib/plugins/search.js

@@ -171,8 +171,8 @@ var NO_DATA_TEXT = '';
 
 function style () {
   var code = "\n.sidebar {\n  padding-top: 0;\n}\n\n.search {\n  margin-bottom: 20px;\n  padding: 6px;\n  border-bottom: 1px solid #eee;\n}\n\n.search .results-panel {\n  display: none;\n}\n\n.search .results-panel.show {\n  display: block;\n}\n\n.search input {\n  outline: none;\n  border: none;\n  width: 100%;\n  padding: 7px;\n  line-height: 22px;\n  font-size: 14px;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n}\n\n.search h2 {\n  font-size: 17px;\n  margin: 10px 0;\n}\n\n.search a {\n  text-decoration: none;\n  color: inherit;\n}\n\n.search .matching-post {\n  border-bottom: 1px solid #eee;\n}\n\n.search .matching-post:last-child {\n  border-bottom: 0;\n}\n\n.search p {\n  font-size: 14px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n}\n\n.search p.empty {\n  text-align: center;\n}";
-  var style = Docsify.dom.create('style', code);
-  Docsify.dom.appendTo(Docsify.dom.head, style);
+
+  Docsify.dom.style(code);
 }
 
 function tpl (opts, defaultValue) {

lib/plugins/search.min.js

@@ -1 +1 @@
-!function(){"use strict";function e(e){var n={"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;","/":"&#x2F;"};return String(e).replace(/[&<>"'\/]/g,function(e){return n[e]})}function n(e){var n=[];return h.dom.findAll("a:not([data-nosearch])").map(function(t){var o=t.href,i=t.getAttribute("href"),r=e.parse(o).path;r&&-1===n.indexOf(r)&&!Docsify.util.isAbsolutePath(i)&&n.push(r)}),n}function t(e){localStorage.setItem("docsify.search.expires",Date.now()+e),localStorage.setItem("docsify.search.index",JSON.stringify(y))}function o(e,n,t,o){void 0===n&&(n="");var i,r=window.marked.lexer(n),a=window.Docsify.slugify,s={};return r.forEach(function(n){if("heading"===n.type&&n.depth<=o)i=t.toURL(e,{id:a(n.text)}),s[i]={slug:i,title:n.text,body:""};else{if(!i)return;s[i]?s[i].body?s[i].body+="\n"+(n.text||""):s[i].body=n.text:s[i]={slug:i,title:"",body:""}}}),a.clear(),s}function i(n){var t=[],o=[];Object.keys(y).forEach(function(e){o=o.concat(Object.keys(y[e]).map(function(n){return y[e][n]}))}),n=[].concat(n,n.trim().split(/[\s\-\，\\\/]+/));for(var i=0;i<o.length;i++)!function(i){var r=o[i],a=!1,s="",c=r.title&&r.title.trim(),f=r.body&&r.body.trim(),l=r.slug||"";if(c&&f&&(n.forEach(function(n,t){var o=new RegExp(n,"gi"),i=-1,r=-1;if(i=c&&c.search(o),r=f&&f.search(o),i<0&&r<0)a=!1;else{a=!0,r<0&&(r=0);var l=0,d=0;l=r<11?0:r-10,d=0===l?70:r+n.length+60,d>f.length&&(d=f.length);var p="..."+e(f).substring(l,d).replace(o,'<em class="search-keyword">'+n+"</em>")+"...";s+=p}}),a)){var d={title:e(c),content:s,url:l};t.push(d)}}(i);return t}function r(e,i){h=Docsify;var r="auto"===e.paths,a=localStorage.getItem("docsify.search.expires")<Date.now();if(y=JSON.parse(localStorage.getItem("docsify.search.index")),a)y={};else if(!r)return;var s=r?n(i.router):e.paths,c=s.length,f=0;s.forEach(function(n){if(y[n])return f++;h.get(i.router.getFile(n)).then(function(r){y[n]=o(n,r,i.router,e.depth),c===++f&&t(e.maxAge)})})}function a(){var e=Docsify.dom.create("style","\n.sidebar {\n  padding-top: 0;\n}\n\n.search {\n  margin-bottom: 20px;\n  padding: 6px;\n  border-bottom: 1px solid #eee;\n}\n\n.search .results-panel {\n  display: none;\n}\n\n.search .results-panel.show {\n  display: block;\n}\n\n.search input {\n  outline: none;\n  border: none;\n  width: 100%;\n  padding: 7px;\n  line-height: 22px;\n  font-size: 14px;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n}\n\n.search h2 {\n  font-size: 17px;\n  margin: 10px 0;\n}\n\n.search a {\n  text-decoration: none;\n  color: inherit;\n}\n\n.search .matching-post {\n  border-bottom: 1px solid #eee;\n}\n\n.search .matching-post:last-child {\n  border-bottom: 0;\n}\n\n.search p {\n  font-size: 14px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n}\n\n.search p.empty {\n  text-align: center;\n}");Docsify.dom.appendTo(Docsify.dom.head,e)}function s(e,n){void 0===n&&(n="");var t='<input type="search" value="'+n+'" /><div class="results-panel"></div></div>',o=Docsify.dom.create("div",t),i=Docsify.dom.find("aside");Docsify.dom.toggleClass(o,"search"),Docsify.dom.before(i,o)}function c(e){var n=Docsify.dom.find("div.search"),t=Docsify.dom.find(n,".results-panel");if(!e)return t.classList.remove("show"),void(t.innerHTML="");var o=i(e),r="";o.forEach(function(e){r+='<div class="matching-post">\n<h2><a href="'+e.url+'">'+e.title+"</a></h2>\n<p>"+e.content+"</p>\n</div>"}),t.classList.add("show"),t.innerHTML=r||'<p class="empty">'+m+"</p>"}function f(){var e,n=Docsify.dom.find("div.search"),t=Docsify.dom.find(n,"input");Docsify.dom.on(n,"click",function(e){return"A"!==e.target.tagName&&e.stopPropagation()}),Docsify.dom.on(t,"input",function(n){clearTimeout(e),e=setTimeout(function(e){return c(n.target.value.trim())},100)})}function l(e,n){var t=Docsify.dom.getNode('.search input[type="search"]');if(t)if("string"==typeof e)t.placeholder=e;else{var o=Object.keys(e).filter(function(e){return n.indexOf(e)>-1})[0];t.placeholder=e[o]}}function d(e,n){if("string"==typeof e)m=e;else{var t=Object.keys(e).filter(function(e){return n.indexOf(e)>-1})[0];m=e[t]}}function p(e,n){var t=n.router.parse().query.s;a(),s(e,t),f(),t&&setTimeout(function(e){return c(t)},500)}function u(e,n){l(e.placeholder,n.route.path),d(e.noData,n.route.path)}var h,y={},m="",g={placeholder:"Type to search",noData:"No Results!",paths:"auto",depth:2,maxAge:864e5},v=function(e,n){var t=Docsify.util,o=n.config.search||g;Array.isArray(o)?g.paths=o:"object"==typeof o&&(g.paths=Array.isArray(o.paths)?o.paths:"auto",g.maxAge=t.isPrimitive(o.maxAge)?o.maxAge:g.maxAge,g.placeholder=o.placeholder||g.placeholder,g.noData=o.noData||g.noData,g.depth=o.depth||g.depth);var i="auto"===g.paths;e.mounted(function(e){p(g,n),!i&&r(g,n)}),e.doneEach(function(e){u(g,n),i&&r(g,n)})};$docsify.plugins=[].concat(v,$docsify.plugins)}();
+!function(){"use strict";function e(e){var n={"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;","/":"&#x2F;"};return String(e).replace(/[&<>"'\/]/g,function(e){return n[e]})}function n(e){var n=[];return h.dom.findAll("a:not([data-nosearch])").map(function(t){var o=t.href,i=t.getAttribute("href"),r=e.parse(o).path;r&&-1===n.indexOf(r)&&!Docsify.util.isAbsolutePath(i)&&n.push(r)}),n}function t(e){localStorage.setItem("docsify.search.expires",Date.now()+e),localStorage.setItem("docsify.search.index",JSON.stringify(g))}function o(e,n,t,o){void 0===n&&(n="");var i,r=window.marked.lexer(n),a=window.Docsify.slugify,s={};return r.forEach(function(n){if("heading"===n.type&&n.depth<=o)i=t.toURL(e,{id:a(n.text)}),s[i]={slug:i,title:n.text,body:""};else{if(!i)return;s[i]?s[i].body?s[i].body+="\n"+(n.text||""):s[i].body=n.text:s[i]={slug:i,title:"",body:""}}}),a.clear(),s}function i(n){var t=[],o=[];Object.keys(g).forEach(function(e){o=o.concat(Object.keys(g[e]).map(function(n){return g[e][n]}))}),n=[].concat(n,n.trim().split(/[\s\-\，\\\/]+/));for(var i=0;i<o.length;i++)!function(i){var r=o[i],a=!1,s="",c=r.title&&r.title.trim(),l=r.body&&r.body.trim(),f=r.slug||"";if(c&&l&&(n.forEach(function(n,t){var o=new RegExp(n,"gi"),i=-1,r=-1;if(i=c&&c.search(o),r=l&&l.search(o),i<0&&r<0)a=!1;else{a=!0,r<0&&(r=0);var f=0,d=0;f=r<11?0:r-10,d=0===f?70:r+n.length+60,d>l.length&&(d=l.length);var p="..."+e(l).substring(f,d).replace(o,'<em class="search-keyword">'+n+"</em>")+"...";s+=p}}),a)){var d={title:e(c),content:s,url:f};t.push(d)}}(i);return t}function r(e,i){h=Docsify;var r="auto"===e.paths,a=localStorage.getItem("docsify.search.expires")<Date.now();if(g=JSON.parse(localStorage.getItem("docsify.search.index")),a)g={};else if(!r)return;var s=r?n(i.router):e.paths,c=s.length,l=0;s.forEach(function(n){if(g[n])return l++;h.get(i.router.getFile(n)).then(function(r){g[n]=o(n,r,i.router,e.depth),c===++l&&t(e.maxAge)})})}function a(){Docsify.dom.style("\n.sidebar {\n  padding-top: 0;\n}\n\n.search {\n  margin-bottom: 20px;\n  padding: 6px;\n  border-bottom: 1px solid #eee;\n}\n\n.search .results-panel {\n  display: none;\n}\n\n.search .results-panel.show {\n  display: block;\n}\n\n.search input {\n  outline: none;\n  border: none;\n  width: 100%;\n  padding: 7px;\n  line-height: 22px;\n  font-size: 14px;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n}\n\n.search h2 {\n  font-size: 17px;\n  margin: 10px 0;\n}\n\n.search a {\n  text-decoration: none;\n  color: inherit;\n}\n\n.search .matching-post {\n  border-bottom: 1px solid #eee;\n}\n\n.search .matching-post:last-child {\n  border-bottom: 0;\n}\n\n.search p {\n  font-size: 14px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n}\n\n.search p.empty {\n  text-align: center;\n}")}function s(e,n){void 0===n&&(n="");var t='<input type="search" value="'+n+'" /><div class="results-panel"></div></div>',o=Docsify.dom.create("div",t),i=Docsify.dom.find("aside");Docsify.dom.toggleClass(o,"search"),Docsify.dom.before(i,o)}function c(e){var n=Docsify.dom.find("div.search"),t=Docsify.dom.find(n,".results-panel");if(!e)return t.classList.remove("show"),void(t.innerHTML="");var o=i(e),r="";o.forEach(function(e){r+='<div class="matching-post">\n<h2><a href="'+e.url+'">'+e.title+"</a></h2>\n<p>"+e.content+"</p>\n</div>"}),t.classList.add("show"),t.innerHTML=r||'<p class="empty">'+y+"</p>"}function l(){var e,n=Docsify.dom.find("div.search"),t=Docsify.dom.find(n,"input");Docsify.dom.on(n,"click",function(e){return"A"!==e.target.tagName&&e.stopPropagation()}),Docsify.dom.on(t,"input",function(n){clearTimeout(e),e=setTimeout(function(e){return c(n.target.value.trim())},100)})}function f(e,n){var t=Docsify.dom.getNode('.search input[type="search"]');if(t)if("string"==typeof e)t.placeholder=e;else{var o=Object.keys(e).filter(function(e){return n.indexOf(e)>-1})[0];t.placeholder=e[o]}}function d(e,n){if("string"==typeof e)y=e;else{var t=Object.keys(e).filter(function(e){return n.indexOf(e)>-1})[0];y=e[t]}}function p(e,n){var t=n.router.parse().query.s;a(),s(e,t),l(),t&&setTimeout(function(e){return c(t)},500)}function u(e,n){f(e.placeholder,n.route.path),d(e.noData,n.route.path)}var h,g={},y="",m={placeholder:"Type to search",noData:"No Results!",paths:"auto",depth:2,maxAge:864e5},v=function(e,n){var t=Docsify.util,o=n.config.search||m;Array.isArray(o)?m.paths=o:"object"==typeof o&&(m.paths=Array.isArray(o.paths)?o.paths:"auto",m.maxAge=t.isPrimitive(o.maxAge)?o.maxAge:m.maxAge,m.placeholder=o.placeholder||m.placeholder,m.noData=o.noData||m.noData,m.depth=o.depth||m.depth);var i="auto"===m.paths;e.mounted(function(e){p(m,n),!i&&r(m,n)}),e.doneEach(function(e){u(m,n),i&&r(m,n)})};$docsify.plugins=[].concat(v,$docsify.plugins)}();

package.json

@@ -1,6 +1,6 @@
 {
   "name": "docsify",
-  "version": "4.2.9",
+  "version": "4.3.6",
   "description": "A magical documentation generator.",
   "author": {
     "name": "qingwei-li",
@@ -33,6 +33,7 @@
     "marked": "^0.3.6",
     "prismjs": "^1.6.0",
     "tinydate": "^1.0.0",
+    "tweezer.js": "^1.4.0",
     "zoom-image": "^0.1.4"
   },
   "devDependencies": {

packages/docsify-server-renderer/README.md

@@ -3,7 +3,7 @@
 ## Install
 
 ```bash
-yarn add docsify-server-render
+yarn add docsify-server-renderer
 ```
 
 ## Usage

packages/docsify-server-renderer/package-lock.json

@@ -37,5 +37,5 @@
       "integrity": "sha1-6DWIAbhrg7F1YNTjw4LXrvIQCUQ="
     }
   },
-  "version": "4.2.9"
+  "version": "4.3.6"
 }

packages/docsify-server-renderer/package.json

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

src/core/config.js

@@ -21,7 +21,7 @@ const config = merge({
   mergeNavbar: false,
   formatUpdated: '',
   externalLinkTarget: '_blank',
-  routerModel: 'hash',
+  routerMode: 'hash',
   noCompileLinks: []
 }, window.$docsify)
 

src/core/event/scroll.js

@@ -1,15 +1,34 @@
 import { isMobile } from '../util/env'
 import * as dom from '../util/dom'
+import Tweezer from 'tweezer.js'
 
 const nav = {}
 let hoverOver = false
+let scroller = null
+let enableScrollEvent = true
+let coverHeight = 0
+
+function scrollTo (el) {
+  if (scroller) scroller.stop()
+  enableScrollEvent = false
+  scroller = new Tweezer({
+    start: window.scrollY,
+    end: el.getBoundingClientRect().top + window.scrollY,
+    duration: 500
+  })
+  .on('tick', v => window.scrollTo(0, v))
+  .on('done', () => { enableScrollEvent = true; scroller = null })
+  .begin()
+}
 
 function highlight () {
+  if (!enableScrollEvent) return
   const sidebar = dom.getNode('.sidebar')
   const anchors = dom.findAll('.anchor')
   const wrap = dom.find(sidebar, '.sidebar-nav')
   let active = dom.find(sidebar, 'li.active')
-  const top = dom.body.scrollTop
+  const doc = document.documentElement
+  const top = (doc && doc.scrollTop || document.body.scrollTop) - coverHeight
   let last
 
   for (let i = 0, len = anchors.length; i < len; i += 1) {
@@ -53,7 +72,8 @@ function highlight () {
 }
 
 export function scrollActiveSidebar (router) {
-  if (isMobile) return
+  const cover = dom.find('.cover.show')
+  coverHeight = cover ? cover.offsetHeight : 0
 
   const sidebar = dom.getNode('.sidebar')
   const lis = dom.findAll(sidebar, 'li')
@@ -68,9 +88,11 @@ export function scrollActiveSidebar (router) {
       href = router.parse(href).query.id
     }
 
-    nav[decodeURIComponent(href)] = li
+    if (href) nav[decodeURIComponent(href)] = li
   }
 
+  if (isMobile) return
+
   dom.off('scroll', highlight)
   dom.on('scroll', highlight)
   dom.on(sidebar, 'mouseover', () => { hoverOver = true })
@@ -78,8 +100,16 @@ export function scrollActiveSidebar (router) {
 }
 
 export function scrollIntoView (id) {
+  if (!id) return
+
   const section = dom.find('#' + id)
-  section && section.scrollIntoView()
+  section && scrollTo(section)
+
+  const li = nav[id]
+  const sidebar = dom.getNode('.sidebar')
+  const active = dom.find(sidebar, 'li.active')
+  active && active.classList.remove('active')
+  li && li.classList.add('active')
 }
 
 const scrollEl = dom.$.scrollingElement || dom.$.documentElement

src/core/render/compiler.js

@@ -61,11 +61,13 @@ export class Compiler {
     const renderer = new marked.Renderer()
     const { linkTarget, router, contentBase } = this
     const _self = this
+    const origin = {}
+
     /**
      * render anchor tag
      * @link https://github.com/chjj/marked#overriding-renderer-methods
      */
-    renderer.heading = function (text, level) {
+    origin.heading = renderer.heading = function (text, level) {
       const nextToc = { level, title: text }
 
       if (/{docsify-ignore}/g.test(text)) {
@@ -88,12 +90,12 @@ export class Compiler {
       return `<h${level} id="${slug}"><a href="${url}" data-id="${slug}" class="anchor"><span>${text}</span></a></h${level}>`
     }
     // highlight code
-    renderer.code = function (code, lang = '') {
+    origin.code = renderer.code = function (code, lang = '') {
       const hl = Prism.highlight(code, Prism.languages[lang] || Prism.languages.markup)
 
       return `<pre v-pre data-lang="${lang}"><code class="lang-${lang}">${hl}</code></pre>`
     }
-    renderer.link = function (href, title, text) {
+    origin.link = renderer.link = function (href, title, text) {
       let blank = ''
 
       if (!/:|(\/{2})/.test(href) &&
@@ -117,7 +119,7 @@ export class Compiler {
       }
       return `<a href="${href}"${title || ''}${blank}>${text}</a>`
     }
-    renderer.paragraph = function (text) {
+    origin.paragraph = renderer.paragraph = function (text) {
       if (/^!&gt;/.test(text)) {
         return helperTpl('tip', text)
       } else if (/^\?&gt;/.test(text)) {
@@ -125,7 +127,7 @@ export class Compiler {
       }
       return `<p>${text}</p>`
     }
-    renderer.image = function (href, title, text) {
+    origin.image = renderer.image = function (href, title, text) {
       let url = href
       const titleHTML = title ? ` title="${title}"` : ''
 
@@ -136,6 +138,8 @@ export class Compiler {
       return `<img src="${url}" data-origin="${href}" alt="${text}"${titleHTML}>`
     }
 
+    renderer.origin = origin
+
     return renderer
   }
 

src/core/util/dom.js

@@ -81,3 +81,8 @@ export function off (el, type, handler) {
 export function toggleClass (el, type, val) {
   el && el.classList[val ? type : 'toggle'](val || type)
 }
+
+export function style (content) {
+  appendTo(head, create('style', content))
+}
+

src/plugins/codesponsor.js

@@ -0,0 +1,86 @@
+const DEFAULT_OPTIONS = {
+  theme: 'light',
+  image: 'show'
+}
+
+function tpl (id, options) {
+  const qs = []
+
+  for (const key in options) {
+    qs.push(`${key}=${options[key]}`)
+  }
+
+  const div = Docsify.dom.create('div')
+
+  Docsify.dom.toggleClass(div, 'codesponsor')
+  div.innerHTML = `<iframe
+      scrolling=0
+      frameborder=0
+      width=250
+      height=250
+      id="code-sponsor-embed-iframe"
+      src="https://app.codesponsor.io/widgets/${id}?${qs.join('&')}">
+    </iframe>`
+
+  return div
+}
+
+function appIframe (id, opts) {
+  const html = tpl(id, opts)
+
+  Docsify.dom.before(Docsify.dom.find('section.content'), html)
+}
+
+function appendStyle () {
+  Docsify.dom.style(`
+    .codesponsor {
+      position: relative;
+      float: right;
+      right: 10px;
+      top: 10px;
+    }
+
+    @media screen and (min-width: 1600px) {
+      body.sticky .codesponsor {
+        position: fixed;
+      }
+
+      .codesponsor {
+        position: absolute;
+        bottom: 10px;
+        top: auto;
+        float: none;
+      }
+    }
+  `)
+}
+
+const install = function (hook, vm) {
+  let config = vm.config.codesponsor
+  let id
+
+  if (typeof config === 'string') {
+    id = config
+    config = {}
+  } else {
+    id = config.id
+  }
+
+  const opts = Docsify.util.merge(DEFAULT_OPTIONS, config)
+
+  if (!id) {
+    throw Error('codesponsor plugin need id')
+  }
+
+  if (Docsify.util.isMobile) {
+    return
+  }
+
+  // Append style
+  hook.ready(() => {
+    appendStyle()
+    appIframe(id, opts)
+  })
+}
+
+window.$docsify.plugins = [].concat(install, window.$docsify.plugins)

src/plugins/search/component.js

@@ -64,8 +64,8 @@ function style () {
 .search p.empty {
   text-align: center;
 }`
-  const style = Docsify.dom.create('style', code)
-  Docsify.dom.appendTo(Docsify.dom.head, style)
+
+  Docsify.dom.style(code)
 }
 
 function tpl (opts, defaultValue = '') {

src/themes/basic/_layout.css

@@ -325,7 +325,7 @@ body.sticky {
 
 /* main content */
 .content {
-  padding-top: 20px;
+  padding-top: 60px;
   position: absolute 0 0 0 $sidebar-width;
   transition: left 250ms ease;
 }
@@ -471,6 +471,7 @@ body.close {
     left: 0;
     max-width: 100vw;
     position: static;
+    padding-top: 20px;
     transition: transform 250ms ease;
   }
 

src/themes/buble.css

@@ -226,6 +226,7 @@ $sidebar-width: 16rem;
   overflow: inherit;
   padding: 20px 0.8em 20px;
   position: relative;
+  white-space: inherit;
 }
 
 .markdown-section code::after, .markdown-section code::before {