Merge branch 'develop' into update-config

Author: jamesgeorge007

.codesandbox/ci.json

@@ -0,0 +1,4 @@
+{
+  "sandboxes": ["2d17z"],
+  "packages": [".", "packages/docsify-server-renderer"]
+}

.github/semantic.yml

@@ -0,0 +1,4 @@
+titleAndCommits: true
+allowMergeCommits: true
+allowRevertCommits: true
+anyCommit: true

cypress/fixtures/tpl/docs.index.html

@@ -16,7 +16,7 @@
     <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"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0"
     />
     <link rel="stylesheet" href="lib/themes/vue.css" title="vue" />
     <link rel="stylesheet" href="lib/themes/dark.css" title="dark" disabled />

docs/_media/example-with-yaml.md

@@ -0,0 +1,6 @@
+---
+author: John Smith
+date: 2020-1-1
+---
+
+> This is from the `example.md`

docs/configuration.md

@@ -144,6 +144,16 @@ window.$docsify = {
 };
 ```
 
+If you have a link to the homepage in the sidebar and want it to be shown as active when accessing the root url, make sure to update your sidebar accordingly:
+
+```markdown
+- Sidebar
+  - [Home](/)
+  - [Another page](another.md)
+```
+
+For more details, see [#1131](https://github.com/docsifyjs/docsify/issues/1131).
+
 ## basePath
 
 - Type: `String`
@@ -265,7 +275,7 @@ window.$docsify = {
 - Type: `String`
 - Default: `window.location.pathname`
 
-The name of the link.
+The URL that the website `name` links to.
 
 ```js
 window.$docsify = {
@@ -446,11 +456,11 @@ window.$docsify = {
 - type: `String`
 - default: `noopener`
 
-Default `'noopener'` (no opener) prevents the newly opened external page (when [externalLinkTarget](#externallinktarget) is `'_blank'`) from having the ability to control our page. No `rel` is set when its not `'_blank'`.
+Default `'noopener'` (no opener) prevents the newly opened external page (when [externalLinkTarget](#externallinktarget) is `'_blank'`) from having the ability to control our page. No `rel` is set when its not `'_blank'`. See [this post](https://mathiasbynens.github.io/rel-noopener/) for more information about why you may want to use this option.
 
 ```js
 window.$docsify = {
-  externalLinkTarget: '', // default: 'noopener'
+  externalLinkRel: '', // default: 'noopener'
 };
 ```
 
@@ -587,4 +597,4 @@ Adds a space on top when scrolling content page to reach the selected section. T
 window.$docsify = {
   topMargin: 90, // default: 0
 };
-```
+```

docs/embed-files.md

@@ -39,7 +39,20 @@ You will get it
 
 [filename](_media/example.md ':include :type=code')
 
+## Markdown with YAML Front Matter
+
+When using Markdown, YAML front matter will be stripped from the rendered content. The attributes cannot be used in this case.
+
+```markdown
+[filename](_media/example-with-yaml.md ':include')
+```
+
+You will get just the content
+
+[filename](_media/example-with-yaml.md ':include')
+
 ## Embedded code fragments
+
 Sometimes you don't want to embed a whole file. Maybe because you need just a few lines but you want to compile and test the file in CI.
 
 ```markdown
@@ -53,7 +66,6 @@ Example:
 
 [filename](_media/example.js ':include :type=code :fragment=demo')
 
-
 ## Tag attribute
 
 If you embed the file as `iframe`, `audio` and `video`, then you may need to set the attributes of these tags.

docs/helpers.md

@@ -65,6 +65,14 @@ You will get `<a href="/demo/">link</a>`html. Do not worry, you can still set ti
 [link](/demo ':disabled')
 ```
 
+## Cross-Origin link
+
+Only when you both set the `routerMode: 'history'` and `externalLinkTarget: '_self'`, you need add this configuration for those Cross-Origin links.
+
+```md
+[example.com](https://example.com/ ':crossorgin')  
+```
+
 ## Github Task Lists
 
 ```md

docs/index.html

@@ -9,14 +9,14 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
   <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">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
   <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/lib/themes/vue.css" title="vue">
   <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/lib/themes/dark.css" title="dark" disabled>
   <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/lib/themes/buble.css" title="buble" disabled>
   <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/lib/themes/pure.css" title="pure" disabled>
- 
+
   <script src="//cdn.jsdelivr.net/npm/docsify-plugin-codefund/index.js"></script>
-  <link rel="stylesheet"  href="//cdn.jsdelivr.net/npm/[email protected]/dist/style.css"/>
+
   <style>
     nav.app-nav li ul {
       min-width: 100px;
@@ -32,7 +32,7 @@
         '.*?/awesome': 'https://raw.githubusercontent.com/docsifyjs/awesome-docsify/master/README.md',
         '.*?/changelog': 'https://raw.githubusercontent.com/docsifyjs/docsify/master/CHANGELOG.md',
         '/.*/_navbar.md': '/_navbar.md',
-        '/zh-cn/(.*)': 'https://raw.githubusercontent.com/docsifyjs/docs-zh/master/$1',
+        '/zh-cn/(.*)': 'https://cdn.jsdelivr.net/gh/docsifyjs/docs-zh@master/$1',
         '/de-de/(.*)': 'https://raw.githubusercontent.com/docsifyjs/docs-de/master/$1',
         '/ru/(.*)': 'https://raw.githubusercontent.com/docsifyjs/docs-ru/master/$1',
         '/es/(.*)': 'https://raw.githubusercontent.com/docsifyjs/docs-es/master/$1'
@@ -64,11 +64,6 @@
           '/': 'Search'
         }
       },
-      darkMode: {
-        light: {
-          toggleBtnBg: '#42b983'
-        }
-      },
       formatUpdated: '{MM}/{DD} {HH}:{mm}',
       plugins: [
         function (hook, vm) {
@@ -77,6 +72,10 @@
               url = vm.route.file
                 .replace('raw.githubusercontent.com', 'github.com')
                 .replace(/\/master/, '/blob/master')
+            } else if (/jsdelivr\.net/.test(vm.route.file)) {
+              url = vm.route.file
+                .replace('cdn.jsdelivr.net/gh', 'github.com')
+                .replace('@master', '/blob/master')
             } else {
               url = 'https://github.com/docsifyjs/docsify/blob/master/docs/' + vm.route.file
             }
@@ -99,7 +98,6 @@
   <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="https://cdn.jsdelivr.net/npm/[email protected]/dist/index.js"></script>
   <script>
   ((window.gitter = {}).chat = {}).options = {
     room: 'docsifyjs/Lobby'

docs/ssr.md

@@ -68,7 +68,7 @@ You can provide a template for entire page's HTML. such as
 <head>
   <meta charset="UTF-8">
   <title>docsify</title>
-  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
   <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/themes/vue.css" title="vue">
 </head>
 <body>

index.html

@@ -24,7 +24,7 @@
         '.*?/awesome': 'https://raw.githubusercontent.com/docsifyjs/awesome-docsify/master/README.md',
         '.*?/changelog': 'https://raw.githubusercontent.com/docsifyjs/docsify/master/CHANGELOG.md',
         '/.*/_navbar.md': '/_navbar.md',
-        '/zh-cn/(.*)': 'https://raw.githubusercontent.com/docsifyjs/docs-zh/master/$1',
+        '/zh-cn/(.*)': 'https://cdn.jsdelivr.net/gh/docsifyjs/docs-zh@master/$1',
         '/de-de/(.*)': 'https://raw.githubusercontent.com/docsifyjs/docs-de/master/$1',
         '/ru/(.*)': 'https://raw.githubusercontent.com/docsifyjs/docs-ru/master/$1',
         '/es/(.*)': 'https://raw.githubusercontent.com/docsifyjs/docs-es/master/$1'
@@ -60,6 +60,10 @@
               url = vm.route.file
                 .replace('raw.githubusercontent.com', 'github.com')
                 .replace(/\/master/, '/blob/master')
+            } else if (/jsdelivr\.net/.test(vm.route.file)) {
+              url = vm.route.file
+                .replace('cdn.jsdelivr.net/gh', 'github.com')
+                .replace('@master', '/blob/master')
             } else {
               url = 'https://github.com/docsifyjs/docsify/blob/master/docs/' + vm.route.file
             }
@@ -76,6 +80,8 @@
   </script>
   <script src="/lib/docsify.js"></script>
   <script src="/lib/plugins/search.js"></script>
+  <script src="/lib/plugins/emoji.js"></script>
+  <script src="/lib/plugins/front-matter.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>

packages/docsify-server-renderer/README.md

@@ -34,7 +34,7 @@ renderer.renderToString(url)
 <head>
   <meta charset="UTF-8">
   <title>docsify</title>
-  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
   <link rel="stylesheet" href="//unpkg.com/docsify/themes/buble.css" title="buble" disabled>
 </head>
 <body>

packages/docsify-server-renderer/index.js

@@ -1,13 +1,13 @@
 import { readFileSync } from 'fs';
 import { resolve, basename } from 'path';
 import resolvePathname from 'resolve-pathname';
+import fetch from 'node-fetch';
+import debug from 'debug';
 import { AbstractHistory } from '../../src/core/router/history/abstract';
 import { Compiler } from '../../src/core/render/compiler';
 import { isAbsolutePath } from '../../src/core/router/util';
 import * as tpl from '../../src/core/render/tpl';
 import { prerenderEmbed } from '../../src/core/render/embed';
-import fetch from 'node-fetch';
-import debug from 'debug';
 
 function cwd(...args) {
   return resolve(process.cwd(), ...args);

server.js

@@ -11,7 +11,7 @@ if (isSSR) {
   <head>
     <meta charset="UTF-8">
     <title>docsify</title>
-    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
     <link rel="stylesheet" href="/themes/vue.css" title="vue">
   </head>
   <body>

src/core/config.js

@@ -32,6 +32,7 @@ export default function() {
       externalLinkRel: 'noopener',
       routerMode: 'hash',
       noCompileLinks: [],
+      crossOriginLinks: [],
       relativePath: false,
       topMargin: 0,
     },

src/core/event/scroll.js

@@ -1,7 +1,8 @@
+import Tweezer from 'tweezer.js';
 import { isMobile } from '../util/env';
 import * as dom from '../util/dom';
+import { removeParams } from '../router/util';
 import config from '../config';
-import Tweezer from 'tweezer.js';
 
 const nav = {};
 let hoverOver = false;
@@ -59,8 +60,7 @@ function highlight(path) {
     return;
   }
 
-  const li =
-    nav[getNavKey(decodeURIComponent(path), last.getAttribute('data-id'))];
+  const li = nav[getNavKey(path, last.getAttribute('data-id'))];
 
   if (!li || li === active) {
     return;
@@ -86,7 +86,7 @@ function highlight(path) {
 }
 
 function getNavKey(path, id) {
-  return `${path}?id=${id}`;
+  return `${decodeURIComponent(path)}?id=${decodeURIComponent(id)}`;
 }
 
 export function scrollActiveSidebar(router) {
@@ -127,7 +127,7 @@ export function scrollActiveSidebar(router) {
     return;
   }
 
-  const path = router.getCurrentPath();
+  const path = removeParams(router.getCurrentPath());
   dom.off('scroll', () => highlight(path));
   dom.on('scroll', () => highlight(path));
   dom.on(sidebar, 'mouseover', () => {

src/core/event/sidebar.js

@@ -39,6 +39,7 @@ export function collapse(el) {
     if (
       target.nodeName === 'A' &&
       target.nextSibling &&
+      target.nextSibling.classList &&
       target.nextSibling.classList.contains('app-sub-sidebar')
     ) {
       dom.toggleClass(target.parentNode, 'collapse');

src/core/global-api.js

@@ -1,10 +1,10 @@
+import prism from 'prismjs';
+import marked from 'marked';
 import * as util from './util';
 import * as dom from './util/dom';
 import { Compiler } from './render/compiler';
 import { slugify } from './render/slugify';
 import { get } from './fetch/ajax';
-import prism from 'prismjs';
-import marked from 'marked';
 
 export default function() {
   window.Docsify = {

src/core/render/compiler.js

@@ -1,3 +1,4 @@
+import marked from 'marked';
 import { isAbsolutePath, getPath, getParentPath } from '../router/util';
 import { isFn, merge, cached, isPrimitive } from '../util/core';
 import { tree as treeTpl } from './tpl';
@@ -11,7 +12,6 @@ import { paragraphCompiler } from './compiler/paragraph';
 import { taskListCompiler } from './compiler/taskList';
 import { taskListItemCompiler } from './compiler/taskListItem';
 import { linkCompiler } from './compiler/link';
-import marked from 'marked';
 
 const cachedLinks = {};
 
@@ -121,6 +121,21 @@ export class Compiler {
     };
   }
 
+  /**
+   * Pulls content from file and renders inline on the page as a embedded item.
+   *
+   * This allows you to embed different file types on the returned
+   * page.
+   * The basic format is:
+   * ```
+   *   [filename](_media/example.md ':include')
+   * ```
+   *
+   * @param {string}   href   The href to the file to embed in the page.
+   * @param {string}   title  Title of the link used to make the embed.
+   *
+   * @return {type} Return value description.
+   */
   compileEmbed(href, title) {
     const { str, config } = getAndRemoveConfig(title);
     let embed;
@@ -178,7 +193,7 @@ export class Compiler {
 
   _initRenderer() {
     const renderer = new marked.Renderer();
-    const { linkTarget, router, contentBase } = this;
+    const { linkTarget, linkRel, router, contentBase } = this;
     const _self = this;
     const origin = {};
 
@@ -218,6 +233,7 @@ export class Compiler {
       renderer,
       router,
       linkTarget,
+      linkRel,
       compilerClass: _self,
     });
     origin.paragraph = paragraphCompiler({ renderer });

src/core/render/compiler/image.js

@@ -22,7 +22,7 @@ export const imageCompiler = ({ renderer, contentBase, router }) =>
       if (height) {
         attrs.push(`width="${width}" height="${height}"`);
       } else {
-        attrs.push(`width="${width}" height="${width}"`);
+        attrs.push(`width="${width}"`);
       }
     }