This is an automated email from the ASF dual-hosted git repository.

ovilia pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-echarts-handbook.git

commit 894cee7ab8eae4e91eed90355a0c700c2035d54a
Author: Ovilia <zwl.s...@gmail.com>
AuthorDate: Wed Apr 1 14:11:05 2020 +0800

    feat: router completed
---
 components/Logo.vue               |  34 --------
 components/partials/Aside.vue     | 159 ++++++++++++++++++++++++++++++++++++++
 components/partials/Navigator.vue |  42 ++++++++++
 contents/en/enPosts.js            |   1 +
 contents/en/line.md               |   0
 contents/zh/line.md               |  20 +++++
 contents/zh/zhPosts.js            |   1 +
 layouts/default.vue               | 153 +++++++++++++++++++++++++++---------
 nuxt.config.js                    |  36 ++++++++-
 package-lock.json                 | 121 +++++++++++++++++++++++++++++
 package.json                      |  11 ++-
 pages/index.vue                   |  79 +++++++++++--------
 pages/zh/_post.vue                |  29 +++++++
 store/index.js                    |  72 +++++++++++++++++
 tsconfig.json                     |   4 +-
 types/nuxt.d.ts                   |  23 ++++++
 16 files changed, 677 insertions(+), 108 deletions(-)

diff --git a/components/Logo.vue b/components/Logo.vue
deleted file mode 100644
index 58118db..0000000
--- a/components/Logo.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<template>
-  <svg class="NuxtLogo" width="245" height="180" viewBox="0 0 452 342" 
xmlns="http://www.w3.org/2000/svg";>
-    <g fill="none" fill-rule="evenodd">
-      <path
-        d="M139 330l-1-2c-2-4-2-8-1-13H29L189 31l67 121 
22-16-67-121c-1-2-9-14-22-14-6 0-15 2-22 15L5 303c-1 3-8 16-2 27 4 6 10 12 24 
12h136c-14 0-21-6-24-12z"
-        fill="#00C58E"
-      />
-      <path
-        d="M447 304L317 70c-2-2-9-15-22-15-6 0-15 3-22 15l-17 28v54l39-67 129 
230h-49a23 23 0 0 1-2 14l-1 1c-6 11-21 12-23 12h76c3 0 17-1 24-12 3-5 
5-14-2-26z"
-        fill="#108775"
-      />
-      <path
-        d="M376 330v-1l1-2c1-4 2-8 1-12l-4-12-102-178-15-27h-1l-15 27-102 
178-4 12a24 24 0 0 0 2 15c4 6 10 12 24 12h190c3 0 18-1 25-12zM256 152l93 
163H163l93-163z"
-        fill="#2F495E"
-        fill-rule="nonzero"
-      />
-    </g>
-  </svg>
-</template>
-<style>
-.NuxtLogo {
-  animation: 1s appear;
-  margin: auto;
-}
-
-@keyframes appear {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-</style>
diff --git a/components/partials/Aside.vue b/components/partials/Aside.vue
new file mode 100644
index 0000000..cb066d7
--- /dev/null
+++ b/components/partials/Aside.vue
@@ -0,0 +1,159 @@
+<template>
+  <aside :class="{ 'opacity-25': $store.state.focusMode }" 
class="opacity-transition block bg-gray-100 mt-8 -mx-4 lg:bg-transparent 
lg:mt-0 lg:mx-0 lg:inset-0 z-90 lg:mb-0 lg:static lg:h-auto 
lg:overflow-y-visible lg:pt-0 lg:w-1/4 lg:block">
+    <div class="h-full overflow-y-auto scrolling-touch text-center 
lg:text-left lg:h-auto lg:block lg:relative lg:sticky lg:top-24">
+      <a v-if="breadcrumb" class="block text-left p-4 lg:hidden" href="#nav" 
@click.prevent="showNav = !showNav">
+        <nui-times v-if="showNav" class="float-right mt-1 mr-1 h-5" />
+        <nui-caret-down v-else class="float-right mt-2 mr-1" />
+        <span class="uppercase text-gray-500 ml-1">{{ breadcrumb.group }} 
:</span> {{ breadcrumb.title }}
+      </a>
+      <nav class="pt-8 lg:overflow-y-auto lg:block lg:pl-0 lg:pr-8 
sticky?lg:h-(screen-24)" :class="{ hidden: !showNav }">
+        <p class="uppercase font-bold pb-6">
+          {{ $store.state.lang.text.version }} <span 
class="text-nuxt-lightgreen">{{ $store.state.docVersion }}</span>
+        </p>
+        <template v-for="(group, index) in list">
+          <h3 :key="`title-${index}`" class="uppercase font-medium 
text-light-onSurfaceSecondary dark:text-dark-onSurfaceSecondary pb-2 
transition-colors duration-300 ease-linear">
+            {{ group.title }}
+          </h3>
+          <ul :key="`list-${index}`" class="pb-8">
+            <li v-for="link in group.links" :key="link.to" class="py-2">
+              <nuxt-link class="text-light-onSurfacePrimary 
dark:text-dark-onSurfacePrimary hover:text-nuxt-lightgreen 
dark:hover:text-nuxt-lightgreen transition-colors duration-300 ease-linear" 
:class="{'current-link': path === menu + link.to}" :to="menu + link.to" exact>
+                {{ link.name }}
+              </nuxt-link>
+              <ul v-if="path === menu + link.to && link.contents" class="pl-2 
py-1">
+                <li v-for="(content, i) in link.contents" :key="content.to" 
class="py-1 text-sm">
+                  <a :href="menu + link.to + content.to" 
class="text-light-onSurfaceSecondary dark:text-dark-onSurfaceSecondary 
transition-colors duration-300 ease-linear" :class="{'current-link': current 
=== i}" @click.prevent="scrollTo(content.to)">
+                    {{ content.name }}
+                  </a>
+                </li>
+              </ul>
+            </li>
+          </ul>
+        </template>
+      </nav>
+    </div>
+  </aside>
+</template>
+
+<script>
+import throttle from 'lodash/throttle'
+import nuiCaretDown from '@/components/svg/CaretDown'
+import nuiTimes from '@/components/svg/Times'
+
+export default {
+  components: {
+    nuiCaretDown,
+    nuiTimes
+  },
+  data () {
+    return { current: 0, setInter: null, showNav: false }
+  },
+  computed: {
+    list () {
+      return this.$store.state.menu[this.$route.params.section] || []
+    },
+    visible () { return this.$store.state.visibleAffix },
+    path () { return this.$route.path.slice(-1) === '/' ? 
this.$route.path.slice(0, -1) : this.$route.path },
+    menu () { return '/' + this.$route.params.section },
+    breadcrumb () {
+      let breadcrumb = null
+      this.list.forEach((group) => {
+        group.links.forEach((link) => {
+          if ((this.$route.params.slug && link.to === '/' + 
this.$route.params.slug) || (!this.$route.params.slug && (link.to === '' || 
link.to === '/'))) {
+            breadcrumb = { group: group.title, title: link.name }
+          }
+        })
+      })
+      return breadcrumb
+    },
+    contents () {
+      const c = []
+      this.list.forEach((group) => {
+        if (Array.isArray(group.links) && !c.length) {
+          const l = group.links.find((link) => {
+            return this.path === this.menu + link.to
+          })
+          if (l && l.contents) {
+            l.contents.forEach((content) => {
+              const el = document.getElementById(content.to.slice(1))
+              if (el) {
+                c.push(el.offsetTop)
+              }
+            })
+          }
+        }
+      })
+      return c
+    }
+  },
+  watch: {
+    '$route.fullPath': 'hashChanged'
+  },
+  mounted () {
+    this.$nextTick(() => {
+      window.addEventListener('scroll', throttle(() => this.scrolled(), 100))
+      if (this.$route.hash.length) {
+        this.scrollTo(this.$route.hash)
+      }
+      this.scrolled()
+    })
+  },
+  methods: {
+    hashChanged (toPath, fromPath) {
+      this.showNav = false
+      toPath = toPath.split('#')
+      fromPath = fromPath.split('#')
+      this.$nextTick(() => this.scrollTo(this.$route.hash))
+    },
+    toggle () { this.$store.commit('toggle', 'visibleAffix') },
+    scrolled () {
+      const h = window.innerHeight || document.documentElement.clientHeight || 
document.body.clientHeight
+      const doc = document.documentElement
+      const top = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0)
+      const el = this.contents.find((pos) => {
+        return pos > top + (h / 2)
+      })
+      this.current = (el ? this.contents.indexOf(el) : this.contents.length) - 
1
+    },
+    scrollTo (id) {
+      if (this._scrolling) {
+        return
+      }
+      this._scrolling = true
+      if (this.$store.state.visibleAffix) {
+        this.toggle()
+      }
+      if (id !== this.$route.hash) {
+        this.$router.push(this.$route.fullPath.split('#')[0] + id)
+      }
+      this.$nextTick(() => {
+        const el = document.getElementById(id.slice(1))
+        if (!el) {
+          this._scrolling = false
+          return
+        }
+        const to = el.offsetTop - (window.outerWidth < 1024 ? 90 : 120)
+        const doc = document.documentElement
+        let top = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0)
+        const diff = (to > top ? to - top : top - to) / 25
+        let i = 0
+        window.clearInterval(this.setInter)
+        this.setInter = window.setInterval(() => {
+          top = (to > top) ? top + diff : top - diff
+          window.scrollTo(0, top)
+          i++
+          if (i === 25) {
+            this._scrolling = false
+            window.clearInterval(this.setInter)
+          }
+        }, 10)
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.current-link {
+  color: theme('colors.primary.base');
+}
+</style>
diff --git a/components/partials/Navigator.vue 
b/components/partials/Navigator.vue
new file mode 100644
index 0000000..426dd0d
--- /dev/null
+++ b/components/partials/Navigator.vue
@@ -0,0 +1,42 @@
+<template>
+    <!-- tmp nav -->
+    <div>
+        <nav>
+            <img 
src="http://localhost/incubator-echarts-website/zh/images/logo.png";>
+
+            <div class="nav-btn">首页</div>
+            <div class="nav-btn">下载</div>
+            <div class="nav-btn">实例</div>
+            <div class="nav-btn">社区</div>
+            <div class="nav-btn">工具</div>
+            <div class="nav-btn">贡献</div>
+            <div class="nav-btn">关于</div>
+        </nav>
+    </div>
+</template>
+<style>
+
+nav {
+    width: 100%;
+    height: 50px;
+    background-color: #293c55;
+}
+
+.nav-btn {
+    color: rgba(255,255,255,0.45);
+    display: inline-block;
+    padding: 13px 20px;
+    margin-left: 5px;
+    font-size: 14px;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, 
"PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Helvetica Neue", 
Helvetica, Arial, sans-serif;
+}
+
+nav img {
+    float: left;
+    height: 50px;
+    padding: 12px 12px;
+    font-size: 18px;
+    line-height: 20px;
+}
+
+</style>
diff --git a/contents/en/enPosts.js b/contents/en/enPosts.js
new file mode 100644
index 0000000..d6d1738
--- /dev/null
+++ b/contents/en/enPosts.js
@@ -0,0 +1 @@
+export default [];
diff --git a/contents/en/line.md b/contents/en/line.md
new file mode 100644
index 0000000..e69de29
diff --git a/contents/zh/line.md b/contents/zh/line.md
new file mode 100644
index 0000000..9ba27d0
--- /dev/null
+++ b/contents/zh/line.md
@@ -0,0 +1,20 @@
+# 柱状图
+
+柱状通过柱形的高度来表现数据的大小,用于有至少一个类目轴或时间轴的直角坐标系上。
+
+## 最简单的柱状图
+
+设置柱状图的方式,是将 `series.name` 设为 `"bar"`。最简单的柱状图可以这样设置:
+
+```js
+option = {
+    xAxis: {
+        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
+    },
+    yAxis: {},
+    series: [{
+        type: 'bar',
+        data: [23, 24, 18, 25, 27, 28, 25]
+    }]
+};
+```
diff --git a/contents/zh/zhPosts.js b/contents/zh/zhPosts.js
new file mode 100644
index 0000000..8775b96
--- /dev/null
+++ b/contents/zh/zhPosts.js
@@ -0,0 +1 @@
+export default ['line'];
diff --git a/layouts/default.vue b/layouts/default.vue
index 2f45459..347fa81 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,55 +1,134 @@
 <template>
   <div>
-    <nuxt />
+    <navigator />
+
+    <div class="container-fluid">
+      <div class="row flex-xl-nowrap2">
+        <div class="bd-sidebar border-bottom-0 col-md-3 col-xl-2 col-12">
+          <div class="bd-docs-nav">
+            <div class="bd-toc-item">
+              <a href="#" class="bd-toc-link">开始</a>
+              <ul class="nav bd-sidenav">
+                <li class="nav-item">
+                  <a href="#" class="nav-link">第一个 ECharts 图表</a>
+                </li>
+                <li class="nav-item">
+                  <a href="#" class="nav-link">定制主题样式</a>
+                </li>
+                <li class="nav-item">
+                  <a href="#" class="nav-link">基本概念</a>
+                </li>
+              </ul>
+            </div>
+            <div class="bd-toc-item">
+              <a href="#" class="bd-toc-link nuxt-link-exact-active">图表类型</a>
+              <ul class="nav bd-sidenav">
+                <li class="nav-item">
+                  <a href="#" class="nav-link">折线图</a>
+                </li>
+                <li class="nav-item">
+                  <a href="#" class="nav-link">柱状图</a>
+                </li>
+                <li class="nav-item">
+                  <a href="#" class="nav-link">饼图</a>
+                </li>
+                <li class="nav-item">
+                  <a href="#" class="nav-link">散点图</a>
+                </li>
+                <li class="nav-item">
+                  <a href="#" class="nav-link">涟漪散点图</a>
+                </li>
+                <li class="nav-item">
+                  <a href="#" class="nav-link">雷达图</a>
+                </li>
+                <li class="nav-item">
+                  <a href="#" class="nav-link">树图</a>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+        <div class="bd-content col-md-9 col-xl-8 col-12 pb-md-3 pl-md-5">
+          <div class="post-content content">
+            <nuxt />
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
+<script lang="ts">
+import Vue from 'vue';
+import Navigator from '~/components/partials/Navigator.vue';
+
+export default Vue.extend({
+  components: {
+    Navigator
+  }
+})
+</script>
+
 <style>
-html {
-  font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe 
UI',
-    Roboto, 'Helvetica Neue', Arial, sans-serif;
-  font-size: 16px;
-  word-spacing: 1px;
-  -ms-text-size-adjust: 100%;
-  -webkit-text-size-adjust: 100%;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-  box-sizing: border-box;
+.bd-sidebar {
+  padding: 20px;
+}
+
+.bd-toc-item {
+  margin-bottom: 20px;
+}
+
+.bd-sidenav {
+  margin-top: 10px;
+  display: none;
+}
+
+.nav {
+  display: block;
+}
+
+.bd-toc-link {
+  font-weight: bold;
+  color: #444;
+}
+
+.nav-link {
+  color: #555;
 }
 
-*,
-*:before,
-*:after {
-  box-sizing: border-box;
-  margin: 0;
+  .nav-link:hover {
+    text-decoration: underline;
+  }
+
+
+
+.post-content {
+  margin: 20px 0;
 }
 
-.button--green {
-  display: inline-block;
-  border-radius: 4px;
-  border: 1px solid #3b8070;
-  color: #3b8070;
-  text-decoration: none;
-  padding: 10px 30px;
+h1 {
+  margin-bottom: 20px;
+  font-size: 36px;
 }
 
-.button--green:hover {
-  color: #fff;
-  background-color: #3b8070;
+h2 {
+  margin: 40px 0 20px 0;
+  font-size: 26px;
 }
 
-.button--grey {
-  display: inline-block;
-  border-radius: 4px;
-  border: 1px solid #35495e;
-  color: #35495e;
-  text-decoration: none;
-  padding: 10px 30px;
-  margin-left: 15px;
+h3 {
+  font-size: 22px;
+}
+
+h4 {
+  font-size: 18px;
+}
+
+h5 {
+  font-size: 16px;
 }
 
-.button--grey:hover {
-  color: #fff;
-  background-color: #35495e;
+h6 {
+  font-size: 14px;
 }
 </style>
diff --git a/nuxt.config.js b/nuxt.config.js
index b4ca074..19d82cf 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -1,3 +1,5 @@
+import enPosts from './contents/en/enPosts';
+import zhPosts from './contents/zh/zhPosts';
 
 export default {
   mode: 'universal',
@@ -45,7 +47,25 @@ export default {
   */
   modules: [
     // Doc: https://bootstrap-vue.js.org
-    'bootstrap-vue/nuxt'
+    'bootstrap-vue/nuxt',
+    [
+      'nuxt-i18n',
+      {
+        locales: ['en', 'zh'],
+        defaultLocale: 'en',
+        vueI18n: {
+          fallbackLocale: 'en',
+          messages: {
+            en: {
+              greeting: 'Hello world!'
+            },
+            zh: {
+              greeting: '你好!'
+            }
+          }
+        }
+      }
+    ]
   ],
   /*
   ** Build configuration
@@ -55,10 +75,24 @@ export default {
     ** You can extend webpack config here
     */
     extend (config, ctx) {
+      config.module.rules.push({
+        test: /\.md$/,
+        use: ['raw-loader']
+      });
     },
 
     filenames: {
       chunk: 'js/[contenthash].js'
     }
+  },
+  generate: {
+    routes: [
+      '/zh/line'
+    ]
+    // routes: [
+
+    // ]
+    // .concat(zhPosts.map(post => `/zh/${post}`))
+    // .concat(enPosts.map(post => `/en/${post}`))
   }
 }
diff --git a/package-lock.json b/package-lock.json
index e336076..16169e4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -923,6 +923,15 @@
       "resolved": 
"https://registry.npmjs.org/@csstools/convert-colors/-/convert-colors-1.4.0.tgz";,
       "integrity": 
"sha512-5a6wqoJV/xEdbRNKVo6I4hO3VjyDq//8q2f9I6PBAvMesJHFauXDorcNCsr9RzvsZnaWi5NYCcfyqP1QeFHFbw=="
     },
+    "@intlify/vue-i18n-loader": {
+      "version": "0.6.1",
+      "resolved": 
"https://registry.npmjs.org/@intlify/vue-i18n-loader/-/vue-i18n-loader-0.6.1.tgz";,
+      "integrity": 
"sha512-PyBeKrIxNQmnHq/hYGMneVIQAlGTWsFu92SMD5Noyi3GcHJvDpnthWTuRUBAsY4WqQ7RYLCnrngqCrUY5tNZtg==",
+      "requires": {
+        "js-yaml": "^3.13.1",
+        "json5": "^2.1.1"
+      }
+    },
     "@nuxt/babel-preset-app": {
       "version": "2.12.1",
       "resolved": 
"https://registry.npmjs.org/@nuxt/babel-preset-app/-/babel-preset-app-2.12.1.tgz";,
@@ -5569,6 +5578,39 @@
         }
       }
     },
+    "front-matter": {
+      "version": "3.1.0",
+      "resolved": 
"https://registry.npmjs.org/front-matter/-/front-matter-3.1.0.tgz";,
+      "integrity": 
"sha512-RFEK8N6waWTdwBZOPNEtvwMjZ/hUfpwXkYUYkmmOhQGdhSulXhWrFwiUhdhkduLDiIwbROl/faF1X/PC/GGRMw==",
+      "dev": true,
+      "requires": {
+        "js-yaml": "^3.13.1"
+      }
+    },
+    "frontmatter-markdown-loader": {
+      "version": "3.3.0",
+      "resolved": 
"https://registry.npmjs.org/frontmatter-markdown-loader/-/frontmatter-markdown-loader-3.3.0.tgz";,
+      "integrity": 
"sha512-aEn0v7XM+pvvCltcnUSrFAjVziH5jgjR0Z+ccVH7QXZDYLN5FjUxj15tUvEVHx6mgV6HVHkmt1YdDQowyOIQxA==",
+      "dev": true,
+      "requires": {
+        "front-matter": "^3.0.1",
+        "loader-utils": "^2.0.0",
+        "markdown-it": "^10.0.0"
+      },
+      "dependencies": {
+        "loader-utils": {
+          "version": "2.0.0",
+          "resolved": 
"https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz";,
+          "integrity": 
"sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
+          "dev": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        }
+      }
+    },
     "fs-extra": {
       "version": "8.1.0",
       "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz";,
@@ -6834,6 +6876,11 @@
         "is-extglob": "^2.1.1"
       }
     },
+    "is-https": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-https/-/is-https-1.0.0.tgz";,
+      "integrity": 
"sha512-1adLLwZT9XEXjzhQhZxd75uxf0l+xI9uTSFaZeSESjL3E1eXSPpO+u5RcgqtzeZ1KCaNvtEwZSTO2P4U5erVqQ=="
+    },
     "is-nan": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/is-nan/-/is-nan-1.3.0.tgz";,
@@ -6972,6 +7019,11 @@
         }
       }
     },
+    "js-cookie": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-2.2.1.tgz";,
+      "integrity": 
"sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ=="
+    },
     "js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz";,
@@ -7083,6 +7135,15 @@
       "integrity": "sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=",
       "dev": true
     },
+    "linkify-it": {
+      "version": "2.2.0",
+      "resolved": 
"https://registry.npmjs.org/linkify-it/-/linkify-it-2.2.0.tgz";,
+      "integrity": 
"sha512-GnAl/knGn+i1U/wjBz3akz2stz+HrHLsxMwHQGofCDfPvlf+gDKN58UtfmUquTY4/MXeE2x7k19KQmeoZi94Iw==",
+      "dev": true,
+      "requires": {
+        "uc.micro": "^1.0.1"
+      }
+    },
     "load-json-file": {
       "version": "2.0.0",
       "resolved": 
"https://registry.npmjs.org/load-json-file/-/load-json-file-2.0.0.tgz";,
@@ -7343,6 +7404,19 @@
         "object-visit": "^1.0.0"
       }
     },
+    "markdown-it": {
+      "version": "10.0.0",
+      "resolved": 
"https://registry.npmjs.org/markdown-it/-/markdown-it-10.0.0.tgz";,
+      "integrity": 
"sha512-YWOP1j7UbDNz+TumYP1kpwnP0aEa711cJjrAQrzd0UXlbJfc5aAq0F/PZHjiioqDC1NKgvIMX+o+9Bk7yuM2dg==",
+      "dev": true,
+      "requires": {
+        "argparse": "^1.0.7",
+        "entities": "~2.0.0",
+        "linkify-it": "^2.0.0",
+        "mdurl": "^1.0.1",
+        "uc.micro": "^1.0.5"
+      }
+    },
     "md5.js": {
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz";,
@@ -7358,6 +7432,12 @@
       "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.4.tgz";,
       "integrity": 
"sha512-iV3XNKw06j5Q7mi6h+9vbx23Tv7JkjEVgKHW4pimwyDGWm0OIQntJJ+u1C6mg6mK1EaTv42XQ7w76yuzH7M2cA=="
     },
+    "mdurl": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-1.0.1.tgz";,
+      "integrity": "sha1-/oWy7HWlkDfyrf7BAP1sYBdhFS4=",
+      "dev": true
+    },
     "media-typer": {
       "version": "0.3.0",
       "resolved": 
"https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz";,
@@ -7874,6 +7954,21 @@
         "@nuxt/webpack": "2.12.1"
       }
     },
+    "nuxt-i18n": {
+      "version": "6.7.2",
+      "resolved": "https://registry.npmjs.org/nuxt-i18n/-/nuxt-i18n-6.7.2.tgz";,
+      "integrity": 
"sha512-A1olNJuumr8r6o5C8hV9hgJO7KG4AEx9m2Cn/8dKNi1VHQCCx0DcGlTS6B9mgenpqmpBBbB09OWcOrrA9wJI9Q==",
+      "requires": {
+        "@babel/parser": "^7.5.5",
+        "@babel/traverse": "^7.5.5",
+        "@intlify/vue-i18n-loader": "^0.6.1",
+        "cookie": "^0.4.0",
+        "is-https": "^1.0.0",
+        "js-cookie": "^2.2.1",
+        "vue-i18n": "^8.12.0",
+        "vue-i18n-extensions": "^0.2.1"
+      }
+    },
     "object-assign": {
       "version": "4.1.1",
       "resolved": 
"https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz";,
@@ -9455,6 +9550,16 @@
         "unpipe": "1.0.0"
       }
     },
+    "raw-loader": {
+      "version": "4.0.0",
+      "resolved": 
"https://registry.npmjs.org/raw-loader/-/raw-loader-4.0.0.tgz";,
+      "integrity": 
"sha512-iINUOYvl1cGEmfoaLjnZXt4bKfT2LJnZZib5N/LLyAphC+Dd11vNP9CNVb38j+SAJpFI1uo8j9frmih53ASy7Q==",
+      "dev": true,
+      "requires": {
+        "loader-utils": "^1.2.3",
+        "schema-utils": "^2.5.0"
+      }
+    },
     "read-cache": {
       "version": "1.0.0",
       "resolved": 
"https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz";,
@@ -10941,6 +11046,12 @@
       "resolved": 
"https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.21.tgz";,
       "integrity": 
"sha512-+O8/qh/Qj8CgC6eYBVBykMrNtp5Gebn4dlGD/kKXVkJNDwyrAwSIqwz8CDf+tsAIWVycKcku6gIXJ0qwx/ZXaQ=="
     },
+    "uc.micro": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz";,
+      "integrity": 
"sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==",
+      "dev": true
+    },
     "uglify-js": {
       "version": "3.4.10",
       "resolved": 
"https://registry.npmjs.org/uglify-js/-/uglify-js-3.4.10.tgz";,
@@ -11252,6 +11363,16 @@
       "resolved": 
"https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz";,
       "integrity": 
"sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog=="
     },
+    "vue-i18n": {
+      "version": "8.16.0",
+      "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-8.16.0.tgz";,
+      "integrity": 
"sha512-cp9JOsx4ETzlCsnD22FE8ZhAmD8kcyNLRKV0DPsS7bBNTCdIlOKuyTGonWKYcGCUtNMtwemDWRBevRm8eevBVg=="
+    },
+    "vue-i18n-extensions": {
+      "version": "0.2.1",
+      "resolved": 
"https://registry.npmjs.org/vue-i18n-extensions/-/vue-i18n-extensions-0.2.1.tgz";,
+      "integrity": 
"sha512-xBrItI7bEwBnG7eAlnyUARP41JYYn2+ABMR8q1Yh5FM9hHCbs4XPZwG+4+FPeIZ6b5gYk4YUP//m+fWiuU9z9A=="
+    },
     "vue-loader": {
       "version": "15.9.1",
       "resolved": 
"https://registry.npmjs.org/vue-loader/-/vue-loader-15.9.1.tgz";,
diff --git a/package.json b/package.json
index 7486315..9080abc 100644
--- a/package.json
+++ b/package.json
@@ -12,9 +12,10 @@
     "lint": "eslint --ext .js,.vue --ignore-path .gitignore ."
   },
   "dependencies": {
-    "nuxt": "^2.0.0",
+    "bootstrap": "^4.1.3",
     "bootstrap-vue": "^2.0.0",
-    "bootstrap": "^4.1.3"
+    "nuxt": "^2.0.0",
+    "nuxt-i18n": "^6.7.2"
   },
   "devDependencies": {
     "@nuxt/typescript-build": "^0.6.0",
@@ -22,6 +23,10 @@
     "@nuxtjs/eslint-module": "^1.0.0",
     "babel-eslint": "^10.0.1",
     "eslint": "^6.1.0",
-    "eslint-plugin-nuxt": ">=0.4.2"
+    "eslint-plugin-nuxt": ">=0.4.2",
+    "front-matter": "^3.1.0",
+    "frontmatter-markdown-loader": "^3.3.0",
+    "markdown-it": "^10.0.0",
+    "raw-loader": "^4.0.0"
   }
 }
diff --git a/pages/index.vue b/pages/index.vue
index 50a6b85..148b8cc 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,42 +1,57 @@
 <template>
-  <div class="container">
-    <div>
-      <logo />
-      <h1 class="title">
-        echarts-booklet
-      </h1>
-      <h2 class="subtitle">
-        ECharts booklet
-      </h2>
-      <div class="links">
-        <a
-          href="https://nuxtjs.org/";
-          target="_blank"
-          class="button--green"
-        >
-          Documentation
-        </a>
-        <a
-          href="https://github.com/nuxt/nuxt.js";
-          target="_blank"
-          class="button--grey"
-        >
-          GitHub
-        </a>
-      </div>
-    </div>
+  <div>
+    this is index
   </div>
 </template>
 
 <script lang="ts">
-import Vue from 'vue'
-import Logo from '~/components/Logo.vue'
+// const fm = require("front-matter");
+// var md = require("markdown-it")({
+//   html: true,
+//   typographer: true
+// });
+import fm from 'front-matter';
+import md from 'markdown-it';
 
-export default Vue.extend({
-  components: {
-    Logo
+export default {
+  async asyncData(data) {
+    console.log(data);
+    // const fileContent = await import(`~/contents/${data.params.post}.md`);
+    // let res = fm(fileContent.default);
+    // return {
+    //   // attributes will be an object containing the markdown metadata
+    //   attributes: res.attributes,
+    //   // content will contain the body of the markdown file,
+    //   // rendered in HTML via the `markdownit` class
+    //   content: md.render(res.body)
+    // };
   }
-})
+}
+
+// import Vue from 'vue';
+
+// export default Vue.extend({
+//   components: {
+//   },
+//   async asyncData(value) {
+//     console.log(value.params);
+//     // ${app.i18n.locale}
+//     // const fileContent = await 
import(`~/contents/zh/${value.params.slug}.md`)
+//     // const attr = fileContent.attributes
+//     // return {
+//     //   colors: attr.colors,
+//     //   date: attr.date,
+//     //   description: attr.description,
+//     //   id: attr.id,
+//     //   name: value.params.slug,
+//     //   related: attr.related,
+//     //   renderFunc: fileContent.vue.render,
+//     //   staticRenderFuncs: fileContent.vue.staticRenderFns,
+//     //   title: attr.title,
+//     //   urlTranslation: attr.urlTranslation
+//     // }
+//   }
+// })
 </script>
 
 <style>
diff --git a/pages/zh/_post.vue b/pages/zh/_post.vue
new file mode 100644
index 0000000..c37b973
--- /dev/null
+++ b/pages/zh/_post.vue
@@ -0,0 +1,29 @@
+<template>
+  <div v-html="content" class="post-inner"></div>
+</template>
+
+<script lang="ts">
+import fm from 'front-matter';
+import MarkdownIt from 'markdown-it';
+import Vue from 'vue';
+
+const md = new MarkdownIt();
+console.log(typeof md.render);
+
+export default Vue.extend({
+  components: {
+  },
+  async asyncData({params}) {
+    const fileContent = await import(`~/contents/zh/${params.post}.md`);
+    const res = fm(fileContent.default);
+    return {
+      attributes: res.attributes,
+      content: md.render(res.body)
+    };
+  }
+});
+
+</script>
+
+<style>
+</style>
diff --git a/store/index.js b/store/index.js
new file mode 100644
index 0000000..fd0dcb1
--- /dev/null
+++ b/store/index.js
@@ -0,0 +1,72 @@
+export const state = () => ({
+  filled: false,
+  docVersion: '',
+  ghVersion: '',
+  visibleAffix: false,
+  locale: 'en',
+  lang: {},
+  menu: {},
+  homepage: {},
+  adBlocked: false,
+  focusMode: false
+})
+
+export const mutations = {
+  toggle (state, key) {
+    state[key] = !state[key]
+  },
+  setDocVersion (state, docVersion) {
+    state.docVersion = docVersion
+  },
+  setGhVersion (state, ghVersion) {
+    state.ghVersion = ghVersion
+  },
+  setLocale (state, locale) {
+    state.locale = locale
+  },
+  setLang (state, lang) {
+    state.lang = lang
+  },
+  setMenu (state, menu) {
+    state.menu = menu
+  },
+  setHomepage (state, homepage) {
+    state.homepage = homepage
+  },
+  setFilled (state) {
+    state.filled = true
+  },
+  setAdBlocked (state, value) {
+    state.adBlocked = value
+  },
+  setFocusMode (state, value) {
+    state.focusMode = value
+  }
+}
+
+let _focusTimeout = null
+
+export const actions = {
+  async getLangData ({ commit }, locale) {
+    const lang = await this.$docs.get('/lang/' + locale)
+    commit('setLang', lang)
+    commit('setDocVersion', lang.docVersion)
+    const menu = await this.$docs.get('/menu/' + locale)
+    commit('setMenu', menu)
+    const homepage = await this.$docs.get('/homepage/' + locale)
+    commit('setHomepage', homepage)
+  },
+  focusMode ({ commit }) {
+    if (_focusTimeout) {
+      return
+    }
+    _focusTimeout = setTimeout(() => commit('setFocusMode', true), 1300)
+  },
+  clearFocusMode ({ commit }) {
+    if (_focusTimeout) {
+      clearTimeout(_focusTimeout)
+      _focusTimeout = null
+    }
+    commit('setFocusMode', false)
+  }
+}
diff --git a/tsconfig.json b/tsconfig.json
index 3537b80..2bf1c8e 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -13,6 +13,7 @@
     "sourceMap": true,
     "strict": true,
     "noEmit": true,
+    "noImplicitAny": false,
     "experimentalDecorators": true,
     "baseUrl": ".",
     "paths": {
@@ -25,7 +26,8 @@
     },
     "types": [
       "@types/node",
-      "@nuxt/types"
+      "@nuxt/types",
+      "./types/nuxt.d.ts"
     ]
   },
   "exclude": [
diff --git a/types/nuxt.d.ts b/types/nuxt.d.ts
new file mode 100644
index 0000000..3e4548e
--- /dev/null
+++ b/types/nuxt.d.ts
@@ -0,0 +1,23 @@
+import Vue from 'vue'
+import { Store } from 'vuex'
+
+// ComponentOptions is declared in types/options.d.ts
+declare module 'vue/types/options' {
+
+  interface NuxtContext<V extends Vue> {
+    app: V,
+    isClient: boolean,
+    isServer: boolean,
+    isStatic: boolean,
+    isDev: boolean,
+    store: Store<any>, // Consider vuex-typex in future
+    env: object,
+    params: object,
+    query: object
+  }
+
+  interface ComponentOptions<V extends Vue> {
+    asyncData?(context: NuxtContext<V>): Promise<object> | object
+    fetch?(context: NuxtContext<V>): Promise<object> | object
+  }
+}


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org
For additional commands, e-mail: commits-h...@echarts.apache.org

Reply via email to