first commit for Yuescript document site.

45 files changed, 4348 insertions, 0 deletions

diff --git a/doc/docs/.vuepress/components/CompilerModal.vue b/doc/docs/.vuepress/components/CompilerModal.vue
new file mode 100755
index 0000000..65ae9b0
--- /dev/null
+++ b/doc/docs/.vuepress/components/CompilerModal.vue
@@ -0,0 +1,32 @@
+<template>
+        <modal name="compiler" @before-open="prepare()" height="auto" width="80%" scrollable>
+                <yue-compiler :text="content" compileronly displayonly/>
+        </modal>
+</template>
+
+<script>
+        import Vue from 'vue';
+        import VModal from 'vue-js-modal/dist/ssr.nocss';
+        import 'vue-js-modal/dist/styles.css';
+        Vue.use(VModal);
+        import YueCompiler from './YueCompiler.vue';
+
+        export default {
+                components: {
+                        YueCompiler,
+                },
+                mounted () {
+                },
+                data() {
+                        return {
+                                content: "",
+                        };
+                },
+                methods: {
+                        prepare() {
+                                this.$data.content = window.yueCodes;
+                        },
+                },
+        }
+</script>
+
diff --git a/doc/docs/.vuepress/components/YueCompiler.vue b/doc/docs/.vuepress/components/YueCompiler.vue
new file mode 100755
index 0000000..4d72b92
--- /dev/null
+++ b/doc/docs/.vuepress/components/YueCompiler.vue
@@ -0,0 +1,383 @@
+<template>
+                <div style="width: 100%; height: auto;">
+                        <div class="parent" style="background-color: #f5f7ff;">
+                                <div class="childL" style="height: 2.5em;">
+                                        <div class="childTitle">Yuescript {{ info }}</div>
+                                </div>
+                                <div class="childR" style="height: 2.5em;">
+                                        <div class="childTitle">Lua</div>
+                                </div>
+                                <div class="childL" ref='yueEditor' style="height: 30em;">
+                                        <ClientOnly>
+                                                <prism-editor class="my-editor" v-model="code" :highlight="highlighter" @input="codeChanged($event)" line-numbers :readonly="readonly"></prism-editor>
+                                        </ClientOnly>
+                                </div>
+                                <div class="childR" style="height: 30em;">
+                                        <ClientOnly>
+                                                <prism-editor class="my-editor" v-model="compiled" :highlight="highlighter" @input="codeChanged($event)" readonly></prism-editor>
+                                        </ClientOnly>
+                                </div>
+                        </div>
+                        <div v-if="!compileronly">
+                                <button class="button" @click="runCode()">Run!</button>
+                                <textarea class="resultArea" readonly>{{ result }}</textarea>
+                        </div>
+                </div>
+</template>
+
+<script>
+        import { PrismEditor } from 'vue-prism-editor';
+        import 'vue-prism-editor/dist/prismeditor.min.css';
+        import { highlight, languages } from 'prismjs/components/prism-core';
+        import 'prismjs/components/prism-moonscript';
+        import 'prismjs/components/prism-lua';
+
+        export default {
+                props: {
+                        compileronly: {
+                                type: Boolean,
+                                default: false,
+                        },
+                        displayonly: {
+                                type: Boolean,
+                                default: false,
+                        },
+                        text: {
+                                type: String,
+                                default: '',
+                        },
+                },
+                components: {
+                        PrismEditor,
+                },
+                data() {
+                        return {
+                                info: 'Loading',
+                                readonly: true,
+                                code: '',
+                                compiled: '',
+                                result: '',
+                        };
+                },
+                mounted () {
+                        if (this.text !== '') {
+                                this.$data.code = this.text;
+                                this.codeChanged(this.text);
+                        }
+                        const check = ((self)=> {
+                                return ()=> {
+                                        if (window.yue) {
+                                                self.$data.info = window.yue.version();
+                                                self.$data.readonly = false;
+                                                const editor = self.$refs.yueEditor;
+                                                if (editor.children.length === 0) {
+                                                        setTimeout(check, 100);
+                                                        return;
+                                                }
+                                                const textArea = editor.children[0].children[1].children[0];
+                                                textArea.focus();
+                                        } else {
+                                                setTimeout(check, 100);
+                                        }
+                                }
+                        })(this);
+                        check();
+                },
+                methods: {
+                        runCode() {
+                                if (window.yue && this.$data.compiled !== '') {
+                                        let res = '';
+                                        try {
+                                                res = window.yue.exec(this.$data.code);
+                                        } catch (err) {
+                                                res = err;
+                                        }
+                                        this.$data.result = res;
+                                }
+                        },
+                        highlighter(code) {
+                                return highlight(code, languages.moon);
+                        },
+                        codeChanged(text) {
+                                if (window.yue) {
+                                        let res = ['','compiler error, and please help opening an issue for this. Thanks a lot!'];
+                                        try {
+                                                res = window.yue.tolua(text, true, !this.displayonly, true);
+                                                if (res[0] !== '') {
+                                                        this.$data.compiled = res[0];
+                                                } else {
+                                                        this.$data.compiled = res[1];
+                                                }
+                                        } catch (error) {
+                                                this.$data.compiled = res[1];
+                                        }
+                                }
+                        },
+                }
+        }
+</script>
+
+<style scoped>
+        .resultArea {
+                float: left;
+                margin-right: 1em;
+                overflow: scroll;
+                overflow-wrap: break-word;
+                width: calc(100% - 120px);
+                height: 55px;
+                border-color: #b7ae8f;
+                outline: none;
+                resize: none;
+                margin-top: 5px;
+        }
+        .childL {
+                float: left;
+                width: 50%;
+                box-sizing: border-box;
+                background-clip: content-box;
+                background: #f5f7ff;
+        }
+        .childR {
+                float: left;
+                width: 50%;
+                box-sizing: border-box;
+                background-clip: content-box;
+                background: #f5f7ff;
+        }
+        .childTitle {
+                width: 100%;
+                font-size: 1.5em;
+                color: #b7ae8f;
+                text-align: center;
+                padding: 0.2em;
+        }
+        .button {
+                float: right;
+                border: none;
+                display: inline-block;
+                font-size: 1.2rem;
+                color: #fff;
+                background-color: #b7ae8f;
+                text-decoration: none;
+                padding: .8rem 1.6rem;
+                border-radius: 4px;
+                transition: background-color .1s ease;
+                box-sizing: border-box;
+                border-bottom: 1px solid #aaa07b;
+                margin-top: 10px;
+                margin-right: 5px;
+        }
+        .button:hover {
+                background-color: #beb69a;
+        }
+        .button:focus,
+        .button:active:focus,
+        .button.active:focus,
+        .button.focus,
+        .button:active.focus {
+                outline: none;
+        }
+
+        .my-editor {
+                font-family: Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace;
+                line-height: 1.375;
+                direction: ltr;
+                text-align: left;
+                white-space: pre;
+                word-spacing: normal;
+                word-break: normal;
+                -moz-tab-size: 4;
+                -o-tab-size: 4;
+                tab-size: 4;
+                -webkit-hyphens: none;
+                -moz-hyphens: none;
+                -ms-hyphens: none;
+                hyphens: none;
+                background: #f5f7ff;
+                color: #5e6687;
+                font-size: 1em;
+                overflow: scroll;
+        }
+
+        .my-editor >>> .prism-editor__textarea:focus {
+                outline: none;
+        }
+
+        /*
+        Name:       Base16 Atelier Sulphurpool Light
+        Author:     Bram de Haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/sulphurpool)
+
+        Prism template by Bram de Haan (http://atelierbram.github.io/syntax-highlighting/prism/)
+        Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16)
+
+        */
+        code[class*="language-"],
+        pre[class*="language-"] {
+                font-family: Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace;
+                font-size: 1em;
+                line-height: 1.375;
+                direction: ltr;
+                text-align: left;
+                white-space: pre;
+                word-spacing: normal;
+                word-break: normal;
+                -moz-tab-size: 4;
+                -o-tab-size: 4;
+                tab-size: 4;
+                -webkit-hyphens: none;
+                -moz-hyphens: none;
+                -ms-hyphens: none;
+                hyphens: none;
+                background: #f5f7ff;
+                color: #5e6687;
+        }
+
+        pre > code[class*="language-"] {
+                font-size: 1em;
+        }
+
+        pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
+        code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
+                text-shadow: none;
+                background: #dfe2f1;
+        }
+
+        pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
+        code[class*="language-"]::selection, code[class*="language-"] ::selection {
+                text-shadow: none;
+                background: #dfe2f1;
+        }
+
+        /* Code blocks */
+        pre[class*="language-"] {
+                padding: 1em;
+                margin: .5em 0;
+                overflow: auto;
+        }
+
+        /* Inline code */
+        :not(pre) > code[class*="language-"] {
+                padding: .1em;
+                border-radius: .3em;
+        }
+
+        .token.comment,
+        .token.prolog,
+        .token.doctype,
+        .token.cdata {
+                color: #898ea4;
+        }
+
+        .token.punctuation {
+                color: #5e6687;
+        }
+
+        .token.namespace {
+                opacity: .7;
+        }
+
+        .token.operator,
+        .token.boolean,
+        .token.number {
+                color: #c76b29;
+        }
+
+        .token.property {
+                color: #c08b30;
+        }
+
+        .token.tag {
+                color: #3d8fd1;
+        }
+
+        .token.string {
+                color: #22a2c9;
+        }
+
+        .token.selector {
+                color: #6679cc;
+        }
+
+        .token.attr-name {
+                color: #c76b29;
+        }
+
+        .token.entity,
+        .token.url,
+        .language-css .token.string,
+        .style .token.string {
+                color: #22a2c9;
+        }
+
+        .token.attr-value,
+        .token.keyword,
+        .token.control,
+        .token.directive,
+        .token.unit {
+                color: #ac9739;
+        }
+
+        .token.statement,
+        .token.regex,
+        .token.atrule {
+                color: #22a2c9;
+        }
+
+        .token.placeholder,
+        .token.variable {
+                color: #3d8fd1;
+        }
+
+        .token.deleted {
+                text-decoration: line-through;
+        }
+
+        .token.inserted {
+                border-bottom: 1px dotted #202746;
+                text-decoration: none;
+        }
+
+        .token.italic {
+                font-style: italic;
+        }
+
+        .token.important,
+        .token.bold {
+                font-weight: bold;
+        }
+
+        .token.important {
+                color: #c94922;
+        }
+
+        .token.entity {
+                cursor: help;
+        }
+
+        pre > code.highlight {
+                outline: 0.4em solid #c94922;
+                outline-offset: .4em;
+        }
+
+        /* overrides color-values for the Line Numbers plugin
+         * http://prismjs.com/plugins/line-numbers/
+         */
+        .line-numbers .line-numbers-rows {
+                border-right-color: #dfe2f1;
+        }
+
+        .line-numbers-rows > span:before {
+                color: #979db4;
+        }
+
+        /* overrides color-values for the Line Highlight plugin
+         * http://prismjs.com/plugins/line-highlight/
+         */
+        .line-highlight {
+                background: rgba(107, 115, 148, 0.2);
+                background: -webkit-linear-gradient(left, rgba(107, 115, 148, 0.2) 70%, rgba(107, 115, 148, 0));
+                background: linear-gradient(to right, rgba(107, 115, 148, 0.2) 70%, rgba(107, 115, 148, 0));
+        }
+        
+</style>
+
diff --git a/doc/docs/.vuepress/components/YueDisplay.vue b/doc/docs/.vuepress/components/YueDisplay.vue
new file mode 100755
index 0000000..b89805b
--- /dev/null
+++ b/doc/docs/.vuepress/components/YueDisplay.vue
@@ -0,0 +1,49 @@
+<template>
+        <div>
+                <button class="button" @click="compile()">Compile</button>
+                <div style="display: none;">
+                        <slot></slot>
+                </div>
+        </div>
+</template>
+
+<script>
+        export default {
+                methods: {
+                        compile() {
+                                const node = this.$el.children[1];
+                                const code = node.innerText;
+                                window.yueCodes = code;
+                                this.$modal.show('compiler');
+                        },
+                },
+        }
+</script>
+
+<style scoped>
+        .button {
+                border: none;
+                display: inline-block;
+                font-size: 16px;
+                color: #fff;
+                background-color: #b7ae8f;
+                text-decoration: none;
+                padding: .4rem 0.8rem;
+                border-radius: 4px;
+                transition: background-color .1s ease;
+                box-sizing: border-box;
+                border-bottom: 1px solid #aaa07b;
+                margin-bottom: 1em;
+        }
+        .button:hover {
+                background-color: #beb69a;
+        }
+        .button:focus,
+        .button:active:focus,
+        .button.active:focus,
+        .button.focus,
+        .button:active.focus {
+                outline: none;
+        }
+</style>
+
diff --git a/doc/docs/.vuepress/config.js b/doc/docs/.vuepress/config.js
new file mode 100755
index 0000000..fe34c46
--- /dev/null
+++ b/doc/docs/.vuepress/config.js
@@ -0,0 +1,77 @@
+const { description } = require('../../package')
+
+module.exports = {
+        /**
+         * Ref：https://v1.vuepress.vuejs.org/config/#title
+         */
+        title: 'Yuescript',
+        /**
+         * Ref：https://v1.vuepress.vuejs.org/config/#description
+         */
+        description: description,
+
+        /**
+         * Extra tags to be injected to the page HTML `<head>`
+         *
+         * ref：https://v1.vuepress.vuejs.org/config/#head
+         */
+        head: [
+                ['meta', { name: 'theme-color', content: '#3eaf7c' }],
+                ['meta', { name: 'apple-mobile-web-app-capable', content: 'yes' }],
+                ['meta', { name: 'apple-mobile-web-app-status-bar-style', content: 'black' }],
+                ['script', {}, `window.global = window;`],
+                ['script', {}, `
+                        var Module = {
+                                onRuntimeInitialized: function() {
+                                        window.yue = Module;
+                                        window.Vue.$data.readonly = false;
+                                        window.Vue.$data.info = Module.version();
+                                }
+                        };
+                `],
+                ['script', {}, `
+                        var Module = {
+                                onRuntimeInitialized: function() {
+                                        window.yue = Module;
+                                }
+                        };
+                `],
+                ['script', { src: '/js/yuescript.js' }],
+        ],
+
+        /**
+         * Theme configuration, here is the default theme configuration for VuePress.
+         *
+         * ref：https://v1.vuepress.vuejs.org/theme/default-theme-config.html
+         */
+        themeConfig: {
+                repo: '',
+                editLinks: false,
+                docsDir: '',
+                editLinkText: '',
+                lastUpdated: false,
+                nav: [
+                        {
+                                text: 'Document',
+                                link: '/doc/'
+                        },
+                        {
+                                text: 'Try yue!',
+                                link: '/try/',
+                        },
+                        {
+                                text: 'Github',
+                                link: 'https://github.com/pigpigyyy/Yuescript'
+                        }
+                ],
+        },
+
+        /**
+         * Apply plugins，ref：https://v1.vuepress.vuejs.org/zh/plugin/
+         */
+        plugins: [
+                '@vuepress/plugin-back-to-top',
+                '@vuepress/plugin-medium-zoom',
+                '~plugins/vue-js-modal.js',
+        ]
+}
diff --git a/doc/docs/.vuepress/enhanceApp.js b/doc/docs/.vuepress/enhanceApp.js
new file mode 100755
index 0000000..8452a86
--- /dev/null
+++ b/doc/docs/.vuepress/enhanceApp.js
@@ -0,0 +1,14 @@
+/**
+ * Client app enhancement file.
+ *
+ * https://v1.vuepress.vuejs.org/guide/basic-config.html#app-level-enhancements
+ */
+
+export default ({
+  Vue, // the version of Vue being used in the VuePress app
+  options, // the options for the root Vue instance
+  router, // the router instance for the app
+  siteData // site metadata
+}) => {
+  // ...apply enhancements for the site.
+}
diff --git a/doc/docs/.vuepress/public/image/yuescript.svg b/doc/docs/.vuepress/public/image/yuescript.svg
new file mode 100644
index 0000000..b7e5884
--- /dev/null
+++ b/doc/docs/.vuepress/public/image/yuescript.svg
@@ -0,0 +1,53 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 22.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
+        <!ENTITY ns_extend "http://ns.adobe.com/Extensibility/1.0/">
+        <!ENTITY ns_ai "http://ns.adobe.com/AdobeIllustrator/10.0/">
+        <!ENTITY ns_graphs "http://ns.adobe.com/Graphs/1.0/">
+        <!ENTITY ns_vars "http://ns.adobe.com/Variables/1.0/">
+        <!ENTITY ns_imrep "http://ns.adobe.com/ImageReplacement/1.0/">
+        <!ENTITY ns_sfw "http://ns.adobe.com/SaveForWeb/1.0/">
+        <!ENTITY ns_custom "http://ns.adobe.com/GenericCustomNamespace/1.0/">
+        <!ENTITY ns_adobe_xpath "http://ns.adobe.com/XPath/1.0/">
+]>
+<svg version="1.1" id="图层_1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
+         xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="" viewBox="250 200 95.3 441.9" xml:space="preserve">
+        <g>
+                <g>
+                        <path fill="#B4AC8F" d="M209.8,522.5c-3.7,0.8-8.1,1.6-11.7,2.3c0.5-2,1.9-7.8,2.9-11.5l-2.8-2.9l-3.3,14.5c0,0.2-0.1,0.4-0.3,0.6
+                                l-6,5.7l2.4,2.6l6.1-5.8c0.2-0.2,0.3-0.3,0.5-0.3l14.7-2.5L209.8,522.5z"/>
+                        <path fill="#B4AC8F" d="M225.4,551.7c-1.9,2.7-4.2,3.9-7.8,1.5c-3.6-2.5-3.4-5.2-1.6-7.8l7.7-11.2l-2.9-2l-7.8,11.4
+                                c-2.8,4-2.3,7.9,3.2,11.7c5.9,4,9.7,2.4,12.2-1.3l7.7-11.3l-3-2L225.4,551.7z"/>
+                        <polygon fill="#B4AC8F" points="241.1,569.1 255.5,574.8 256.9,572.7 245.3,568 248,561.2 258.6,565.4 259.5,563 249,558.8 
+                                251.4,552.9 262.4,557.3 263.3,555 249.1,549.3                   "/>
+                        <path fill="#B4AC8F" d="M283.6,559.6c-4.7-0.8-8.2,0.8-8.8,4.2c-0.5,3,1.2,4.9,6.3,7.2c4,1.8,5.2,3,4.8,5.3
+                                c-0.4,2.2-2.4,3.1-5.4,2.6c-2.9-0.5-4.7-2.2-4.8-4.8l-3.5-0.6c-0.3,3.9,2.4,6.8,7.6,7.8c5.7,1,9-1.1,9.6-4.6
+                                c0.5-2.9-0.7-5.2-6.6-7.9c-3.7-1.7-4.9-2.6-4.6-4.5c0.3-1.8,1.9-2.7,4.7-2.2c3,0.5,4.1,2.1,4.1,4.2l3.4,0.6
+                                C291,563.6,289.1,560.6,283.6,559.6z"/>
+                        <path fill="#B4AC8F" d="M315.3,581.1c-5.2,0.2-7-4-7.1-8.4c-0.2-4.4,1.6-8.4,6.4-8.6c3.7-0.1,5.2,1.6,5.9,3.9l3.5-0.1
+                                c-0.6-3.5-3.4-6.5-9.4-6.3c-7.2,0.3-10.3,5.5-10.1,11.2c0.2,6.3,3.2,11,10.8,10.7c6.1-0.2,8.6-3.5,9.2-7l-3.5,0.1
+                                C320.4,579,319,581,315.3,581.1z"/>
+                        <path fill="#B4AC8F" d="M356.7,570.7c-0.7-2.8-2.2-4.2-4.9-4.2c1.8-1.1,3.5-2.9,2.7-5.9c-0.9-3.5-4.5-4.6-8.9-3.4l-8.9,2.3l5.3,20.6
+                                l3.4-0.9L343,570l4.1-1.1c3.9-1,5.4-0.2,6.1,2.6l0.1,0.4c0.6,2.2,1.1,4,1.7,4.8l3.4-0.9c-0.6-1.1-1.1-2.9-1.6-4.8L356.7,570.7z
+                                 M346.8,566.5l-4.4,1.1l-1.7-6.7l5.1-1.3c2.8-0.7,4.8-0.1,5.3,2C351.8,564.5,349.8,565.8,346.8,566.5z"/>
+                        
+                                <rect x="370.4" y="548.3" transform="matrix(0.9105 -0.4136 0.4136 0.9105 -197.8473 203.9409)" fill="#B4AC8F" width="3.5" height="21.3"/>
+                        <path fill="#B4AC8F" d="M390,536.6l-7.2,4.9l12,17.6l2.9-2l-5.1-7.4l3.9-2.7c4.3-2.9,6.1-6.7,3.7-10.2
+                                C398.1,533.6,393.9,533.9,390,536.6z M395.1,545.1l-3.7,2.6l-4.2-6.2l3.8-2.6c2.6-1.8,5-2,6.4,0
+                                C399,541.3,397.7,543.3,395.1,545.1z"/>
+                        <polygon fill="#B4AC8F" points="419.6,513.4 417.7,511.6 405.1,524.8 407,526.5 412,521.2 425.6,534.2 428.1,531.6 414.5,518.7                     
+                                "/>
+                        <path fill="#B4AC8F" d="M334.2,260.2c-2.1-0.3-4.2-0.6-6.3-0.9v14.4v0.5c22.4,24.2,36.9,55.9,39,90.9H228.7c0,0-14,0.7-14,12.3
+                                c0,12.1,11.1,14.1,13.9,14.1s69.4,0,69.4,0s8.7-0.5,8.7,6.1c0,6.3-6.4,6-8.6,6H156.6c11-74.3,69.2-133.2,143.1-145.3
+                                c-79.7,4.2-144.2,66.5-151.9,145.3h-41.1c0,0-15.3-1.8-15.3,11.5c0,13.3,11.5,12.8,14.7,12.8c0.6,0,19.5,0,41.1,0
+                                c1.5,28.3,10.4,54.8,24.7,77.4l0.1-0.1c-8.8-17.9-14.5-37.6-16.6-58.4c31.5,0,73,0,75.3,0c3.6,0,13.7-0.5,13.7-12.2
+                                c0-11.6-12.4-11.9-12.4-11.9l-101.8,0c0,0-8.9,0.7-8.9-6.4s5.8-7.4,8.4-7.4c0.6,0,190.5,0,190.5,0s14.6,1.6,14.6-11.9
+                                c0-12-12.8-11.5-17.5-11.5c-4.7,0-65.1,0-65.1,0s-9.7,0.4-9.7-6.9c0-7.3,8.2-6.9,9.6-6.9c0.7,0,59.7,0,114.7,0c0,0.7,0,1.5,0,2.2
+                                c0,38.5-14.9,73.6-39.3,99.8v0c-21.6,23.3-50.7,39.6-83.5,45.1c6.3,3.9,12.9,7.3,19.8,10.2c23.9-6.8,45.6-19,63.6-35.2v0
+                                c14.7-13.2,27-29.2,36.1-47h71.1v-6.7h-67.9c9.1-20.2,14.2-42.6,14.2-66.2c0-0.7,0-1.5,0-2.2c26.9,0,51.4,0,65.9,0
+                                c5.1,14.9,7.9,30.8,7.9,47.4c0,27.5-7.6,53.3-20.9,75.4l11.2,9.1c15.2-24.6,24-53.5,24-84.5C469.4,339.2,410.8,272.6,334.2,260.2
+                                z M216.9,435.3c0,6.5-6.3,6.9-6.3,6.9s-27,0-55.4,0c-0.3-4.3-0.5-8.6-0.5-12.9c0-0.5,0-0.9,0-1.4c27.4,0,56.2,0,56.5,0
+                                C212.2,428,216.9,428.8,216.9,435.3z M381.2,365.1c-1.8-32.4-13.1-62.2-31.3-86.7c43.3,12.8,78.4,45.1,95,86.7H381.2z"/>
+                </g>
+        </g>
+</svg>
diff --git a/doc/docs/.vuepress/styles/index.styl b/doc/docs/.vuepress/styles/index.styl
new file mode 100755
index 0000000..69327fd
--- /dev/null
+++ b/doc/docs/.vuepress/styles/index.styl
@@ -0,0 +1,9 @@
+/**
+ * Custom Styles here.
+ *
+ * ref：https://v1.vuepress.vuejs.org/config/#index-styl
+ */
+
+.home .hero img
+  max-width 450px!important
+
diff --git a/doc/docs/.vuepress/styles/palette.styl b/doc/docs/.vuepress/styles/palette.styl
new file mode 100755
index 0000000..389aa76
--- /dev/null
+++ b/doc/docs/.vuepress/styles/palette.styl
@@ -0,0 +1,12 @@
+/**
+ * Custom palette here.
+ *
+ * ref：https://v1.vuepress.vuejs.org/zh/config/#palette-styl
+ */
+
+$accentColor = #b7ae8f
+$textColor = #2c3e50
+$borderColor = #eaecef
+$codeBgColor = #f5f7ff
+
+$contentWidth = 900px
diff --git a/doc/docs/.vuepress/theme/LICENSE b/doc/docs/.vuepress/theme/LICENSE
new file mode 100644
index 0000000..15f1f7e
--- /dev/null
+++ b/doc/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.
diff --git a/doc/docs/.vuepress/theme/README.md b/doc/docs/.vuepress/theme/README.md
new file mode 100644
index 0000000..fc49626
--- /dev/null
+++ b/doc/docs/.vuepress/theme/README.md
@@ -0,0 +1,11 @@
+# @vuepress/theme-default
+
+> theme-default for VuePress
+
+## Plugins
+
+The default theme has the following plugin built in:
+
+- [@vuepress/plugin-active-header-links](https://github.com/vuejs/vuepress/tree/master/packages/@vuepress/plugin-active-header-links)
+- [@vuepress/plugin-google-analytics](https://github.com/vuejs/vuepress/tree/master/packages/%40vuepress/plugin-google-analytics)
+- [@vuepress/plugin-search](https://github.com/vuejs/vuepress/tree/master/packages/%40vuepress/plugin-search)
diff --git a/doc/docs/.vuepress/theme/components/AlgoliaSearchBox.vue b/doc/docs/.vuepress/theme/components/AlgoliaSearchBox.vue
new file mode 100644
index 0000000..7071fb8
--- /dev/null
+++ b/doc/docs/.vuepress/theme/components/AlgoliaSearchBox.vue
@@ -0,0 +1,172 @@
+<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: {
+              ...algoliaOptions,
+              facetFilters: [`lang:${lang}`].concat(algoliaOptions.facetFilters || [])
+            },
+            handleSelected: (input, event, suggestion) => {
+              const { pathname, hash } = new URL(suggestion.url)
+              const routepath = pathname.replace(this.$site.base, '/')
+              const _hash = decodeURIComponent(hash)
+              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>
diff --git a/doc/docs/.vuepress/theme/components/DropdownLink.vue b/doc/docs/.vuepress/theme/components/DropdownLink.vue
new file mode 100644
index 0000000..be6563f
--- /dev/null
+++ b/doc/docs/.vuepress/theme/components/DropdownLink.vue
@@ -0,0 +1,252 @@
+<template>
+  <div
+    class="dropdown-wrapper"
+    :class="{ open }"
+  >
+    <button
+      class="dropdown-title"
+      type="button"
+      :aria-label="dropdownAriaLabel"
+      @click="handleDropdown"
+    >
+      <span class="title">{{ item.text }}</span>
+      <span
+        class="arrow down"
+      />
+    </button>
+    <button
+      class="mobile-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
+    },
+
+    /**
+     * Open the dropdown when user tab and click from keyboard.
+     *
+     * Use event.detail to detect tab and click from keyboard. Ref: https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/detail
+     * The Tab + Click is UIEvent > KeyboardEvent, so the detail is 0.
+     */
+    handleDropdown () {
+      const isTriggerByTab = event.detail === 0
+      if (isTriggerByTab) this.setOpen(!this.open)
+    }
+  }
+}
+</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
+  .mobile-dropdown-title
+    @extends .dropdown-title
+    display none
+    font-weight 600
+    font-size inherit
+      &:hover
+        color $accentColor
+  .nav-dropdown
+    .dropdown-item
+      color inherit
+      line-height 1.7rem
+      h4
+        margin 0.45rem 0 0
+        border-top 1px solid #eee
+        padding 1rem 1.5rem 0.45rem 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
+      display: none
+    .mobile-dropdown-title
+      display: block
+    .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
+    .nav-dropdown
+      display none
+      // Avoid height shaked by clicking
+      height auto !important
+      box-sizing border-box;
+      max-height calc(100vh - 2.7rem)
+      overflow-y auto
+      position absolute
+      top 100%
+      right 0
+      background-color #fff
+      padding 0.6rem 0
+      border 1px solid #ddd
+      border-bottom-color #ccc
+      text-align left
+      border-radius 0.25rem
+      white-space nowrap
+      margin 0
+</style>
diff --git a/doc/docs/.vuepress/theme/components/DropdownTransition.vue b/doc/docs/.vuepress/theme/components/DropdownTransition.vue
new file mode 100644
index 0000000..eeaf12b
--- /dev/null
+++ b/doc/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>
diff --git a/doc/docs/.vuepress/theme/components/Home.vue b/doc/docs/.vuepress/theme/components/Home.vue
new file mode 100644
index 0000000..acd8744
--- /dev/null
+++ b/doc/docs/.vuepress/theme/components/Home.vue
@@ -0,0 +1,175 @@
+<template>
+  <main
+    class="home"
+    :aria-labelledby="data.heroText !== null ? 'main-title' : null"
+  >
+    <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>
diff --git a/doc/docs/.vuepress/theme/components/NavLink.vue b/doc/docs/.vuepress/theme/components/NavLink.vue
new file mode 100644
index 0000000..f7e65a4
--- /dev/null
+++ b/doc/docs/.vuepress/theme/components/NavLink.vue
@@ -0,0 +1,90 @@
+<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 === false) {
+        return null
+      }
+      if (this.item.rel) {
+        return this.item.rel
+      }
+      return this.isBlankTarget ? 'noopener noreferrer' : null
+    }
+  },
+
+  methods: {
+    focusoutAction () {
+      this.$emit('focusout')
+    }
+  }
+}
+</script>
diff --git a/doc/docs/.vuepress/theme/components/NavLinks.vue b/doc/docs/.vuepress/theme/components/NavLinks.vue
new file mode 100644
index 0000000..2656ae2
--- /dev/null
+++ b/doc/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>
diff --git a/doc/docs/.vuepress/theme/components/Navbar.vue b/doc/docs/.vuepress/theme/components/Navbar.vue
new file mode 100644
index 0000000..f8dd49c
--- /dev/null
+++ b/doc/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>
diff --git a/doc/docs/.vuepress/theme/components/Page.vue b/doc/docs/.vuepress/theme/components/Page.vue
new file mode 100644
index 0000000..04ec7cb
--- /dev/null
+++ b/doc/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>
diff --git a/doc/docs/.vuepress/theme/components/PageEdit.vue b/doc/docs/.vuepress/theme/components/PageEdit.vue
new file mode 100644
index 0000000..cf9b2d2
--- /dev/null
+++ b/doc/docs/.vuepress/theme/components/PageEdit.vue
@@ -0,0 +1,155 @@
+<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(docsRepo)) {
+        const base = docsRepo
+        return (
+          base.replace(endingSlashRE, '')
+          + `/src`
+          + `/${docsBranch}/`
+          + (docsDir ? docsDir.replace(endingSlashRE, '') + '/' : '')
+          + path
+          + `?mode=edit&spa=0&at=${docsBranch}&fileviewer=file-view-default`
+        )
+      }
+
+      const gitlab = /gitlab.com/
+      if (gitlab.test(docsRepo)) {
+        const base = docsRepo
+        return (
+          base.replace(endingSlashRE, '')
+          + `/-/edit`
+          + `/${docsBranch}/`
+          + (docsDir ? docsDir.replace(endingSlashRE, '') + '/' : '')
+          + path
+        )
+      }
+
+      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 #767676
+
+@media (max-width: $MQMobile)
+  .page-edit
+    .edit-link
+      margin-bottom 0.5rem
+    .last-updated
+      font-size 0.8em
+      float none
+      text-align left
+
+</style>
diff --git a/doc/docs/.vuepress/theme/components/PageNav.vue b/doc/docs/.vuepress/theme/components/PageNav.vue
new file mode 100644
index 0000000..4c19aae
--- /dev/null
+++ b/doc/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>
diff --git a/doc/docs/.vuepress/theme/components/Sidebar.vue b/doc/docs/.vuepress/theme/components/Sidebar.vue
new file mode 100644
index 0000000..e70e333
--- /dev/null
+++ b/doc/docs/.vuepress/theme/components/Sidebar.vue
@@ -0,0 +1,64 @@
+<template>
+  <aside class="sidebar">
+    <NavLinks />
+
+    <slot name="top" />
+
+    <SidebarLinks
+      :depth="0"
+      :items="items"
+    />
+    <slot name="bottom" />
+  </aside>
+</template>
+
+<script>
+import SidebarLinks from '@theme/components/SidebarLinks.vue'
+import NavLinks from '@theme/components/NavLinks.vue'
+
+export default {
+  name: 'Sidebar',
+
+  components: { SidebarLinks, NavLinks },
+
+  props: ['items']
+}
+</script>
+
+<style lang="stylus">
+.sidebar
+  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 .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>
diff --git a/doc/docs/.vuepress/theme/components/SidebarButton.vue b/doc/docs/.vuepress/theme/components/SidebarButton.vue
new file mode 100644
index 0000000..3f54afd
--- /dev/null
+++ b/doc/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>
diff --git a/doc/docs/.vuepress/theme/components/SidebarGroup.vue b/doc/docs/.vuepress/theme/components/SidebarGroup.vue
new file mode 100644
index 0000000..d7f1929
--- /dev/null
+++ b/doc/docs/.vuepress/theme/components/SidebarGroup.vue
@@ -0,0 +1,141 @@
+<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"
+        :initial-open-group-index="item.initialOpenGroupIndex"
+        :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>
diff --git a/doc/docs/.vuepress/theme/components/SidebarLink.vue b/doc/docs/.vuepress/theme/components/SidebarLink.vue
new file mode 100644
index 0000000..4cd7665
--- /dev/null
+++ b/doc/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>
diff --git a/doc/docs/.vuepress/theme/components/SidebarLinks.vue b/doc/docs/.vuepress/theme/components/SidebarLinks.vue
new file mode 100644
index 0000000..55e6288
--- /dev/null
+++ b/doc/docs/.vuepress/theme/components/SidebarLinks.vue
@@ -0,0 +1,106 @@
+<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
+    'initialOpenGroupIndex'
+  ],
+
+  data () {
+    return {
+      openGroupIndex: this.initialOpenGroupIndex || 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') {
+    const childIsActive = item.path && isActive(route, item.path)
+    const grandChildIsActive = item.children.some(child => {
+      if (child.type === 'group') {
+        return descendantIsActive(route, child)
+      } else {
+        return child.type === 'page' && isActive(route, child.path)
+      }
+    })
+
+    return childIsActive || grandChildIsActive
+  }
+  return false
+}
+</script>
diff --git a/doc/docs/.vuepress/theme/global-components/Badge.vue b/doc/docs/.vuepress/theme/global-components/Badge.vue
new file mode 100644
index 0000000..53951f9
--- /dev/null
+++ b/doc/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>
diff --git a/doc/docs/.vuepress/theme/global-components/CodeBlock.vue b/doc/docs/.vuepress/theme/global-components/CodeBlock.vue
new file mode 100644
index 0000000..d59d85b
--- /dev/null
+++ b/doc/docs/.vuepress/theme/global-components/CodeBlock.vue
@@ -0,0 +1,41 @@
+<template>
+  <div
+    class="theme-code-block"
+    :class="{ 'theme-code-block__active': active }"
+  >
+    <slot />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'CodeBlock',
+  props: {
+    title: {
+      type: String,
+      required: true
+    },
+    active: {
+      type: Boolean,
+      default: false
+    }
+  },
+  mounted () {
+    if (this.$parent && this.$parent.loadTabs) {
+      this.$parent.loadTabs()
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .theme-code-block {
+    display: none;
+  }
+  .theme-code-block__active {
+    display: block;
+  }
+  .theme-code-block > pre {
+    background-color: orange;
+  }
+</style>
diff --git a/doc/docs/.vuepress/theme/global-components/CodeGroup.vue b/doc/docs/.vuepress/theme/global-components/CodeGroup.vue
new file mode 100644
index 0000000..ac6ec55
--- /dev/null
+++ b/doc/docs/.vuepress/theme/global-components/CodeGroup.vue
@@ -0,0 +1,120 @@
+<template>
+  <ClientOnly>
+    <div class="theme-code-group">
+      <div class="theme-code-group__nav">
+        <ul class="theme-code-group__ul">
+          <li
+            v-for="(tab, i) in codeTabs"
+            :key="tab.title"
+            class="theme-code-group__li"
+          >
+            <button
+              class="theme-code-group__nav-tab"
+              :class="{
+                'theme-code-group__nav-tab-active': i === activeCodeTabIndex,
+              }"
+              @click="changeCodeTab(i)"
+            >
+              {{ tab.title }}
+            </button>
+          </li>
+        </ul>
+      </div>
+      <slot />
+      <pre
+        v-if="codeTabs.length < 1"
+        class="pre-blank"
+      >// Make sure to add code blocks to your code group</pre>
+    </div>
+  </ClientOnly>
+</template>
+
+<script>
+export default {
+  name: 'CodeGroup',
+  data () {
+    return {
+      codeTabs: [],
+      activeCodeTabIndex: -1
+    }
+  },
+  watch: {
+    activeCodeTabIndex (index) {
+      this.activateCodeTab(index)
+    }
+  },
+  mounted () {
+    this.loadTabs()
+  },
+  methods: {
+    changeCodeTab (index) {
+      this.activeCodeTabIndex = index
+    },
+    loadTabs () {
+      this.codeTabs = (this.$slots.default || []).filter(slot => Boolean(slot.componentOptions)).map((slot, index) => {
+        if (slot.componentOptions.propsData.active === '') {
+          this.activeCodeTabIndex = index
+        }
+
+        return {
+          title: slot.componentOptions.propsData.title,
+          elm: slot.elm
+        }
+      })
+
+      if (this.activeCodeTabIndex === -1 && this.codeTabs.length > 0) {
+        this.activeCodeTabIndex = 0
+      }
+
+      this.activateCodeTab(0)
+    },
+    activateCodeTab (index) {
+      this.codeTabs.forEach(tab => {
+        if (tab.elm) {
+          tab.elm.classList.remove('theme-code-block__active')
+        }
+      })
+
+      if (this.codeTabs[index].elm) {
+        this.codeTabs[index].elm.classList.add('theme-code-block__active')
+      }
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+  .theme-code-group {}
+  .theme-code-group__nav {
+    margin-bottom: -35px;
+    background-color: $codeBgColor;
+    padding-bottom: 22px;
+    border-top-left-radius: 6px;
+    border-top-right-radius: 6px;
+    padding-left: 10px;
+    padding-top: 10px;
+  }
+  .theme-code-group__ul {
+    margin: auto 0;
+    padding-left: 0;
+    display: inline-flex;
+    list-style: none;
+  }
+  .theme-code-group__li {}
+  .theme-code-group__nav-tab {
+    border: 0;
+    padding: 5px;
+    cursor: pointer;
+    background-color: transparent;
+    font-size: 0.85em;
+    line-height: 1.4;
+    color: rgba(255, 255, 255, 0.9);
+    font-weight: 600;
+  }
+  .theme-code-group__nav-tab-active {
+    border-bottom: #42b983 1px solid;
+  }
+  .pre-blank {
+    color: #42b983;
+  }
+</style>
diff --git a/doc/docs/.vuepress/theme/index.js b/doc/docs/.vuepress/theme/index.js
new file mode 100644
index 0000000..baaf102
--- /dev/null
+++ b/doc/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]
+    ]
+  }
+}
diff --git a/doc/docs/.vuepress/theme/layouts/404.vue b/doc/docs/.vuepress/theme/layouts/404.vue
new file mode 100644
index 0000000..2cbfa0f
--- /dev/null
+++ b/doc/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>
diff --git a/doc/docs/.vuepress/theme/layouts/Layout.vue b/doc/docs/.vuepress/theme/layouts/Layout.vue
new file mode 100644
index 0000000..3298070
--- /dev/null
+++ b/doc/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>
diff --git a/doc/docs/.vuepress/theme/noopModule.js b/doc/docs/.vuepress/theme/noopModule.js
new file mode 100644
index 0000000..b1c6ea4
--- /dev/null
+++ b/doc/docs/.vuepress/theme/noopModule.js
@@ -0,0 +1 @@
+export default {}
diff --git a/doc/docs/.vuepress/theme/package.json b/doc/docs/.vuepress/theme/package.json
new file mode 100644
index 0000000..d5dfc26
--- /dev/null
+++ b/doc/docs/.vuepress/theme/package.json
@@ -0,0 +1,44 @@
+{
+  "name": "@vuepress/theme-default",
+  "version": "1.8.2",
+  "description": "Default theme for VuePress",
+  "keywords": [
+    "documentation",
+    "generator",
+    "vue",
+    "vuepress"
+  ],
+  "homepage": "https://github.com/vuejs/vuepress/blob/master/packages/@vuepress/theme-default#readme",
+  "bugs": {
+    "url": "https://github.com/vuejs/vuepress/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vuejs/vuepress.git",
+    "directory": "packages/@vuepress/theme-default"
+  },
+  "license": "MIT",
+  "author": "Evan You",
+  "main": "index.js",
+  "dependencies": {
+    "@vuepress/plugin-active-header-links": "1.8.2",
+    "@vuepress/plugin-nprogress": "1.8.2",
+    "@vuepress/plugin-search": "1.8.2",
+    "docsearch.js": "^2.5.2",
+    "lodash": "^4.17.15",
+    "stylus": "^0.54.8",
+    "stylus-loader": "^3.0.2",
+    "vuepress-plugin-container": "^2.0.2",
+    "vuepress-plugin-smooth-scroll": "^0.0.3"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "maintainers": [
+    {
+      "name": "ULIVZ",
+      "email": "chl814@foxmail.com"
+    }
+  ],
+  "gitHead": "11eed0f0f105b97a7324cfa8e59d7d27bb966842"
+}
diff --git a/doc/docs/.vuepress/theme/styles/arrow.styl b/doc/docs/.vuepress/theme/styles/arrow.styl
new file mode 100644
index 0000000..20bffc0
--- /dev/null
+++ b/doc/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
diff --git a/doc/docs/.vuepress/theme/styles/code.styl b/doc/docs/.vuepress/theme/styles/code.styl
new file mode 100644
index 0000000..0cb4081
--- /dev/null
+++ b/doc/docs/.vuepress/theme/styles/code.styl
@@ -0,0 +1,176 @@
+/*
+
+Name:       Base16 Atelier Sulphurpool Light
+Author:     Bram de Haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/sulphurpool)
+
+Prism template by Bram de Haan (http://atelierbram.github.io/syntax-highlighting/prism/)
+Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16)
+
+*/
+code[class*="language-"],
+pre[class*="language-"] {
+        font-family: Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace;
+        font-size: 1em;
+        line-height: 1.375;
+        direction: ltr;
+        text-align: left;
+        white-space: pre;
+        word-spacing: normal;
+        word-break: normal;
+        -moz-tab-size: 4;
+        -o-tab-size: 4;
+        tab-size: 4;
+        -webkit-hyphens: none;
+        -moz-hyphens: none;
+        -ms-hyphens: none;
+        hyphens: none;
+        background: #f5f7ff;
+        color: #5e6687;
+}
+
+pre > code[class*="language-"] {
+        font-size: 1em;
+}
+
+pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
+        text-shadow: none;
+        background: #dfe2f1;
+}
+
+pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
+code[class*="language-"]::selection, code[class*="language-"] ::selection {
+        text-shadow: none;
+        background: #dfe2f1;
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+        padding: 1em;
+        margin: .5em 0;
+        overflow: auto;
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+        padding: .1em;
+        border-radius: .3em;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+        color: #898ea4;
+}
+
+.token.punctuation {
+        color: #5e6687;
+}
+
+.token.namespace {
+        opacity: .7;
+}
+
+.token.operator,
+.token.boolean,
+.token.number {
+        color: #c76b29;
+}
+
+.token.property {
+        color: #c08b30;
+}
+
+.token.tag {
+        color: #3d8fd1;
+}
+
+.token.string {
+        color: #22a2c9;
+}
+
+.token.selector {
+        color: #6679cc;
+}
+
+.token.attr-name {
+        color: #c76b29;
+}
+
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+        color: #22a2c9;
+}
+
+.token.attr-value,
+.token.keyword,
+.token.control,
+.token.directive,
+.token.unit {
+        color: #ac9739;
+}
+
+.token.statement,
+.token.regex,
+.token.atrule {
+        color: #22a2c9;
+}
+
+.token.placeholder,
+.token.variable {
+        color: #3d8fd1;
+}
+
+.token.deleted {
+        text-decoration: line-through;
+}
+
+.token.inserted {
+        border-bottom: 1px dotted #202746;
+        text-decoration: none;
+}
+
+.token.italic {
+        font-style: italic;
+}
+
+.token.important,
+.token.bold {
+        font-weight: bold;
+}
+
+.token.important {
+        color: #c94922;
+}
+
+.token.entity {
+        cursor: help;
+}
+
+pre > code.highlight {
+        outline: 0.4em solid #c94922;
+        outline-offset: .4em;
+}
+
+/* overrides color-values for the Line Numbers plugin
+ * http://prismjs.com/plugins/line-numbers/
+ */
+.line-numbers .line-numbers-rows {
+        border-right-color: #dfe2f1;
+}
+
+.line-numbers-rows > span:before {
+        color: #979db4;
+}
+
+/* overrides color-values for the Line Highlight plugin
+ * http://prismjs.com/plugins/line-highlight/
+ */
+.line-highlight {
+        background: rgba(107, 115, 148, 0.2);
+        background: -webkit-linear-gradient(left, rgba(107, 115, 148, 0.2) 70%, rgba(107, 115, 148, 0));
+        background: linear-gradient(to right, rgba(107, 115, 148, 0.2) 70%, rgba(107, 115, 148, 0));
+}
diff --git a/doc/docs/.vuepress/theme/styles/config.styl b/doc/docs/.vuepress/theme/styles/config.styl
new file mode 100644
index 0000000..9e40321
--- /dev/null
+++ b/doc/docs/.vuepress/theme/styles/config.styl
@@ -0,0 +1 @@
+$contentClass = '.theme-default-content'
diff --git a/doc/docs/.vuepress/theme/styles/custom-blocks.styl b/doc/docs/.vuepress/theme/styles/custom-blocks.styl
new file mode 100644
index 0000000..5b86816
--- /dev/null
+++ b/doc/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
diff --git a/doc/docs/.vuepress/theme/styles/index.styl b/doc/docs/.vuepress/theme/styles/index.styl
new file mode 100644
index 0000000..ecef658
--- /dev/null
+++ b/doc/docs/.vuepress/theme/styles/index.styl
@@ -0,0 +1,202 @@
+@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
+
+  &:focus .header-anchor,
+  &: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
+
+  &:focus,
+  &:hover
+    text-decoration none
+
+code, kbd, .line-number
+  font-family Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace
+
+p, ul, ol
+  line-height 1.7
+
+hr
+  border 0
+  border-top 1px solid $borderColor
+
+table
+  border-collapse collapse
+  margin 1rem 0
+  display: block
+  overflow-x: auto
+
+tr
+  border-top 1px solid #dfe2e5
+
+  &:nth-child(2n)
+    background-color #f6f8fa
+
+th, td
+  border 1px solid #dfe2e5
+  padding .6em 1em
+
+.theme-container
+  &.sidebar-open
+    .sidebar-mask
+      display: block
+
+  &.no-navbar
+    {$contentClass}:not(.custom) > h1, h2, h3, h4, h5, h6
+      margin-top 1.5rem
+      padding-top 0
+
+    .sidebar
+      top 0
+
+@media (min-width: ($MQMobile + 1px))
+  .theme-container.no-sidebar
+    .sidebar
+      display none
+
+    .page
+      padding-left 0
+
+@require 'mobile.styl'
diff --git a/doc/docs/.vuepress/theme/styles/mobile.styl b/doc/docs/.vuepress/theme/styles/mobile.styl
new file mode 100644
index 0000000..f5bd327
--- /dev/null
+++ b/doc/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
diff --git a/doc/docs/.vuepress/theme/styles/toc.styl b/doc/docs/.vuepress/theme/styles/toc.styl
new file mode 100644
index 0000000..d3e7106
--- /dev/null
+++ b/doc/docs/.vuepress/theme/styles/toc.styl
@@ -0,0 +1,3 @@
+.table-of-contents
+  .badge
+    vertical-align middle
diff --git a/doc/docs/.vuepress/theme/styles/wrapper.styl b/doc/docs/.vuepress/theme/styles/wrapper.styl
new file mode 100644
index 0000000..a99262c
--- /dev/null
+++ b/doc/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
+
diff --git a/doc/docs/.vuepress/theme/util/index.js b/doc/docs/.vuepress/theme/util/index.js
new file mode 100644
index 0000000..92fcd3b
--- /dev/null
+++ b/doc/docs/.vuepress/theme/util/index.js
@@ -0,0 +1,244 @@
+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)
+    if (config === 'auto') {
+      return resolveHeaders(page)
+    }
+    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,
+      initialOpenGroupIndex: item.initialOpenGroupIndex,
+      children: children.map(child => resolveItem(child, pages, base, groupDepth + 1)),
+      collapsable: item.collapsable !== false
+    }
+  }
+}
diff --git a/doc/docs/README.md b/doc/docs/README.md
new file mode 100755
index 0000000..dfc01d1
--- /dev/null
+++ b/doc/docs/README.md
@@ -0,0 +1,8 @@
+---
+home: true
+heroImage: ./image/yuescript.svg
+tagline: A language that compiles to Lua
+actionText: Quick Start →
+actionLink: /doc/
+footer: Made by Jin with ❤️
+---
diff --git a/doc/docs/doc/README.md b/doc/docs/doc/README.md
new file mode 100755
index 0000000..0d43d04
--- /dev/null
+++ b/doc/docs/doc/README.md
@@ -0,0 +1,594 @@
+---
+sidebar: auto
+---
+
+<CompilerModal />
+
+# Yuescript
+<img src="/image/yuescript.svg" width="300" height="300" alt="logo"/>
+
+## Introduction
+
+Yuescript is a dynamic language that compiles to Lua. The codes written in Yuescript are expressive and extremely concise. And it is suitable for writing some changing application logic with more maintainable codes and runs in a Lua embeded environment such as games or website servers.
+
+Yue (月) is the name of moon in Chinese and it's pronounced as [jyɛ].
+
+### An Overview of Yuescript
+```moonscript
+-- import syntax
+import "yue" as :p, :to_lua
+
+-- implicit objects
+inventory =
+  equipment:
+    * "sword"
+    * "shield"
+  items:
+    * name: "potion"
+      count: 10
+    * name: "bread"
+      count: 3
+
+-- backcall
+{1, 2, 3}
+  |> map (x)-> x * 2
+  |> filter (x)-> x > 4
+  |> reduce 0, (a, b)-> a + b
+  |> print
+
+-- metatable manipulation
+apple =
+  size: 15
+  index#: {color: 0x00ffff}
+p apple.color, apple.#?, apple.index#
+
+-- js-like export syntax
+export yuescript = "月之脚本"
+```
+<YueDisplay>
+<pre>
+-- import syntax
+import "yue" as :p, :to_lua
+
+-- implicit objects
+inventory =
+  equipment:
+    * "sword"
+    * "shield"
+  items:
+    * name: "potion"
+      count: 10
+    * name: "bread"
+      count: 3
+
+-- backcall
+{1, 2, 3}
+  |> map (x)-> x * 2
+  |> filter (x)-> x > 4
+  |> reduce 0, (a, b)-> a + b
+  |> print
+
+-- metatable manipulation
+apple =
+  size: 15
+  index#: {color: 0x00ffff}
+p apple.color, apple.#?, apple.index#
+
+-- js-like export syntax
+export yuescript = "月之脚本"
+</pre>
+</YueDisplay>
+
+## Installation
+
+* **Lua Module**
+
+&emsp;&emsp;Install [luarocks](https://luarocks.org), a package manager for Lua modules. Then install it as a Lua module and executable with:
+
+```
+> luarocks install yuescript
+```
+
+&emsp;&emsp;Or you can build `yue.so` file with:
+
+```
+> make shared LUAI=/usr/local/include/lua LUAL=/usr/local/lib/lua
+```
+
+&emsp;&emsp;Then get the binary file from path **bin/shared/yue.so**.
+
+* **Binary Tool**
+
+&emsp;&emsp;Clone this repo, then build and install executable with:
+```
+> make install
+```
+
+&emsp;&emsp;Build Yuescript tool without macro feature:
+```
+> make install NO_MACRO=true
+```
+
+&emsp;&emsp;Build Yuescript tool without built-in Lua binary:
+```
+> make install NO_LUA=true
+```
+
+## Usage
+
+&emsp;&emsp;Require the Yuescript module in Lua:
+```Lua
+-- require `main.yue` in Lua
+require("yue")("main")
+
+-- use the Yuescript compiler in Lua
+local yue = require("yue")
+local codes, err, globals = yue.to_lua([[
+f = ->
+  print "hello world"
+f!
+]],{
+  implicit_return_root = true,
+  reserve_line_number = true,
+  lint_global = true
+})
+```
+&emsp;&emsp;Use Yuescript tool with:
+```
+> yue -h
+Usage: yue [options|files|directories] ...
+
+   -h       Print this message
+   -e str   Execute a file or raw codes
+   -t path  Specify where to place compiled files
+   -o file  Write output to file
+   -s       Use spaces in generated codes instead of tabs
+   -m       Generate minified codes
+   -p       Write output to standard out
+   -b       Dump compile time (doesn't write output)
+   -l       Write line numbers from source codes
+   -v       Print version
+   --       Read from standard in, print to standard out
+            (Must be first and only argument)
+
+   Execute without options to enter REPL, type symbol '$'
+   in a single line to start/stop multi-line mode
+```
+&emsp;&emsp;Use cases:  
+&emsp;&emsp;Recursively compile every Yuescript file with extension **.yue** under current path:  **yue .**  
+&emsp;&emsp;Compile and save results to a target path:  **yue -t /target/path/ .**  
+&emsp;&emsp;Compile and reserve debug info:  **yue -l .**  
+&emsp;&emsp;Compile and generate minified codes:  **yue -m .**  
+&emsp;&emsp;Execute raw codes:  **yue -e 'print 123'**  
+&emsp;&emsp;Execute a Yuescript file:  **yue -e main.yue**
+
+## Macro
+
+### Common Usage
+Macro function is used for evaluating a string in the compile time and insert the generated codes into final compilation.
+
+```moonscript
+macro config = (debugging)->
+  global debugMode = debugging == "true"
+  ""
+
+macro asserts = (cond)->
+  debugMode and "assert #{cond}" or ""
+
+macro assert = (cond)->
+  debugMode and "assert #{cond}" or "#{cond}"
+
+$config true
+$asserts item ~= nil
+
+$config false
+value = $assert item
+
+-- the passed expressions are treated as strings
+macro and = (...)-> "#{ table.concat {...}, ' and ' }"
+if $and f1!, f2!, f3!
+  print "OK"
+```
+<YueDisplay>
+<pre>
+macro config = (debugging)->
+  global debugMode = debugging == "true"
+  ""
+
+macro asserts = (cond)->
+  debugMode and "assert #{cond}" or ""
+
+macro assert = (cond)->
+  debugMode and "assert #{cond}" or "#{cond}"
+
+$config true
+$asserts item ~= nil
+
+$config false
+value = $assert item
+
+-- the passed expressions are treated as strings
+macro and = (...)-> "#{ table.concat {...}, ' and ' }"
+if $and f1!, f2!, f3!
+  print "OK"
+</pre>
+</YueDisplay>
+
+### Insert Raw  Codes
+
+A macro function can either return a Yuescript string or a config table containing Lua codes.
+```moonscript
+macro yueFunc = (var)-> "local #{var} = ->"
+$yueFunc funcA
+funcA = -> "assign the Yue defined variable"
+
+-- take care and let Yuescript know the
+-- local variables you declared in Lua code
+macro luaFunc = (var)-> {
+  codes: "local function #{var}() end"
+  type: "lua"
+  locals: {var}
+}
+$luaFunc funcB
+funcB = -> "assign the Lua defined variable"
+
+macro lua = (code)-> {
+  :code
+  type: "lua"
+}
+
+-- the raw string leading and ending symbols are auto trimed
+$lua[==[
+-- raw Lua codes insertion
+if cond then
+  print("output")
+end
+]==]
+```
+<YueDisplay>
+<pre>
+macro yueFunc = (var)-> "local #{var} = ->"
+$yueFunc funcA
+funcA = -> "assign the Yue defined variable"
+
+-- take care and let Yuescript know the
+-- local variables you declared in Lua codes
+macro luaFunc = (var)-> {
+  codes: "local function #{var}() end"
+  type: "lua"
+  locals: {var}
+}
+$luaFunc funcB
+funcB = -> "assign the Lua defined variable"
+
+macro lua = (code)-> {
+  :code
+  type: "lua"
+}
+
+-- the raw string leading and ending symbols are auto trimed
+$lua[==[
+-- raw Lua codes insertion
+if cond then
+  print("output")
+end
+]==]
+</pre>
+</YueDisplay>
+
+### Export Macro
+
+Macro functions can be exported from a module and get imported in another module. It is recommanded to export macro functions in a single file to speed up compilation.
+```moonscript
+-- file: utils.yue
+export macro map = (items, action)-> "[#{action} for _ in *#{items}]"
+export macro filter = (items, action)-> "[_ for _ in *#{items} when #{action}]"
+export macro foreach = (items, action)-> "for _ in *#{items}
+  #{action}"
+
+-- file main.yue
+import "utils" as {
+  $, -- symbol to import all macros
+  $foreach: $each -- rename macro $foreach to $each
+}
+{1, 2, 3} |> $map(_ * 2) |> $filter(_ > 4) |> $each print _
+```
+<YueDisplay>
+<pre>
+-- file: utils.yue
+export macro map = (items, action)-> "[#{action} for _ in *#{items}]"
+export macro filter = (items, action)-> "[_ for _ in *#{items} when #{action}]"
+export macro foreach = (items, action)-> "for _ in *#{items}
+  #{action}"
+
+-- file main.yue
+-- import function is not available in browser, try it in a real environment
+--[[
+import "utils" as {
+  $, -- symbol to import all macros
+  $foreach: $each -- rename macro $foreach to $each
+}
+{1, 2, 3} |> $map(_ * 2) |> $filter(_ > 4) |> $each print _
+]]
+</pre>
+</YueDisplay>
+
+## Special Operator
+
+### Metatable
+
+The **#** operator can be used as a shortcut for metatable manipulation.
+
+* **Metatable Creation**  
+Create normal table with  key **#** or metamethod key that ends with **#**.
+
+```moonscript
+mt = {}
+add = (right)=> #: mt, value: @value + right.value
+mt.__add = add
+
+a = #: mt, value: 1
+ -- set field with variable of the same name
+b = :add#, value: 2
+c = add#: mt.__add, value: 3
+
+d = a + b + c
+print d.value
+
+close _ = close#: -> print "out of scope"
+```
+<YueDisplay>
+<pre>
+mt = {}
+add = (right)=> #: mt, value: @value + right.value
+mt.__add = add
+
+a = #: mt, value: 1
+ -- set field with variable of the same name
+b = :add#, value: 2
+c = add#: mt.__add, value: 3
+
+d = a + b + c
+print d.value
+
+close _ = close#: -> print "out of scope"
+</pre>
+</YueDisplay>
+
+* **Metatable Accessing**  
+Accessing metatable with key **#** or metamethod key that ends with **#**.
+
+```moonscript
+-- create with metatable containing field "value"
+tb = ["value"]#: 123
+tb.index# = tb.#
+print tb.value
+
+tb.# = __index: {item: "hello"}
+print tb.item
+```
+<YueDisplay>
+<pre>
+-- create with metatable containing field "value"
+tb = ["value"]#: 123
+tb.index# = tb.#
+print tb.value
+
+tb.# = __index: {item: "hello"}
+print tb.item
+</pre>
+</YueDisplay>
+
+* **Metatable Destructure**  
+Destruct metatable with metamethod key that ends with **#**.
+
+```moonscript
+{item, :new, :close#, index#: getter} = tb
+print item, new, close, getter
+```
+<YueDisplay>
+<pre>
+{item, :new, :close#, index#: getter} = tb
+print item, new, close, getter
+</pre>
+</YueDisplay>
+
+### Existence
+
+The **?** operator can be used in a variety of contexts to check for existence.
+
+```moonscript
+func?!
+print abc?["hello world"]?.xyz
+
+x = tab?.value
+len = utf8?.len or string?.len or (o)-> #o
+
+if print and x?
+  print x
+
+with? io.open "test.txt", "w"
+  \write "hello"
+  \close!
+```
+<YueDisplay>
+<pre>
+func?!
+print abc?["hello world"]?.xyz
+
+x = tab?.value
+len = utf8?.len or string?.len or (o)-> #o
+
+if print and x?
+  print x
+
+with? io.open "test.txt", "w"
+  \write "hello"
+  \close!
+</pre>
+</YueDisplay>
+
+### Piping
+
+Instead of a series of nested function calls, you can pipe values with operator **|>**.
+```moonscript
+"hello" |> print
+1 |> print 2 -- insert pipe item as the first argument
+2 |> print 1, _, 3 -- pipe with a placeholder
+
+-- pipe expression in multiline
+readFile "example.txt"
+  |> extract language, {}
+  |> parse language
+  |> emit
+  |> render
+  |> print
+```
+<YueDisplay>
+<pre>
+"hello" |> print
+1 |> print 2 -- insert pipe item as the first argument
+2 |> print 1, _, 3 -- pipe with a placeholder
+
+-- pipe expression in multiline
+readFile "example.txt"
+  |> extract language, {}
+  |> parse language
+  |> emit
+  |> render
+  |> print
+</pre>
+</YueDisplay>
+
+## Module
+
+### Import
+
+The import statement is a syntax sugar for requiring a module or help extracting items from an imported module.
+
+```moonscript
+-- used as table destructure
+do
+  import C, Ct, Cmt from require "lpeg"
+  import insert, concat from table
+
+-- shortcut for requring a module
+do
+  import 'module'
+  import 'module_x'
+  import "d-a-s-h-e-s"
+  import "module.part"
+
+-- requring module with aliasing or table destruction
+do
+  import "player" as PlayerModule
+  import "lpeg" as :C, :Ct, :Cmt
+  import "export" as {one, two, Something:{umm:{ch}}}
+```
+<YueDisplay>
+<pre>
+-- used as table destruction
+do
+  import C, Ct, Cmt from require "lpeg"
+  import insert, concat from table
+
+-- shortcut for requring a module
+do
+  import 'module'
+  import 'module_x'
+  import "d-a-s-h-e-s"
+  import "module.part"
+
+-- requring module with aliasing or table destruction
+do
+  import "player" as PlayerModule
+  import "lpeg" as :C, :Ct, :Cmt
+  import "export" as {one, two, Something:{umm:{ch}}}
+</pre>
+</YueDisplay>
+
+### Export
+
+The export statement offers a concise way to define modules.
+
+* **Named Export**  
+Named export will define a local variable as well as adding a field in the exported table.
+
+```moonscript
+export a, b, c = 1, 2, 3
+export cool = "cat"
+
+export What = if this
+  "abc"
+else
+  "def"
+
+export y = ->
+  hallo = 3434
+
+export class Something
+  umm: "cool"
+```
+<YueDisplay>
+<pre>
+export a, b, c = 1, 2, 3
+export cool = "cat"
+
+export What = if this
+  "abc"
+else
+  "def"
+
+export y = ->
+  hallo = 3434
+
+export class Something
+  umm: "cool"
+</pre>
+</YueDisplay>
+
+* **Unnamed Export**  
+Unnamed export will add the target item into the array part of the exported table.
+
+```moonscript
+d, e, f = 3, 2, 1
+export d, e, f
+
+export if this
+  123
+else
+  456
+
+export with tmp
+  j = 2000
+```
+<YueDisplay>
+<pre>
+d, e, f = 3, 2, 1
+export d, e, f
+
+export if this
+  123
+else
+  456
+
+export with tmp
+  j = 2000
+</pre>
+</YueDisplay>
+
+* **Default Export**  
+Using the **default** keyword in export statement to replace the exported table with any thing.
+
+```moonscript
+export default ->
+  print "hello"
+  123
+```
+<YueDisplay>
+<pre>
+export default ->
+  print "hello"
+  123
+</pre>
+</YueDisplay>
\ No newline at end of file
diff --git a/doc/docs/try/README.md b/doc/docs/try/README.md
new file mode 100755
index 0000000..d6ba5dd
--- /dev/null
+++ b/doc/docs/try/README.md
@@ -0,0 +1,6 @@
+# Yuescript Online Compiler
+---
+
+Try Yuescript in the browser with WASM.
+
+<YueCompiler />