You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by ov...@apache.org on 2020/11/12 03:32:40 UTC
[incubator-echarts-handbook] branch master updated: chore(navbar):
build navbar from -www
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 <zw...@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://git@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-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org