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
The following commit(s) were added to refs/heads/master by this push: new f67e51d chore(navbar): build navbar from -www f67e51d is described below commit f67e51d641d787c923fd49eb5e897be932c42107 Author: Ovilia <zwl.s...@gmail.com> AuthorDate: Thu Nov 12 11:27:45 2020 +0800 chore(navbar): build navbar from -www --- app.html | 13 +++ build/generate.js | 96 +++++++++------------- components/partials/Navbar.vue | 22 +++++ components/partials/Navbar/en.js | 1 + components/partials/Navbar/zh.js | 1 + components/partials/Navigator.vue | 8 -- components/partials/Sidebar.vue | 38 ++++++--- configs/config.asf.js | 3 +- configs/config.dev.js | 3 +- .../chart-specificatio/bar/bi-directional-bar.md | 10 ++- contents/zh/posts.js | 2 +- layouts/default.vue | 20 +++-- nuxt.config.js | 16 ++-- package.json | 5 +- pages/helper/contributors.ts | 3 + pages/helper/post.ts | 6 +- 16 files changed, 141 insertions(+), 106 deletions(-) diff --git a/app.html b/app.html new file mode 100644 index 0000000..22c790b --- /dev/null +++ b/app.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<html {{ HTML_ATTRS }}> + <head {{ HEAD_ATTRS }}> + <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"> + <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/incubator-echarts-website@asf-site/zh/css/main.css"> + {{ HEAD }} + </head> + <body {{ BODY_ATTRS }}> + {{ APP }} + <script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script> + <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script> + </body> +</html> diff --git a/build/generate.js b/build/generate.js index d4d1f48..a3b3065 100644 --- a/build/generate.js +++ b/build/generate.js @@ -1,61 +1,43 @@ -const {exec} = require('child_process'); const fs = require('fs'); -console.log('[1/2] Running nuxt generate'); -exec('nuxt generate', (error, stdout, stderr) => { - if (error) { - console.error(error); - } - if (stderr) { - console.error(stderr); - } - if (stdout) { - console.log(stdout); - } - - console.log('[2/2] Updating nav.'); - setNav(); -}); - -function setNav() { - try { - const navContent = fs.readFileSync('../incubator-echarts-website/components/nav.html', 'utf-8'); - setNavDir('./dist', navContent); - } - catch (e) { - console.error(e); - console.error('Setting nav failed due to the error loading nav.html. Please make sure you have incubator-echarts-www and incubator-echarts-website project being under the same directory of this repo and have run `npm run build` under incubator-echarts-www.'); - } -} +const config = { + cdnThirdParty: { + jquery: 'https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js', + bootstrapCSS: 'https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css', + bootstrapJS: 'https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js' + }, + cdnPayRootMap: 'https://cdn.jsdelivr.net/gh/apache/incubator-echarts-website@asf-site' +}; + +let template = `<!DOCTYPE html> +<html {{ HTML_ATTRS }}> + <head {{ HEAD_ATTRS }}> + <link rel="stylesheet" type="text/css" href="{{ bootstrapCSS }}"> + <link rel="stylesheet" type="text/css" href="{{ cdnPayRootMap }}/zh/css/main.css"> + {{ HEAD }} + </head> + <body {{ BODY_ATTRS }}> + {{ APP }} + <script src="{{ jquery }}"></script> + <script src="{{ bootstrapJS }}"></script> + </body> +</html> +`; +template = template.replace(new RegExp('{{ bootstrapCSS }}', 'g'), config.cdnThirdParty.bootstrapCSS); +template = template.replace(new RegExp('{{ jquery }}', 'g'), config.cdnThirdParty.jquery); +template = template.replace(new RegExp('{{ bootstrapJS }}', 'g'), config.cdnThirdParty.bootstrapJS); +template = template.replace(new RegExp('{{ cdnPayRootMap }}', 'g'), config.cdnPayRootMap); + +fs.writeFileSync('./app.html', template, 'utf-8'); + -function setNavDir(path, navContent) { - let isDir; - try { - isDir = fs.lstatSync(path).isDirectory(); - } - catch (e) { - console.warn('File not found, ignored:', path); - return; - } - - if (isDir) { - const files = fs.readdirSync(path); - files.forEach(file => setNavDir(path + '/' + file, navContent)); - } - else { - try { - let content = fs.readFileSync(path, 'utf-8'); - if (content) { - content = content.replace( - '<div id="nav-placeholder">INJECT NAV HERE</div>', - navContent - ); - fs.writeFileSync(path, content, 'utf-8'); - } - } - catch (e) { - console.error('Error:', e); - } - - } + +updateNav('zh'); +updateNav('en'); + +function updateNav(locale) { + let navContent = fs.readFileSync(`../incubator-echarts-website/${locale}/nav.html`, 'utf-8'); + navContent = `module.exports = \`${navContent}\`\n`; + fs.writeFileSync(`./components/partials/Navbar/${locale}.js`, navContent, 'utf-8'); } + diff --git a/components/partials/Navbar.vue b/components/partials/Navbar.vue new file mode 100644 index 0000000..987df52 --- /dev/null +++ b/components/partials/Navbar.vue @@ -0,0 +1,22 @@ +<template> + <div v-html="navContent"></div> +</template> + +<script lang="ts"> +import Vue from 'vue'; +import zhNav from './Navbar/zh'; + +export default Vue.extend({ + components: { + + }, + computed: { + navContent() { + return this.$store.state.locale === 'zh' + ? zhNav + : ''; + } + } +}); + +</script> diff --git a/components/partials/Navbar/en.js b/components/partials/Navbar/en.js new file mode 100644 index 0000000..28be376 --- /dev/null +++ b/components/partials/Navbar/en.js @@ -0,0 +1 @@ +module.exports = `<nav role="navigation" class="navbar navbar-default navbar-fixed-top"><div class="container-fluid"><div class="navbar-header"><button type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="https://echarts.apache.org/en/index.html" class="navbar-brand">< [...] diff --git a/components/partials/Navbar/zh.js b/components/partials/Navbar/zh.js new file mode 100644 index 0000000..2a7fc84 --- /dev/null +++ b/components/partials/Navbar/zh.js @@ -0,0 +1 @@ +module.exports = `<nav role="navigation" class="navbar navbar-default navbar-fixed-top"><div class="container-fluid"><div class="navbar-header"><button type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="https://echarts.apache.org/zh/index.html" class="navbar-brand">< [...] diff --git a/components/partials/Navigator.vue b/components/partials/Navigator.vue deleted file mode 100644 index f7b29ec..0000000 --- a/components/partials/Navigator.vue +++ /dev/null @@ -1,8 +0,0 @@ -<template> - <div id="nav-placeholder">INJECT NAV HERE</div> -</template> -<style> -#nav-placeholder { - display: none; -} -</style> diff --git a/components/partials/Sidebar.vue b/components/partials/Sidebar.vue index 70b9df6..3ff41c1 100644 --- a/components/partials/Sidebar.vue +++ b/components/partials/Sidebar.vue @@ -3,7 +3,7 @@ <!-- active: {{ active }}. {{ posts }} --> <div class="bd-docs-nav"> <div class="bd-toc-item level0" - v-for="level0Post in $store.state.posts.zh" + v-for="level0Post in $store.state.posts[this.$store.state.locale]" :key="level0Post.dir" > <a class="bd-toc-link" @@ -41,8 +41,8 @@ @click="toggleChildren($event)" > {{ level2Post.title }} - <b-icon icon="chevron-down"></b-icon> - <b-icon icon="chevron-up"></b-icon> + <span class="glyphicon glyphicon-menu-down"></span> + <span class="glyphicon glyphicon-menu-up"></span> </a> <ul class="nav bd-sidenav level3" v-if="!level2Post.draft && level2Post.children" @@ -102,7 +102,7 @@ export default Vue.extend({ </script> -<style> +<style lang="scss"> .bd-sidebar { padding: 20px; } @@ -122,9 +122,18 @@ export default Vue.extend({ color: #222; } - .nav { - display: block; - } + .page-content { + .nav { + display: block; + } + + ul.nav { + padding-left: 0; + } + + .nav>li>a:focus, .nav>li>a:hover { + background-color: transparent; + } .nav .b-icon.bi { font-size: 90%; @@ -133,21 +142,24 @@ export default Vue.extend({ top: -2px; } - .nav-link { + .glyphicon { padding: 5px; - color: #444; + color: #ccc; cursor: pointer; + transform: scale(0.8); + top: 2px; + left: -5px; } - .nav-link .bi-chevron-up { + .nav-link .glyphicon-menu-up { display: none; } - .active .nav-link .bi-chevron-up { + .active .nav-link .glyphicon-menu-up { display: inline-block; } - .active .nav-link .bi-chevron-down { + .active .nav-link .glyphicon-menu-down { display: none; } @@ -182,4 +194,6 @@ export default Vue.extend({ .nav-link:hover { text-decoration: underline; } + } + </style> diff --git a/configs/config.asf.js b/configs/config.asf.js index 0ba1640..78bbd8a 100644 --- a/configs/config.asf.js +++ b/configs/config.asf.js @@ -1,5 +1,6 @@ export default { - rootPath: ' http://127.0.0.1:8080/', + base: '', + rootPath: 'http://127.0.0.1:8080', galleryViewPath: 'https://echarts.apache.org/examples/zh/view.html?c=', mainSitePath: 'https://echarts.apache.org/', optionPath: 'https://echarts.apache.org/option.html#', diff --git a/configs/config.dev.js b/configs/config.dev.js index 720d1c3..746a2ee 100644 --- a/configs/config.dev.js +++ b/configs/config.dev.js @@ -1,5 +1,6 @@ export default { - rootPath: '/echarts-handbook/dist', + base: '/echarts-handbook/dist', + rootPath: 'http://localhost:3000/echarts-handbook/dist', exampleViewPath: 'http://localhost/incubator-echarts-website/examples/zh/view.html?c=', mainSitePath: 'http://localhost/incubator-echarts-website/', optionPath: 'http://localhost/incubator-echarts-website/option.html#', diff --git a/contents/zh/best-practice/chart-specificatio/bar/bi-directional-bar.md b/contents/zh/best-practice/chart-specificatio/bar/bi-directional-bar.md index 95555e2..5b32991 100644 --- a/contents/zh/best-practice/chart-specificatio/bar/bi-directional-bar.md +++ b/contents/zh/best-practice/chart-specificatio/bar/bi-directional-bar.md @@ -1,15 +1,17 @@ +# 双向柱状图 + 双向柱状图多用于展示包含相反含义的数据的对比。其中图表的一个轴显示正在比较的类别,而另一轴代表对应的刻度值。 双向柱状图一般用于正负两份相反数据的对比。例如一周内个人收入和支出的统计,其中收入为正数,支出为负数。使用双向柱状图可以很明确的对收入和支出做出对比,并能从单个系列中分析收入和支出的数值及波动。 -<iframe max-width="830" width="100%" height="400" +<iframe max-width="830" width="100%" height="400" src="https://gallery.echartsjs.com/view-lite.html?cid=xS18jqmX4f"> </iframe> 双向柱状图可分为垂直方向的双向柱状图(如上图)和水平方向的双向柱状图(又叫正负条形图,如下图),例如一个客户满意度的调查数据分析中,有正面评价和负面评价,这很适合用正负条形图,所有数据在中间对齐,正面的评价数据分布在右侧,负面的评价数据分布在左侧。 -<iframe max-width="830" width="100%" height="400" +<iframe max-width="830" width="100%" height="400" src="https://gallery.echartsjs.com/view-lite.html?cid=xHJ1un374z"> </iframe> @@ -20,13 +22,13 @@ src="https://gallery.echartsjs.com/view-lite.html?cid=xS18jqmX4f"> 2、永远不要在0基线的右边画负值的水平条行图或在 0 基线的上边画负值的柱子,以免和常识违背造成误解。 -<img max-width="830" width="100%" height="100%" +<img max-width="830" width="100%" height="100%" src="${rootPath}/images/design/bar/bi-directional-bar01.jpg"> </img> 3、双向柱状图多用于展示含相反含义的数据,因此要避免不具有正负含义的数据使用而造成的误解。 如下图人口统计图表中使用双向柱状图,一侧绘制男性的数据,另一侧绘制女性的数据,只是单纯的两类不同数据的对比,并不存在负数。那么,此时将两个数据序列绘制成一个分组柱状图是更合适的。 -<img max-width="830" width="100%" height="100%" +<img max-width="830" width="100%" height="100%" src="${rootPath}/images/design/bar/bi-directional-bar02.jpg"> </img> diff --git a/contents/zh/posts.js b/contents/zh/posts.js index 88b3a74..53a599d 100644 --- a/contents/zh/posts.js +++ b/contents/zh/posts.js @@ -206,7 +206,7 @@ export default [{ dir: 'stacked-bar' }, { title: '双向柱状图', - dir: 'bi-directiona-bar' + dir: 'bi-directional-bar' }, { title: '分组柱状图', dir: 'grouped-bar' diff --git a/layouts/default.vue b/layouts/default.vue index 4539127..0c374bf 100644 --- a/layouts/default.vue +++ b/layouts/default.vue @@ -1,9 +1,9 @@ <template> <div> - <navigator /> + <navbar /> - <div class="container-fluid"> - <div class="row flex-xl-nowrap2"> + <div class="page-main"> + <div class="page-content single-page"> <sidebar /> <div class="bd-content col-sm-7 pl-sm-2 col-12"> @@ -12,20 +12,20 @@ </div> </div> </div> - </div> - <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/styles/github.min.css"> + <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/styles/github.min.css"> + </div> </div> </template> <script lang="ts"> -import Navigator from '~/components/partials/Navigator.vue' import Sidebar from '~/components/partials/Sidebar.vue' +import Navbar from '~/components/partials/Navbar.vue' export default { components: { - Navigator, - Sidebar + Sidebar, + Navbar }, computed: { @@ -41,6 +41,10 @@ export default { </script> <style lang="scss"> +.handbook-content { + margin-top: 50px; +} + .post-content { margin-bottom: 80px; } diff --git a/nuxt.config.js b/nuxt.config.js index 4f8eb89..d82b2cd 100644 --- a/nuxt.config.js +++ b/nuxt.config.js @@ -6,7 +6,7 @@ export default { mode: 'universal', router: { - base: config.rootPath + base: config.base }, /* @@ -48,12 +48,12 @@ export default { */ modules: [ // Doc: https://bootstrap-vue.js.org - [ - 'bootstrap-vue/nuxt', - { - icons: true - } - ], + // [ + // 'bootstrap-vue/nuxt', + // { + // icons: true + // } + // ], [ 'nuxt-i18n', { @@ -78,7 +78,7 @@ export default { */ build: { extractCSS: { - allChunks: true + // allChunks: true }, /* ** You can extend webpack config here diff --git a/package.json b/package.json index 974ce67..69d61e2 100644 --- a/package.json +++ b/package.json @@ -8,8 +8,7 @@ "dev": "nuxt", "build": "nuxt build", "start": "nuxt start", - "prepare": "node build/generate-contributors.js", - "generate": "nuxt generate", + "generate": "node build/generate-contributors.js && node build/generate && nuxt generate", "lint": "eslint --ext .js,.vue --ignore-path .gitignore ." }, "dependencies": { @@ -17,7 +16,7 @@ "bootstrap-vue": "^2.0.0", "markdown-it-anchor": "^6.0.0", "markdown-it-highlightjs": "^3.1.0", - "markdown-it-toc-done-right": "git+ssh://g...@github.com/Ovilia/markdown-it-toc-done-right.git", + "markdown-it-toc-done-right": "git+https://github.com/Ovilia/markdown-it-toc-done-right.git", "nuxt": "^2.0.0", "nuxt-i18n": "^6.7.2" }, diff --git a/pages/helper/contributors.ts b/pages/helper/contributors.ts index fc345b9..1cf7b11 100644 --- a/pages/helper/contributors.ts +++ b/pages/helper/contributors.ts @@ -1,4 +1,7 @@ export default { + "contents/zh/meta/get-started.md": [ + "Ovilia" + ], "contents/zh/get-started.md": [ "Ovilia" ], diff --git a/pages/helper/post.ts b/pages/helper/post.ts index f0d7f97..9412913 100644 --- a/pages/helper/post.ts +++ b/pages/helper/post.ts @@ -12,7 +12,6 @@ export async function getPostData (path: string, lang: string) { let content = fileContent.default; const url = `${config.rootPath}/${lang}/${path}`; - console.log(url); const md = new MarkdownIt({ html: true @@ -29,10 +28,11 @@ export async function getPostData (path: string, lang: string) { .use(toc, { containerId: 'toc', level: 2, - href: slug => { + hash: slug => { const hash = slug.split('#'); if (hash.length > 0) { - return url + '#' + hash[0]; + // Replace all spaces with '-' and encodeURI + return url + '#' + encodeURI(hash[0].trim().replace(new RegExp(' ', 'g'), '-')); } else { return url; --------------------------------------------------------------------- To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org For additional commands, e-mail: commits-h...@echarts.apache.org