-> v1.10.5

CHANGELOG.md

@@ -1,3 +1,20 @@
+## 1.10.5
+### Bug fixes
+- fix initialize the Vue instance
+
+## 1.10.4
+### Bug fixes
+- fix execute script
+
+## 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

docs/_coverpage.md

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

lib/docsify.js

@@ -170,7 +170,7 @@ var merge = Object.assign || function (to) {
 
 function emojify (text) {
   return text
-    .replace(/:(\S*?):/ig, '<img class="emoji" src="https://assets-cdn.github.com/images/icons/emoji/$1.png" alt="$1" />')
+    .replace(/:(\w*?):/ig, '<img class="emoji" src="https://assets-cdn.github.com/images/icons/emoji/$1.png" alt="$1" />')
     .replace(/__colon__/g, ':')
 }
 
@@ -184,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');
@@ -222,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);
@@ -2577,12 +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];
+    var code = script ? script.innerText.trim() : null;
+
+    script && script.remove();
+    CACHE.vm = code
+      ? new Function(("return " + code))()
       : new Vue({ el: 'main' }); // eslint-disable-line
     CACHE.vm && CACHE.vm.$nextTick(function (_) { return scrollActiveSidebar(); });
   }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "docsify",
-  "version": "1.10.1",
+  "version": "1.10.5",
   "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

@@ -106,12 +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]
+    const code = script ? script.innerText.trim() : null
+
+    script && script.remove()
+    CACHE.vm = code
+      ? new Function(`return ${code}`)()
       : new Vue({ el: 'main' }) // eslint-disable-line
     CACHE.vm && CACHE.vm.$nextTick(_ => event.scrollActiveSidebar())
   }

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

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