init

2022-11-19 21:23:16 +03:00 · 2022-11-19 21:23:16 +03:00 · 305e1b9182
commit 305e1b9182
56 changed files with 11518 additions and 0 deletions
--- a/21
+++ b/21
@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) Èrik Campobadal Forés <soc@erik.cat>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
--- a/README.md
+++ b/README.md
@ -0,0 +1,41 @@
+<p align="center"><a href="https://charts.erik.cat"><img src="https://i.imgur.com/IOybQsZ.jpg"></a></p>
+<p align="center">
+<a href="https://styleci.io/repos/69124179"><img src="https://styleci.io/repos/69124179/shield?branch=master&style=flat" alt="StyleCI Status"></a>
+<a class="badge-align" href="https://www.codacy.com/app/consoletvs/Charts?utm_source=github.com&amp;utm_medium=referral&amp;utm_content=ConsoleTVs/Charts&amp;utm_campaign=Badge_Grade"><img src="https://api.codacy.com/project/badge/Grade/b96ce6dd50de4a69ba191336a04a59e5"/></a>
+<a href="https://styleci.io/repos/69124179"><img src="https://img.shields.io/badge/Built_for-Laravel-orange.svg" alt="Build For Laravel"></a>
+<a href="https://packagist.org/packages/consoletvs/charts"><img src="https://poser.pugx.org/consoletvs/charts/d/total.svg" alt="Total Downloads"></a>
+<a href="https://packagist.org/packages/consoletvs/charts"><img src="https://poser.pugx.org/consoletvs/charts/v/stable.svg" alt="Latest Stable Version"></a>
+<a href="https://packagist.org/packages/consoletvs/charts"><img src="https://poser.pugx.org/consoletvs/charts/license.svg" alt="License"></a>
+<a href="https://app.fossa.io/projects/git%2Bgithub.com%2FConsoleTVs%2FCharts?ref=badge_shield" alt="FOSSA Status"><img src="https://app.fossa.io/api/projects/git%2Bgithub.com%2FConsoleTVs%2FCharts.svg?type=shield"/></a>
+</p>
+
+## What is laravel charts?
+
+Charts is a Laravel library used to create Charts using Chartisan. Chartisan does already have a PHP
+adapter. However, this library attempts to provide more laravel-like features into it by providing support
+for chart creation using the artisan command, middleware support and routing support. This makes handling
+charts feel more laravel-like. At the end of the day, this library uses Chartisan and can use all
+of its potential. Expect to read the Chartisan docs since this library it's just a simple abstraction.
+
+## Documentation
+
+The documentation for the latest version of charts can be found here by pressing the image below.
+
+<p align="center"><a href="https://charts.erik.cat"><img height="250" src="https://i.imgur.com/F0PDyYE.png"></a></p>
+
+## Screenshot
+
+<p align="center"><img src="https://image.prntscr.com/image/pwONtZIUSOGnxud9Omh4-Q.png"></p>
+
+
+## Previous Version
+
+Unfortunately laravel-charts `v7` is incompatible with our previous version, `v6`, because it has involved [a heavy rewrite](https://github.com/ConsoleTVs/Charts/releases/tag/7.0.0). If you're still stuck on `v6`, you should use:
+- the [`v6` branch of this repo](https://github.com/ConsoleTVs/Charts/tree/v6);
+- the [`v6` version of the documentation](https://v6.charts.erik.cat);
+
+Please note that we consider `v6` unmaintained and unsupported. So you should upgrade to `v7` as soon as possible. We're currently working on an upgrade guide. If you can help, please reach out with an issue - we'll take all the help we can get.
+
+## License
+
+[![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2FConsoleTVs%2FCharts.svg?type=large)](https://app.fossa.io/projects/git%2Bgithub.com%2FConsoleTVs%2FCharts?ref=badge_large)
--- a/composer.json
+++ b/composer.json
@ -0,0 +1,32 @@
+{
+    "name": "consoletvs/charts",
+    "description": "The missing charting library on laravel, powered by Chartisan",
+    "license": "MIT",
+    "type": "library",
+    "require": {
+        "php": ">=7.4",
+        "illuminate/contracts": "^7.14.1|^8.0",
+        "illuminate/http": "^7.14.1|^8.0",
+        "illuminate/console": "^7.14.1|^8.0",
+        "illuminate/support": "^7.14.1|^8.0",
+        "chartisan/php": "^1.2.0"
+    },
+    "authors": [
+        {
+            "name": "Èrik C. Forés",
+            "email": "soc@erik.cat"
+        }
+    ],
+    "autoload": {
+        "psr-4": {
+            "ConsoleTVs\\Charts\\": "src/"
+        }
+    },
+    "extra": {
+        "laravel": {
+            "providers": [
+                "ConsoleTVs\\Charts\\ChartsServiceProvider"
+            ]
+        }
+    }
+}
--- a/docs/.gitignore
+++ b/docs/.gitignore
@ -0,0 +1,116 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*
--- a/docs/.prettierrc
+++ b/docs/.prettierrc
@ -0,0 +1,11 @@
+{
+  "semi": true,
+  "arrowParens": "always",
+  "jsxSingleQuote": false,
+  "jsxBracketSameLine": true,
+  "quoteProps": "consistent",
+  "printWidth": 120,
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "bracketSpacing": true
+}
--- a/docs/docs/.vuepress/config.js
+++ b/docs/docs/.vuepress/config.js
@ -0,0 +1,25 @@
+module.exports = {
+  title: 'Laravel Charts',
+  description: 'The laravel adapter for Chartisan',
+  head: [['link', { rel: 'icon', href: '/logo.png' }]],
+  themeConfig: {
+    logo: '/logo.png',
+    searchPlaceholder: 'Search...',
+    lastUpdated: 'Last Updated',
+    sidebar: [
+      '/',
+      '/guide/',
+      '/guide/installation',
+      '/guide/create_charts',
+      '/guide/chart_configuration',
+      '/guide/render_charts',
+      '/guide/chart_customization',
+    ],
+    nav: [
+      { text: 'Home', link: '/' },
+      { text: 'Guide', link: '/guide/' },
+      { text: 'Chartisan', link: 'https://chartisan.dev' },
+      { text: 'Github', link: 'https://github.com/ConsoleTVs/Charts' },
+    ],
+  },
+};
--- a/docs/docs/.vuepress/public/banner.png
+++ b/docs/docs/.vuepress/public/banner.png
--- a/docs/docs/.vuepress/public/logo.png
+++ b/docs/docs/.vuepress/public/logo.png
--- a/docs/docs/.vuepress/styles/palette.styl
+++ b/docs/docs/.vuepress/styles/palette.styl
@ -0,0 +1,20 @@
+// colors
+$accentColor = #f67280
+$textColor = #2c3e50
+$borderColor = #eaecef
+$codeBgColor = #282c34
+$arrowBgColor = #ccc
+$badgeTipColor = #42b983
+$badgeWarningColor = darken(#ffe564, 35%)
+$badgeErrorColor = #DA5961
+
+// layout
+$navbarHeight = 3.6rem
+$sidebarWidth = 20rem
+$contentWidth = 740px
+$homePageWidth = 960px
+
+// responsive breakpoints
+$MQNarrow = 959px
+$MQMobile = 719px
+$MQMobileNarrow = 419px
--- a/docs/docs/.vuepress/theme/LICENSE
+++ b/docs/docs/.vuepress/theme/LICENSE
@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2018-present, Yuxi (Evan) You
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
--- a/docs/docs/.vuepress/theme/components/AlgoliaSearchBox.vue
+++ b/docs/docs/.vuepress/theme/components/AlgoliaSearchBox.vue
@ -0,0 +1,170 @@
+<template>
+  <form
+    id="search-form"
+    class="algolia-search-wrapper search-box"
+    role="search"
+  >
+    <input
+      id="algolia-search-input"
+      class="search-query"
+      :placeholder="placeholder"
+    >
+  </form>
+</template>
+
+<script>
+export default {
+  name: 'AlgoliaSearchBox',
+
+  props: ['options'],
+
+  data () {
+    return {
+      placeholder: undefined
+    }
+  },
+
+  watch: {
+    $lang (newValue) {
+      this.update(this.options, newValue)
+    },
+
+    options (newValue) {
+      this.update(newValue, this.$lang)
+    }
+  },
+
+  mounted () {
+    this.initialize(this.options, this.$lang)
+    this.placeholder = this.$site.themeConfig.searchPlaceholder || ''
+  },
+
+  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)
+              const routepath = pathname.replace(this.$site.base, '/')
+              this.$router.push(`${routepath}${hash}`)
+            }
+          }
+        ))
+      })
+    },
+
+    update (options, lang) {
+      this.$el.innerHTML = '<input id="algolia-search-input" class="search-query">'
+      this.initialize(options, 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>
--- a/docs/docs/.vuepress/theme/components/CodeFund.vue
+++ b/docs/docs/.vuepress/theme/components/CodeFund.vue
@ -0,0 +1,32 @@
+
+<template>
+  <div ref="codefund" id="codefund"></div>
+</template>
+
+<script>
+export default {
+  name: 'CodeFund',
+  props: {
+    propertyId: { type: String, required: true },
+  },
+  mounted() {
+    this.load();
+  },
+  watch: {
+    $route(to, from) {
+      if (to.path !== from.path) {
+        this.$refs.codefund.innerHTML = '';
+        this.load();
+      }
+    },
+  },
+  methods: {
+    load() {
+      const script = document.createElement('script');
+      script.setAttribute('type', 'text/javascript');
+      script.setAttribute('src', `https://codefund.app/properties/${this.propertyId}/funder.js?ts=${Date.now()}`);
+      this.$refs.codefund.appendChild(script);
+    },
+  },
+};
+</script>
--- a/docs/docs/.vuepress/theme/components/DropdownLink.vue
+++ b/docs/docs/.vuepress/theme/components/DropdownLink.vue
@ -0,0 +1,230 @@
+<template>
+  <div
+    class="dropdown-wrapper"
+    :class="{ open }"
+  >
+    <button
+      class="dropdown-title"
+      type="button"
+      :aria-label="dropdownAriaLabel"
+      @click="setOpen(!open)"
+    >
+      <span class="title">{{ item.text }}</span>
+      <span
+        class="arrow"
+        :class="open ? 'down' : 'right'"
+      />
+    </button>
+
+    <DropdownTransition>
+      <ul
+        v-show="open"
+        class="nav-dropdown"
+      >
+        <li
+          v-for="(subItem, index) in item.items"
+          :key="subItem.link || index"
+          class="dropdown-item"
+        >
+          <h4 v-if="subItem.type === 'links'">
+            {{ subItem.text }}
+          </h4>
+
+          <ul
+            v-if="subItem.type === 'links'"
+            class="dropdown-subitem-wrapper"
+          >
+            <li
+              v-for="childSubItem in subItem.items"
+              :key="childSubItem.link"
+              class="dropdown-subitem"
+            >
+              <NavLink
+                :item="childSubItem"
+                @focusout="
+                  isLastItemOfArray(childSubItem, subItem.items) &&
+                    isLastItemOfArray(subItem, item.items) &&
+                    setOpen(false)
+                "
+              />
+            </li>
+          </ul>
+
+          <NavLink
+            v-else
+            :item="subItem"
+            @focusout="isLastItemOfArray(subItem, item.items) && setOpen(false)"
+          />
+        </li>
+      </ul>
+    </DropdownTransition>
+  </div>
+</template>
+
+<script>
+import NavLink from '@theme/components/NavLink.vue'
+import DropdownTransition from '@theme/components/DropdownTransition.vue'
+import last from 'lodash/last'
+
+export default {
+  name: 'DropdownLink',
+
+  components: {
+    NavLink,
+    DropdownTransition
+  },
+
+  props: {
+    item: {
+      required: true
+    }
+  },
+
+  data () {
+    return {
+      open: false
+    }
+  },
+
+  computed: {
+    dropdownAriaLabel () {
+      return this.item.ariaLabel || this.item.text
+    }
+  },
+
+  watch: {
+    $route () {
+      this.open = false
+    }
+  },
+
+  methods: {
+    setOpen (value) {
+      this.open = value
+    },
+
+    isLastItemOfArray (item, array) {
+      return last(array) === item
+    }
+  }
+}
+</script>
+
+<style lang="stylus">
+.dropdown-wrapper
+  cursor pointer
+  .dropdown-title
+    display block
+    font-size 0.9rem
+    font-family inherit
+    cursor inherit
+    padding inherit
+    line-height 1.4rem
+    background transparent
+    border none
+    font-weight 500
+    color $textColor
+    &: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
+        &: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
+    .dropdown-title
+      font-weight 600
+      font-size inherit
+      &:hover
+        color $accentColor
+    .nav-dropdown
+      transition height .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,
+    &.open .nav-dropdown
+      // override the inline style.
+      display block !important
+    &.open:blur
+      display none
+    .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>
--- a/docs/docs/.vuepress/theme/components/DropdownTransition.vue
+++ b/docs/docs/.vuepress/theme/components/DropdownTransition.vue
@ -0,0 +1,33 @@
+<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>
--- a/docs/docs/.vuepress/theme/components/Home.vue
+++ b/docs/docs/.vuepress/theme/components/Home.vue
@ -0,0 +1,175 @@
+<template>
+  <main
+    class="home"
+    aria-labelledby="main-title"
+  >
+    <header class="hero">
+      <img
+        v-if="data.heroImage"
+        :src="$withBase(data.heroImage)"
+        :alt="data.heroAlt || 'hero'"
+      >
+
+      <h1
+        v-if="data.heroText !== null"
+        id="main-title"
+      >
+        {{ data.heroText || $title || 'Hello' }}
+      </h1>
+
+      <p
+        v-if="data.tagline !== null"
+        class="description"
+      >
+        {{ data.tagline || $description || 'Welcome to your VuePress site' }}
+      </p>
+
+      <p
+        v-if="data.actionText && data.actionLink"
+        class="action"
+      >
+        <NavLink
+          class="action-button"
+          :item="actionLink"
+        />
+      </p>
+    </header>
+
+    <div
+      v-if="data.features && data.features.length"
+      class="features"
+    >
+      <div
+        v-for="(feature, index) in data.features"
+        :key="index"
+        class="feature"
+      >
+        <h2>{{ feature.title }}</h2>
+        <p>{{ feature.details }}</p>
+      </div>
+    </div>
+
+    <Content class="theme-default-content custom" />
+
+    <div
+      v-if="data.footer"
+      class="footer"
+    >
+      {{ data.footer }}
+    </div>
+  </main>
+</template>
+
+<script>
+import NavLink from '@theme/components/NavLink.vue'
+
+export default {
+  name: 'Home',
+
+  components: { NavLink },
+
+  computed: {
+    data () {
+      return this.$page.frontmatter
+    },
+
+    actionLink () {
+      return {
+        link: this.data.actionLink,
+        text: this.data.actionText
+      }
+    }
+  }
+}
+</script>
+
+<style lang="stylus">
+.home
+  padding $navbarHeight 2rem 0
+  max-width $homePageWidth
+  margin 0px auto
+  display block
+  .hero
+    text-align center
+    img
+      max-width: 100%
+      max-height 280px
+      display block
+      margin 3rem auto 1.5rem
+    h1
+      font-size 3rem
+    h1, .description, .action
+      margin 1.8rem auto
+    .description
+      max-width 35rem
+      font-size 1.6rem
+      line-height 1.3
+      color lighten($textColor, 40%)
+    .action-button
+      display inline-block
+      font-size 1.2rem
+      color #fff
+      background-color $accentColor
+      padding 0.8rem 1.6rem
+      border-radius 4px
+      transition background-color .1s ease
+      box-sizing border-box
+      border-bottom 1px solid darken($accentColor, 10%)
+      &:hover
+        background-color lighten($accentColor, 10%)
+  .features
+    border-top 1px solid $borderColor
+    padding 1.2rem 0
+    margin-top 2.5rem
+    display flex
+    flex-wrap wrap
+    align-items flex-start
+    align-content stretch
+    justify-content space-between
+  .feature
+    flex-grow 1
+    flex-basis 30%
+    max-width 30%
+    h2
+      font-size 1.4rem
+      font-weight 500
+      border-bottom none
+      padding-bottom 0
+      color lighten($textColor, 10%)
+    p
+      color lighten($textColor, 25%)
+  .footer
+    padding 2.5rem
+    border-top 1px solid $borderColor
+    text-align center
+    color lighten($textColor, 25%)
+
+@media (max-width: $MQMobile)
+  .home
+    .features
+      flex-direction column
+    .feature
+      max-width 100%
+      padding 0 2.5rem
+
+@media (max-width: $MQMobileNarrow)
+  .home
+    padding-left 1.5rem
+    padding-right 1.5rem
+    .hero
+      img
+        max-height 210px
+        margin 2rem auto 1.2rem
+      h1
+        font-size 2rem
+      h1, .description, .action
+        margin 1.2rem auto
+      .description
+        font-size 1.2rem
+      .action-button
+        font-size 1rem
+        padding 0.6rem 1.2rem
+    .feature
+      h2
+        font-size 1.25rem
+</style>
--- a/docs/docs/.vuepress/theme/components/NavLink.vue
+++ b/docs/docs/.vuepress/theme/components/NavLink.vue
@ -0,0 +1,87 @@
+<template>
+  <RouterLink
+    v-if="isInternal"
+    class="nav-link"
+    :to="link"
+    :exact="exact"
+    @focusout.native="focusoutAction"
+  >
+    {{ item.text }}
+  </RouterLink>
+  <a
+    v-else
+    :href="link"
+    class="nav-link external"
+    :target="target"
+    :rel="rel"
+    @focusout="focusoutAction"
+  >
+    {{ item.text }}
+    <OutboundLink v-if="isBlankTarget" />
+  </a>
+</template>
+
+<script>
+import { isExternal, isMailto, isTel, ensureExt } from '../util'
+
+export default {
+  name: 'NavLink',
+
+  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 === '/'
+    },
+
+    isNonHttpURI () {
+      return isMailto(this.link) || isTel(this.link)
+    },
+
+    isBlankTarget () {
+      return this.target === '_blank'
+    },
+
+    isInternal () {
+      return !isExternal(this.link) && !this.isBlankTarget
+    },
+
+    target () {
+      if (this.isNonHttpURI) {
+        return null
+      }
+      if (this.item.target) {
+        return this.item.target
+      }
+      return isExternal(this.link) ? '_blank' : ''
+    },
+
+    rel () {
+      if (this.isNonHttpURI) {
+        return null
+      }
+      if (this.item.rel) {
+        return this.item.rel
+      }
+      return this.isBlankTarget ? 'noopener noreferrer' : ''
+    }
+  },
+
+  methods: {
+    focusoutAction () {
+      this.$emit('focusout')
+    }
+  }
+}
+</script>
--- a/docs/docs/.vuepress/theme/components/NavLinks.vue
+++ b/docs/docs/.vuepress/theme/components/NavLinks.vue
@ -0,0 +1,156 @@
+<template>
+  <nav
+    v-if="userLinks.length || repoLink"
+    class="nav-links"
+  >
+    <!-- user links -->
+    <div
+      v-for="item in userLinks"
+      :key="item.link"
+      class="nav-item"
+    >
+      <DropdownLink
+        v-if="item.type === 'links'"
+        :item="item"
+      />
+      <NavLink
+        v-else
+        :item="item"
+      />
+    </div>
+
+    <!-- repo link -->
+    <a
+      v-if="repoLink"
+      :href="repoLink"
+      class="repo-link"
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      {{ repoLabel }}
+      <OutboundLink />
+    </a>
+  </nav>
+</template>
+
+<script>
+import DropdownLink from '@theme/components/DropdownLink.vue'
+import { resolveNavLinkItem } from '../util'
+import NavLink from '@theme/components/NavLink.vue'
+
+export default {
+  name: 'NavLinks',
+
+  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',
+          ariaLabel: this.$themeLocaleConfig.ariaLabel || 'Select language',
+          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)
+        })
+      })
+    },
+
+    repoLink () {
+      const { repo } = this.$site.themeConfig
+      if (repo) {
+        return /^https?:/.test(repo)
+          ? repo
+          : `https://github.com/${repo}`
+      }
+      return null
+    },
+
+    repoLabel () {
+      if (!this.repoLink) return
+      if (this.$site.themeConfig.repoLabel) {
+        return this.$site.themeConfig.repoLabel
+      }
+
+      const repoHost = this.repoLink.match(/^https?:\/\/[^/]+/)[0]
+      const platforms = ['GitHub', 'GitLab', 'Bitbucket']
+      for (let i = 0; i < platforms.length; i++) {
+        const platform = platforms[i]
+        if (new RegExp(platform, 'i').test(repoHost)) {
+          return platform
+        }
+      }
+
+      return 'Source'
+    }
+  }
+}
+</script>
+
+<style lang="stylus">
+.nav-links
+  display inline-block
+  a
+    line-height 1.4rem
+    color inherit
+    &:hover, &.router-link-active
+      color $accentColor
+  .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 $textColor
+  .nav-item > a:not(.external)
+    &:hover, &.router-link-active
+      margin-bottom -2px
+      border-bottom 2px solid lighten($accentColor, 8%)
+</style>
--- a/docs/docs/.vuepress/theme/components/Navbar.vue
+++ b/docs/docs/.vuepress/theme/components/Navbar.vue
@ -0,0 +1,140 @@
+<template>
+  <header class="navbar">
+    <SidebarButton @toggle-sidebar="$emit('toggle-sidebar')" />
+
+    <RouterLink
+      :to="$localePath"
+      class="home-link"
+    >
+      <img
+        v-if="$site.themeConfig.logo"
+        class="logo"
+        :src="$withBase($site.themeConfig.logo)"
+        :alt="$siteTitle"
+      >
+      <span
+        v-if="$siteTitle"
+        ref="siteName"
+        class="site-name"
+        :class="{ 'can-hide': $site.themeConfig.logo }"
+      >{{ $siteTitle }}</span>
+    </RouterLink>
+
+    <div
+      class="links"
+      :style="linksWrapMaxWidth ? {
+        'max-width': linksWrapMaxWidth + 'px'
+      } : {}"
+    >
+      <AlgoliaSearchBox
+        v-if="isAlgoliaSearch"
+        :options="algolia"
+      />
+      <SearchBox v-else-if="$site.themeConfig.search !== false && $page.frontmatter.search !== false" />
+      <NavLinks class="can-hide" />
+    </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 {
+  name: 'Navbar',
+
+  components: {
+    SidebarButton,
+    NavLinks,
+    SearchBox,
+    AlgoliaSearchBox
+  },
+
+  data () {
+    return {
+      linksWrapMaxWidth: null
+    }
+  },
+
+  computed: {
+    algolia () {
+      return this.$themeLocaleConfig.algolia || this.$site.themeConfig.algolia || {}
+    },
+
+    isAlgoliaSearch () {
+      return this.algolia && this.algolia.apiKey && this.algolia.indexName
+    }
+  },
+
+  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)
+  }
+}
+
+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
+  a, span, img
+    display inline-block
+  .logo
+    height $navbarHeight - 1.4rem
+    min-width $navbarHeight - 1.4rem
+    margin-right 0.8rem
+    vertical-align top
+  .site-name
+    font-size 1.3rem
+    font-weight 600
+    color $textColor
+    position relative
+  .links
+    padding-left 1.5rem
+    box-sizing border-box
+    background-color white
+    white-space nowrap
+    font-size 0.9rem
+    position absolute
+    right $navbar-horizontal-padding
+    top $navbar-vertical-padding
+    display flex
+    .search-box
+      flex: 0 0 auto
+      vertical-align top
+
+@media (max-width: $MQMobile)
+  .navbar
+    padding-left 4rem
+    .can-hide
+      display none
+    .links
+      padding-left 1.5rem
+    .site-name
+      width calc(100vw - 9.4rem)
+      overflow hidden
+      white-space nowrap
+      text-overflow ellipsis
+</style>
--- a/docs/docs/.vuepress/theme/components/Page.vue
+++ b/docs/docs/.vuepress/theme/components/Page.vue
@ -0,0 +1,31 @@
+<template>
+  <main class="page">
+    <slot name="top" />
+
+    <Content class="theme-default-content" />
+    <PageEdit />
+
+    <PageNav v-bind="{ sidebarItems }" />
+
+    <slot name="bottom" />
+  </main>
+</template>
+
+<script>
+import PageEdit from '@theme/components/PageEdit.vue'
+import PageNav from '@theme/components/PageNav.vue'
+
+export default {
+  components: { PageEdit, PageNav },
+  props: ['sidebarItems']
+}
+</script>
+
+<style lang="stylus">
+@require '../styles/wrapper.styl'
+
+.page
+  padding-bottom 2rem
+  display block
+
+</style>
--- a/docs/docs/.vuepress/theme/components/PageEdit.vue
+++ b/docs/docs/.vuepress/theme/components/PageEdit.vue
@ -0,0 +1,143 @@
+<template>
+  <footer class="page-edit">
+    <div
+      v-if="editLink"
+      class="edit-link"
+    >
+      <a
+        :href="editLink"
+        target="_blank"
+        rel="noopener noreferrer"
+      >{{ editLinkText }}</a>
+      <OutboundLink />
+    </div>
+
+    <div
+      v-if="lastUpdated"
+      class="last-updated"
+    >
+      <span class="prefix">{{ lastUpdatedText }}:</span>
+      <span class="time">{{ lastUpdated }}</span>
+    </div>
+  </footer>
+</template>
+
+<script>
+import isNil from 'lodash/isNil'
+import { endingSlashRE, outboundRE } from '../util'
+
+export default {
+  name: 'PageEdit',
+
+  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'
+    },
+
+    editLink () {
+      const showEditLink = isNil(this.$page.frontmatter.editLink)
+        ? this.$site.themeConfig.editLinks
+        : this.$page.frontmatter.editLink
+
+      const {
+        repo,
+        docsDir = '',
+        docsBranch = 'master',
+        docsRepo = repo
+      } = this.$site.themeConfig
+
+      if (showEditLink && docsRepo && this.$page.relativePath) {
+        return this.createEditLink(
+          repo,
+          docsRepo,
+          docsDir,
+          docsBranch,
+          this.$page.relativePath
+        )
+      }
+      return null
+    },
+
+    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
+      )
+    }
+  }
+}
+</script>
+
+<style lang="stylus">
+@require '../styles/wrapper.styl'
+
+.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
+
+@media (max-width: $MQMobile)
+  .page-edit
+    .edit-link
+      margin-bottom 0.5rem
+    .last-updated
+      font-size 0.8em
+      float none
+      text-align left
+
+</style>
--- a/docs/docs/.vuepress/theme/components/PageNav.vue
+++ b/docs/docs/.vuepress/theme/components/PageNav.vue
@ -0,0 +1,163 @@
+<template>
+  <div
+    v-if="prev || next"
+    class="page-nav"
+  >
+    <p class="inner">
+      <span
+        v-if="prev"
+        class="prev"
+      >
+        ←
+        <a
+          v-if="prev.type === 'external'"
+          class="prev"
+          :href="prev.path"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          {{ prev.title || prev.path }}
+
+          <OutboundLink />
+        </a>
+
+        <RouterLink
+          v-else
+          class="prev"
+          :to="prev.path"
+        >
+          {{ prev.title || prev.path }}
+        </RouterLink>
+      </span>
+
+      <span
+        v-if="next"
+        class="next"
+      >
+        <a
+          v-if="next.type === 'external'"
+          :href="next.path"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          {{ next.title || next.path }}
+
+          <OutboundLink />
+        </a>
+
+        <RouterLink
+          v-else
+          :to="next.path"
+        >
+          {{ next.title || next.path }}
+        </RouterLink>
+        →
+      </span>
+    </p>
+  </div>
+</template>
+
+<script>
+import { resolvePage } from '../util'
+import isString from 'lodash/isString'
+import isNil from 'lodash/isNil'
+
+export default {
+  name: 'PageNav',
+
+  props: ['sidebarItems'],
+
+  computed: {
+    prev () {
+      return resolvePageLink(LINK_TYPES.PREV, this)
+    },
+
+    next () {
+      return resolvePageLink(LINK_TYPES.NEXT, this)
+    }
+  }
+}
+
+function resolvePrev (page, items) {
+  return find(page, items, -1)
+}
+
+function resolveNext (page, items) {
+  return find(page, items, 1)
+}
+
+const LINK_TYPES = {
+  NEXT: {
+    resolveLink: resolveNext,
+    getThemeLinkConfig: ({ nextLinks }) => nextLinks,
+    getPageLinkConfig: ({ frontmatter }) => frontmatter.next
+  },
+  PREV: {
+    resolveLink: resolvePrev,
+    getThemeLinkConfig: ({ prevLinks }) => prevLinks,
+    getPageLinkConfig: ({ frontmatter }) => frontmatter.prev
+  }
+}
+
+function resolvePageLink (
+  linkType,
+  { $themeConfig, $page, $route, $site, sidebarItems }
+) {
+  const { resolveLink, getThemeLinkConfig, getPageLinkConfig } = linkType
+
+  // Get link config from theme
+  const themeLinkConfig = getThemeLinkConfig($themeConfig)
+
+  // Get link config from current page
+  const pageLinkConfig = getPageLinkConfig($page)
+
+  // Page link config will overwrite global theme link config if defined
+  const link = isNil(pageLinkConfig) ? themeLinkConfig : pageLinkConfig
+
+  if (link === false) {
+    return
+  } else if (isString(link)) {
+    return resolvePage($site.pages, link, $route.path)
+  } else {
+    return resolveLink($page, sidebarItems)
+  }
+}
+
+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-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
+</style>
--- a/docs/docs/.vuepress/theme/components/Sidebar.vue
+++ b/docs/docs/.vuepress/theme/components/Sidebar.vue
@ -0,0 +1,89 @@
+<template>
+  <aside class="sidebar">
+    <div style="padding-top: 1.5rem">
+      <center>
+        <CodeFund propertyId="84" />
+      </center>
+    </div>
+
+    <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';
+import CodeFund from './CodeFund.vue';
+
+export default {
+  name: 'Sidebar',
+  components: { SidebarLinks, NavLinks, CodeFund },
+  props: ['items'],
+};
+</script>
+
+<style lang="stylus">
+.sidebar {
+  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.25rem;
+      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.7;
+      font-weight: bold;
+    }
+
+    & > li:not(:first-child) {
+      margin-top: 0.75rem;
+    }
+  }
+}
+
+@media (max-width: $MQMobile) {
+  .sidebar {
+    .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>
--- a/docs/docs/.vuepress/theme/components/SidebarButton.vue
+++ b/docs/docs/.vuepress/theme/components/SidebarButton.vue
@ -0,0 +1,40 @@
+<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>
--- a/docs/docs/.vuepress/theme/components/SidebarGroup.vue
+++ b/docs/docs/.vuepress/theme/components/SidebarGroup.vue
@ -0,0 +1,140 @@
+<template>
+  <section
+    class="sidebar-group"
+    :class="[
+      {
+        collapsable,
+        'is-sub-group': depth !== 0
+      },
+      `depth-${depth}`
+    ]"
+  >
+    <RouterLink
+      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
+        v-if="collapsable"
+        class="arrow"
+        :class="open ? 'down' : 'right'"
+      />
+    </RouterLink>
+
+    <p
+      v-else
+      class="sidebar-heading"
+      :class="{ open }"
+      @click="$emit('toggle')"
+    >
+      <span>{{ item.title }}</span>
+      <span
+        v-if="collapsable"
+        class="arrow"
+        :class="open ? 'down' : 'right'"
+      />
+    </p>
+
+    <DropdownTransition>
+      <SidebarLinks
+        v-if="open || !collapsable"
+        class="sidebar-group-items"
+        :items="item.children"
+        :sidebar-depth="item.sidebarDepth"
+        :depth="depth + 1"
+      />
+    </DropdownTransition>
+  </section>
+</template>
+
+<script>
+import { isActive } from '../util'
+import DropdownTransition from '@theme/components/DropdownTransition.vue'
+
+export default {
+  name: 'SidebarGroup',
+
+  components: {
+    DropdownTransition
+  },
+
+  props: [
+    'item',
+    'open',
+    'collapsable',
+    'depth'
+  ],
+
+  // ref: https://vuejs.org/v2/guide/components-edge-cases.html#Circular-References-Between-Components
+  beforeCreate () {
+    this.$options.components.SidebarLinks = require('@theme/components/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 $textColor
+  transition color .15s ease
+  cursor pointer
+  font-size 1.1em
+  font-weight bold
+  // 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
+  &.open, &:hover
+    color inherit
+  .arrow
+    position relative
+    top -0.12em
+    left 0.5em
+  &.clickable
+    &.active
+      font-weight 600
+      color $accentColor
+      border-left-color $accentColor
+    &:hover
+      color $accentColor
+
+.sidebar-group-items
+  transition height .1s ease-out
+  font-size 0.95em
+  overflow hidden
+</style>
--- a/docs/docs/.vuepress/theme/components/SidebarLink.vue
+++ b/docs/docs/.vuepress/theme/components/SidebarLink.vue
@ -0,0 +1,133 @@
+<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 maxDepth = [
+      $page.frontmatter.sidebarDepth,
+      sidebarDepth,
+      $themeLocaleConfig.sidebarDepth,
+      $themeConfig.sidebarDepth,
+      1
+    ].find(depth => depth !== undefined)
+
+    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, level) {
+  const component = {
+    props: {
+      to,
+      activeClass: '',
+      exactActiveClass: ''
+    },
+    class: {
+      active,
+      'sidebar-link': true
+    }
+  }
+
+  if (level > 2) {
+    component.style = {
+      'padding-left': level + 'rem'
+    }
+  }
+
+  return h('RouterLink', component, 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, c.level - 1),
+      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 1em
+  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.4
+  width: 100%
+  box-sizing: border-box
+  &:hover
+    color $accentColor
+  &.active
+    font-weight 600
+    color $accentColor
+    border-left-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>
--- a/docs/docs/.vuepress/theme/components/SidebarLinks.vue
+++ b/docs/docs/.vuepress/theme/components/SidebarLinks.vue
@ -0,0 +1,102 @@
+<template>
+  <ul
+    v-if="items.length"
+    class="sidebar-links"
+  >
+    <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
+        :sidebar-depth="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
+    }
+  },
+
+  watch: {
+    '$route' () {
+      this.refreshIndex()
+    }
+  },
+
+  created () {
+    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 (descendantIsActive(route, item)) {
+      return i
+    }
+  }
+  return -1
+}
+
+function descendantIsActive (route, item) {
+  if (item.type === 'group') {
+    return item.children.some(child => {
+      if (child.type === 'group') {
+        return descendantIsActive(route, child)
+      } else {
+        return child.type === 'page' && isActive(route, child.path)
+      }
+    })
+  }
+  return false
+}
+</script>
--- a/docs/docs/.vuepress/theme/global-components/Badge.vue
+++ b/docs/docs/.vuepress/theme/global-components/Badge.vue
@ -0,0 +1,44 @@
+<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 $badgeTipColor
+  &.error
+    background-color $badgeErrorColor
+  &.warning, &.warn, &.yellow
+    background-color $badgeWarningColor
+  & + &
+    margin-left 5px
+</style>
--- a/docs/docs/.vuepress/theme/index.js
+++ b/docs/docs/.vuepress/theme/index.js
@ -0,0 +1,59 @@
+const path = require('path')
+
+// Theme API.
+module.exports = (options, ctx) => {
+  const { themeConfig, siteConfig } = ctx
+
+  // resolve algolia
+  const isAlgoliaSearch = (
+    themeConfig.algolia
+    || Object
+        .keys(siteConfig.locales && themeConfig.locales || {})
+        .some(base => themeConfig.locales[base].algolia)
+  )
+
+  const enableSmoothScroll = themeConfig.smoothScroll === true
+
+  return {
+    alias () {
+      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: {
+          '/': 'TIP',
+          '/zh/': '提示'
+        }
+      }],
+      ['container', {
+        type: 'warning',
+        defaultTitle: {
+          '/': 'WARNING',
+          '/zh/': '注意'
+        }
+      }],
+      ['container', {
+        type: 'danger',
+        defaultTitle: {
+          '/': 'WARNING',
+          '/zh/': '警告'
+        }
+      }],
+      ['container', {
+        type: 'details',
+        before: info => `<details class="custom-block details">${info ? `<summary>${info}</summary>` : ''}\n`,
+        after: () => '</details>\n'
+      }],
+      ['smooth-scroll', enableSmoothScroll]
+    ]
+  }
+}
--- a/docs/docs/.vuepress/theme/layouts/404.vue
+++ b/docs/docs/.vuepress/theme/layouts/404.vue
@ -0,0 +1,30 @@
+<template>
+  <div class="theme-container">
+    <div class="theme-default-content">
+      <h1>404</h1>
+
+      <blockquote>{{ getMsg() }}</blockquote>
+
+      <RouterLink to="/">
+        Take me home.
+      </RouterLink>
+    </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>
--- a/docs/docs/.vuepress/theme/layouts/Layout.vue
+++ b/docs/docs/.vuepress/theme/layouts/Layout.vue
@ -0,0 +1,151 @@
+<template>
+  <div
+    class="theme-container"
+    :class="pageClasses"
+    @touchstart="onTouchStart"
+    @touchend="onTouchEnd"
+  >
+    <Navbar
+      v-if="shouldShowNavbar"
+      @toggle-sidebar="toggleSidebar"
+    />
+
+    <div
+      class="sidebar-mask"
+      @click="toggleSidebar(false)"
+    />
+
+    <Sidebar
+      :items="sidebarItems"
+      @toggle-sidebar="toggleSidebar"
+    >
+      <template #top>
+        <slot name="sidebar-top" />
+      </template>
+      <template #bottom>
+        <slot name="sidebar-bottom" />
+      </template>
+    </Sidebar>
+
+    <Home v-if="$page.frontmatter.home" />
+
+    <Page
+      v-else
+      :sidebar-items="sidebarItems"
+    >
+      <template #top>
+        <slot name="page-top" />
+      </template>
+      <template #bottom>
+        <slot name="page-bottom" />
+      </template>
+    </Page>
+  </div>
+</template>
+
+<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 { resolveSidebarItems } from '../util'
+
+export default {
+  name: 'Layout',
+
+  components: {
+    Home,
+    Page,
+    Sidebar,
+    Navbar
+  },
+
+  data () {
+    return {
+      isSidebarOpen: false
+    }
+  },
+
+  computed: {
+    shouldShowNavbar () {
+      const { themeConfig } = this.$site
+      const { frontmatter } = this.$page
+      if (
+        frontmatter.navbar === false
+        || themeConfig.navbar === false) {
+        return false
+      }
+      return (
+        this.$title
+        || themeConfig.logo
+        || themeConfig.repo
+        || themeConfig.nav
+        || this.$themeLocaleConfig.nav
+      )
+    },
+
+    shouldShowSidebar () {
+      const { frontmatter } = this.$page
+      return (
+        !frontmatter.home
+        && frontmatter.sidebar !== false
+        && this.sidebarItems.length
+      )
+    },
+
+    sidebarItems () {
+      return resolveSidebarItems(
+        this.$page,
+        this.$page.regularPath,
+        this.$site,
+        this.$localePath
+      )
+    },
+
+    pageClasses () {
+      const userPageClass = this.$page.frontmatter.pageClass
+      return [
+        {
+          'no-navbar': !this.shouldShowNavbar,
+          'sidebar-open': this.isSidebarOpen,
+          'no-sidebar': !this.shouldShowSidebar
+        },
+        userPageClass
+      ]
+    }
+  },
+
+  mounted () {
+    this.$router.afterEach(() => {
+      this.isSidebarOpen = false
+    })
+  },
+
+  methods: {
+    toggleSidebar (to) {
+      this.isSidebarOpen = typeof to === 'boolean' ? to : !this.isSidebarOpen
+      this.$emit('toggle-sidebar', this.isSidebarOpen)
+    },
+
+    // side swipe
+    onTouchStart (e) {
+      this.touchStart = {
+        x: e.changedTouches[0].clientX,
+        y: e.changedTouches[0].clientY
+      }
+    },
+
+    onTouchEnd (e) {
+      const dx = e.changedTouches[0].clientX - this.touchStart.x
+      const dy = e.changedTouches[0].clientY - this.touchStart.y
+      if (Math.abs(dx) > Math.abs(dy) && Math.abs(dx) > 40) {
+        if (dx > 0 && this.touchStart.x <= 80) {
+          this.toggleSidebar(true)
+        } else {
+          this.toggleSidebar(false)
+        }
+      }
+    }
+  }
+}
+</script>
--- a/docs/docs/.vuepress/theme/noopModule.js
+++ b/docs/docs/.vuepress/theme/noopModule.js
@ -0,0 +1 @@
+export default {}
--- a/docs/docs/.vuepress/theme/styles/arrow.styl
+++ b/docs/docs/.vuepress/theme/styles/arrow.styl
@ -0,0 +1,22 @@
+@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
--- a/docs/docs/.vuepress/theme/styles/code.styl
+++ b/docs/docs/.vuepress/theme/styles/code.styl
@ -0,0 +1,137 @@
+{$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-php"]:before
+  content "php"
+
+@import '~prismjs/themes/prism-tomorrow.css'
--- a/docs/docs/.vuepress/theme/styles/config.styl
+++ b/docs/docs/.vuepress/theme/styles/config.styl
@ -0,0 +1 @@
+$contentClass = '.theme-default-content'
--- a/docs/docs/.vuepress/theme/styles/custom-blocks.styl
+++ b/docs/docs/.vuepress/theme/styles/custom-blocks.styl
@ -0,0 +1,44 @@
+.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
+  &.details
+    display block
+    position relative
+    border-radius 2px
+    margin 1.6em 0
+    padding 1.6em
+    background-color #eee
+    h4
+      margin-top 0
+    figure, p
+      &:last-child
+        margin-bottom 0
+        padding-bottom 0
+    summary
+      outline none
+      cursor pointer
--- a/docs/docs/.vuepress/theme/styles/index.styl
+++ b/docs/docs/.vuepress/theme/styles/index.styl
@ -0,0 +1,201 @@
+@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 16px
+  color $textColor
+
+.page
+  padding-left $sidebarWidth
+
+.navbar
+  position fixed
+  z-index 20
+  top 0
+  left 0
+  right 0
+  height $navbarHeight
+  background-color #fff
+  box-sizing border-box
+  border-bottom 1px solid $borderColor
+
+.sidebar-mask
+  position fixed
+  z-index 9
+  top 0
+  left 0
+  width 100vw
+  height 100vh
+  display none
+
+.sidebar
+  font-size 16px
+  background-color #fff
+  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
+    max-width 100%
+
+{$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'
--- a/docs/docs/.vuepress/theme/styles/mobile.styl
+++ b/docs/docs/.vuepress/theme/styles/mobile.styl
@ -0,0 +1,37 @@
+@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
--- a/docs/docs/.vuepress/theme/styles/toc.styl
+++ b/docs/docs/.vuepress/theme/styles/toc.styl
@ -0,0 +1,3 @@
+.table-of-contents
+  .badge
+    vertical-align middle
--- a/docs/docs/.vuepress/theme/styles/wrapper.styl
+++ b/docs/docs/.vuepress/theme/styles/wrapper.styl
@ -0,0 +1,9 @@
+$wrapper
+  max-width $contentWidth
+  margin 0 auto
+  padding 2rem 2.5rem
+  @media (max-width: $MQNarrow)
+    padding 2rem
+  @media (max-width: $MQMobileNarrow)
+    padding 1.5rem
+
--- a/docs/docs/.vuepress/theme/util/index.js
+++ b/docs/docs/.vuepress/theme/util/index.js
@ -0,0 +1,240 @@
+export const hashRE = /#.*$/
+export const extRE = /\.(md|html)$/
+export const endingSlashRE = /\/$/
+export const outboundRE = /^[a-z]+:/i
+
+export function normalize (path) {
+  return decodeURI(path)
+    .replace(hashRE, '')
+    .replace(extRE, '')
+}
+
+export function getHash (path) {
+  const match = path.match(hashRE)
+  if (match) {
+    return match[0]
+  }
+}
+
+export function isExternal (path) {
+  return outboundRE.test(path)
+}
+
+export function isMailto (path) {
+  return /^mailto:/.test(path)
+}
+
+export function isTel (path) {
+  return /^tel:/.test(path)
+}
+
+export function ensureExt (path) {
+  if (isExternal(path)) {
+    return path
+  }
+  const hashMatch = path.match(hashRE)
+  const hash = hashMatch ? hashMatch[0] : ''
+  const normalized = normalize(path)
+
+  if (endingSlashRE.test(normalized)) {
+    return path
+  }
+  return normalized + '.html' + hash
+}
+
+export function isActive (route, path) {
+  const routeHash = decodeURIComponent(route.hash)
+  const linkHash = getHash(path)
+  if (linkHash && routeHash !== linkHash) {
+    return false
+  }
+  const routePath = normalize(route.path)
+  const pagePath = normalize(path)
+  return routePath === pagePath
+}
+
+export function resolvePage (pages, rawPath, base) {
+  if (isExternal(rawPath)) {
+    return {
+      type: 'external',
+      path: rawPath
+    }
+  }
+  if (base) {
+    rawPath = resolvePath(rawPath, base)
+  }
+  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',
+        path: ensureExt(pages[i].path)
+      })
+    }
+  }
+  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
+  }
+
+  if (firstChar === '?' || firstChar === '#') {
+    return base + relative
+  }
+
+  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()
+  }
+
+  // resolve relative path
+  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)
+    }
+  }
+
+  // ensure leading slash
+  if (stack[0] !== '') {
+    stack.unshift('')
+  }
+
+  return stack.join('/')
+}
+
+/**
+ * @param { Page } page
+ * @param { string } regularPath
+ * @param { SiteData } site
+ * @param { string } localePath
+ * @returns { SidebarGroup }
+ */
+export function resolveSidebarItems (page, regularPath, site, localePath) {
+  const { pages, themeConfig } = site
+
+  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 sidebarConfig = localeConfig.sidebar || themeConfig.sidebar
+  if (!sidebarConfig) {
+    return []
+  } else {
+    const { base, config } = resolveMatchingConfig(regularPath, sidebarConfig)
+    return config
+      ? config.map(item => resolveItem(item, pages, base))
+      : []
+  }
+}
+
+/**
+ * @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 || []
+    }))
+  }]
+}
+
+export function groupHeaders (headers) {
+  // group h3s under h2
+  headers = headers.map(h => Object.assign({}, h))
+  let lastH2
+  headers.forEach(h => {
+    if (h.level === 2) {
+      lastH2 = h
+    } else if (lastH2) {
+      (lastH2.children || (lastH2.children = [])).push(h)
+    }
+  })
+  return headers.filter(h => h.level === 2)
+}
+
+export function resolveNavLinkItem (linkItem) {
+  return Object.assign(linkItem, {
+    type: linkItem.items && linkItem.items.length ? 'links' : 'link'
+  })
+}
+
+/**
+ * @param { Route } route
+ * @param { Array<string|string[]> | Array<SidebarGroup> | [link: string]: SidebarConfig } config
+ * @returns { base: string, config: SidebarConfig }
+ */
+export function resolveMatchingConfig (regularPath, config) {
+  if (Array.isArray(config)) {
+    return {
+      base: '/',
+      config: config
+    }
+  }
+  for (const base in config) {
+    if (ensureEndingSlash(regularPath).indexOf(encodeURI(base)) === 0) {
+      return {
+        base,
+        config: config[base]
+      }
+    }
+  }
+  return {}
+}
+
+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)
+  } else if (Array.isArray(item)) {
+    return Object.assign(resolvePage(pages, item[0], base), {
+      title: item[1]
+    })
+  } else {
+    const children = item.children || []
+    if (children.length === 0 && item.path) {
+      return Object.assign(resolvePage(pages, item.path, base), {
+        title: item.title
+      })
+    }
+    return {
+      type: 'group',
+      path: item.path,
+      title: item.title,
+      sidebarDepth: item.sidebarDepth,
+      children: children.map(child => resolveItem(child, pages, base, groupDepth + 1)),
+      collapsable: item.collapsable !== false
+    }
+  }
+}
--- a/docs/docs/README.md
+++ b/docs/docs/README.md
@ -0,0 +1,16 @@
+---
+home: true
+heroImage: /logo.png
+heroText: Laravel Charts
+tagline: The laravel adapter for Chartisan
+actionText: Get Started →
+actionLink: /guide/
+features:
+  - title: Chartisan-Powered
+    details: Powered by one of the most powerful charting libraries on the front-end.
+  - title: Performant & Customizable
+    details: Chartisan does allow creating performant and customizable charts out of the box.
+  - title: Laravel features
+    details: Specific laravel features like routing, middlewares and creation commands.
+footer: MIT Licensed — Copyright © 2020-present Erik C. Forés
+---
--- a/docs/docs/guide/README.md
+++ b/docs/docs/guide/README.md
@ -0,0 +1,16 @@
+# Getting Started
+
+Laravel charts allows to integrate Chartisan into a laravel application with ease.
+
+Chartisan is a very powerful front-end library that allows creating charts and managing them
+with a simple API.
+
+This new version of Laravel Charts uses Chartisan under the hood to get the best experience
+possible on the back-end and front-end. You can read more about Chartisan in the official
+site at [Chartisan](https://chartisan.dev)
+
+![Example Charts](https://image.prntscr.com/image/pwONtZIUSOGnxud9Omh4-Q.png)
+
+Laravel charts provides features on the top of the Chartisan's PHP adapter to provide a
+top-notch laravel experience. This makes creating charts a laravel experience that's quick
+and elegant.
--- a/docs/docs/guide/chart_configuration.md
+++ b/docs/docs/guide/chart_configuration.md
@ -0,0 +1,66 @@
+# Chart Configuration
+
+You can customize how some chart configuration on the laravel side by simply applying some of the
+class properties needed.
+
+You can modify the following props on the chart:
+
+- Middlewares
+- Chart name (used to generate the URL)
+- Chart route name
+- Route endpoint prefix
+
+```php
+<?php
+
+declare(strict_types = 1);
+
+namespace App\Charts;
+
+use ConsoleTVs\Charts\BaseChart;
+use Illuminate\Http\Request;
+use Chartisan\PHP\Chartisan;
+
+class SampleChart extends BaseChart
+{
+    /**
+     * Determines the chart name to be used on the
+     * route. If null, the name will be a snake_case
+     * version of the class name.
+     */
+    public ?string $name = 'custom_chart_name';
+
+    /**
+     * Determines the name suffix of the chart route.
+     * This will also be used to get the chart URL
+     * from the blade directrive. If null, the chart
+     * name will be used.
+     */
+    public ?string $routeName = 'chart_route_name';
+
+    /**
+     * Determines the prefix that will be used by the chart
+     * endpoint.
+     */
+    public ?string $prefix = 'some_prefix';
+
+    /**
+     * Determines the middlewares that will be applied
+     * to the chart endpoint.
+     */
+    public ?array $middlewares = ['auth'];
+
+    /**
+     * Handles the HTTP request for the given chart.
+     * It must always return an instance of Chartisan
+     * and never a string or an array.
+     */
+    public function handler(Request $request): Chartisan
+    {
+        return Chartisan::build()
+            ->labels(['First', 'Second', 'Third'])
+            ->dataset('Sample', [1, 2, 3])
+            ->dataset('Sample 2', [3, 2, 1]);
+    }
+}
+```
--- a/docs/docs/guide/chart_customization.md
+++ b/docs/docs/guide/chart_customization.md
@ -0,0 +1,4 @@
+# Customization & API
+
+Please go to [Chartisan](https://chartisan.dev) to see all the available customization settings using Hooks
+and also check out the API to **Create, Update or Destroy** charts.
--- a/docs/docs/guide/create_charts.md
+++ b/docs/docs/guide/create_charts.md
@ -0,0 +1,88 @@
+# Create Charts
+
+You can start creating charts with the typical `make` command by laravel artisan.
+
+Following the other make conventions, you may use the following command to create a new chart and give it
+a name. The name will be used by the class and also the route name. You may further change this in the
+created class.
+
+```
+php artisan make:chart SampleChart
+```
+
+This will create a SampleChart class under `App\Charts` namespace that will look like this:
+
+```php
+<?php
+
+declare(strict_types = 1);
+
+namespace App\Charts;
+
+use ConsoleTVs\Charts\BaseChart;
+use Illuminate\Http\Request;
+use Chartisan\PHP\Chartisan;
+
+class SampleChart extends BaseChart
+{
+    /**
+     * Handles the HTTP request for the given chart.
+     * It must always return an instance of Chartisan
+     * and never a string or an array.
+     */
+    public function handler(Request $request): Chartisan
+    {
+        return Chartisan::build()
+            ->labels(['First', 'Second', 'Third'])
+            ->dataset('Sample', [1, 2, 3])
+            ->dataset('Sample 2', [3, 2, 1]);
+    }
+}
+```
+
+## Create the Chartisan instance
+
+The handler method is the one that will be called when Chartisan tries to get the chart
+data. You'll get the request instance as a parameter in case you want to check for query parameters
+or additional info like headers, or post data. You can modify the Chartisan instance as you need.
+
+You can know more about Chartisan at the [Documentation](https://chartisan.dev) page.
+
+You have to return a Chartisan instance, never a string or an object.
+
+## Register the chart
+
+You'll need to manually register using the `App\Providers\AppServiceProvider`
+
+Laravel charts have a registered singleton that will be injected to the `boot()` method on the service provider.
+
+You can use the following example as a guide to register an example chart.
+
+```php
+<?php
+
+namespace App\Providers;
+
+use ConsoleTVs\Charts\Registrar as Charts;
+use Illuminate\Support\ServiceProvider;
+
+class AppServiceProvider extends ServiceProvider
+{
+    // ...
+
+    /**
+     * Bootstrap any application services.
+     */
+    public function boot(Charts $charts)
+    {
+        $charts->register([
+            \App\Charts\SampleChart::class
+        ]);
+    }
+}
+```
+
+## Generated routes
+
+You can use php artisan route:list -c to see all your application routes and check out the chart routes that have
+been created by Laravel Charts in case you need them.
--- a/docs/docs/guide/installation.md
+++ b/docs/docs/guide/installation.md
@ -0,0 +1,23 @@
+# Installation
+
+You can install Laravel Charts by using [Composer](https://getcomposer.org/)
+
+You can use the following composer command to install it into an existing laravel project.
+
+```
+composer require consoletvs/charts:7.*
+```
+
+Laravel will already register the service provider to your application because laravel charts
+does make use of the extra laravel tag on the `composer.json` schema.
+
+## Publish the configuration file
+
+You can publish the configuration file of Laravel charts by running the following command:
+
+```
+php artisan vendor:publish --tag=charts
+```
+
+This will create a new file under `app/config/charts.php` that you can edit to modify some of the
+options of Laravel Charts.
--- a/docs/docs/guide/render_charts.md
+++ b/docs/docs/guide/render_charts.md
@ -0,0 +1,35 @@
+# Render Charts
+
+Laravel charts can be used without any rendering on the PHP side. Meaning it can be used and server as an API endpoint. There's no need to modify the configuration files or the chart to do such.
+
+However, if you do not plan to develop the front-end as a SPA or in a different application and can use the
+laravel Blade syntax, you can then use the `@chart` helper to create charts.
+
+Keep in mind that you still need to import Chartisan and it's front-end library of your choice as explained in the [Chartisan](https://chartisan.dev) docs. The `@chart` blade helper does accept a string containing the
+chart name to get the URL of. The following example can be used as a guide:
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Chartisan example</title>
+  </head>
+  <body>
+    <!-- Chart's container -->
+    <div id="chart" style="height: 300px;"></div>
+    <!-- Charting library -->
+    <script src="https://unpkg.com/echarts/dist/echarts.min.js"></script>
+    <!-- Chartisan -->
+    <script src="https://unpkg.com/@chartisan/echarts/dist/chartisan_echarts.js"></script>
+    <!-- Your application script -->
+    <script>
+      const chart = new Chartisan({
+        el: '#chart',
+        url: "@chart('sample_chart')",
+      });
+    </script>
+  </body>
+</html>
+```
--- a/docs/package.json
+++ b/docs/package.json
@ -0,0 +1,10 @@
+{
+  "private": true,
+  "scripts": {
+    "docs:dev": "vuepress dev docs",
+    "docs:build": "vuepress build docs"
+  },
+  "devDependencies": {
+    "vuepress": "^1.5.0"
+  }
+}
--- a/docs/yarn.lock
+++ b/docs/yarn.lock
--- a/src/BaseChart.php
+++ b/src/BaseChart.php
@ -0,0 +1,61 @@
+<?php
+
+declare(strict_types=1);
+
+namespace ConsoleTVs\Charts;
+
+use Chartisan\PHP\Chartisan;
+use Illuminate\Http\Request;
+use ReflectionClass;
+
+abstract class BaseChart
+{
+    /**
+     * Determines the chart name to be used on the
+     * route. If null, the name will be a snake_case
+     * version of the class name.
+     */
+    public ?string $name;
+
+    /**
+     * Determines the name suffix of the chart route.
+     * This will also be used to get the chart URL
+     * from the blade directrive. If null, the chart
+     * name will be used.
+     */
+    public ?string $routeName;
+
+    /**
+     * Determines the prefix that will be used by the chart
+     * endpoint.
+     */
+    public ?string $prefix;
+
+    /**
+     * Determines the middlewares that will be applied
+     * to the chart endpoint.
+     */
+    public ?array $middlewares;
+
+    /**
+     * Handles the HTTP request of the chart. This must always
+     * return the chart instance. Do not return a string or an array.
+     */
+    abstract public function handler(Request $request): Chartisan;
+
+    public static function __set_state(array $properties)
+    {
+        $klass = new static();
+
+        $refClass = new ReflectionClass($klass);
+
+        foreach ($properties as $name => $value) {
+            $property = $refClass->getProperty($name);
+            $property->setAccessible(true);
+
+            $property->setValue($klass, $value);
+        }
+
+        return $klass;
+    }
+}
--- a/src/ChartsController.php
+++ b/src/ChartsController.php
@ -0,0 +1,15 @@
+<?php
+
+namespace ConsoleTVs\Charts;
+
+use Illuminate\Http\JsonResponse;
+use Illuminate\Http\Request;
+use Illuminate\Routing\Controller as BaseController;
+
+class ChartsController extends BaseController
+{
+    public function __invoke(Request $request, ...$args)
+    {
+        return new JsonResponse($args[0]->handler($request)->toObject());
+    }
+}
--- a/src/ChartsServiceProvider.php
+++ b/src/ChartsServiceProvider.php
@ -0,0 +1,48 @@
+<?php
+
+declare(strict_types=1);
+
+namespace ConsoleTVs\Charts;
+
+use Illuminate\Contracts\Config\Repository;
+use Illuminate\Contracts\Foundation\Application;
+use Illuminate\Contracts\Routing\Registrar as RouteRegistrar;
+use Illuminate\Support\Facades\Blade;
+use Illuminate\Support\ServiceProvider;
+
+class ChartsServiceProvider extends ServiceProvider
+{
+    /**
+     * Register any application services.
+     */
+    public function register(): void
+    {
+        // Merge the configuration files.
+        $this->mergeConfigFrom(__DIR__.'/Config/charts.php', 'charts');
+        // Register the Chart Registerer singleton class to avoid resolving it
+        // multiple times in the application.
+        $this->app->singleton(Registrar::class, fn (Application $app) => new Registrar(
+            $app,
+            $app->make(Repository::class),
+            $app->make(RouteRegistrar::class)
+        ));
+    }
+
+    /**
+     * Bootstrap any application services.
+     */
+    public function boot(Repository $config, Registrar $charts): void
+    {
+        // Publish the configuration file to the config path.
+        $this->publishes([__DIR__.'/Config/charts.php' => config_path('charts.php')], 'charts');
+        // Create the blade directrives
+        $routeNamePrefix = $config->get('charts.global_route_name_prefix');
+        Blade::directive('chart', function ($expression) use ($routeNamePrefix) {
+            return "<?php echo route('{$routeNamePrefix}.'.{$expression}); ?>";
+        });
+        // Register the console commands.
+        if ($this->app->runningInConsole()) {
+            $this->commands([Commands\CreateChart::class]);
+        }
+    }
+}
--- a/src/Commands/CreateChart.php
+++ b/src/Commands/CreateChart.php
@ -0,0 +1,54 @@
+<?php
+
+declare(strict_types=1);
+
+namespace ConsoleTVs\Charts\Commands;
+
+use Illuminate\Console\GeneratorCommand;
+use Illuminate\Support\Str;
+
+class CreateChart extends GeneratorCommand
+{
+    /**
+     * The name and signature of the console command.
+     */
+    protected $signature = 'make:chart {name : Determines the chart name}';
+
+    /**
+     * The console command description.
+     */
+    protected $description = 'Create a new chart class';
+
+    /**
+     * The type of class being generated.
+     */
+    protected $type = 'Chart';
+
+    /**
+     * Gets the stub to generate the chart.
+     */
+    protected function getStub()
+    {
+        return __DIR__.'/stubs/chart.stub';
+    }
+
+    /**
+     * Determines the namespace where the charts will be
+     * created at.
+     */
+    protected function getDefaultNamespace($rootNamespace)
+    {
+        return $rootNamespace.'\Charts';
+    }
+
+    /**
+     * Determines the name of the stub to generate.
+     */
+    protected function getNameInput()
+    {
+        return Str::of($this->argument('name'))
+            ->trim()
+            ->camel()
+            ->ucfirst();
+    }
+}
--- a/src/Commands/stubs/chart.stub
+++ b/src/Commands/stubs/chart.stub
@ -0,0 +1,25 @@
+<?php
+
+declare(strict_types = 1);
+
+namespace DummyNamespace;
+
+use ConsoleTVs\Charts\BaseChart;
+use Illuminate\Http\Request;
+use Chartisan\PHP\Chartisan;
+
+class DummyClass extends BaseChart
+{
+    /**
+     * Handles the HTTP request for the given chart.
+     * It must always return an instance of Chartisan
+     * and never a string or an array.
+     */
+    public function handler(Request $request): Chartisan
+    {
+        return Chartisan::build()
+            ->labels(['First', 'Second', 'Third'])
+            ->dataset('Sample', [1, 2, 3])
+            ->dataset('Sample 2', [3, 2, 1]);
+    }
+}
--- a/src/Config/charts.php
+++ b/src/Config/charts.php
@ -0,0 +1,44 @@
+<?php
+
+declare(strict_types=1);
+
+return [
+    /*
+    |--------------------------------------------------------------------------
+    | Global Route Prefix
+    |--------------------------------------------------------------------------
+    |
+    | This option allows to modify the prefix used by all the chart routes.
+    | It will be applied to each and every chart created by the library. This
+    | option comes with the default value of: 'api/chart'. You can still define
+    | a specific route prefix to each individual chart that will be applied after this.
+    |
+    */
+    'global_route_prefix' => 'api/chart',
+
+    /*
+    |--------------------------------------------------------------------------
+    | Global Middlewares.
+    |--------------------------------------------------------------------------
+    |
+    | This option allows to apply a list of middlewares to each and every
+    | chart created. This is commonly used if all your charts share some
+    | logic. For example, you might have all your charts under authentication
+    | middleware. If that's the case, applying a global middleware is a good
+    | choice rather than applying it individually to each chart.
+    |
+    */
+    'global_middlewares' => ['web'],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Global Route Name Prefix
+    |--------------------------------------------------------------------------
+    |
+    | This option allows to modify the prefix used by all the chart route names.
+    | This is mostly used if there's the need to modify the route names that are
+    | binded to the charts.
+    |
+    */
+    'global_route_name_prefix' => 'charts',
+];
--- a/src/Registrar.php
+++ b/src/Registrar.php
@ -0,0 +1,73 @@
+<?php
+
+declare(strict_types=1);
+
+namespace ConsoleTVs\Charts;
+
+use Illuminate\Contracts\Config\Repository;
+use Illuminate\Contracts\Foundation\Application;
+use Illuminate\Contracts\Routing\Registrar as RouteRegistrar;
+use Illuminate\Support\Str;
+
+class Registrar
+{
+    /**
+     * Stores the application container that
+     * will be used to resolve chart classes.
+     */
+    private Application $app;
+
+    /**
+     * Stores the application configuration
+     * repository that will be used to get the
+     * user-defined configuration.
+     */
+    private Repository $config;
+
+    /**
+     * Stores the route registrar that will be
+     * used to register the application routes.
+     */
+    private RouteRegistrar $route;
+
+    /**
+     * Creates a new instance of the Chart Registrar.
+     * This class is defined as a sigleton in the
+     * application container.
+     */
+    public function __construct(Application $app, Repository $config, RouteRegistrar $route)
+    {
+        $this->app = $app;
+        $this->config = $config;
+        $this->route = $route;
+    }
+
+    /**
+     * Registers new charts into the application.
+     */
+    public function register(array $charts): void
+    {
+        $globalRoutePrefix = $this->config->get('charts.global_route_prefix', 'api/chart');
+        $globalMiddlewares = $this->config->get('charts.global_middlewares', []);
+        $globalRouteNamePrefix = $this->config->get('charts.global_route_name_prefix', 'charts');
+        $globalPrefixArray = Str::of($globalRoutePrefix)->explode('/')->filter()->values();
+
+        foreach ($charts as $chartClass) {
+            // Create the chart instance.
+            $instance = $this->app->make($chartClass);
+            // Get the name of the chart by using the instance name or the class name.
+            $name = $instance->name ?? Str::snake(class_basename($chartClass));
+            // Clean the prefix and transform it into an array for concatenation.
+            $prefixArray = Str::of($instance->prefix ?? '')->explode('/')->filter()->values();
+            // Define the route name for the given chart.
+            $routeName = $instance->routeName ?? $name;
+            // Register the route for the given chart.
+            $this->route
+                ->prefix($globalPrefixArray->merge($prefixArray)->implode('/'))
+                ->middleware([...$globalMiddlewares, ...($instance->middlewares ?? [])])
+                ->name("{$globalRouteNamePrefix}.{$routeName}")
+                ->get($name, 'ConsoleTVs\Charts\ChartsController')
+                ->defaults('chart', $instance);
+        }
+    }
+}