-> v1.4.3

bump 1.4.3
Tweak style
2026-08-09 13:26:34 +10:00 · 2017-01-01 12:01:36 +08:00 · 2017-01-01 12:01:23 +08:00 · 2017-01-01 12:01:01 +08:00 · 2016-12-31 22:23:47 +08:00 · 2016-12-31 22:06:43 +08:00
18 changed files with 157 additions and 64 deletions
@@ -1,3 +1,19 @@
+## 1.4.3
+### Bug fixes
+- Tweak style.
+
+## 1.4.2
+
+### Bug fixes
+- Fix toggle button style.
+- Support `mailto`, `tel`, etc. href type
+- Fix scroll to top.
+
+
+## 1.4.1
+### Bug fixes
+- Fix generate slug.
+
 ## 1.4.0 Happly new year 🎉
 ### Features
 - Display TOC in the custom sidebar, `data-sub-max-level`.
@@ -8,7 +8,5 @@
 <body class="">
  <div id="app"></div>
 </body>
-<script src=//unpkg.com/vue></script>
-<script src=//unpkg.com/vuep></script>
 <script src="/lib/docsify.js" data-repo="qingwei-li/docsify" data-auto2top data-sidebar-toggle data-router></script>
 </html>
@@ -1,6 +1,6 @@
 ![logo](_media/icon.svg)

-# docsify <small>1.3.3</small>
+# docsify <small>1.4.2</small>

 > A magical documentation site generator.

@@ -114,6 +114,35 @@ function isMobile () {
  return document.body.clientWidth <= 600
 }

+function slugify (string) {
+  var re = /[\u2000-\u206F\u2E00-\u2E7F\\'!"#$%&()*+,.\/:;<=>?@\[\]^`{|}~]/g;
+  var maintainCase = false;
+  var replacement = '-';
+  slugify.occurrences = slugify.occurrences || {};
+
+  if (typeof string !== 'string') { return '' }
+  if (!maintainCase) { string = string.toLowerCase(); }
+
+  var slug = string.trim()
+    .replace(re, '')
+    .replace(/\s/g, replacement);
+  var occurrences = slugify.occurrences[slug];
+
+  if (slugify.occurrences.hasOwnProperty(slug)) {
+    occurrences++;
+  } else {
+    occurrences = 0;
+  }
+
+  slugify.occurrences[slug] = occurrences;
+
+  if (occurrences) {
+    slug = slug + '-' + occurrences;
+  }
+
+  return slug
+}
+
 /**
 * Active sidebar when scroll
 * @link https://buble.surge.sh/
@@ -206,19 +235,14 @@ function bindToggle (dom) {

  dom.addEventListener('click', function () { return body.classList.toggle('close'); });

-  if (!/mobile/i.test(navigator.userAgent)) { return }
-  document.querySelector('aside').addEventListener('click', function (event) {
-    body.classList.toggle('close');
-  });
+  if (isMobile()) {
+    document.querySelector('aside')
+      .addEventListener('click', function (_) { return body.classList.toggle('close'); });
+  }
 }

-var cacheContentDOM;
 function scroll2Top () {
-  if (!cacheContentDOM) {
-    var dom = isMobile() ? 'body' : 'section.content';
-    cacheContentDOM = document.querySelector(dom);
-  }
-  cacheContentDOM.scrollTop = 0;
+  document.body.scrollTop = 0;
 }

 function sticky () {
@@ -2345,7 +2369,10 @@ function corner (data) {
 * Render main content
 */
 function main (tpl) {
-  return ("<main>\n    " + tpl + "\n    <aside class=\"sidebar\"></aside>\n    <section class=\"content\">\n      <article class=\"markdown-section\"></article>\n    </section>\n  </main>")
+  var aside = tpl + "<aside class=\"sidebar\"></aside>";
+
+  return (isMobile() ? (aside + "<main>") : ("<main>" + aside)) +
+    "<section class=\"content\">\n      <article class=\"markdown-section\"></article>\n    </section>\n    </main>"
 }

 /**
@@ -2359,7 +2386,7 @@ function cover () {
 }

 function toggle () {
-  return "<button class=\"sidebar-toggle\">\n    <span></span><span></span><span></span>\n  </button>"
+  return "<button class=\"sidebar-toggle\">\n      <div class=\"sidebar-toggle-button\">\n        <span></span><span></span><span></span>\n      </div>\n    </button>"
 }

 /**
@@ -2400,9 +2427,7 @@ var renderer = new marked.Renderer();
 * @link https://github.com/chjj/marked#overriding-renderer-methods
 */
 renderer.heading = function (text, level) {
-  var slug = text.toLowerCase()
-      .replace(/<(?:.|\n)*?>/gm, '')
-      .replace(/[^\w|\u4e00-\u9fa5]+/g, '-');
+  var slug = slugify(text);
  var route = '';

  if (OPTIONS$1.router) {
@@ -2411,7 +2436,7 @@ renderer.heading = function (text, level) {

  toc.push({ level: level, slug: (route + "#" + (encodeURIComponent(slug))), title: text });

-  return ("<a href=\"" + route + "#" + slug + "\" data-id=\"" + slug + "\" class=\"anchor\"><h" + level + " id=\"" + slug + "\">" + text + "</h" + level + "></a>")
+  return ("<h" + level + " id=\"" + slug + "\"><a href=\"" + route + "#" + slug + "\" data-id=\"" + slug + "\" class=\"anchor\"><span>" + text + "</span></a></h" + level + ">")
 };
 // highlight code
 renderer.code = function (code, lang) {
@@ -2423,7 +2448,7 @@ renderer.code = function (code, lang) {
  return ("<pre data-lang=\"" + lang + "\"><code class=\"lang-" + lang + "\">" + hl + "</code></pre>")
 };
 renderer.link = function (href, title, text) {
-  if (OPTIONS$1.router && !/^(?:\w+:)?\/\/([^\s\.]+\.\S{2}|localhost[\:?\d]*)\S*$/.test(href)) {
+  if (OPTIONS$1.router && !/:/.test(href)) {
    href = ("#/" + href).replace(/\/\//g, '/');
  }

@@ -1,6 +1,6 @@
 {
  "name": "docsify",
-  "version": "1.4.0",
+  "version": "1.4.3",
  "description": "A magical documentation generator.",
  "main": "lib/docsify.js",
  "files": [
@@ -94,19 +94,14 @@ export function bindToggle (dom) {

  dom.addEventListener('click', () => body.classList.toggle('close'))

-  if (!/mobile/i.test(navigator.userAgent)) return
-  document.querySelector('aside').addEventListener('click', event => {
-    body.classList.toggle('close')
-  })
+  if (isMobile()) {
+    document.querySelector('aside')
+      .addEventListener('click', _ => body.classList.toggle('close'))
+  }
 }

-let cacheContentDOM
 export function scroll2Top () {
-  if (!cacheContentDOM) {
-    const dom = isMobile() ? 'body' : 'section.content'
-    cacheContentDOM = document.querySelector(dom)
-  }
-  cacheContentDOM.scrollTop = 0
+  document.body.scrollTop = 0
 }

 export function sticky () {
@@ -2,7 +2,7 @@ import marked from 'marked'
 import Prism from 'prismjs'
 import * as tpl from './tpl'
 import { activeLink, scrollActiveSidebar, bindToggle, scroll2Top, sticky } from './event'
-import { genTree, getRoute, isMobile } from './util'
+import { genTree, getRoute, isMobile, slugify } from './util'

 let OPTIONS = {}
 const CACHE = {}
@@ -21,9 +21,7 @@ const renderer = new marked.Renderer()
 * @link https://github.com/chjj/marked#overriding-renderer-methods
 */
 renderer.heading = function (text, level) {
-  const slug = text.toLowerCase()
-      .replace(/<(?:.|\n)*?>/gm, '')
-      .replace(/[^\w|\u4e00-\u9fa5]+/g, '-')
+  const slug = slugify(text)
  let route = ''

  if (OPTIONS.router) {
@@ -32,7 +30,7 @@ renderer.heading = function (text, level) {

  toc.push({ level, slug: `${route}#${encodeURIComponent(slug)}`, title: text })

-  return `<a href="${route}#${slug}" data-id="${slug}" class="anchor"><h${level} id="${slug}">${text}</h${level}></a>`
+  return `<h${level} id="${slug}"><a href="${route}#${slug}" data-id="${slug}" class="anchor"><span>${text}</span></a></h${level}>`
 }
 // highlight code
 renderer.code = function (code, lang = '') {
@@ -42,7 +40,7 @@ renderer.code = function (code, lang = '') {
  return `<pre data-lang="${lang}"><code class="lang-${lang}">${hl}</code></pre>`
 }
 renderer.link = function (href, title, text) {
-  if (OPTIONS.router && !/^(?:\w+:)?\/\/([^\s\.]+\.\S{2}|localhost[\:?\d]*)\S*$/.test(href)) {
+  if (OPTIONS.router && !/:/.test(href)) {
    href = `#/${href}`.replace(/\/\//g, '/')
  }

@@ -20,7 +20,7 @@ section.cover {
  .cover-main {
    flex: 1;
    text-align: center;
-    margin: 0 16px;
+    margin: -20px 16px 0;
    z-index: 1;
  }

@@ -46,6 +46,10 @@ section.cover {
    font-weight: 300;
    color: inherit;

+    a {
+      display: block;
+    }
+
    small {
      position: absolute;
      bottom: -.4375rem;
@@ -31,6 +31,7 @@ body {
  letter-spacing: 0;
  margin: 0;
  overflow-x: hidden;
+  color: $color-text;
 }

 img {
@@ -159,14 +160,18 @@ nav {

 /* main */
 main {
-  size: 100% 100%;
+  size: 100vw 100%;
  position: relative;
 }

 .anchor {
  text-decoration: none;
  transition: all .3s;
-  display: block;
+  display: inline-block;
+
+  span {
+    color: $color-text;
+  }

  &:hover {
    text-decoration: underline;
@@ -177,7 +182,7 @@ main {
 .sidebar {
  border-right: 1px solid rgba(0, 0, 0, .07);
  overflow-y: auto;
-  padding-top: 40px;
+  padding: 40px 0;
  position: absolute 0 * 0 0;
  transition: transform 250ms ease-out;
  width: $sidebar-width;
@@ -206,17 +211,18 @@ main {
 .sidebar-toggle {
  background-color: transparent;
  border: 0;
-  bottom: 10px;
-  left: 10px;
  outline: none;
-  position: absolute;
+  position: absolute * * 0 0;
  text-align: center;
  transition: opacity .3s;
  width: 30px;
  z-index: 30;
  outline: none;
+  width: calc($sidebar-width - 16px);
+  padding: 10px;
+  background-color: rgba($color-bg, .8);

-  &:hover {
+  .sidebar-toggle-button:hover {
    opacity: .4;
  }

@@ -290,6 +296,10 @@ body.close {
    transform: translateX(-$sidebar-width);
  }

+  .sidebar-toggle {
+    width: auto;
+  }
+
  .content {
    left: 0;
  }
@@ -308,6 +318,11 @@ body.close {
    top: 30px;
  }

+  main {
+    height: auto;
+    overflow-x: hidden;
+  }
+
  .sidebar {
    left: -$sidebar-width;
    transition: transform 250ms ease-out;
@@ -315,7 +330,8 @@ body.close {

  .content {
    left: 0;
-    min-width: 100vw;
+    max-width: 100vw;
+    position: static;
    transition: transform 250ms ease;
  }

@@ -323,17 +339,28 @@ body.close {
    transition: transform 250ms ease-out;
  }

+  .sidebar-toggle {
+    width: auto;
+    background-color: transparent;
+  }
+
  body.close {
    .sidebar {
      transform: translateX($sidebar-width);
    }

+    .sidebar-toggle {
+      width: calc($sidebar-width - 16px);
+      background-color: rgba($color-bg, .8);
+      transition: 1s background-color;
+    }
+
    .content {
      transform: translateX($sidebar-width);
    }

    nav, .github-corner {
-      transform: translateX($sidebar-width);
+      display: none;
    }
  }

@@ -2,14 +2,12 @@

 $color-primary: #0074D9;
 $color-bg: #fff;
+$color-text: #34495e;
 $sidebar-width: 16em;

@import "basic/layout";
@import "basic/coverpage";

-body {
-  color: #34495e;
-}
 /* sidebar */
 .sidebar {
  color: #364149;
@@ -1,4 +1,5 @@
 $color-primary: #000;
 $color-bg: #fff;
+$color-text: #000;
 $sidebar-width: 300px;
@import "basic/layout";
@@ -2,6 +2,7 @@

 $color-primary: #42b983;
 $color-bg: #fff;
+$color-text: #34495e;
 $sidebar-width: 300px;

@import "basic/layout";
@@ -9,7 +10,6 @@ $sidebar-width: 300px;

 body {
  background-color: $color-bg;
-  color: #34495e;
 }

 /* sidebar */
@@ -1,4 +1,4 @@
-
+import { isMobile } from './util'
 /**
 * Render github corner
 * @param  {Object} data
@@ -23,13 +23,13 @@ export function corner (data) {
 * Render main content
 */
 export function main (tpl) {
-  return `<main>
-    ${tpl}
-    <aside class="sidebar"></aside>
-    <section class="content">
+  const aside = `${tpl}<aside class="sidebar"></aside>`
+
+  return (isMobile() ? `${aside}<main>` : `<main>${aside}`) +
+    `<section class="content">
      <article class="markdown-section"></article>
    </section>
-  </main>`
+    </main>`
 }

 /**
@@ -47,8 +47,10 @@ export function cover () {

 export function toggle () {
  return `<button class="sidebar-toggle">
-    <span></span><span></span><span></span>
-  </button>`
+      <div class="sidebar-toggle-button">
+        <span></span><span></span><span></span>
+      </div>
+    </button>`
 }

 /**
@@ -105,3 +105,32 @@ export function getRoute () {
 export function isMobile () {
  return document.body.clientWidth <= 600
 }
+
+export function slugify (string) {
+  const re = /[\u2000-\u206F\u2E00-\u2E7F\\'!"#$%&()*+,.\/:;<=>?@\[\]^`{|}~]/g
+  const maintainCase = false
+  const replacement = '-'
+  slugify.occurrences = slugify.occurrences || {}
+
+  if (typeof string !== 'string') return ''
+  if (!maintainCase) string = string.toLowerCase()
+
+  let slug = string.trim()
+    .replace(re, '')
+    .replace(/\s/g, replacement)
+  let occurrences = slugify.occurrences[slug]
+
+  if (slugify.occurrences.hasOwnProperty(slug)) {
+    occurrences++
+  } else {
+    occurrences = 0
+  }
+
+  slugify.occurrences[slug] = occurrences
+
+  if (occurrences) {
+    slug = slug + '-' + occurrences
+  }
+
+  return slug
+}
Author	SHA1	Message	Date
qingwei.li	cb592e7bf0	-> v1.4.3	2017-01-01 12:01:36 +08:00
qingwei.li	3c01d1f82d	bump 1.4.3	2017-01-01 12:01:23 +08:00
qingwei.li	00253d3148	Tweak style	2017-01-01 12:01:01 +08:00
qingwei.li	d23881ba7c	Update version	2016-12-31 22:23:47 +08:00
qingwei.li	f0a99c0d1d	Update change log	2016-12-31 22:06:43 +08:00
qingwei.li	b952a3a08c	-> v1.4.2	2016-12-31 22:05:10 +08:00
qingwei.li	2bb8641303	bump 1.4.3	2016-12-31 22:04:54 +08:00
qingwei.li	66d7919fa9	Fix href type, fixed #46	2016-12-31 22:04:14 +08:00
qingwei.li	580767bf78	Clear dev.html	2016-12-31 15:12:28 +08:00
qingwei.li	d6b996f4c1	Add changelog	2016-12-31 15:07:02 +08:00
qingwei.li	b4e0d54d7b	Fix menu toggle style	2016-12-31 14:53:27 +08:00
qingwei.li	b15b286c5c	-> v1.4.1	2016-12-31 14:16:54 +08:00
qingwei.li	5ab86271c2	bump 1.4.1	2016-12-31 14:16:39 +08:00
qingwei.li	9638eee50d	fix generate slug, fixed #45	2016-12-31 14:16:15 +08:00