diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
index a443cc29d..8e590fac8 100644
--- a/docs/.vuepress/config.js
+++ b/docs/.vuepress/config.js
@@ -1,18 +1,18 @@
 // .vuepress/config.js
 module.exports = {
-  title: "Pomerium",
+  // title: "Pomerium",
   description:
     "Pomerium is a beyond-corp inspired, zero trust, open source identity-aware access proxy.",
   plugins: {
     sitemap: {
-      hostname: "https://www.pomerium.io"
+      hostname: "https://www.pomerium.io",
     },
     "@vuepress/google-analytics": {
-      ga: "UA-129872447-2"
-    }
+      ga: "UA-129872447-2",
+    },
   },
   markdown: {
-    externalLinkSymbol: false
+    externalLinkSymbol: false,
   },
   themeConfig: {
     logo: "/logo-long-civez.png",
@@ -38,13 +38,13 @@ module.exports = {
           { text: "v0.4.x", link: "https://0-4-0.docs.pomerium.io/docs" },
           { text: "v0.3.x", link: "https://0-3-0.docs.pomerium.io/docs" },
           { text: "v0.2.x", link: "https://0-2-0.docs.pomerium.io/docs" },
-          { text: "v0.1.x", link: "https://0-1-0.docs.pomerium.io/docs" }
-        ]
-      }
+          { text: "v0.1.x", link: "https://0-1-0.docs.pomerium.io/docs" },
+        ],
+      },
     ],
     algolia: {
       apiKey: "1653e881f3a6c17d3ad37f4d4c428e20",
-      indexName: "pomerium"
+      indexName: "pomerium",
     },
     sidebar: {
       "/docs/": [
@@ -59,8 +59,8 @@ module.exports = {
             "releases",
             "upgrading",
             "CHANGELOG",
-            "FAQ"
-          ]
+            "FAQ",
+          ],
         },
         {
           title: "Quick Start",
@@ -74,8 +74,8 @@ module.exports = {
             "quick-start/helm",
             "quick-start/kubernetes",
             "quick-start/synology",
-            "quick-start/from-source"
-          ]
+            "quick-start/from-source",
+          ],
         },
         {
           title: "Identity Providers",
@@ -90,8 +90,8 @@ module.exports = {
             "identity-providers/gitlab",
             "identity-providers/google",
             "identity-providers/okta",
-            "identity-providers/one-login"
-          ]
+            "identity-providers/one-login",
+          ],
         },
         {
           title: "Community",
@@ -103,8 +103,8 @@ module.exports = {
             "community/",
             "community/contributing",
             "community/code-of-conduct",
-            "community/security"
-          ]
+            "community/security",
+          ],
         },
         {
           title: "Reference",
@@ -118,9 +118,9 @@ module.exports = {
             "reference/impersonation",
             "reference/programmatic-access",
             "reference/getting-users-identity",
-            "reference/production-deployment"
-          ]
-        }
+            "reference/production-deployment",
+          ],
+        },
       ],
       "/recipes/": [
         {
@@ -129,8 +129,8 @@ module.exports = {
 
           collapsable: false,
           sidebarDepth: 1,
-          children: ["", "ad-guard", "vs-code-server", "kubernetes"]
-        }
+          children: ["", "ad-guard", "vs-code-server", "kubernetes"],
+        },
       ],
       "/enterprise/": [
         {
@@ -138,8 +138,8 @@ module.exports = {
           type: "group",
           collapsable: false,
           sidebarDepth: 1,
-          children: [""]
-        }
+          children: [""],
+        },
       ],
       "/configuration/": [
         {
@@ -147,9 +147,9 @@ module.exports = {
           type: "group",
           collapsable: false,
           sidebarDepth: 1,
-          children: ["", "examples"]
-        }
-      ]
-    }
-  }
+          children: ["", "examples"],
+        },
+      ],
+    },
+  },
 };
diff --git a/docs/.vuepress/styles/palette.styl b/docs/.vuepress/styles/palette.styl
new file mode 100644
index 000000000..4e060af11
--- /dev/null
+++ b/docs/.vuepress/styles/palette.styl
@@ -0,0 +1,74 @@
+// colors
+$mainColor= #6E43E8
+
+
+$sidebarColor=#FAFAFC
+$accentColor = #6E43E8
+$textColor =rgb(51, 51, 51)
+$headerColor=rgb(17, 17, 17)
+$borderColor = #e8e8fb
+$codeBgColor = #282c34
+$arrowBgColor = #ccc
+$section-color=#f7f7f7;
+$fontSize = 16px
+
+// navbar
+// $navbarHeight = 5.2rem
+$navbar-vertical-padding = 1.4rem;
+$navbar-horizontal-padding = 1.4rem;
+$navbar-background = #6E43E8;
+$navbar-text-color = #ffffff;
+
+$sidebarWidth = 16rem
+$contentWidth = 960px
+
+// // responsive breakpoints
+$MQNarrow = 959px
+$MQMobile = 719px
+$MQMobileNarrow = 419px
+
+.icon.outbound
+  display none !important 
+  
+.navbar
+  background-color: $navbar-background !important
+  border-bottom 1px solid $navbar-background !important
+  .logo
+    height $navbarHeight - 3.2rem 
+    min-width $navbarHeight - 3.2rem
+    margin-right 0.8rem
+    vertical-align top
+  .links
+    background-color: $navbar-background !important
+    color: $navbar-text-color !important
+    padding-left 0rem
+
+.nav-links
+  a
+    &:hover, &.router-link-active
+      color lighten($textColor, 8%) !important
+
+@media (min-width: $MQMobile)
+  .nav-links a
+    &:hover, &.router-link-active
+      color lighten($navbar-text-color, 8%) !important
+  .nav-item > a:not(.external)
+    &:hover, &.router-link-active
+      margin-bottom -2px
+      border-bottom 2px solid lighten($navbar-text-color, 8%) !important
+
+
+
+.dropdown-wrapper
+  .dropdown-title
+    color $navbar-text-color !important
+    
+@media (max-width: $MQMobile)
+  .dropdown-wrapper
+    .dropdown-title
+      color $textColor !important
+
+@media (min-width: $MQMobile)
+  .dropdown-wrapper
+    .dropdown-title
+      color $navbar-text-color !important
diff --git a/docs/.vuepress/theme/components/AlgoliaSearchBox.vue b/docs/.vuepress/theme/components/AlgoliaSearchBox.vue
deleted file mode 100644
index ef26763fe..000000000
--- a/docs/.vuepress/theme/components/AlgoliaSearchBox.vue
+++ /dev/null
@@ -1,213 +0,0 @@
-<template>
-  <form id="search-form" class="algolia-search-wrapper search-box" role="search">
-    <input id="algolia-search-input" class="search-query" />
-  </form>
-</template>
-
-<script>
-export default {
-  props: ["options"],
-
-  mounted() {
-    this.initialize(this.options, this.$lang);
-  },
-
-  methods: {
-    initialize(userOptions, lang) {
-      Promise.all([
-        import(
-          /* webpackChunkName: "docsearch" */ "docsearch.js/dist/cdn/docsearch.min.js"
-        ),
-        import(
-          /* webpackChunkName: "docsearch" */ "docsearch.js/dist/cdn/docsearch.min.css"
-        )
-      ]).then(([docsearch]) => {
-        docsearch = docsearch.default;
-        const { algoliaOptions = {} } = userOptions;
-        docsearch(
-          Object.assign({}, userOptions, {
-            inputSelector: "#algolia-search-input",
-            // #697 Make docsearch work well at i18n mode.
-            algoliaOptions: Object.assign(
-              {
-                facetFilters: [`lang:${lang}`].concat(
-                  algoliaOptions.facetFilters || []
-                )
-              },
-              algoliaOptions
-            ),
-            handleSelected: (input, event, suggestion) => {
-              const { pathname, hash } = new URL(suggestion.url);
-              this.$router.push(`${pathname}${hash}`);
-            }
-          })
-        );
-      });
-    },
-
-    update(options, lang) {
-      this.$el.innerHTML =
-        '<input id="algolia-search-input" class="search-query">';
-      this.initialize(options, lang);
-    }
-  },
-
-  watch: {
-    $lang(newValue) {
-      this.update(this.options, newValue);
-    },
-
-    options(newValue) {
-      this.update(newValue, this.$lang);
-    }
-  }
-};
-</script>
-
-<style lang="stylus">
-.algolia-search-wrapper {
-  & > span {
-    vertical-align: middle;
-  }
-
-  .algolia-autocomplete {
-    line-height: normal;
-
-    .ds-dropdown-menu {
-      background-color: #fff;
-      border: 1px solid #999;
-      border-radius: 4px;
-      font-size: 16px;
-      margin: 6px 0 0;
-      padding: 4px;
-      text-align: left;
-
-      &:before {
-        border-color: #999;
-      }
-
-      [class*=ds-dataset-] {
-        border: none;
-        padding: 0;
-      }
-
-      .ds-suggestions {
-        margin-top: 0;
-      }
-
-      .ds-suggestion {
-        border-bottom: 1px solid $borderColor;
-      }
-    }
-
-    .algolia-docsearch-suggestion--highlight {
-      color: #2c815b;
-    }
-
-    .algolia-docsearch-suggestion {
-      border-color: $borderColor;
-      padding: 0;
-
-      .algolia-docsearch-suggestion--category-header {
-        padding: 5px 10px;
-        margin-top: 0;
-        background: $accentColor;
-        color: #fff;
-        font-weight: 600;
-
-        .algolia-docsearch-suggestion--highlight {
-          background: rgba(255, 255, 255, 0.6);
-        }
-      }
-
-      .algolia-docsearch-suggestion--wrapper {
-        padding: 0;
-      }
-
-      .algolia-docsearch-suggestion--title {
-        font-weight: 600;
-        margin-bottom: 0;
-        color: $textColor;
-      }
-
-      .algolia-docsearch-suggestion--subcategory-column {
-        vertical-align: top;
-        padding: 5px 7px 5px 5px;
-        border-color: $borderColor;
-        background: #f1f3f5;
-
-        &:after {
-          display: none;
-        }
-      }
-
-      .algolia-docsearch-suggestion--subcategory-column-text {
-        color: #555;
-      }
-    }
-
-    .algolia-docsearch-footer {
-      border-color: $borderColor;
-    }
-
-    .ds-cursor .algolia-docsearch-suggestion--content {
-      background-color: #e7edf3 !important;
-      color: $textColor;
-    }
-  }
-}
-
-@media (min-width: $MQMobile) {
-  .algolia-search-wrapper {
-    .algolia-autocomplete {
-      .algolia-docsearch-suggestion {
-        .algolia-docsearch-suggestion--subcategory-column {
-          float: none;
-          width: 150px;
-          min-width: 150px;
-          display: table-cell;
-        }
-
-        .algolia-docsearch-suggestion--content {
-          float: none;
-          display: table-cell;
-          width: 100%;
-          vertical-align: top;
-        }
-
-        .ds-dropdown-menu {
-          min-width: 515px !important;
-        }
-      }
-    }
-  }
-}
-
-@media (max-width: $MQMobile) {
-  .algolia-search-wrapper {
-    .ds-dropdown-menu {
-      min-width: calc(100vw - 4rem) !important;
-      max-width: calc(100vw - 4rem) !important;
-    }
-
-    .algolia-docsearch-suggestion--wrapper {
-      padding: 5px 7px 5px 5px !important;
-    }
-
-    .algolia-docsearch-suggestion--subcategory-column {
-      padding: 0 !important;
-      background: white !important;
-    }
-
-    .algolia-docsearch-suggestion--subcategory-column-text:after {
-      content: ' > ';
-      font-size: 10px;
-      line-height: 14.4px;
-      display: inline-block;
-      width: 5px;
-      margin: -3px 3px 0;
-      vertical-align: middle;
-    }
-  }
-}
-</style>
\ No newline at end of file
diff --git a/docs/.vuepress/theme/components/DropdownLink.vue b/docs/.vuepress/theme/components/DropdownLink.vue
deleted file mode 100644
index 3ad8f1043..000000000
--- a/docs/.vuepress/theme/components/DropdownLink.vue
+++ /dev/null
@@ -1,208 +0,0 @@
-<template>
-  <div class="dropdown-wrapper" :class="{ open }">
-    <a class="dropdown-title" @click="toggle">
-      <span class="title">{{ item.text }}</span>
-      <span class="arrow" :class="open ? 'down' : 'right'"></span>
-    </a>
-
-    <DropdownTransition>
-      <ul class="nav-dropdown" v-show="open">
-        <li
-          class="dropdown-item"
-          :key="subItem.link || index"
-          v-for="(subItem, index) in item.items"
-        >
-          <h4 v-if="subItem.type === 'links'">{{ subItem.text }}</h4>
-
-          <ul class="dropdown-subitem-wrapper" v-if="subItem.type === 'links'">
-            <li
-              class="dropdown-subitem"
-              :key="childSubItem.link"
-              v-for="childSubItem in subItem.items"
-            >
-              <NavLink :item="childSubItem" />
-            </li>
-          </ul>
-
-          <NavLink v-else :item="subItem" />
-        </li>
-      </ul>
-    </DropdownTransition>
-  </div>
-</template>
-
-<script>
-import NavLink from "@theme/components/NavLink.vue";
-import DropdownTransition from "@theme/components/DropdownTransition.vue";
-
-export default {
-  components: { NavLink, DropdownTransition },
-
-  data() {
-    return {
-      open: false
-    };
-  },
-
-  props: {
-    item: {
-      required: true
-    }
-  },
-
-  methods: {
-    toggle() {
-      this.open = !this.open;
-    }
-  }
-};
-</script>
-
-<style lang="stylus">
-.dropdown-wrapper {
-  cursor: pointer;
-
-  .dropdown-title {
-    display: block;
-
-    &:hover {
-      border-color: transparent;
-    }
-
-    .arrow {
-      vertical-align: middle;
-      margin-top: -1px;
-      margin-left: 0.4rem;
-    }
-  }
-
-  .nav-dropdown {
-    .dropdown-item {
-      color: inherit;
-      line-height: 1.7rem;
-
-      h4 {
-        margin: 0.45rem 0 0;
-        border-top: 1px solid #eee;
-        padding: 0.45rem 1.5rem 0 1.25rem;
-      }
-
-      .dropdown-subitem-wrapper {
-        padding: 0;
-        list-style: none;
-
-        .dropdown-subitem {
-          font-size: 0.9em;
-        }
-      }
-
-      a {
-        display: block;
-        line-height: 1.7rem;
-        position: relative;
-        border-bottom: none;
-        font-weight: 400;
-        margin-bottom: 0;
-        padding: 0 1.5rem 0 1.25rem;
-        color: $accentColor;
-
-        &:hover {
-          color: $accentColor;
-        }
-
-        &.router-link-active {
-          color: $accentColor;
-
-          &::after {
-            content: '';
-            width: 0;
-            height: 0;
-            border-left: 5px solid $accentColor;
-            border-top: 3px solid transparent;
-            border-bottom: 3px solid transparent;
-            position: absolute;
-            top: calc(50% - 2px);
-            left: 9px;
-          }
-        }
-      }
-
-      &:first-child h4 {
-        margin-top: 0;
-        padding-top: 0;
-        border-top: 0;
-      }
-    }
-  }
-}
-
-@media (max-width: $MQMobile) {
-  .dropdown-wrapper {
-    &.open .dropdown-title {
-      margin-bottom: 0.5rem;
-    }
-
-    .nav-dropdown {
-      transition: height 0.1s ease-out;
-      overflow: hidden;
-
-      .dropdown-item {
-        h4 {
-          border-top: 0;
-          margin-top: 0;
-          padding-top: 0;
-        }
-
-        h4, & > a {
-          font-size: 15px;
-          line-height: 2rem;
-        }
-
-        .dropdown-subitem {
-          font-size: 14px;
-          padding-left: 1rem;
-        }
-      }
-    }
-  }
-}
-
-@media (min-width: $MQMobile) {
-  .dropdown-wrapper {
-    height: 1.8rem;
-
-    &:hover .nav-dropdown {
-      // override the inline style.
-      display: block !important;
-    }
-
-    .dropdown-title .arrow {
-      // make the arrow always down at desktop
-      border-left: 4px solid transparent;
-      border-right: 4px solid transparent;
-      border-top: 6px solid $arrowBgColor;
-      border-bottom: 0;
-    }
-
-    .nav-dropdown {
-      display: none;
-      // Avoid height shaked by clicking
-      height: auto !important;
-      box-sizing: border-box;
-      max-height: calc(100vh - 2.7rem);
-      overflow-y: auto;
-      position: absolute;
-      top: 100%;
-      right: 0;
-      background-color: #fff;
-      padding: 0.6rem 0;
-      border: 1px solid #ddd;
-      border-bottom-color: #ccc;
-      text-align: left;
-      border-radius: 0.25rem;
-      white-space: nowrap;
-      margin: 0;
-    }
-  }
-}
-</style>
diff --git a/docs/.vuepress/theme/components/DropdownTransition.vue b/docs/.vuepress/theme/components/DropdownTransition.vue
deleted file mode 100644
index 8c711a155..000000000
--- a/docs/.vuepress/theme/components/DropdownTransition.vue
+++ /dev/null
@@ -1,33 +0,0 @@
-<template>
-  <transition
-    name="dropdown"
-    @enter="setHeight"
-    @after-enter="unsetHeight"
-    @before-leave="setHeight"
-  >
-    <slot/>
-  </transition>
-</template>
-
-<script>
-export default {
-  name: 'DropdownTransition',
-
-  methods: {
-    setHeight (items) {
-      // explicitly set height so that it can be transitioned
-      items.style.height = items.scrollHeight + 'px'
-    },
-
-    unsetHeight (items) {
-      items.style.height = ''
-    }
-  }
-}
-</script>
-
-<style lang="stylus">
-.dropdown-enter, .dropdown-leave-to
-  height 0 !important
-
-</style>
diff --git a/docs/.vuepress/theme/components/Home.vue b/docs/.vuepress/theme/components/Home.vue
index 139cfd950..b580cc4cf 100644
--- a/docs/.vuepress/theme/components/Home.vue
+++ b/docs/.vuepress/theme/components/Home.vue
@@ -109,7 +109,7 @@
 </template>
 
 <script>
-import NavLink from "@theme/components/NavLink.vue";
+import NavLink from "@parent-theme/components/NavLink.vue";
 
 export default {
   components: { NavLink },
@@ -122,10 +122,10 @@ export default {
     actionLink() {
       return {
         link: this.data.actionLink,
-        text: this.data.actionText
+        text: this.data.actionText,
       };
-    }
-  }
+    },
+  },
 };
 </script>
 
diff --git a/docs/.vuepress/theme/components/NavLink.vue b/docs/.vuepress/theme/components/NavLink.vue
deleted file mode 100644
index 033182291..000000000
--- a/docs/.vuepress/theme/components/NavLink.vue
+++ /dev/null
@@ -1,46 +0,0 @@
-<template>
-  <router-link class="nav-link" :to="link" v-if="!isExternal(link)" :exact="exact">{{ item.text }}</router-link>
-  <a
-    v-else
-    :href="link"
-    class="nav-link external"
-    :target="isMailto(link) || isTel(link) ? null : '_blank'"
-    :rel="isMailto(link) || isTel(link) ? null : 'noopener noreferrer'"
-  >
-    {{ item.text }}
-    <OutboundLink />
-  </a>
-</template>
-
-<script>
-import { isExternal, isMailto, isTel, ensureExt } from "../util";
-
-export default {
-  props: {
-    item: {
-      required: true
-    }
-  },
-
-  computed: {
-    link() {
-      return ensureExt(this.item.link);
-    },
-
-    exact() {
-      if (this.$site.locales) {
-        return Object.keys(this.$site.locales).some(
-          rootLink => rootLink === this.link
-        );
-      }
-      return this.link === "/";
-    }
-  },
-
-  methods: {
-    isExternal,
-    isMailto,
-    isTel
-  }
-};
-</script>
diff --git a/docs/.vuepress/theme/components/NavLinks.vue b/docs/.vuepress/theme/components/NavLinks.vue
deleted file mode 100644
index 2ab72c924..000000000
--- a/docs/.vuepress/theme/components/NavLinks.vue
+++ /dev/null
@@ -1,119 +0,0 @@
-<template>
-  <nav class="nav-links" v-if="userLinks.length || repoLink">
-    <!-- user links -->
-    <div class="nav-item" v-for="item in userLinks" :key="item.link">
-      <DropdownLink v-if="item.type === 'links'" :item="item" />
-      <NavLink v-else :item="item" />
-    </div>
-  </nav>
-</template>
-
-<script>
-import DropdownLink from "@theme/components/DropdownLink.vue";
-import { resolveNavLinkItem } from "../util";
-import NavLink from "@theme/components/NavLink.vue";
-
-export default {
-  components: { NavLink, DropdownLink },
-
-  computed: {
-    userNav() {
-      return this.$themeLocaleConfig.nav || this.$site.themeConfig.nav || [];
-    },
-
-    nav() {
-      const { locales } = this.$site;
-      if (locales && Object.keys(locales).length > 1) {
-        const currentLink = this.$page.path;
-        const routes = this.$router.options.routes;
-        const themeLocales = this.$site.themeConfig.locales || {};
-        const languageDropdown = {
-          text: this.$themeLocaleConfig.selectText || "Languages",
-          items: Object.keys(locales).map(path => {
-            const locale = locales[path];
-            const text =
-              (themeLocales[path] && themeLocales[path].label) || locale.lang;
-            let link;
-            // Stay on the current page
-            if (locale.lang === this.$lang) {
-              link = currentLink;
-            } else {
-              // Try to stay on the same page
-              link = currentLink.replace(this.$localeConfig.path, path);
-              // fallback to homepage
-              if (!routes.some(route => route.path === link)) {
-                link = path;
-              }
-            }
-            return { text, link };
-          })
-        };
-        return [...this.userNav, languageDropdown];
-      }
-      return this.userNav;
-    },
-
-    userLinks() {
-      return (this.nav || []).map(link => {
-        return Object.assign(resolveNavLinkItem(link), {
-          items: (link.items || []).map(resolveNavLinkItem)
-        });
-      });
-    }
-  }
-};
-</script>
-
-<style lang="stylus">
-.nav-links {
-  display: inline-block;
-  color: $navbar-text-color;
-
-  a {
-    line-height: 1.4rem;
-    color: $navbar-text-color;
-
-    &:hover, &.router-link-active {
-      color: $navbar-text-color;
-    }
-  }
-
-  .nav-item {
-    position: relative;
-    display: inline-block;
-    margin-left: 1.5rem;
-    line-height: 2rem;
-
-    &:first-child {
-      margin-left: 0;
-    }
-  }
-
-  .repo-link {
-    margin-left: 1.5rem;
-  }
-}
-
-@media (max-width: $MQMobile) {
-  .nav-links {
-    .nav-item, .repo-link {
-      margin-left: 0;
-    }
-  }
-}
-
-@media (min-width: $MQMobile) {
-  .nav-links a {
-    &:hover, &.router-link-active {
-      color: $navbar-text-color;
-    }
-  }
-
-  .nav-item > a:not(.external) {
-    &:hover, &.router-link-active {
-      margin-bottom: -2px;
-      border-bottom: 2px solid darken($navbar-text-color, 15%);
-    }
-  }
-}
-</style>
diff --git a/docs/.vuepress/theme/components/Navbar.vue b/docs/.vuepress/theme/components/Navbar.vue
deleted file mode 100644
index f606d04ac..000000000
--- a/docs/.vuepress/theme/components/Navbar.vue
+++ /dev/null
@@ -1,142 +0,0 @@
-<template>
-  <header class="navbar">
-    <SidebarButton @toggle-sidebar="$emit('toggle-sidebar')" />
-
-    <router-link :to="$localePath" class="home-link">
-      <img
-        class="logo"
-        v-if="$site.themeConfig.logo"
-        :src="$withBase($site.themeConfig.logo)"
-        :alt="$siteTitle"
-      />
-    </router-link>
-
-    <div
-      class="links"
-      :style="linksWrapMaxWidth ? {
-        'max-width': linksWrapMaxWidth + 'px'
-      } : {}"
-    >
-      <NavLinks class="can-hide" />
-      <AlgoliaSearchBox v-if="isAlgoliaSearch" :options="algolia" />
-      <SearchBox
-        v-else-if="$site.themeConfig.search !== false && $page.frontmatter.search !== false"
-      />
-    </div>
-  </header>
-</template>
- 
-<script>
-import AlgoliaSearchBox from "@AlgoliaSearchBox";
-import SearchBox from "@SearchBox";
-import SidebarButton from "@theme/components/SidebarButton.vue";
-import NavLinks from "@theme/components/NavLinks.vue";
-
-export default {
-  components: { SidebarButton, NavLinks, SearchBox, AlgoliaSearchBox },
-
-  data() {
-    return {
-      linksWrapMaxWidth: null
-    };
-  },
-
-  mounted() {
-    const MOBILE_DESKTOP_BREAKPOINT = 719; // refer to config.styl
-    const NAVBAR_VERTICAL_PADDING =
-      parseInt(css(this.$el, "paddingLeft")) +
-      parseInt(css(this.$el, "paddingRight"));
-    const handleLinksWrapWidth = () => {
-      if (document.documentElement.clientWidth < MOBILE_DESKTOP_BREAKPOINT) {
-        this.linksWrapMaxWidth = null;
-      } else {
-        this.linksWrapMaxWidth =
-          this.$el.offsetWidth -
-          NAVBAR_VERTICAL_PADDING -
-          ((this.$refs.siteName && this.$refs.siteName.offsetWidth) || 0);
-      }
-    };
-    handleLinksWrapWidth();
-    window.addEventListener("resize", handleLinksWrapWidth, false);
-  },
-
-  computed: {
-    algolia() {
-      return (
-        this.$themeLocaleConfig.algolia || this.$site.themeConfig.algolia || {}
-      );
-    },
-
-    isAlgoliaSearch() {
-      return this.algolia && this.algolia.apiKey && this.algolia.indexName;
-    }
-  }
-};
-
-function css(el, property) {
-  // NOTE: Known bug, will return 'auto' if style value is 'auto'
-  const win = el.ownerDocument.defaultView;
-  // null means not to return pseudo styles
-  return win.getComputedStyle(el, null)[property];
-}
-</script>
-
-<style lang="stylus">
-$navbar-vertical-padding = 0.7rem;
-$navbar-horizontal-padding = 1.5rem;
-
-.navbar {
-  padding: $navbar-vertical-padding $navbar-horizontal-padding;
-  line-height: $navbarHeight - 1.4rem;
-  background: $navbar-background;
-
-  a, span, img {
-    display: inline-block;
-  }
-
-  .logo {
-    height: $navbarHeight - 3.1rem;
-    margin-right: 0.2rem;
-    vertical-align: middle;
-  }
-
-  .site-name {
-    font-size: 1.3rem;
-    font-weight: 600;
-    color: $textColor;
-    position: relative;
-  }
-
-  .links {
-    // padding-left: 1.5rem;
-    box-sizing: border-box;
-    background-color: $navbar-background;
-    white-space: nowrap;
-    font-size: 0.95rem;
-    position: absolute;
-    right: $navbar-horizontal-padding;
-    top: $navbar-vertical-padding;
-    display: flex;
-
-    .search-box {
-      padding-left: 1.5rem;
-      flex: 0 0 auto;
-      vertical-align: middle;
-    }
-  }
-}
-
-@media (max-width: $MQMobile) {
-  .navbar {
-    padding-left: 4rem;
-
-    .can-hide {
-      display: none;
-    }
-
-    .links {
-      padding-left: 1.5rem;
-    }
-  }
-}
-</style>
diff --git a/docs/.vuepress/theme/components/Page.vue b/docs/.vuepress/theme/components/Page.vue
deleted file mode 100644
index dc7f23fba..000000000
--- a/docs/.vuepress/theme/components/Page.vue
+++ /dev/null
@@ -1,241 +0,0 @@
-<template>
-  <main class="page">
-    <slot name="top" />
-
-    <Content class="theme-default-content" />
-
-    <footer class="page-edit">
-      <div class="edit-link" v-if="editLink">
-        <a :href="editLink" target="_blank" rel="noopener noreferrer">{{ editLinkText }}</a>
-        <OutboundLink />
-      </div>
-
-      <div class="last-updated" v-if="lastUpdated">
-        <span class="prefix">{{ lastUpdatedText }}:</span>
-        <span class="time">{{ lastUpdated }}</span>
-      </div>
-    </footer>
-
-    <div class="page-nav" v-if="prev || next">
-      <p class="inner">
-        <span v-if="prev" class="prev">
-          ←
-          <router-link v-if="prev" class="prev" :to="prev.path">{{ prev.title || prev.path }}</router-link>
-        </span>
-
-        <span v-if="next" class="next">
-          <router-link v-if="next" :to="next.path">{{ next.title || next.path }}</router-link>→
-        </span>
-      </p>
-    </div>
-
-    <slot name="bottom" />
-  </main>
-</template>
-
-<script>
-import { resolvePage, outboundRE, endingSlashRE } from "../util";
-
-export default {
-  props: ["sidebarItems"],
-
-  computed: {
-    lastUpdated() {
-      return this.$page.lastUpdated;
-    },
-
-    lastUpdatedText() {
-      if (typeof this.$themeLocaleConfig.lastUpdated === "string") {
-        return this.$themeLocaleConfig.lastUpdated;
-      }
-      if (typeof this.$site.themeConfig.lastUpdated === "string") {
-        return this.$site.themeConfig.lastUpdated;
-      }
-      return "Last Updated";
-    },
-
-    prev() {
-      const prev = this.$page.frontmatter.prev;
-      if (prev === false) {
-        return;
-      } else if (prev) {
-        return resolvePage(this.$site.pages, prev, this.$route.path);
-      } else {
-        return resolvePrev(this.$page, this.sidebarItems);
-      }
-    },
-
-    next() {
-      const next = this.$page.frontmatter.next;
-      if (next === false) {
-        return;
-      } else if (next) {
-        return resolvePage(this.$site.pages, next, this.$route.path);
-      } else {
-        return resolveNext(this.$page, this.sidebarItems);
-      }
-    },
-
-    editLink() {
-      if (this.$page.frontmatter.editLink === false) {
-        return;
-      }
-      const {
-        repo,
-        editLinks,
-        docsDir = "",
-        docsBranch = "master",
-        docsRepo = repo
-      } = this.$site.themeConfig;
-
-      if (docsRepo && editLinks && this.$page.relativePath) {
-        return this.createEditLink(
-          repo,
-          docsRepo,
-          docsDir,
-          docsBranch,
-          this.$page.relativePath
-        );
-      }
-    },
-
-    editLinkText() {
-      return (
-        this.$themeLocaleConfig.editLinkText ||
-        this.$site.themeConfig.editLinkText ||
-        `Edit this page`
-      );
-    }
-  },
-
-  methods: {
-    createEditLink(repo, docsRepo, docsDir, docsBranch, path) {
-      const bitbucket = /bitbucket.org/;
-      if (bitbucket.test(repo)) {
-        const base = outboundRE.test(docsRepo) ? docsRepo : repo;
-        return (
-          base.replace(endingSlashRE, "") +
-          `/src` +
-          `/${docsBranch}/` +
-          (docsDir ? docsDir.replace(endingSlashRE, "") + "/" : "") +
-          path +
-          `?mode=edit&spa=0&at=${docsBranch}&fileviewer=file-view-default`
-        );
-      }
-
-      const base = outboundRE.test(docsRepo)
-        ? docsRepo
-        : `https://github.com/${docsRepo}`;
-      return (
-        base.replace(endingSlashRE, "") +
-        `/edit` +
-        `/${docsBranch}/` +
-        (docsDir ? docsDir.replace(endingSlashRE, "") + "/" : "") +
-        path
-      );
-    }
-  }
-};
-
-function resolvePrev(page, items) {
-  return find(page, items, -1);
-}
-
-function resolveNext(page, items) {
-  return find(page, items, 1);
-}
-
-function find(page, items, offset) {
-  const res = [];
-  flatten(items, res);
-  for (let i = 0; i < res.length; i++) {
-    const cur = res[i];
-    if (cur.type === "page" && cur.path === decodeURIComponent(page.path)) {
-      return res[i + offset];
-    }
-  }
-}
-
-function flatten(items, res) {
-  for (let i = 0, l = items.length; i < l; i++) {
-    if (items[i].type === "group") {
-      flatten(items[i].children || [], res);
-    } else {
-      res.push(items[i]);
-    }
-  }
-}
-</script>
-
-<style lang="stylus">
-@require '../styles/wrapper.styl';
-
-.page {
-  padding-bottom: 2rem;
-  display: block;
-  background: rgba(255, 255, 255, 0.8);
-}
-
-.page-edit {
-  @extend $wrapper;
-  padding-top: 1rem;
-  padding-bottom: 1rem;
-  overflow: auto;
-
-  .edit-link {
-    display: inline-block;
-
-    a {
-      color: lighten($textColor, 25%);
-      margin-right: 0.25rem;
-    }
-  }
-
-  .last-updated {
-    float: right;
-    font-size: 0.9em;
-
-    .prefix {
-      font-weight: 500;
-      color: lighten($textColor, 25%);
-    }
-
-    .time {
-      font-weight: 400;
-      color: #aaa;
-    }
-  }
-}
-
-.page-nav {
-  @extend $wrapper;
-  padding-top: 1rem;
-  padding-bottom: 0;
-
-  .inner {
-    min-height: 2rem;
-    margin-top: 0;
-    border-top: 1px solid $borderColor;
-    padding-top: 1rem;
-    overflow: auto; // clear float
-  }
-
-  .next {
-    float: right;
-  }
-}
-
-@media (max-width: $MQMobile) {
-  .page-edit {
-    .edit-link {
-      margin-bottom: 0.5rem;
-    }
-
-    .last-updated {
-      font-size: 0.8em;
-      float: none;
-      text-align: left;
-    }
-  }
-}
-</style>
diff --git a/docs/.vuepress/theme/components/Sidebar.vue b/docs/.vuepress/theme/components/Sidebar.vue
deleted file mode 100644
index deed78c0e..000000000
--- a/docs/.vuepress/theme/components/Sidebar.vue
+++ /dev/null
@@ -1,92 +0,0 @@
-<template>
-  <aside class="sidebar">
-    <NavLinks />
-    <slot name="top" />
-    <SidebarLinks :depth="0" :items="items" />
-    <slot name="bottom" />
-  </aside>
-</template>
-
-<script>
-import SidebarLinks from "@theme/components/SidebarLinks.vue";
-import NavLinks from "@theme/components/NavLinks.vue";
-
-export default {
-  name: "Sidebar",
-
-  components: { SidebarLinks, NavLinks },
-
-  props: ["items"]
-};
-</script>
-
-<style lang="stylus">
-.sidebar {
-  background-color: $sidebarColor;
-
-  ul {
-    padding: 0;
-    margin: 0;
-    list-style-type: none;
-  }
-
-  a {
-    display: inline-block;
-  }
-
-  .nav-links {
-    display: none;
-    border-bottom: 1px solid $borderColor;
-    padding: 0.5rem 0 0.75rem 0;
-
-    a {
-      font-weight: 600;
-    }
-
-    .nav-item, .repo-link {
-      display: block;
-      line-height: 1.15rem;
-      font-size: 1.1em;
-      padding: 0.5rem 0 0.5rem 1.5rem;
-    }
-  }
-
-  & > .sidebar-links {
-    padding: 1.5rem 0;
-
-    & > li > a.sidebar-link {
-      font-size: 1.1em;
-      line-height: 1.3;
-      font-weight: bold;
-    }
-
-    & > li:not(:first-child) {
-      margin-top: 0.75rem;
-    }
-  }
-}
-
-@media (max-width: $MQMobileNarrow) {
-  .sidebar {
-    background-color: #6E43E8;
-  }
-}
-
-@media (max-width: $MQMobile) {
-  .sidebar {
-    background-color: #6E43E8;
-
-    .nav-links {
-      display: block;
-
-      .dropdown-wrapper .nav-dropdown .dropdown-item a.router-link-active::after {
-        top: calc(1rem - 2px);
-      }
-    }
-
-    & > .sidebar-links {
-      padding: 1rem 0;
-    }
-  }
-}
-</style>
diff --git a/docs/.vuepress/theme/components/SidebarButton.vue b/docs/.vuepress/theme/components/SidebarButton.vue
deleted file mode 100644
index a43ad2172..000000000
--- a/docs/.vuepress/theme/components/SidebarButton.vue
+++ /dev/null
@@ -1,42 +0,0 @@
-<template>
-  <div class="sidebar-button" @click="$emit('toggle-sidebar')">
-    <svg
-      class="icon"
-      xmlns="http://www.w3.org/2000/svg"
-      aria-hidden="true"
-      role="img"
-      viewBox="0 0 448 512"
-    >
-      <path
-        fill="currentColor"
-        d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"
-        class
-      />
-    </svg>
-  </div>
-</template>
-
-<style lang="stylus">
-.sidebar-button {
-  cursor: pointer;
-  display: none;
-  width: 1.25rem;
-  height: 1.25rem;
-  position: absolute;
-  padding: 0.6rem;
-  top: 0.6rem;
-  left: 1rem;
-
-  .icon {
-    display: block;
-    width: 1.25rem;
-    height: 1.25rem;
-  }
-}
-
-@media (max-width: $MQMobile) {
-  .sidebar-button {
-    display: block;
-  }
-}
-</style>
diff --git a/docs/.vuepress/theme/components/SidebarGroup.vue b/docs/.vuepress/theme/components/SidebarGroup.vue
deleted file mode 100644
index f38e734b6..000000000
--- a/docs/.vuepress/theme/components/SidebarGroup.vue
+++ /dev/null
@@ -1,136 +0,0 @@
-<template>
-  <section
-    class="sidebar-group"
-    :class="[
-      {
-        collapsable,
-        'is-sub-group': depth !== 0
-      },
-      `depth-${depth}`
-    ]"
-  >
-    <router-link
-      v-if="item.path"
-      class="sidebar-heading clickable"
-      :class="{
-        open,
-        'active': isActive($route, item.path)
-      }"
-      :to="item.path"
-      @click.native="$emit('toggle')"
-    >
-      <span>{{ item.title }}</span>
-      <span class="arrow" v-if="collapsable" :class="open ? 'down' : 'right'"></span>
-    </router-link>
-
-    <p v-else class="sidebar-heading" :class="{ open }" @click="$emit('toggle')">
-      <span>{{ item.title }}</span>
-      <span class="arrow" v-if="collapsable" :class="open ? 'down' : 'right'"></span>
-    </p>
-
-    <DropdownTransition>
-      <SidebarLinks
-        class="sidebar-group-items"
-        :items="item.children"
-        v-if="open || !collapsable"
-        :sidebarDepth="item.sidebarDepth"
-        :depth="depth + 1"
-      />
-    </DropdownTransition>
-  </section>
-</template>
-
-<script>
-import { isActive } from "../util";
-import DropdownTransition from "@theme/components/DropdownTransition.vue";
-
-export default {
-  name: "SidebarGroup",
-  props: ["item", "open", "collapsable", "depth"],
-  components: { DropdownTransition },
-  // ref: https://vuejs.org/v2/guide/components-edge-cases.html#Circular-References-Between-Components
-  beforeCreate() {
-    this.$options.components.SidebarLinks = require("./SidebarLinks.vue").default;
-  },
-  methods: { isActive }
-};
-</script> 
-
-<style lang="stylus">
-.sidebar-group {
-  .sidebar-group {
-    padding-left: 0.5em;
-  }
-
-  &:not(.collapsable) {
-    .sidebar-heading:not(.clickable) {
-      cursor: auto;
-      color: inherit;
-    }
-  }
-
-  // refine styles of nested sidebar groups
-  &.is-sub-group {
-    padding-left: 0;
-
-    & > .sidebar-heading {
-      font-size: 0.95em;
-      line-height: 1.4;
-      font-weight: normal;
-      padding-left: 2rem;
-
-      &:not(.clickable) {
-        opacity: 0.5;
-      }
-    }
-
-    & > .sidebar-group-items {
-      padding-left: 1rem;
-
-      & > li > .sidebar-link {
-        font-size: 0.95em;
-        border-left: none;
-      }
-    }
-  }
-
-  &.depth-2 {
-    & > .sidebar-heading {
-      border-left: none;
-    }
-  }
-}
-
-.sidebar-heading {
-  color: lighten($textColor, 50%);
-  transition: color 0.15s ease;
-  cursor: pointer;
-  font-size: 1em;
-  font-weight: 600;
-  text-transform: uppercase;
-  // text-transform uppercase
-  padding: 0.35rem 1.5rem 0.35rem 1.25rem;
-  width: 100%;
-  box-sizing: border-box;
-  margin: 0;
-  border-left: 0.25rem solid transparent;
-
-  .arrow {
-    position: relative;
-    top: -0.12em;
-    left: 0.5em;
-  }
-
-  &.clickable {
-    &:hover {
-      color: $accentColor;
-    }
-  }
-}
-
-.sidebar-group-items {
-  transition: height 0.1s ease-out;
-  font-size: 0.95em;
-  overflow: hidden;
-}
-</style>
diff --git a/docs/.vuepress/theme/components/SidebarLink.vue b/docs/.vuepress/theme/components/SidebarLink.vue
deleted file mode 100644
index ad28e5fd9..000000000
--- a/docs/.vuepress/theme/components/SidebarLink.vue
+++ /dev/null
@@ -1,153 +0,0 @@
-<script>
-import { isActive, hashRE, groupHeaders } from "../util";
-
-export default {
-  functional: true,
-
-  props: ["item", "sidebarDepth"],
-
-  render(
-    h,
-    {
-      parent: { $page, $site, $route, $themeConfig, $themeLocaleConfig },
-      props: { item, sidebarDepth }
-    }
-  ) {
-    // use custom active class matching logic
-    // due to edge case of paths ending with / + hash
-    const selfActive = isActive($route, item.path);
-    // for sidebar: auto pages, a hash link should be active if one of its child
-    // matches
-    const active =
-      item.type === "auto"
-        ? selfActive ||
-          item.children.some(c =>
-            isActive($route, item.basePath + "#" + c.slug)
-          )
-        : selfActive;
-    const link =
-      item.type === "external"
-        ? renderExternal(h, item.path, item.title || item.path)
-        : renderLink(h, item.path, item.title || item.path, active);
-
-    const configDepth =
-      $page.frontmatter.sidebarDepth ||
-      sidebarDepth ||
-      $themeLocaleConfig.sidebarDepth ||
-      $themeConfig.sidebarDepth;
-
-    const maxDepth = configDepth == null ? 1 : configDepth;
-
-    const displayAllHeaders =
-      $themeLocaleConfig.displayAllHeaders || $themeConfig.displayAllHeaders;
-
-    if (item.type === "auto") {
-      return [
-        link,
-        renderChildren(h, item.children, item.basePath, $route, maxDepth)
-      ];
-    } else if (
-      (active || displayAllHeaders) &&
-      item.headers &&
-      !hashRE.test(item.path)
-    ) {
-      const children = groupHeaders(item.headers);
-      return [link, renderChildren(h, children, item.path, $route, maxDepth)];
-    } else {
-      return link;
-    }
-  }
-};
-
-function renderLink(h, to, text, active) {
-  return h(
-    "router-link",
-    {
-      props: {
-        to,
-        activeClass: "",
-        exactActiveClass: ""
-      },
-      class: {
-        active,
-        "sidebar-link": true
-      }
-    },
-    text
-  );
-}
-
-function renderChildren(h, children, path, route, maxDepth, depth = 1) {
-  if (!children || depth > maxDepth) return null;
-  return h(
-    "ul",
-    { class: "sidebar-sub-headers" },
-    children.map(c => {
-      const active = isActive(route, path + "#" + c.slug);
-      return h("li", { class: "sidebar-sub-header" }, [
-        renderLink(h, path + "#" + c.slug, c.title, active),
-        renderChildren(h, c.children, path, route, maxDepth, depth + 1)
-      ]);
-    })
-  );
-}
-
-function renderExternal(h, to, text) {
-  return h(
-    "a",
-    {
-      attrs: {
-        href: to,
-        target: "_blank",
-        rel: "noopener noreferrer"
-      },
-      class: {
-        "sidebar-link": true
-      }
-    },
-    [text, h("OutboundLink")]
-  );
-}
-</script>
-
-<style lang="stylus">
-.sidebar .sidebar-sub-headers {
-  padding-left: 1rem;
-  font-size: 0.95em;
-}
-
-a.sidebar-link {
-  // font-size: 0.95em;
-  font-weight: 400;
-  display: inline-block;
-  color: $textColor;
-  border-left: 0.25rem solid transparent;
-  padding: 0.35rem 1rem 0.35rem 1.25rem;
-  line-height: 1.3;
-  width: 100%;
-  box-sizing: border-box;
-
-  &:hover {
-    color: $accentColor;
-  }
-
-  &.active {
-    font-weight: 600;
-    color: $accentColor;
-  }
-
-  .sidebar-group & {
-    padding-left: 2rem;
-  }
-
-  .sidebar-sub-headers & {
-    padding-top: 0.25rem;
-    padding-bottom: 0.25rem;
-    border-left: none;
-
-    &.active {
-      font-weight: 500;
-    }
-  }
-}
-</style>
diff --git a/docs/.vuepress/theme/components/SidebarLinks.vue b/docs/.vuepress/theme/components/SidebarLinks.vue
deleted file mode 100644
index f805aa771..000000000
--- a/docs/.vuepress/theme/components/SidebarLinks.vue
+++ /dev/null
@@ -1,79 +0,0 @@
-<template>
-  <ul class="sidebar-links" v-if="items.length">
-    <li v-for="(item, i) in items" :key="i">
-      <SidebarGroup
-        v-if="item.type === 'group'"
-        :item="item"
-        :open="i === openGroupIndex"
-        :collapsable="item.collapsable || item.collapsible"
-        :depth="depth"
-        @toggle="toggleGroup(i)"
-      />
-      <SidebarLink v-else :sidebarDepth="sidebarDepth" :item="item" />
-    </li>
-  </ul>
-</template>
-
-<script>
-import SidebarGroup from "@theme/components/SidebarGroup.vue";
-import SidebarLink from "@theme/components/SidebarLink.vue";
-import { isActive } from "../util";
-
-export default {
-  name: "SidebarLinks",
-
-  components: { SidebarGroup, SidebarLink },
-
-  props: [
-    "items",
-    "depth", // depth of current sidebar links
-    "sidebarDepth" // depth of headers to be extracted
-  ],
-
-  data() {
-    return {
-      openGroupIndex: 0
-    };
-  },
-
-  created() {
-    this.refreshIndex();
-  },
-
-  watch: {
-    $route() {
-      this.refreshIndex();
-    }
-  },
-
-  methods: {
-    refreshIndex() {
-      const index = resolveOpenGroupIndex(this.$route, this.items);
-      if (index > -1) {
-        this.openGroupIndex = index;
-      }
-    },
-
-    toggleGroup(index) {
-      this.openGroupIndex = index === this.openGroupIndex ? -1 : index;
-    },
-
-    isActive(page) {
-      return isActive(this.$route, page.regularPath);
-    }
-  }
-};
-
-function resolveOpenGroupIndex(route, items) {
-  for (let i = 0; i < items.length; i++) {
-    const item = items[i];
-    if (
-      item.type === "group" &&
-      item.children.some(c => c.type === "page" && isActive(route, c.path))
-    ) {
-      return i;
-    }
-  }
-  return -1;
-}
-</script>
diff --git a/docs/.vuepress/theme/global-components/Badge.vue b/docs/.vuepress/theme/global-components/Badge.vue
deleted file mode 100644
index f56ae3eda..000000000
--- a/docs/.vuepress/theme/global-components/Badge.vue
+++ /dev/null
@@ -1,57 +0,0 @@
-<script>
-export default {
-  functional: true,
-  props: {
-    type: {
-      type: String,
-      default: "tip"
-    },
-    text: String,
-    vertical: {
-      type: String,
-      default: "top"
-    }
-  },
-  render(h, { props, slots }) {
-    return h(
-      "span",
-      {
-        class: ["badge", props.type],
-        style: {
-          verticalAlign: props.vertical
-        }
-      },
-      props.text || slots().default
-    );
-  }
-};
-</script>
-
-<style lang="stylus" scoped>
-.badge {
-  display: inline-block;
-  font-size: 14px;
-  height: 18px;
-  line-height: 18px;
-  border-radius: 3px;
-  padding: 0 6px;
-  color: white;
-  background-color: #42b983;
-
-  &.tip, &.green {
-    background-color: #42b983;
-  }
-
-  &.error {
-    background-color: #DA5961; // #f66
-  }
-
-  &.warning, &.warn, &.yellow {
-    background-color: darken(#ffe564, 35%);
-  }
-
-  & + & {
-    margin-left: 5px;
-  }
-}
-</style>
diff --git a/docs/.vuepress/theme/index.js b/docs/.vuepress/theme/index.js
index bd1ad342d..b91b8a576 100644
--- a/docs/.vuepress/theme/index.js
+++ b/docs/.vuepress/theme/index.js
@@ -1,52 +1,3 @@
-const path = require("path");
-
-// Theme API.
-module.exports = (options, ctx) => ({
-  alias() {
-    const { themeConfig, siteConfig } = ctx;
-    // resolve algolia
-    const isAlgoliaSearch =
-      themeConfig.algolia ||
-      Object.keys((siteConfig.locales && themeConfig.locales) || {}).some(
-        base => themeConfig.locales[base].algolia
-      );
-    return {
-      "@AlgoliaSearchBox": isAlgoliaSearch
-        ? path.resolve(__dirname, "components/AlgoliaSearchBox.vue")
-        : path.resolve(__dirname, "noopModule.js")
-    };
-  },
-
-  plugins: [
-    ["@vuepress/active-header-links", options.activeHeaderLinks],
-    "@vuepress/search",
-    "@vuepress/plugin-nprogress",
-    [
-      "container",
-      {
-        type: "tip",
-        defaultTitle: {
-          "/zh/": "提示"
-        }
-      }
-    ],
-    [
-      "container",
-      {
-        type: "warning",
-        defaultTitle: {
-          "/zh/": "注意"
-        }
-      }
-    ],
-    [
-      "container",
-      {
-        type: "danger",
-        defaultTitle: {
-          "/zh/": "警告"
-        }
-      }
-    ]
-  ]
-});
+module.exports = {
+  extend: '@vuepress/theme-default'
+}
diff --git a/docs/.vuepress/theme/layouts/404.vue b/docs/.vuepress/theme/layouts/404.vue
deleted file mode 100644
index b91e468d9..000000000
--- a/docs/.vuepress/theme/layouts/404.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<template>
-  <div class="theme-container">
-    <div class="theme-default-content">
-      <h1>404</h1>
-      <blockquote>{{ getMsg() }}</blockquote>
-      <router-link to="/">Take me home.</router-link>
-    </div>
-  </div>
-</template>
-
-<script>
-const msgs = [
-  `There's nothing here.`,
-  `How did we get here?`,
-  `That's a Four-Oh-Four.`,
-  `Looks like we've got some broken links.`
-];
-
-export default {
-  methods: {
-    getMsg() {
-      return msgs[Math.floor(Math.random() * msgs.length)];
-    }
-  }
-};
-</script>
- 
\ No newline at end of file
diff --git a/docs/.vuepress/theme/layouts/Layout.vue b/docs/.vuepress/theme/layouts/Layout.vue
index 49530c982..12af2c5db 100644
--- a/docs/.vuepress/theme/layouts/Layout.vue
+++ b/docs/.vuepress/theme/layouts/Layout.vue
@@ -15,7 +15,6 @@
     </Sidebar>
 
     <Home v-if="$page.frontmatter.home" />
-
     <Page v-else :sidebar-items="sidebarItems">
       <slot name="page-top" slot="top" />
       <slot name="page-bottom" slot="bottom" />
@@ -25,9 +24,9 @@
 
 <script>
 import Home from "@theme/components/Home.vue";
-import Navbar from "@theme/components/Navbar.vue";
-import Page from "@theme/components/Page.vue";
-import Sidebar from "@theme/components/Sidebar.vue";
+import Navbar from "@parent-theme/components/Navbar.vue";
+import Page from "@parent-theme/components/Page.vue";
+import Sidebar from "@parent-theme/components/Sidebar.vue";
 import { resolveSidebarItems } from "../util";
 
 export default {
@@ -35,7 +34,7 @@ export default {
 
   data() {
     return {
-      isSidebarOpen: false
+      isSidebarOpen: false,
     };
   },
 
@@ -79,11 +78,11 @@ export default {
         {
           "no-navbar": !this.shouldShowNavbar,
           "sidebar-open": this.isSidebarOpen,
-          "no-sidebar": !this.shouldShowSidebar
+          "no-sidebar": !this.shouldShowSidebar,
         },
-        userPageClass
+        userPageClass,
       ];
-    }
+    },
   },
 
   mounted() {
@@ -101,7 +100,7 @@ export default {
     onTouchStart(e) {
       this.touchStart = {
         x: e.changedTouches[0].clientX,
-        y: e.changedTouches[0].clientY
+        y: e.changedTouches[0].clientY,
       };
     },
 
@@ -115,7 +114,7 @@ export default {
           this.toggleSidebar(false);
         }
       }
-    }
-  }
+    },
+  },
 };
 </script>
diff --git a/docs/.vuepress/theme/noopModule.js b/docs/.vuepress/theme/noopModule.js
deleted file mode 100644
index b1c6ea436..000000000
--- a/docs/.vuepress/theme/noopModule.js
+++ /dev/null
@@ -1 +0,0 @@
-export default {}
diff --git a/docs/.vuepress/theme/package.json b/docs/.vuepress/theme/package.json
deleted file mode 100644
index 6a79dd95e..000000000
--- a/docs/.vuepress/theme/package.json
+++ /dev/null
@@ -1,41 +0,0 @@
-{
-  "name": "@vuepress/theme-default",
-  "version": "1.0.2",
-  "description": "Default theme for VuePress",
-  "main": "index.js",
-  "publishConfig": {
-    "access": "public"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/vuejs/vuepress.git",
-    "directory": "packages/@vuepress/theme-default"
-  },
-  "keywords": [
-    "documentation",
-    "vue",
-    "vuepress",
-    "generator"
-  ],
-  "author": "Evan You",
-  "maintainers": [
-    {
-      "name": "ULIVZ",
-      "email": "chl814@foxmail.com"
-    }
-  ],
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/vuejs/vuepress/issues"
-  },
-  "homepage": "https://github.com/vuejs/vuepress/packages/@vuepress/theme-default#readme",
-  "dependencies": {
-    "@vuepress/plugin-active-header-links": "^1.0.2",
-    "@vuepress/plugin-nprogress": "^1.0.2",
-    "@vuepress/plugin-search": "^1.0.2",
-    "docsearch.js": "^2.5.2",
-    "stylus": "^0.54.5",
-    "stylus-loader": "^3.0.2",
-    "vuepress-plugin-container": "^2.0.0"
-  }
-}
diff --git a/docs/.vuepress/theme/styles/arrow.styl b/docs/.vuepress/theme/styles/arrow.styl
deleted file mode 100644
index 20bffc0dc..000000000
--- a/docs/.vuepress/theme/styles/arrow.styl
+++ /dev/null
@@ -1,22 +0,0 @@
-@require './config'
-
-.arrow
-  display inline-block
-  width 0
-  height 0
-  &.up
-    border-left 4px solid transparent
-    border-right 4px solid transparent
-    border-bottom 6px solid $arrowBgColor
-  &.down
-    border-left 4px solid transparent
-    border-right 4px solid transparent
-    border-top 6px solid $arrowBgColor
-  &.right
-    border-top 4px solid transparent
-    border-bottom 4px solid transparent
-    border-left 6px solid $arrowBgColor
-  &.left
-    border-top 4px solid transparent
-    border-bottom 4px solid transparent
-    border-right 6px solid $arrowBgColor
diff --git a/docs/.vuepress/theme/styles/code.styl b/docs/.vuepress/theme/styles/code.styl
deleted file mode 100644
index 31aa97ddb..000000000
--- a/docs/.vuepress/theme/styles/code.styl
+++ /dev/null
@@ -1,140 +0,0 @@
-{$contentClass}
-  code
-    color lighten($textColor, 20%)
-    padding 0.25rem 0.5rem
-    margin 0
-    font-size 0.85em
-    background-color rgba(27,31,35,0.05)
-    border-radius 3px
-    .token
-      &.deleted
-        color #EC5975
-      &.inserted
-        color $accentColor
-
-{$contentClass}
-  pre, pre[class*="language-"]
-    line-height 1.4
-    padding 1.25rem 1.5rem
-    margin 0.85rem 0
-    background-color $codeBgColor
-    border-radius 6px
-    overflow auto
-    code
-      color #fff
-      padding 0
-      background-color transparent
-      border-radius 0
-
-div[class*="language-"]
-  position relative
-  background-color $codeBgColor
-  border-radius 6px
-  .highlight-lines
-    user-select none
-    padding-top 1.3rem
-    position absolute
-    top 0
-    left 0
-    width 100%
-    line-height 1.4
-    .highlighted
-      background-color rgba(0, 0, 0, 66%)
-  pre, pre[class*="language-"]
-    background transparent
-    position relative
-    z-index 1
-  &::before
-    position absolute
-    z-index 3
-    top 0.8em
-    right 1em
-    font-size 0.75rem
-    color rgba(255, 255, 255, 0.4)
-  &:not(.line-numbers-mode)
-    .line-numbers-wrapper
-      display none
-  &.line-numbers-mode
-    .highlight-lines .highlighted
-        position relative
-        &:before
-          content ' '
-          position absolute
-          z-index 3
-          left 0
-          top 0
-          display block
-          width $lineNumbersWrapperWidth
-          height 100%
-          background-color rgba(0, 0, 0, 66%)
-    pre
-      padding-left $lineNumbersWrapperWidth + 1 rem
-      vertical-align middle
-    .line-numbers-wrapper
-      position absolute
-      top 0
-      width $lineNumbersWrapperWidth
-      text-align center
-      color rgba(255, 255, 255, 0.3)
-      padding 1.25rem 0
-      line-height 1.4
-      br
-        user-select none
-      .line-number
-        position relative
-        z-index 4
-        user-select none
-        font-size 0.85em
-    &::after
-      content ''
-      position absolute
-      z-index 2
-      top 0
-      left 0
-      width $lineNumbersWrapperWidth
-      height 100%
-      border-radius 6px 0 0 6px
-      border-right 1px solid rgba(0, 0, 0, 66%)
-      background-color $codeBgColor
-
-
-for lang in $codeLang
-  div{'[class~="language-' + lang + '"]'}
-    &:before
-      content ('' + lang)
-
-div[class~="language-javascript"]
-  &:before
-    content "js"
-
-div[class~="language-typescript"]
-  &:before
-    content "ts"
-
-div[class~="language-markup"]
-  &:before
-    content "html"
-
-div[class~="language-markdown"]
-  &:before
-    content "md"
-
-div[class~="language-json"]:before
-  content "json"
-
-div[class~="language-ruby"]:before
-  content "rb"
-
-div[class~="language-python"]:before
-  content "py"
-
-div[class~="language-bash"]:before
-  content "sh"
-
-div[class~="language-sh"]:before
-  content "sh"
-
-div[class~="language-php"]:before
-  content "php"
-
-@import '~prismjs/themes/prism-tomorrow.css'
diff --git a/docs/.vuepress/theme/styles/config.styl b/docs/.vuepress/theme/styles/config.styl
deleted file mode 100644
index 9e403210f..000000000
--- a/docs/.vuepress/theme/styles/config.styl
+++ /dev/null
@@ -1 +0,0 @@
-$contentClass = '.theme-default-content'
diff --git a/docs/.vuepress/theme/styles/custom-blocks.styl b/docs/.vuepress/theme/styles/custom-blocks.styl
deleted file mode 100644
index 276b9bbdb..000000000
--- a/docs/.vuepress/theme/styles/custom-blocks.styl
+++ /dev/null
@@ -1,31 +0,0 @@
-.custom-block
-  .custom-block-title
-    font-weight 600
-    margin-bottom -0.4rem
-  &.tip, &.warning, &.danger
-    padding .1rem 1.5rem
-    border-left-width .5rem
-    border-left-style solid
-    margin 1rem 0
-  &.tip
-    background-color #f3f5f7
-    border-color #42b983
-  &.warning
-    background-color rgba(255,229,100,.3)
-    border-color darken(#ffe564, 35%)
-    color darken(#ffe564, 70%)
-    .custom-block-title
-      color darken(#ffe564, 50%)
-    a
-      color $textColor
-  &.danger
-    background-color #ffe6e6
-    border-color darken(red, 20%)
-    color darken(red, 70%)
-    .custom-block-title
-      color darken(red, 40%)
-    a
-      color $textColor
-
-
- 
\ No newline at end of file
diff --git a/docs/.vuepress/theme/styles/index.styl b/docs/.vuepress/theme/styles/index.styl
deleted file mode 100644
index 2ffb25bd5..000000000
--- a/docs/.vuepress/theme/styles/index.styl
+++ /dev/null
@@ -1,203 +0,0 @@
-@require './config'
-@require './code'
-@require './custom-blocks'
-@require './arrow'
-@require './wrapper'
-@require './toc'
-
-html, body
-  padding 0
-  margin 0
-  background-color #fff
-
-body
-  font-family -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif
-  -webkit-font-smoothing antialiased
-  -moz-osx-font-smoothing grayscale
-  font-size $fontSize
-  color $textColor
-
-.page
-  padding-left $sidebarWidth
-
-.navbar
-  position fixed
-  z-index 20
-  top 0
-  left 0
-  right 0
-  height $navbarHeight
-  background-color $navbar-background
-  box-sizing border-box
-  border-bottom 1px solid $accentColor
-
-.sidebar-mask
-  position fixed
-  z-index 9
-  top 0
-  left 0
-  width 100vw
-  height 100vh
-  display none
-
-.sidebar
-  font-size 16px
-  background-color $sidebarColor
-  width $sidebarWidth
-  position fixed
-  z-index 10
-  margin 0
-  top $navbarHeight
-  left 0
-  bottom 0
-  box-sizing border-box
-  border-right 1px solid $borderColor
-  overflow-y auto
-
-{$contentClass}:not(.custom)
-  @extend $wrapper
-  > *:first-child
-    margin-top $navbarHeight
-
-  a:hover
-    text-decoration underline
-
-  p.demo
-    padding 1rem 1.5rem
-    border 1px solid #ddd
-    border-radius 4px
-
-  img
-    display: block;
-    margin: 0 auto;
-    max-width 92%
-
-{$contentClass}.custom
-  padding 0
-  margin 0
-
-  img
-    max-width 100%
-
-a
-  font-weight 500
-  color $accentColor
-  text-decoration none
-
-p a code
-  font-weight 400
-  color $accentColor
-
-kbd
-  background #eee
-  border solid 0.15rem #ddd
-  border-bottom solid 0.25rem #ddd
-  border-radius 0.15rem
-  padding 0 0.15em
-
-blockquote
-  font-size 1rem
-  color #999;
-  border-left .2rem solid #dfe2e5
-  margin 1rem 0
-  padding .25rem 0 .25rem 1rem
-
-  & > p
-    margin 0
-
-ul, ol
-  padding-left 1.2em
-
-strong
-  font-weight 600
-
-h1, h2, h3, h4, h5, h6
-  font-weight 600
-  line-height 1.25
-
-  {$contentClass}:not(.custom) > &
-    margin-top (0.5rem - $navbarHeight)
-    padding-top ($navbarHeight + 1rem)
-    margin-bottom 0
-
-    &:first-child
-      margin-top -1.5rem
-      margin-bottom 1rem
-
-      + p, + pre, + .custom-block
-        margin-top 2rem
-
-  &:hover .header-anchor
-    opacity: 1
-
-h1
-  font-size 2.2rem
-
-h2
-  font-size 1.65rem
-  padding-bottom .3rem
-  border-bottom 1px solid $borderColor
-
-h3
-  font-size 1.35rem
-
-a.header-anchor
-  font-size 0.85em
-  float left
-  margin-left -0.87em
-  padding-right 0.23em
-  margin-top 0.125em
-  opacity 0
-
-  &:hover
-    text-decoration none
-
-code, kbd, .line-number
-  font-family source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace
-
-p, ul, ol
-  line-height 1.7
-
-hr
-  border 0
-  border-top 1px solid $borderColor
-
-table
-  border-collapse collapse
-  margin 1rem 0
-  display: block
-  overflow-x: auto
- 
-tr
-  border-top 1px solid #dfe2e5
-
-  &:nth-child(2n)
-    background-color #f6f8fa
-
-th, td
-  border 1px solid #dfe2e5
-  padding .6em 1em
-
-.theme-container
-  &.sidebar-open
-    .sidebar-mask
-      display: block
-
-  &.no-navbar
-    {$contentClass}:not(.custom) > h1, h2, h3, h4, h5, h6
-      margin-top 1.5rem
-      padding-top 0
-
-    .sidebar
-      top 0
-
-
-@media (min-width: ($MQMobile + 1px))
-  .theme-container.no-sidebar
-    .sidebar
-      display none
-
-    .page
-      padding-left 0
-
-@require 'mobile.styl'
diff --git a/docs/.vuepress/theme/styles/mobile.styl b/docs/.vuepress/theme/styles/mobile.styl
deleted file mode 100644
index f5bd32739..000000000
--- a/docs/.vuepress/theme/styles/mobile.styl
+++ /dev/null
@@ -1,37 +0,0 @@
-@require './config'
-
-$mobileSidebarWidth = $sidebarWidth * 0.82
-
-// narrow desktop / iPad
-@media (max-width: $MQNarrow)
-  .sidebar
-    font-size 15px
-    width $mobileSidebarWidth
-  .page
-    padding-left $mobileSidebarWidth
-
-// wide mobile
-@media (max-width: $MQMobile)
-  .sidebar
-    top 0
-    padding-top $navbarHeight
-    transform translateX(-100%)
-    transition transform .2s ease
-  .page
-    padding-left 0
-  .theme-container
-    &.sidebar-open
-      .sidebar
-        transform translateX(0)
-    &.no-navbar
-      .sidebar
-        padding-top: 0
-
-// narrow mobile
-@media (max-width: $MQMobileNarrow)
-  h1
-    font-size 1.9rem
-  {$contentClass}
-    div[class*="language-"]
-      margin 0.85rem -1.5rem
-      border-radius 0
diff --git a/docs/.vuepress/theme/styles/palette.styl b/docs/.vuepress/theme/styles/palette.styl
deleted file mode 100644
index b1bd6b726..000000000
--- a/docs/.vuepress/theme/styles/palette.styl
+++ /dev/null
@@ -1,32 +0,0 @@
-// colors
-$mainColor= #6E43E8
-
-
-$sidebarColor=#FAFAFC
-$accentColor = #6E43E8
-$textColor =rgb(51, 51, 51)
-$headerColor=rgb(17, 17, 17)
-$borderColor = #e8e8fb
-$codeBgColor = #282c34
-$arrowBgColor = #ccc
-$navbar-background = #6E43E8;
-$navbar-text-color = #ffffff;
-$section-color=#f7f7f7;
-$fontSize = 16px
-
-// layout
-$navbarHeight = 5.2rem
-$navbar-vertical-padding = 1.4rem;
-$navbar-horizontal-padding = 1.4rem;
-
-$sidebarWidth = 16rem
-$contentWidth = 960px
-
-// // responsive breakpoints
-$MQNarrow = 959px
-$MQMobile = 719px
-$MQMobileNarrow = 419px
-
-.icon.outbound
-  display none !important 
- 
\ No newline at end of file
diff --git a/docs/.vuepress/theme/styles/toc.styl b/docs/.vuepress/theme/styles/toc.styl
deleted file mode 100644
index d3e71069b..000000000
--- a/docs/.vuepress/theme/styles/toc.styl
+++ /dev/null
@@ -1,3 +0,0 @@
-.table-of-contents
-  .badge
-    vertical-align middle
diff --git a/docs/.vuepress/theme/styles/wrapper.styl b/docs/.vuepress/theme/styles/wrapper.styl
deleted file mode 100644
index a99262c71..000000000
--- a/docs/.vuepress/theme/styles/wrapper.styl
+++ /dev/null
@@ -1,9 +0,0 @@
-$wrapper
-  max-width $contentWidth
-  margin 0 auto
-  padding 2rem 2.5rem
-  @media (max-width: $MQNarrow)
-    padding 2rem
-  @media (max-width: $MQMobileNarrow)
-    padding 1.5rem
-
diff --git a/docs/.vuepress/theme/util/index.js b/docs/.vuepress/theme/util/index.js
index fbf9a7d63..23e78f83c 100644
--- a/docs/.vuepress/theme/util/index.js
+++ b/docs/.vuepress/theme/util/index.js
@@ -1,119 +1,117 @@
-export const hashRE = /#.*$/;
-export const extRE = /\.(md|html)$/;
-export const endingSlashRE = /\/$/;
-export const outboundRE = /^(https?:|mailto:|tel:|[a-zA-Z]{4,}:)/;
+export const hashRE = /#.*$/
+export const extRE = /\.(md|html)$/
+export const endingSlashRE = /\/$/
+export const outboundRE = /^[a-z]+:/i
 
-export function normalize(path) {
+export function normalize (path) {
   return decodeURI(path)
-    .replace(hashRE, "")
-    .replace(extRE, "");
+    .replace(hashRE, '')
+    .replace(extRE, '')
 }
 
-export function getHash(path) {
-  const match = path.match(hashRE);
+export function getHash (path) {
+  const match = path.match(hashRE)
   if (match) {
-    return match[0];
+    return match[0]
   }
 }
 
-export function isExternal(path) {
-  return outboundRE.test(path);
+export function isExternal (path) {
+  return outboundRE.test(path)
 }
 
-export function isMailto(path) {
-  return /^mailto:/.test(path);
+export function isMailto (path) {
+  return /^mailto:/.test(path)
 }
 
-export function isTel(path) {
-  return /^tel:/.test(path);
+export function isTel (path) {
+  return /^tel:/.test(path)
 }
 
-export function ensureExt(path) {
+export function ensureExt (path) {
   if (isExternal(path)) {
-    return path;
+    return path
   }
-  const hashMatch = path.match(hashRE);
-  const hash = hashMatch ? hashMatch[0] : "";
-  const normalized = normalize(path);
+  const hashMatch = path.match(hashRE)
+  const hash = hashMatch ? hashMatch[0] : ''
+  const normalized = normalize(path)
 
   if (endingSlashRE.test(normalized)) {
-    return path;
+    return path
   }
-  return normalized + ".html" + hash;
+  return normalized + '.html' + hash
 }
 
-export function isActive(route, path) {
-  const routeHash = route.hash;
-  const linkHash = getHash(path);
+export function isActive (route, path) {
+  const routeHash = decodeURIComponent(route.hash)
+  const linkHash = getHash(path)
   if (linkHash && routeHash !== linkHash) {
-    return false;
+    return false
   }
-  const routePath = normalize(route.path);
-  const pagePath = normalize(path);
-  return routePath === pagePath;
+  const routePath = normalize(route.path)
+  const pagePath = normalize(path)
+  return routePath === pagePath
 }
 
-export function resolvePage(pages, rawPath, base) {
+export function resolvePage (pages, rawPath, base) {
   if (isExternal(rawPath)) {
     return {
-      type: "external",
+      type: 'external',
       path: rawPath
-    };
+    }
   }
   if (base) {
-    rawPath = resolvePath(rawPath, base);
+    rawPath = resolvePath(rawPath, base)
   }
-  const path = normalize(rawPath);
+  const path = normalize(rawPath)
   for (let i = 0; i < pages.length; i++) {
     if (normalize(pages[i].regularPath) === path) {
       return Object.assign({}, pages[i], {
-        type: "page",
+        type: 'page',
         path: ensureExt(pages[i].path)
-      });
+      })
     }
   }
-  console.error(
-    `[vuepress] No matching page found for sidebar item "${rawPath}"`
-  );
-  return {};
+  console.error(`[vuepress] No matching page found for sidebar item "${rawPath}"`)
+  return {}
 }
 
-function resolvePath(relative, base, append) {
-  const firstChar = relative.charAt(0);
-  if (firstChar === "/") {
-    return relative;
+function resolvePath (relative, base, append) {
+  const firstChar = relative.charAt(0)
+  if (firstChar === '/') {
+    return relative
   }
 
-  if (firstChar === "?" || firstChar === "#") {
-    return base + relative;
+  if (firstChar === '?' || firstChar === '#') {
+    return base + relative
   }
 
-  const stack = base.split("/");
+  const stack = base.split('/')
 
   // remove trailing segment if:
   // - not appending
   // - appending to trailing slash (last segment is empty)
   if (!append || !stack[stack.length - 1]) {
-    stack.pop();
+    stack.pop()
   }
 
   // resolve relative path
-  const segments = relative.replace(/^\//, "").split("/");
+  const segments = relative.replace(/^\//, '').split('/')
   for (let i = 0; i < segments.length; i++) {
-    const segment = segments[i];
-    if (segment === "..") {
-      stack.pop();
-    } else if (segment !== ".") {
-      stack.push(segment);
+    const segment = segments[i]
+    if (segment === '..') {
+      stack.pop()
+    } else if (segment !== '.') {
+      stack.push(segment)
     }
   }
 
   // ensure leading slash
-  if (stack[0] !== "") {
-    stack.unshift("");
+  if (stack[0] !== '') {
+    stack.unshift('')
   }
 
-  return stack.join("/");
+  return stack.join('/')
 }
 
 /**
@@ -123,26 +121,26 @@ function resolvePath(relative, base, append) {
  * @param { string } localePath
  * @returns { SidebarGroup }
  */
-export function resolveSidebarItems(page, regularPath, site, localePath) {
-  const { pages, themeConfig } = site;
+export function resolveSidebarItems (page, regularPath, site, localePath) {
+  const { pages, themeConfig } = site
 
-  const localeConfig =
-    localePath && themeConfig.locales
-      ? themeConfig.locales[localePath] || themeConfig
-      : themeConfig;
+  const localeConfig = localePath && themeConfig.locales
+    ? themeConfig.locales[localePath] || themeConfig
+    : themeConfig
 
-  const pageSidebarConfig =
-    page.frontmatter.sidebar || localeConfig.sidebar || themeConfig.sidebar;
-  if (pageSidebarConfig === "auto") {
-    return resolveHeaders(page);
+  const pageSidebarConfig = page.frontmatter.sidebar || localeConfig.sidebar || themeConfig.sidebar
+  if (pageSidebarConfig === 'auto') {
+    return resolveHeaders(page)
   }
 
-  const sidebarConfig = localeConfig.sidebar || themeConfig.sidebar;
+  const sidebarConfig = localeConfig.sidebar || themeConfig.sidebar
   if (!sidebarConfig) {
-    return [];
+    return []
   } else {
-    const { base, config } = resolveMatchingConfig(regularPath, sidebarConfig);
-    return config ? config.map(item => resolveItem(item, pages, base)) : [];
+    const { base, config } = resolveMatchingConfig(regularPath, sidebarConfig)
+    return config
+      ? config.map(item => resolveItem(item, pages, base))
+      : []
   }
 }
 
@@ -150,43 +148,41 @@ export function resolveSidebarItems(page, regularPath, site, localePath) {
  * @param { Page } page
  * @returns { SidebarGroup }
  */
-function resolveHeaders(page) {
-  const headers = groupHeaders(page.headers || []);
-  return [
-    {
-      type: "group",
-      collapsable: false,
-      title: page.title,
-      path: null,
-      children: headers.map(h => ({
-        type: "auto",
-        title: h.title,
-        basePath: page.path,
-        path: page.path + "#" + h.slug,
-        children: h.children || []
-      }))
-    }
-  ];
+function resolveHeaders (page) {
+  const headers = groupHeaders(page.headers || [])
+  return [{
+    type: 'group',
+    collapsable: false,
+    title: page.title,
+    path: null,
+    children: headers.map(h => ({
+      type: 'auto',
+      title: h.title,
+      basePath: page.path,
+      path: page.path + '#' + h.slug,
+      children: h.children || []
+    }))
+  }]
 }
 
-export function groupHeaders(headers) {
+export function groupHeaders (headers) {
   // group h3s under h2
-  headers = headers.map(h => Object.assign({}, h));
-  let lastH2;
+  headers = headers.map(h => Object.assign({}, h))
+  let lastH2
   headers.forEach(h => {
     if (h.level === 2) {
-      lastH2 = h;
+      lastH2 = h
     } else if (lastH2) {
-      (lastH2.children || (lastH2.children = [])).push(h);
+      (lastH2.children || (lastH2.children = [])).push(h)
     }
-  });
-  return headers.filter(h => h.level === 2);
+  })
+  return headers.filter(h => h.level === 2)
 }
 
-export function resolveNavLinkItem(linkItem) {
+export function resolveNavLinkItem (linkItem) {
   return Object.assign(linkItem, {
-    type: linkItem.items && linkItem.items.length ? "links" : "link"
-  });
+    type: linkItem.items && linkItem.items.length ? 'links' : 'link'
+  })
 }
 
 /**
@@ -194,54 +190,51 @@ export function resolveNavLinkItem(linkItem) {
  * @param { Array<string|string[]> | Array<SidebarGroup> | [link: string]: SidebarConfig } config
  * @returns { base: string, config: SidebarConfig }
  */
-export function resolveMatchingConfig(regularPath, config) {
+export function resolveMatchingConfig (regularPath, config) {
   if (Array.isArray(config)) {
     return {
-      base: "/",
+      base: '/',
       config: config
-    };
+    }
   }
   for (const base in config) {
     if (ensureEndingSlash(regularPath).indexOf(encodeURI(base)) === 0) {
       return {
         base,
         config: config[base]
-      };
+      }
     }
   }
-  return {};
+  return {}
 }
 
-function ensureEndingSlash(path) {
-  return /(\.html|\/)$/.test(path) ? path : path + "/";
+function ensureEndingSlash (path) {
+  return /(\.html|\/)$/.test(path)
+    ? path
+    : path + '/'
 }
 
-function resolveItem(item, pages, base, groupDepth = 1) {
-  if (typeof item === "string") {
-    return resolvePage(pages, item, base);
+function resolveItem (item, pages, base, groupDepth = 1) {
+  if (typeof item === 'string') {
+    return resolvePage(pages, item, base)
   } else if (Array.isArray(item)) {
     return Object.assign(resolvePage(pages, item[0], base), {
       title: item[1]
-    });
+    })
   } else {
-    if (groupDepth > 3) {
-      console.error("[vuepress] detected a too deep nested sidebar group.");
-    }
-    const children = item.children || [];
+    const children = item.children || []
     if (children.length === 0 && item.path) {
       return Object.assign(resolvePage(pages, item.path, base), {
         title: item.title
-      });
+      })
     }
     return {
-      type: "group",
+      type: 'group',
       path: item.path,
       title: item.title,
       sidebarDepth: item.sidebarDepth,
-      children: children.map(child =>
-        resolveItem(child, pages, base, groupDepth + 1)
-      ),
+      children: children.map(child => resolveItem(child, pages, base, groupDepth + 1)),
       collapsable: item.collapsable !== false
-    };
+    }
   }
 }