Dedupe html & fix doc site previews

- Create template for generating multiple `index.html` files (root and `/docs/`) - Add nunjucks dependency - Append “(Preview)” to document title for easier identification of local preview tabs/windows (preview only) - Add custom plugin to fix preview paths to `/docs` resources in markdown (preview only) - Add front-matter plugin to `/docs/index.html` (missing in previous file, required for front-matter demo in docs) - Add “build:html” npm script - Fix preview paths to `/docs` resources in `index.html` files (preview only) - Remove “Powered by docsify” from footer - Remove “Vercel has given us a Pro account” from footer (acknowledgement provided via the “Special Thanks” section in README) - Move “Edit Document” link from top-left to bottom-right of page - Refactor package.json script (reorder) - Refactor `.eslintignore` file (reorder and remove duplicate entries)
2025-12-08 19:55:52 +00:00 · 2020-11-18 14:47:52 -06:00 · 2020-11-18 14:47:52 -06:00 · bf9d7bdcac
commit bf9d7bdcac
parent 43a73bb036
8 changed files with 600 additions and 339 deletions
--- a/.eslintignore
+++ b/.eslintignore
@ -1,10 +1,9 @@
 .git
-packages/docsify-server-renderer/build.js
-node_modules
-build
-server.js
-lib
-themes
-build
-docs/
 **/*.md
+build
+docs
+lib
+node_modules
+packages/docsify-server-renderer/build.js
+server.js
+themes
--- a/build/html.js
+++ b/build/html.js
@ -0,0 +1,29 @@
+const fs = require('fs');
+const nunjucks = require('nunjucks');
+const path = require('path');
+const prettier = require('prettier');
+
+const renderJobs = [
+  // Preview index.html
+  {
+    isProduction: false,
+    inputPath: path.resolve(__dirname, '../src/html/index.njk'),
+    outputPath: path.resolve(__dirname, '../index.html'),
+  },
+  // Production index.html
+  {
+    isProduction: true,
+    inputPath: path.resolve(__dirname, '../src/html/index.njk'),
+    outputPath: path.resolve(__dirname, '../docs/index.html'),
+  },
+];
+
+for (const job of renderJobs) {
+  console.log(`[Build HTML] ${job.outputPath}`);
+
+  const template = fs.readFileSync(job.inputPath, 'utf8').toString();
+  const html = nunjucks.renderString(template, job);
+  const htmlFormatted = prettier.format(html, { parser: 'html' });
+
+  fs.writeFileSync(job.outputPath, htmlFormatted);
+}
--- a/docs/helpers.md
+++ b/docs/helpers.md
@ -96,29 +96,29 @@ Only when you both set the `routerMode: 'history'` and `externalLinkTarget: '_se
 ### Resizing

 ```md
-![logo](https://docsify.js.org/_media/icon.svg ':size=WIDTHxHEIGHT')
-![logo](https://docsify.js.org/_media/icon.svg ':size=50x100')
-![logo](https://docsify.js.org/_media/icon.svg ':size=100')
+![logo](_media/icon.svg ':size=WIDTHxHEIGHT')
+![logo](_media/icon.svg ':size=50x100')
+![logo](_media/icon.svg ':size=100')

 <!-- Support percentage -->

-![logo](https://docsify.js.org/_media/icon.svg ':size=10%')
+![logo](_media/icon.svg ':size=10%')
 ```

-![logo](https://docsify.js.org/_media/icon.svg ':size=50x100')
-![logo](https://docsify.js.org/_media/icon.svg ':size=100')
-![logo](https://docsify.js.org/_media/icon.svg ':size=10%')
+![logo](_media/icon.svg ':size=50x100')
+![logo](_media/icon.svg ':size=100')
+![logo](_media/icon.svg ':size=10%')

 ### Customise class

 ```md
-![logo](https://docsify.js.org/_media/icon.svg ':class=someCssClass')
+![logo](_media/icon.svg ':class=someCssClass')
 ```

 ### Customise ID

 ```md
-![logo](https://docsify.js.org/_media/icon.svg ':id=someCssId')
+![logo](_media/icon.svg ':id=someCssId')
 ```

 ## Customise ID for headings
--- a/docs/index.html
+++ b/docs/index.html
@ -45,87 +45,70 @@
      nav.app-nav li ul {
        min-width: 100px;
      }
-
+    </style>
+    <style>
      #carbonads {
        box-shadow: none !important;
        width: auto !important;
      }
    </style>
  </head>
-
  <body>
    <div id="app">Loading ...</div>
    <script>
      window.$docsify = {
-        alias: {
-          '.*?/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',
-          '/de-de/(.*)':
-            'https://raw.githubusercontent.com/docsifyjs/docs-de/master/$1',
-          '/ru-ru/(.*)':
-            'https://raw.githubusercontent.com/docsifyjs/docs-ru/master/$1',
-          '/es/(.*)':
-            'https://raw.githubusercontent.com/docsifyjs/docs-es/master/$1',
-          '/write-a-plugin':
-            'https://raw.githubusercontent.com/docsifyjs/docsify/master/docs/write-a-plugin.md',
-        },
+        name: "docsify",
+        // repo: 'docsifyjs/docsify',
        auto2top: true,
        coverpage: true,
        executeScript: true,
-        loadSidebar: true,
+        // Navigation
+        alias: {
+          ".*?/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",
+          "/de-de/(.*)":
+            "https://raw.githubusercontent.com/docsifyjs/docs-de/master/$1",
+          "/ru-ru/(.*)":
+            "https://raw.githubusercontent.com/docsifyjs/docs-ru/master/$1",
+          "/es/(.*)":
+            "https://raw.githubusercontent.com/docsifyjs/docs-es/master/$1",
+          "/write-a-plugin":
+            "https://raw.githubusercontent.com/docsifyjs/docsify/master/docs/write-a-plugin.md"
+        },
        loadNavbar: true,
-        mergeNavbar: true,
+        loadSidebar: true,
        maxLevel: 4,
+        mergeNavbar: true,
        subMaxLevel: 2,
-        ga: 'UA-106147152-1',
-        matomo: {
-          host: '//matomo.thunderwave.de',
-          id: 6,
-        },
-        name: 'docsify',
-        search: {
-          noData: {
-            '/de-de/': 'Keine Ergebnisse!',
-            '/zh-cn/': '没有结果!',
-            '/': 'No results!',
-          },
-          paths: 'auto',
-          placeholder: {
-            '/de-de/': 'Suche',
-            '/zh-cn/': '搜索',
-            '/': 'Search',
-          },
-        },
+        // Vue
+
        vueComponents: {
-          'button-counter': {
-            template: `
-            <button @click="count += 1">
-              You clicked me {{ count }} times
-            </button>
-          `,
+          "button-counter": {
+            template:
+              '<button @click="count += 1">You clicked me {{ count }} times</button>',
            data() {
              return {
-                count: 0,
+                count: 0
              };
-            },
-          },
+            }
+          }
        },
        vueGlobalOptions: {
          data() {
            return {
              count: 0,
-              message: 'Hello, World!',
+              message: "Hello, World!",
              // Fake API response
              images: [
-                { title: 'Image 1', url: 'https://picsum.photos/150?random=1' },
-                { title: 'Image 2', url: 'https://picsum.photos/150?random=2' },
-                { title: 'Image 3', url: 'https://picsum.photos/150?random=3' },
-              ],
+                { title: "Image 1", url: "https://picsum.photos/150?random=1" },
+                { title: "Image 2", url: "https://picsum.photos/150?random=2" },
+                { title: "Image 3", url: "https://picsum.photos/150?random=3" }
+              ]
            };
          },
          computed: {
@ -134,91 +117,95 @@
              const hours = date.getHours();

              if (hours < 12) {
-                return 'morning';
+                return "morning";
              } else if (hours < 18) {
-                return 'afternoon';
+                return "afternoon";
              } else {
-                return 'evening';
+                return "evening";
              }
-            },
+            }
          },
          methods: {
            hello: function() {
              alert(this.message);
-            },
-          },
+            }
+          }
        },
        vueMounts: {
-          '#counter': {
+          "#counter": {
            data() {
              return {
-                count: 0,
+                count: 0
              };
-            },
-          },
+            }
+          }
        },
+
+        // Plugins (docsify)
+        ga: "UA-106147152-1",
+        matomo: {
+          host: "//matomo.thunderwave.de",
+          id: 6
+        },
+        search: {
+          noData: {
+            "/de-de/": "Keine Ergebnisse!",
+            "/zh-cn/": "没有结果!",
+            "/": "No results!"
+          },
+          paths: "auto",
+          placeholder: {
+            "/de-de/": "Suche",
+            "/zh-cn/": "搜索",
+            "/": "Search"
+          }
+        },
+        // Plugins (custom)
        plugins: [
+          // Edit Document
          function(hook, vm) {
            hook.beforeEach(function(html) {
+              var url =
+                "https://github.com/docsifyjs/docsify/blob/master/docs/" +
+                vm.route.file;
+
              if (/githubusercontent\.com/.test(vm.route.file)) {
                url = vm.route.file
-                  .replace('raw.githubusercontent.com', 'github.com')
-                  .replace(/\/master/, '/blob/master');
+                  .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;
+                  .replace("cdn.jsdelivr.net/gh", "github.com")
+                  .replace("@master", "/blob/master");
              }
-              var editHtml = '[:memo: Edit Document](' + url + ')\n';
-              return (
-                editHtml +
-                html +
-                '\n\n----\n\n' +
-                '<a href="https://docsify.js.org" target="_blank" style="color: inherit; font-weight: normal; text-decoration: none;">Powered by docsify</a>'
-              );
-            }),
-              hook.afterEach(function(html) {
-                if (vm.route.path === '/') {
-                  return html;
-                }
-                return `${html}<br/> <i>Vercel</i> has given us a Pro account <br/> <a href="https://vercel.com/?utm_source=docsifyjsdocs" target="_blank"><img src="_media/vercel_logo.svg" alt="Vercel" width="100" height="64"></a>`;
-              });
-          },
-        ],
+
+              return [
+                html,
+                '<div style="text-align: right;">',
+                "[:memo: Edit Document](" + url + ")",
+                "</div>"
+              ].join("\n\n");
+            });
+          }
+        ]
      };
    </script>
    <script src="//cdn.jsdelivr.net/npm/docsify@4/lib/docsify.min.js"></script>
    <script src="//cdn.jsdelivr.net/npm/docsify@4/lib/plugins/search.min.js"></script>
+    <script src="//cdn.jsdelivr.net/npm/docsify@4/lib/plugins/front-matter.js"></script>
    <script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-bash.min.js"></script>
    <script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-markdown.min.js"></script>
    <script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-nginx.min.js"></script>
    <script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-php.min.js"></script>
+    <script src="//cdn.jsdelivr.net/npm/docsify@4/lib/plugins/ga.min.js"></script>
+    <script src="//cdn.jsdelivr.net/npm/docsify@4/lib/plugins/matomo.min.js"></script>
    <script src="//cdn.jsdelivr.net/npm/docsify-plugin-carbon@1/index.min.js"></script>
    <script>
-      (function() {
-        function loadJS(src, attrs) {
-          document.write(
-            '<script src="' + src + '" ' + (attrs || '') + '><\/script>'
-          );
-        }
-
-        // Public site only
-        if (/docsify/.test(location.host)) {
-          ((window.gitter = {}).chat = {}).options = {
-            room: 'docsifyjs/Lobby',
-          };
-
-          loadJS('//cdn.jsdelivr.net/npm/docsify@4/lib/plugins/ga.min.js');
-          loadJS('//cdn.jsdelivr.net/npm/docsify@4/lib/plugins/matomo.min.js');
-          loadJS('//sidecar.gitter.im/dist/sidecar.v1.js', 'async defer');
-        }
-      })();
+      ((window.gitter = {}).chat = {}).options = {
+        room: "docsifyjs/Lobby"
+      };
    </script>
+    <script src="//sidecar.gitter.im/dist/sidecar.v1.js" async defer></script>
    <script src="//cdn.jsdelivr.net/npm/vue@2/dist/vue.min.js"></script>
-    <!-- <script src="//cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script> -->
  </body>
 </html>
--- a/index.html
+++ b/index.html
@ -1,99 +1,188 @@
 <!DOCTYPE html>
 <html lang="en">
-
-<head>
-  <meta charset="UTF-8">
-  <title>docsify</title>
-  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-  <meta name="viewport" content="width=device-width,initial-scale=1">
-  <link rel="stylesheet" href="/themes/vue.css" title="vue">
-  <link rel="stylesheet" href="/themes/dark.css" title="dark" disabled>
-  <link rel="stylesheet" href="/themes/buble.css" title="buble" disabled>
-  <link rel="stylesheet" href="/themes/pure.css" title="pure" disabled>
-  <script src="//cdn.jsdelivr.net/npm/docsify-plugin-carbon@1.0.1/index.min.js"></script>
-  <style>
-    nav.app-nav li ul {
-      min-width: 100px;
-    }
-
-    #carbonads {
-			box-shadow: none !important;
-      width: auto !important;
-		}
-  </style>
-</head>
-
-<body>
-  <div id="app"></div>
-  <script>
-    window.$docsify = {
-      alias: {
-        '.*?/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://cdn.jsdelivr.net/gh/docsifyjs/docs-zh@master/$1',
-        '/de-de/(.*)': 'https://raw.githubusercontent.com/docsifyjs/docs-de/master/$1',
-        '/ru-ru/(.*)': 'https://raw.githubusercontent.com/docsifyjs/docs-ru/master/$1',
-        '/es/(.*)': 'https://raw.githubusercontent.com/docsifyjs/docs-es/master/$1',
-        '/write-a-plugin': 'https://raw.githubusercontent.com/docsifyjs/docsify/master/docs/write-a-plugin.md'
-      },
-      auto2top: true,
-      basePath: '/docs/',
-      coverpage: true,
-      executeScript: true,
-      loadSidebar: true,
-      loadNavbar: true,
-      mergeNavbar: true,
-      maxLevel: 4,
-      subMaxLevel: 2,
-      name: 'docsify',
-      search: {
-        noData: {
-          '/de-de/': 'Keine Ergebnisse!',
-          '/zh-cn/': '没有结果!',
-          '/': 'No results!'
+  <head>
+    <meta charset="UTF-8" />
+    <title>docsify (Preview)</title>
+    <link rel="icon" href="docs/_media/favicon.ico" />
+    <meta
+      name="google-site-verification"
+      content="6t0LoIeFksrjF4c9sqUEsVXiQNxLp2hgoqo0KryT-sE"
+    />
+    <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, 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 />
+    <link
+      rel="stylesheet"
+      href="/lib/themes/buble.css"
+      title="buble"
+      disabled
+    />
+    <link rel="stylesheet" href="/lib/themes/pure.css" title="pure" disabled />
+    <style>
+      nav.app-nav li ul {
+        min-width: 100px;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="app">Loading ...</div>
+    <script>
+      window.$docsify = {
+        name: "docsify",
+        // repo: 'docsifyjs/docsify',
+        auto2top: true,
+        coverpage: true,
+        executeScript: true,
+        basePath: "/docs/",
+        // Navigation
+        alias: {
+          ".*?/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",
+          "/de-de/(.*)":
+            "https://raw.githubusercontent.com/docsifyjs/docs-de/master/$1",
+          "/ru-ru/(.*)":
+            "https://raw.githubusercontent.com/docsifyjs/docs-ru/master/$1",
+          "/es/(.*)":
+            "https://raw.githubusercontent.com/docsifyjs/docs-es/master/$1",
+          "/write-a-plugin":
+            "https://raw.githubusercontent.com/docsifyjs/docsify/master/docs/write-a-plugin.md"
        },
-        paths: 'auto',
-        placeholder: {
-          '/de-de/': 'Suche',
-          '/zh-cn/': '搜索',
-          '/': 'Search'
-        },
-        pathNamespaces: ['/zh-cn', '/de-de', '/ru-ru', '/es']
-      },
-      plugins: [
-        DocsifyCarbon.create('CEBI6KQE', 'docsifyjsorg'),
-        function (hook, vm) {
-          hook.beforeEach(function (html) {
-            if (/githubusercontent\.com/.test(vm.route.file)) {
-              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
+        loadNavbar: true,
+        loadSidebar: true,
+        maxLevel: 4,
+        mergeNavbar: true,
+        subMaxLevel: 2,
+        // Vue
+
+        vueComponents: {
+          "button-counter": {
+            template:
+              '<button @click="count += 1">You clicked me {{ count }} times</button>',
+            data() {
+              return {
+                count: 0
+              };
            }
-            var editHtml = '[:memo: Edit Document](' + url + ')\n'
-            return editHtml
-              + html
-              + '\n\n----\n\n'
-              + '<a href="https://docsify.js.org" target="_blank" style="color: inherit; font-weight: normal; text-decoration: none;">Powered by docsify</a>'
-          })
+          }
        },
-      ]
-    }
-  </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="//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="//cdn.jsdelivr.net/npm/prismjs/components/prism-php.min.js"></script>
-</body>
+        vueGlobalOptions: {
+          data() {
+            return {
+              count: 0,
+              message: "Hello, World!",
+              // Fake API response
+              images: [
+                { title: "Image 1", url: "https://picsum.photos/150?random=1" },
+                { title: "Image 2", url: "https://picsum.photos/150?random=2" },
+                { title: "Image 3", url: "https://picsum.photos/150?random=3" }
+              ]
+            };
+          },
+          computed: {
+            timeOfDay() {
+              const date = new Date();
+              const hours = date.getHours();

+              if (hours < 12) {
+                return "morning";
+              } else if (hours < 18) {
+                return "afternoon";
+              } else {
+                return "evening";
+              }
+            }
+          },
+          methods: {
+            hello: function() {
+              alert(this.message);
+            }
+          }
+        },
+        vueMounts: {
+          "#counter": {
+            data() {
+              return {
+                count: 0
+              };
+            }
+          }
+        },
+
+        // Plugins (docsify)
+        search: {
+          noData: {
+            "/de-de/": "Keine Ergebnisse!",
+            "/zh-cn/": "没有结果!",
+            "/": "No results!"
+          },
+          paths: "auto",
+          placeholder: {
+            "/de-de/": "Suche",
+            "/zh-cn/": "搜索",
+            "/": "Search"
+          }
+        },
+        // Plugins (custom)
+        plugins: [
+          // Edit Document
+          function(hook, vm) {
+            hook.beforeEach(function(html) {
+              var url =
+                "https://github.com/docsifyjs/docsify/blob/master/docs/" +
+                vm.route.file;
+
+              if (/githubusercontent\.com/.test(vm.route.file)) {
+                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");
+              }
+
+              return [
+                html,
+                '<div style="text-align: right;">',
+                "[:memo: Edit Document](" + url + ")",
+                "</div>"
+              ].join("\n\n");
+            });
+          },
+          // Fix prevew paths to local /docs resources
+          function(hook, vm) {
+            hook.afterEach(function(html) {
+              const reDocsDirs = /(=\s*"\/?)(_media|_image)\//gm;
+
+              html = html.replace(reDocsDirs, "$1docs/$2/");
+
+              return html;
+            });
+          }
+        ]
+      };
+    </script>
+    <script src="/lib/docsify.min.js"></script>
+    <script src="/lib/plugins/search.min.js"></script>
+    <script src="/lib/plugins/front-matter.js"></script>
+    <script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-bash.min.js"></script>
+    <script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-markdown.min.js"></script>
+    <script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-nginx.min.js"></script>
+    <script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-php.min.js"></script>
+    <script src="//cdn.jsdelivr.net/npm/vue@2/dist/vue.min.js"></script>
+  </body>
 </html>
--- a/package-lock.json
+++ b/package-lock.json
@ -4340,96 +4340,6 @@
        }
      }
    },
-    "@vue/compiler-core": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.0.2.tgz",
-      "integrity": "sha512-GOlEMTlC/OdzBkKaKOniYErbkjoKxkBOmulxGmMR10I2JJX6TvXd/peaO/kla2xhpliV/M6Z4TLJp0yjAvRIAw==",
-      "dev": true,
-      "requires": {
-        "@babel/parser": "^7.12.0",
-        "@babel/types": "^7.12.0",
-        "@vue/shared": "3.0.2",
-        "estree-walker": "^2.0.1",
-        "source-map": "^0.6.1"
-      },
-      "dependencies": {
-        "@babel/parser": {
-          "version": "7.12.5",
-          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.12.5.tgz",
-          "integrity": "sha512-FVM6RZQ0mn2KCf1VUED7KepYeUWoVShczewOCfm3nzoBybaih51h+sYVVGthW9M6lPByEPTQf+xm27PBdlpwmQ==",
-          "dev": true
-        },
-        "@babel/types": {
-          "version": "7.12.6",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.12.6.tgz",
-          "integrity": "sha512-hwyjw6GvjBLiyy3W0YQf0Z5Zf4NpYejUnKFcfcUhZCSffoBBp30w6wP2Wn6pk31jMYZvcOrB/1b7cGXvEoKogA==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-validator-identifier": "^7.10.4",
-            "lodash": "^4.17.19",
-            "to-fast-properties": "^2.0.0"
-          }
-        },
-        "estree-walker": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.1.tgz",
-          "integrity": "sha512-tF0hv+Yi2Ot1cwj9eYHtxC0jB9bmjacjQs6ZBTj82H8JwUywFuc+7E83NWfNMwHXZc11mjfFcVXPe9gEP4B8dg==",
-          "dev": true
-        },
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true
-        }
-      }
-    },
-    "@vue/compiler-dom": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.0.2.tgz",
-      "integrity": "sha512-jvaL4QF2yXBJVD+JLbM2YA3e5fNfflJnfQ+GtfYk46ENGsEetqbkZqcX7fO+RHdG8tZBo7LCNBvgD0QLr+V4sg==",
-      "dev": true,
-      "requires": {
-        "@vue/compiler-core": "3.0.2",
-        "@vue/shared": "3.0.2"
-      }
-    },
-    "@vue/reactivity": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.0.2.tgz",
-      "integrity": "sha512-GdRloNcBar4yqWGXOcba1t//j/WizwfthfPUYkjcIPHjYnA/vTEQYp0C9+ZjPdinv1WRK1BSMeN/xj31kQES4A==",
-      "dev": true,
-      "requires": {
-        "@vue/shared": "3.0.2"
-      }
-    },
-    "@vue/runtime-core": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.0.2.tgz",
-      "integrity": "sha512-3m/jOs2xSipEFah9FgpEzvC9nERFonVGLN06+pf8iYPIy54Nlv7D2cyrk3Lhbjz4w3PbIrkxJnoTJYvJM7HDfA==",
-      "dev": true,
-      "requires": {
-        "@vue/reactivity": "3.0.2",
-        "@vue/shared": "3.0.2"
-      }
-    },
-    "@vue/runtime-dom": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.0.2.tgz",
-      "integrity": "sha512-vqC1KK1yWthTw1FKzajT0gYQaEqAq7bpeeXQC473nllGC5YHbJhNAJLSmrDun1tjXqGF0UNCWYljYm+++BJv6w==",
-      "dev": true,
-      "requires": {
-        "@vue/runtime-core": "3.0.2",
-        "@vue/shared": "3.0.2",
-        "csstype": "^2.6.8"
-      }
-    },
-    "@vue/shared": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.0.2.tgz",
-      "integrity": "sha512-Zx869zlNoujFOclKIoYmkh8ES2RcS/+Jn546yOiPyZ+3+Ejivnr+fb8l+DdXUEFjo+iVDNR3KyLzg03aBFfZ4Q==",
-      "dev": true
-    },
    "@zkochan/cmd-shim": {
      "version": "3.1.0",
      "resolved": "https://registry.npmjs.org/@zkochan/cmd-shim/-/cmd-shim-3.1.0.tgz",
@ -4451,6 +4361,12 @@
        "through": ">=2.2.7 <3"
      }
    },
+    "a-sync-waterfall": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/a-sync-waterfall/-/a-sync-waterfall-1.0.1.tgz",
+      "integrity": "sha512-RYTOHHdWipFUliRFMCS4X2Yn2X8M87V/OpSqWzKKOGhzqyUxzyVmhHDH9sAvG+ZuQf/TAOFsLCpMw09I1ufUnA==",
+      "dev": true
+    },
    "abab": {
      "version": "2.0.5",
      "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.5.tgz",
@ -6860,12 +6776,6 @@
        }
      }
    },
-    "csstype": {
-      "version": "2.6.14",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.14.tgz",
-      "integrity": "sha512-2mSc+VEpGPblzAxyeR+vZhJKgYg0Og0nnRi7pmRXFYYxSfnOnW8A5wwQb4n4cE2nIOzqKOAzLCaEX6aBmNEv8A==",
-      "dev": true
-    },
    "currently-unhandled": {
      "version": "0.4.1",
      "resolved": "https://registry.npmjs.org/currently-unhandled/-/currently-unhandled-0.4.1.tgz",
@ -14504,6 +14414,26 @@
      "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=",
      "dev": true
    },
+    "nunjucks": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/nunjucks/-/nunjucks-3.2.2.tgz",
+      "integrity": "sha512-KUi85OoF2NMygwODAy28Lh9qHmq5hO3rBlbkYoC8v377h4l8Pt5qFjILl0LWpMbOrZ18CzfVVUvIHUIrtED3sA==",
+      "dev": true,
+      "requires": {
+        "a-sync-waterfall": "^1.0.0",
+        "asap": "^2.0.3",
+        "chokidar": "^3.3.0",
+        "commander": "^5.1.0"
+      },
+      "dependencies": {
+        "commander": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-5.1.0.tgz",
+          "integrity": "sha512-P0CysNDQ7rtVw4QIQtm+MRxV66vKFSvlsQvGYXZWR3qFU0jlMKHZZZgw8e+8DSah4UDKMqnknRDQz+xuQXQ/Zg==",
+          "dev": true
+        }
+      }
+    },
    "nwsapi": {
      "version": "2.2.0",
      "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.0.tgz",
@ -19338,17 +19268,6 @@
      "integrity": "sha512-uhmLFETqPPNyuLLbsKz6ioJ4q7AZHzD8ZVFNATNyICSZouqP2Sz0rotWQC8UNBF6VGSCs5abnKJoStA6JbCbfg==",
      "dev": true
    },
-    "vue3": {
-      "version": "npm:vue@3.0.2",
-      "resolved": "https://registry.npmjs.org/vue/-/vue-3.0.2.tgz",
-      "integrity": "sha512-ciKFjutKRs+2Vbvgrist1oDd5wZQqtOel/K//ku54zLbf8tcTV+XbyAfanTHcTkML9CUj09vnC+y+5uaOz2/9g==",
-      "dev": true,
-      "requires": {
-        "@vue/compiler-dom": "3.0.2",
-        "@vue/runtime-dom": "3.0.2",
-        "@vue/shared": "3.0.2"
-      }
-    },
    "w3c-hr-time": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz",
--- a/package.json
+++ b/package.json
@ -21,29 +21,30 @@
  ],
  "scripts": {
    "bootstrap": "npm i && lerna bootstrap && npm run build:ssr",
-    "serve": "node server",
-    "serve:ssr": "cross-env SSR=1 node server",
-    "dev": "run-p serve watch:*",
-    "dev:ssr": "run-p serve:ssr watch:*",
-    "lint": "eslint .",
-    "fixlint": "eslint . --fix",
-    "test": "jest",
-    "test:e2e": "jest --selectProjects e2e",
-    "test:integration": "jest --selectProjects integration",
-    "test:unit": "jest --selectProjects unit",
-    "css": "node build/css",
-    "watch:css": "npm run css -- -o themes -w",
-    "watch:js": "node build/build.js",
+    "build:cover": "node build/cover.js",
    "build:css:min": "mkdirp lib/themes && npm run css -- -o lib/themes && node build/mincss.js",
    "build:css": "mkdirp themes && npm run css -- -o themes",
+    "build:html": "node build/html.js",
    "build:js": "cross-env NODE_ENV=production node build/build.js",
    "build:ssr": "node build/ssr.js",
-    "build:cover": "node build/cover.js",
-    "build": "rimraf lib themes && run-s build:js build:css build:css:min build:ssr build:cover",
+    "build": "rimraf lib themes && run-s build:html build:js build:css build:css:min build:ssr build:cover",
+    "css": "node build/css",
+    "dev:ssr": "run-p serve:ssr watch:*",
+    "dev": "run-p serve watch:*",
+    "fixlint": "eslint . --fix",
+    "lint": "eslint .",
+    "postinstall": "opencollective-postinstall",
    "prepare": "npm run build",
    "pub:next": "cross-env RELEASE_TAG=next sh build/release.sh",
    "pub": "sh build/release.sh",
-    "postinstall": "opencollective-postinstall"
+    "serve:ssr": "cross-env SSR=1 node server",
+    "serve": "node server",
+    "test:e2e": "jest --selectProjects e2e",
+    "test:integration": "jest --selectProjects integration",
+    "test:unit": "jest --selectProjects unit",
+    "test": "jest",
+    "watch:css": "npm run css -- -o themes -w",
+    "watch:js": "node build/build.js"
  },
  "husky": {
    "hooks": {
@ -91,6 +92,7 @@
    "live-server": "^1.2.1",
    "mkdirp": "^0.5.1",
    "npm-run-all": "^4.1.5",
+    "nunjucks": "^3.2.2",
    "playwright": "^1.4.1",
    "prettier": "^1.19.1",
    "rimraf": "^3.0.0",
--- a/src/html/index.njk
+++ b/src/html/index.njk
@ -0,0 +1,236 @@
+{% set _mediaPath = "_media" if isProduction else "docs/_media" %}
+{% set libPath = "//cdn.jsdelivr.net/npm/docsify@4/lib" if isProduction else "/lib" %}
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>docsify{{ " (Preview)" if not isProduction }}</title>
+    <link rel="icon" href="{{ _mediaPath }}/favicon.ico" />
+    <meta
+      name="google-site-verification"
+      content="6t0LoIeFksrjF4c9sqUEsVXiQNxLp2hgoqo0KryT-sE"
+    />
+    <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, initial-scale=1.0, minimum-scale=1.0"
+    />
+    <link
+      rel="stylesheet"
+      href="{{ libPath }}/themes/vue.css"
+      title="vue"
+    />
+    <link
+      rel="stylesheet"
+      href="{{ libPath }}/themes/dark.css"
+      title="dark"
+      disabled
+    />
+    <link
+      rel="stylesheet"
+      href="{{ libPath }}/themes/buble.css"
+      title="buble"
+      disabled
+    />
+    <link
+      rel="stylesheet"
+      href="{{ libPath }}/themes/pure.css"
+      title="pure"
+      disabled
+    />
+    <style>
+      nav.app-nav li ul {
+        min-width: 100px;
+      }
+    </style>
+    {%- if isProduction %}
+    <style>
+      #carbonads {
+        box-shadow: none !important;
+        width: auto !important;
+      }
+    </style>
+    {% endif %}
+  </head>
+  <body>
+    <div id="app">Loading ...</div>
+    <script>
+      window.$docsify = {
+        name: 'docsify',
+        // repo: 'docsifyjs/docsify',
+        auto2top: true,
+        coverpage: true,
+        executeScript: true,
+        {%- if not isProduction %}
+        basePath: '/docs/',
+        {%- endif %}
+        // Navigation
+        alias: {
+          '.*?/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',
+          '/de-de/(.*)':
+            'https://raw.githubusercontent.com/docsifyjs/docs-de/master/$1',
+          '/ru-ru/(.*)':
+            'https://raw.githubusercontent.com/docsifyjs/docs-ru/master/$1',
+          '/es/(.*)':
+            'https://raw.githubusercontent.com/docsifyjs/docs-es/master/$1',
+          '/write-a-plugin':
+            'https://raw.githubusercontent.com/docsifyjs/docsify/master/docs/write-a-plugin.md',
+        },
+        loadNavbar: true,
+        loadSidebar: true,
+        maxLevel: 4,
+        mergeNavbar: true,
+        subMaxLevel: 2,
+        // Vue
+        {% raw %}
+        vueComponents: {
+          'button-counter': {
+            template: '<button @click="count += 1">You clicked me {{ count }} times</button>',
+            data() {
+              return {
+                count: 0,
+              };
+            }
+          }
+        },
+        vueGlobalOptions: {
+          data() {
+            return {
+              count: 0,
+              message: 'Hello, World!',
+              // Fake API response
+              images: [
+                { title: 'Image 1', url: 'https://picsum.photos/150?random=1' },
+                { title: 'Image 2', url: 'https://picsum.photos/150?random=2' },
+                { title: 'Image 3', url: 'https://picsum.photos/150?random=3' }
+              ],
+            };
+          },
+          computed: {
+            timeOfDay() {
+              const date = new Date();
+              const hours = date.getHours();
+
+              if (hours < 12) {
+                return 'morning';
+              } else if (hours < 18) {
+                return 'afternoon';
+              } else {
+                return 'evening';
+              }
+            }
+          },
+          methods: {
+            hello: function() {
+              alert(this.message);
+            }
+          }
+        },
+        vueMounts: {
+          '#counter': {
+            data() {
+              return {
+                count: 0
+              };
+            }
+          }
+        },
+        {% endraw %}
+        // Plugins (docsify)
+        {%- if isProduction %}
+          ga: 'UA-106147152-1',
+          matomo: {
+            host: '//matomo.thunderwave.de',
+            id: 6
+          },
+        {%- endif %}
+        search: {
+          noData: {
+            '/de-de/': 'Keine Ergebnisse!',
+            '/zh-cn/': '没有结果!',
+            '/': 'No results!'
+          },
+          paths: 'auto',
+          placeholder: {
+            '/de-de/': 'Suche',
+            '/zh-cn/': '搜索',
+            '/': 'Search'
+          }
+        },
+        // Plugins (custom)
+        plugins: [
+          // Edit Document
+          function(hook, vm) {
+            hook.beforeEach(function(html) {
+              var url =
+                'https://github.com/docsifyjs/docsify/blob/master/docs/' +
+                vm.route.file;
+
+              if (/githubusercontent\.com/.test(vm.route.file)) {
+                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');
+              }
+
+              return [
+                html,
+                '<div style="text-align: right;">',
+                '[:memo: Edit Document](' + url + ')',
+                '</div>',
+              ].join('\n\n');
+            });
+          },
+          {%- if not isProduction %}
+          // Fix prevew paths to local /docs resources
+          function(hook, vm) {
+            hook.afterEach(function(html) {
+              const reDocsDirs = /(=\s*"\/?)(_media|_image)\//gm;
+
+              html = html.replace(reDocsDirs, '$1docs/$2/');
+
+              return html;
+            });
+          },
+          {% endif -%}
+        ]
+      };
+    </script>
+    <script src="{{ libPath }}/docsify.min.js"></script>
+    <script src="{{ libPath }}/plugins/search.min.js"></script>
+    {#- <script src="{{ libPath }}/plugins/emoji.js"></script> #}
+    <script src="{{ libPath }}/plugins/front-matter.js"></script>
+    <script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-bash.min.js"></script>
+    <script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-markdown.min.js"></script>
+    <script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-nginx.min.js"></script>
+    <script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-php.min.js"></script>
+    {%- if isProduction %}
+    <script src="//cdn.jsdelivr.net/npm/docsify@4/lib/plugins/ga.min.js"></script>
+    <script src="//cdn.jsdelivr.net/npm/docsify@4/lib/plugins/matomo.min.js"></script>
+    <script src="//cdn.jsdelivr.net/npm/docsify-plugin-carbon@1/index.min.js"></script>
+    <script>
+      ((window.gitter = {}).chat = {}).options = {
+        room: 'docsifyjs/Lobby',
+      };
+    </script>
+    <script src="//sidecar.gitter.im/dist/sidecar.v1.js" async defer></script>
+    {% endif -%}
+    <script src="//cdn.jsdelivr.net/npm/vue@2/dist/vue.min.js"></script>
+    {#- <script src="//cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script> #}
+  </body>
+</html>