-> v1.10.3

CHANGELOG.md

@@ -1,3 +1,16 @@
+## 1.10.3
+### Bug fixes
+- compatible vuep QingWei-Li/vuep/issues/2
+- fix sidebar scroll, fixed #63
+
+## 1.10.2
+### Bug fixes
+- Fix render emojis again
+
+## 1.10.1
+### Bug fixes
+- Fix render emojis
+
 ## 1.10.0
 ### Features
 - Support emoji :laughing:

docs/_coverpage.md

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

lib/docsify.js

@@ -168,6 +168,12 @@ var merge = Object.assign || function (to) {
   return to
 };
 
+function emojify (text) {
+  return text
+    .replace(/:(\w*?):/ig, '<img class="emoji" src="https://assets-cdn.github.com/images/icons/emoji/$1.png" alt="$1" />')
+    .replace(/__colon__/g, ':')
+}
+
 /**
  * Active sidebar when scroll
  * @link https://buble.surge.sh/
@@ -178,6 +184,8 @@ function scrollActiveSidebar () {
   var hoveredOverSidebar = false;
   var anchors = document.querySelectorAll('.anchor');
   var sidebar = document.querySelector('aside.sidebar');
+  var sidebarHeight = sidebar.clientHeight;
+
   var nav = {};
   var lis = sidebar.querySelectorAll('li');
   var active = sidebar.querySelector('li.active');
@@ -216,7 +224,25 @@ function scrollActiveSidebar () {
 
     li.classList.add('active');
     active = li;
-    !hoveredOverSidebar && !sticky.noSticky && active.scrollIntoView(false);
+
+    // scroll into view
+    // https://github.com/vuejs/vuejs.org/blob/master/themes/vue/source/js/common.js#L282-L297
+    if (!hoveredOverSidebar && !sticky.noSticky) {
+      var currentPageOffset = 0;
+      var currentActiveOffset = active.offsetTop + active.clientHeight + 40;
+      var currentActiveIsInView = (
+        active.offsetTop >= sidebar.scrollTop &&
+        currentActiveOffset <= sidebar.scrollTop + sidebarHeight
+      );
+      var linkNotFurtherThanSidebarHeight = currentActiveOffset - currentPageOffset < sidebarHeight;
+      var newScrollTop = currentActiveIsInView
+        ? sidebar.scrollTop
+        : linkNotFurtherThanSidebarHeight
+          ? currentPageOffset
+          : currentActiveOffset - sidebarHeight;
+
+      sidebar.scrollTop = newScrollTop;
+    }
   }
 
   window.removeEventListener('scroll', highlight);
@@ -2510,7 +2536,7 @@ function init (options) {
 
     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>")
+    return ("<pre v-pre data-lang=\"" + lang + "\"><code class=\"lang-" + lang + "\">" + (hl.replace(/:/g, '__colon__')) + "</code></pre>")
   };
   renderer.link = function (href, title, text) {
     if (OPTIONS$1.router && !/:/.test(href)) {
@@ -2528,16 +2554,16 @@ function init (options) {
     return ("<p>" + text + "</p>")
   };
 
-  renderer.text = function (text) {
-    return text.replace(/:(\S*?):/ig, '<img class="emoji" src="https://assets-cdn.github.com/images/icons/emoji/$1.png" alt="$1" />')
-  };
-
   if (typeof OPTIONS$1.markdown === 'function') {
     markdown.setOptions({ renderer: renderer });
     markdown = OPTIONS$1.markdown.call(this, markdown);
   } else {
     markdown.setOptions(merge({ renderer: renderer }, OPTIONS$1.markdown));
   }
+
+  var md = markdown;
+
+  markdown = function (text) { return emojify(md(text)); };
 }
 
 /**
@@ -2571,13 +2597,17 @@ function renderArticle (content) {
   if (!OPTIONS$1.sidebar && !OPTIONS$1.loadSidebar) { renderSidebar(); }
 
   if (content && typeof Vue !== 'undefined') {
-    var script = content.match('<script[^>]*?>([^<]+)</script>');
-
-    script && document.body.querySelector('article script').remove();
     CACHE.vm && CACHE.vm.$destroy();
-    CACHE.vm = script
-      ? new Function(("return " + (script[1].trim())))()
+
+    var script = [].slice.call(
+      document.body.querySelectorAll('article>script'))
+        .filter(function (script) { return !/template/.test(script.type); }
+      )[0];
+
+    CACHE.vm = script && script.remove()
+      ? new Function(("return " + (script.innerText.trim())))()
       : new Vue({ el: 'main' }); // eslint-disable-line
+
     CACHE.vm && CACHE.vm.$nextTick(function (_) { return scrollActiveSidebar(); });
   }
   if (OPTIONS$1.auto2top) { setTimeout(function () { return scroll2Top(OPTIONS$1.auto2top); }, 0); }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "docsify",
-  "version": "1.10.0",
+  "version": "1.10.3",
   "description": "A magical documentation generator.",
   "main": "lib/docsify.js",
   "files": [

src/event.js

@@ -10,6 +10,8 @@ export function scrollActiveSidebar () {
   let hoveredOverSidebar = false
   const anchors = document.querySelectorAll('.anchor')
   const sidebar = document.querySelector('aside.sidebar')
+  const sidebarHeight = sidebar.clientHeight
+
   const nav = {}
   const lis = sidebar.querySelectorAll('li')
   let active = sidebar.querySelector('li.active')
@@ -48,7 +50,25 @@ export function scrollActiveSidebar () {
 
     li.classList.add('active')
     active = li
-    !hoveredOverSidebar && !sticky.noSticky && active.scrollIntoView(false)
+
+    // scroll into view
+    // https://github.com/vuejs/vuejs.org/blob/master/themes/vue/source/js/common.js#L282-L297
+    if (!hoveredOverSidebar && !sticky.noSticky) {
+      const currentPageOffset = 0
+      const currentActiveOffset = active.offsetTop + active.clientHeight + 40
+      const currentActiveIsInView = (
+        active.offsetTop >= sidebar.scrollTop &&
+        currentActiveOffset <= sidebar.scrollTop + sidebarHeight
+      )
+      const linkNotFurtherThanSidebarHeight = currentActiveOffset - currentPageOffset < sidebarHeight
+      const newScrollTop = currentActiveIsInView
+        ? sidebar.scrollTop
+        : linkNotFurtherThanSidebarHeight
+          ? currentPageOffset
+          : currentActiveOffset - sidebarHeight
+
+      sidebar.scrollTop = newScrollTop
+    }
   }
 
   window.removeEventListener('scroll', highlight)

src/render.js

@@ -2,7 +2,7 @@ import marked from 'marked'
 import Prism from 'prismjs'
 import * as tpl from './tpl'
 import * as event from './event'
-import { genTree, getRoute, isMobile, slugify, merge } from './util'
+import { genTree, getRoute, isMobile, slugify, merge, emojify } from './util'
 
 let OPTIONS = {}
 let markdown = marked
@@ -45,7 +45,7 @@ export function init (options) {
   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>`
+    return `<pre v-pre data-lang="${lang}"><code class="lang-${lang}">${hl.replace(/:/g, '__colon__')}</code></pre>`
   }
   renderer.link = function (href, title, text) {
     if (OPTIONS.router && !/:/.test(href)) {
@@ -63,16 +63,16 @@ export function init (options) {
     return `<p>${text}</p>`
   }
 
-  renderer.text = function (text) {
-    return text.replace(/:(\S*?):/ig, '<img class="emoji" src="https://assets-cdn.github.com/images/icons/emoji/$1.png" alt="$1" />')
-  }
-
   if (typeof OPTIONS.markdown === 'function') {
     markdown.setOptions({ renderer })
     markdown = OPTIONS.markdown.call(this, markdown)
   } else {
     markdown.setOptions(merge({ renderer }, OPTIONS.markdown))
   }
+
+  const md = markdown
+
+  markdown = text => emojify(md(text))
 }
 
 /**
@@ -106,13 +106,17 @@ export function renderArticle (content) {
   if (!OPTIONS.sidebar && !OPTIONS.loadSidebar) renderSidebar()
 
   if (content && typeof Vue !== 'undefined') {
-    const script = content.match('<script[^>]*?>([^<]+)</script>')
-
-    script && document.body.querySelector('article script').remove()
     CACHE.vm && CACHE.vm.$destroy()
-    CACHE.vm = script
-      ? new Function(`return ${script[1].trim()}`)()
+
+    const script = [].slice.call(
+      document.body.querySelectorAll('article>script'))
+        .filter(script => !/template/.test(script.type)
+      )[0]
+
+    CACHE.vm = script && script.remove()
+      ? new Function(`return ${script.innerText.trim()}`)()
       : new Vue({ el: 'main' }) // eslint-disable-line
+
     CACHE.vm && CACHE.vm.$nextTick(_ => event.scrollActiveSidebar())
   }
   if (OPTIONS.auto2top) setTimeout(() => event.scroll2Top(OPTIONS.auto2top), 0)

src/themes/basic/_layout.css

@@ -193,16 +193,7 @@ main {
   transition: transform 250ms ease-out;
   width: $sidebar-width;
   z-index: 20;
-  margin-bottom: 40px;
-
-  &::after {
-    content: '';
-    position: inherit;
-    left: calc($sidebar-width - 1px);
-    top: 0;
-    height: 100vh;
-    border-right: 1px solid rgba(0, 0, 0, .07);
-  }
+  border-right: 1px solid rgba(0, 0, 0, .07);
 
   > h1 {
     text-align: center;
@@ -384,15 +375,6 @@ body.close {
     position: fixed;
   }
 
-  .sidebar {
-    margin-bottom: 0;
-    border-right: 1px solid rgba(0, 0, 0, .07);
-
-    &::after {
-      content: none;
-    }
-  }
-
   nav {
     margin-top: 16px;
   }

src/util.js

@@ -157,3 +157,10 @@ export const merge = Object.assign || function (to) {
 
   return to
 }
+
+export function emojify (text) {
+  return text
+    .replace(/:(\w*?):/ig, '<img class="emoji" src="https://assets-cdn.github.com/images/icons/emoji/$1.png" alt="$1" />')
+    .replace(/__colon__/g, ':')
+}
+