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 d2fc73b2f68a1ee35adb1aba68f179f400979da3
Author: Ovilia <zwl.s...@gmail.com>
AuthorDate: Tue Apr 7 15:54:57 2020 +0800
WIP: post rounter
---
README.md | 4 +-
components/partials/Aside.vue | 159 ----------------------------------
components/partials/Sidebar.vue | 90 +++++++++++++++++++
contents/en/{line.md => bar.md} | 0
contents/en/enPosts.js | 1 -
contents/en/posts.js | 1 +
contents/zh/chart-types/bar.md | 3 +
contents/zh/{ => chart-types}/line.md | 0
contents/zh/posts.js | 10 +++
contents/zh/zhPosts.js | 1 -
layouts/README.md | 7 --
layouts/default.vue | 93 +++-----------------
nuxt.config.js | 37 ++++++--
package.json | 4 +-
pages/index.vue | 73 ----------------
pages/zh/_post.vue | 5 +-
16 files changed, 152 insertions(+), 336 deletions(-)
diff --git a/README.md b/README.md
index f583d55..fb7e13b 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,4 @@
-# echarts-booklet
-
-> ECharts booklet
+# echarts-handbook
## Build Setup
diff --git a/components/partials/Aside.vue b/components/partials/Aside.vue
deleted file mode 100644
index cb066d7..0000000
--- a/components/partials/Aside.vue
+++ /dev/null
@@ -1,159 +0,0 @@
-<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/Sidebar.vue b/components/partials/Sidebar.vue
new file mode 100644
index 0000000..00a1510
--- /dev/null
+++ b/components/partials/Sidebar.vue
@@ -0,0 +1,90 @@
+<template>
+ <div class="bd-sidebar border-bottom-0 col-md-3 col-xl-2 col-12">
+ active: {{ active }}. {{ posts }}
+ <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>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default {
+ props: ['active', 'posts'],
+ async asyncData() {
+ }
+};
+
+</script>
+
+<style>
+.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;
+}
+
+ .nav-link:hover {
+ text-decoration: underline;
+ }
+</style>
diff --git a/contents/en/line.md b/contents/en/bar.md
similarity index 100%
rename from contents/en/line.md
rename to contents/en/bar.md
diff --git a/contents/en/enPosts.js b/contents/en/enPosts.js
deleted file mode 100644
index d6d1738..0000000
--- a/contents/en/enPosts.js
+++ /dev/null
@@ -1 +0,0 @@
-export default [];
diff --git a/contents/en/posts.js b/contents/en/posts.js
new file mode 100644
index 0000000..7d50d7e
--- /dev/null
+++ b/contents/en/posts.js
@@ -0,0 +1 @@
+export default ['bar'];
diff --git a/contents/zh/chart-types/bar.md b/contents/zh/chart-types/bar.md
new file mode 100644
index 0000000..6a7c644
--- /dev/null
+++ b/contents/zh/chart-types/bar.md
@@ -0,0 +1,3 @@
+# bar
+
+this is bar.
diff --git a/contents/zh/line.md b/contents/zh/chart-types/line.md
similarity index 100%
rename from contents/zh/line.md
rename to contents/zh/chart-types/line.md
diff --git a/contents/zh/posts.js b/contents/zh/posts.js
new file mode 100644
index 0000000..6ed4426
--- /dev/null
+++ b/contents/zh/posts.js
@@ -0,0 +1,10 @@
+export default [
+ {
+ title: '图表类型',
+ dir: 'chart-types',
+ children: [
+ 'line',
+ 'bar'
+ ]
+ }
+];
diff --git a/contents/zh/zhPosts.js b/contents/zh/zhPosts.js
deleted file mode 100644
index 8775b96..0000000
--- a/contents/zh/zhPosts.js
+++ /dev/null
@@ -1 +0,0 @@
-export default ['line'];
diff --git a/layouts/README.md b/layouts/README.md
deleted file mode 100644
index cad1ad5..0000000
--- a/layouts/README.md
+++ /dev/null
@@ -1,7 +0,0 @@
-# LAYOUTS
-
-**This directory is not required, you can delete it if you don't want to use
it.**
-
-This directory contains your Application Layouts.
-
-More information about the usage of this directory in [the
documentation](https://nuxtjs.org/guide/views#layouts).
diff --git a/layouts/default.vue b/layouts/default.vue
index 347fa81..2df84c7 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -4,50 +4,9 @@
<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>
+ {{aaaa}}
+ <!-- <sidebar :posts="posts" active="bar" /> -->
+
<div class="bd-content col-md-9 col-xl-8 col-12 pb-md-3 pl-md-5">
<div class="post-content content">
<nuxt />
@@ -61,47 +20,21 @@
<script lang="ts">
import Vue from 'vue';
import Navigator from '~/components/partials/Navigator.vue';
+import Sidebar from '~/components/partials/Sidebar.vue';
-export default Vue.extend({
+export default {
components: {
- Navigator
- }
-})
-</script>
+ Navigator,
+ Sidebar
+ },
-<style>
-.bd-sidebar {
- padding: 20px;
+ asyncData: ({ req }) => ({
+ aaaa: (req ? req.headers['user-agent'] : (typeof navigator !== 'undefined'
? navigator.userAgent : 'No user agent (generated)'))
+ })
}
+</script>
-.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;
-}
-
- .nav-link:hover {
- text-decoration: underline;
- }
-
-
-
+<style>
.post-content {
margin: 20px 0;
}
diff --git a/nuxt.config.js b/nuxt.config.js
index 19d82cf..c22928b 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -1,5 +1,5 @@
-import enPosts from './contents/en/enPosts';
-import zhPosts from './contents/zh/zhPosts';
+import enPosts from './contents/en/posts';
+import zhPosts from './contents/zh/posts';
export default {
mode: 'universal',
@@ -86,13 +86,32 @@ export default {
}
},
generate: {
- routes: [
- '/zh/line'
- ]
- // routes: [
+ routes: []
+ .concat(generateRoutes(zhPosts, '/zh/'))
+ // .concat(enPosts.map(post => `/en/${post}`))
+ }
+}
+
+console.log(generateRoutes(zhPosts, '/zh/'));
- // ]
- // .concat(zhPosts.map(post => `/zh/${post}`))
- // .concat(enPosts.map(post => `/en/${post}`))
+/**
+ * Generate routes based info from 'contents/xx/xxPosts.js'
+ */
+function generateRoutes(postTree, dir, routes) {
+ if (routes == null) {
+ routes = [];
}
+
+ postTree.forEach(info => {
+ if (!info) {
+ return;
+ }
+ else if (typeof info === 'string') {
+ routes.push(dir + info);
+ }
+ else if (typeof info === 'object' && info.children) {
+ generateRoutes(info.children, dir + info.dir + '_', routes);
+ }
+ });
+ return routes;
}
diff --git a/package.json b/package.json
index 9080abc..e49696b 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
{
- "name": "echarts-booklet",
+ "name": "echarts-handbook",
"version": "1.0.0",
- "description": "ECharts booklet",
+ "description": "ECharts Handbook",
"author": "Ovilia",
"private": true,
"scripts": {
diff --git a/pages/index.vue b/pages/index.vue
index 148b8cc..d96587e 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -5,84 +5,11 @@
</template>
<script lang="ts">
-// 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 {
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>
-.container {
- margin: 0 auto;
- min-height: 100vh;
- display: flex;
- justify-content: center;
- align-items: center;
- text-align: center;
-}
-
-.title {
- font-family: 'Quicksand', 'Source Sans Pro', -apple-system,
BlinkMacSystemFont,
- 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
- display: block;
- font-weight: 300;
- font-size: 100px;
- color: #35495e;
- letter-spacing: 1px;
-}
-
-.subtitle {
- font-weight: 300;
- font-size: 42px;
- color: #526488;
- word-spacing: 5px;
- padding-bottom: 15px;
-}
-
-.links {
- padding-top: 15px;
-}
</style>
diff --git a/pages/zh/_post.vue b/pages/zh/_post.vue
index c37b973..61dab77 100644
--- a/pages/zh/_post.vue
+++ b/pages/zh/_post.vue
@@ -8,12 +8,15 @@ 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 posts = await import('~/contents/zh/posts.js');
+ // console.log('===================', posts)
+
+ params.post = params.post.split('_').join('/');
const fileContent = await import(`~/contents/zh/${params.post}.md`);
const res = fm(fileContent.default);
return {
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org
For additional commands, e-mail: commits-h...@echarts.apache.org
