You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by sh...@apache.org on 2021/08/31 02:51:22 UTC
[echarts-handbook] branch master updated: embed docsearch
This is an automated email from the ASF dual-hosted git repository.
shenyi pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/echarts-handbook.git
The following commit(s) were added to refs/heads/master by this push:
new 3292da0 embed docsearch
3292da0 is described below
commit 3292da05c6556103d0a73b5e863670ee1644d88f
Author: pissang <bm...@gmail.com>
AuthorDate: Tue Aug 31 10:51:17 2021 +0800
embed docsearch
---
app.html | 36 ++++++++++----
components/markdown/Example.vue | 4 +-
components/partials/Sidebar.vue | 72 ++++++++++++++++++++++-----
contents/en/basics/release-note/v5-feature.md | 12 ++---
contents/zh/basics/release-note/v5-feature.md | 12 ++---
pages/_.vue | 26 ++++++++--
types/nuxt.d.ts | 1 -
7 files changed, 122 insertions(+), 41 deletions(-)
diff --git a/app.html b/app.html
index f84d227..75bebba 100644
--- a/app.html
+++ b/app.html
@@ -1,13 +1,29 @@
<!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/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>
+ <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/echarts-website@asf-site/zh/css/main.css"
+ />
+ <link
+ rel="stylesheet"
+ href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.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>
+ <script
+ type="text/javascript"
+ src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"
+ ></script>
+ </body>
</html>
diff --git a/components/markdown/Example.vue b/components/markdown/Example.vue
index c1da380..bfc6457 100644
--- a/components/markdown/Example.vue
+++ b/components/markdown/Example.vue
@@ -1,7 +1,7 @@
<template>
<iframe
- :width="width"
- :height="height"
+ :width="width || 200"
+ :height="height || 200"
:src="finalSrc"
v-observe-visibility="visibilityChanged"
></iframe>
diff --git a/components/partials/Sidebar.vue b/components/partials/Sidebar.vue
index fbe0ade..487adda 100644
--- a/components/partials/Sidebar.vue
+++ b/components/partials/Sidebar.vue
@@ -1,11 +1,28 @@
<template>
- <div
- :class="
- `bd-sidebar col-sm-3 col-sm-9 col-md-2 col-md-10 ${
- sidebarOpen ? '' : 'closed'
- }`
- "
- >
+ <div :class="`bd-sidebar col-sm-3 col-md-2 ${sidebarOpen ? '' : 'closed'}`">
+ <div class="sidebar-search">
+ <input
+ id="handbook-search-intput"
+ type="search"
+ placeholder="Search Handbook"
+ />
+ <div class="search-icon">
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ class="h-6 w-6"
+ fill="none"
+ viewBox="0 0 24 24"
+ stroke="currentColor"
+ >
+ <path
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ stroke-width="2"
+ d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+ />
+ </svg>
+ </div>
+ </div>
<div class="bd-docs-nav">
<ul class="nav bd-sidenav nav-root level0">
<SidebarNavItem
@@ -104,6 +121,16 @@ export default Vue.extend({
}
})
}
+ // @ts-ignore
+ docsearch({
+ apiKey: '6ade5f1ff34e94690f9ea38cddcc2f55',
+ indexName: 'apache_echarts',
+ inputSelector: '#handbook-search-intput',
+ // algoliaOptions: {
+ // facetFilters: ['language:en']
+ // },
+ debug: false // Set debug to true if you want to inspect the dropdown
+ })
}
})
</script>
@@ -114,9 +141,8 @@ export default Vue.extend({
z-index: 1000;
top: 0;
left: 0;
- height: calc(100vh - 50px);
padding: 0;
- overflow-y: auto;
+ overflow: visible;
border-right: 1px solid #eee;
border-bottom: none;
@@ -124,6 +150,31 @@ export default Vue.extend({
display: none;
}
+ .bd-docs-nav {
+ overflow-x: hidden;
+ overflow-y: scroll;
+ height: calc(100vh - 50px);
+ }
+
+ .sidebar-search {
+ padding: 15px 20px;
+ border-bottom: 1px solid #eee;
+
+ .algolia-autocomplete {
+ @apply w-full;
+ }
+
+ input {
+ @apply shadow rounded-xl border-0 p-4 w-full;
+ }
+
+ .search-icon {
+ position: absolute;
+ right: 30px;
+ top: 28px;
+ }
+ }
+
@media (max-width: 768px) {
&.closed {
left: -280px;
@@ -143,10 +194,7 @@ export default Vue.extend({
@apply transition-all;
.bd-docs-nav {
- overflow-x: hidden;
- overflow-y: scroll;
width: 280px;
- height: calc(100vh - 50px);
}
.open-sidebar {
diff --git a/contents/en/basics/release-note/v5-feature.md b/contents/en/basics/release-note/v5-feature.md
index af41b22..858c345 100644
--- a/contents/en/basics/release-note/v5-feature.md
+++ b/contents/en/basics/release-note/v5-feature.md
@@ -16,8 +16,8 @@ The importance of animation to human cognition cannot be overstated. In our prev
Apache ECharts 5 adds support for dynamically sorted bar-racing and dynamically sorted line-racing charts to help developers easily create time-series charts that show changes in data over time and tell the evolution of data.
-<md-example data-src="bar-race-country" width="700" height="400"></md-example>
-<md-example data-src="line-race" width="700" height="400"></md-example>
+<md-example src="bar-race-country" width="700" height="400" />
+<md-example src="line-race" width="700" height="400" />
The dynamic sorting chart shows the derivation of different categories in the ranking over time. The developer can enable this effect in ECharts with a few simple configuration code.
@@ -93,13 +93,13 @@ Different styles of gauge pointers.
These upgrades not only allow developers to achieve cool effects with simpler configuration items, but also bring richer customization capabilities.
-<md-example src="gauge-clock" width="600" height="600"></md-example>
+<md-example src="gauge-clock" width="600" height="600" />
#### Round Corner
Apache ECharts 5 supports round corner for pie charts, sunburst charts, and treemap charts. Don't underestimate the simplicity of the rounded corners configuration, but combine them with other effects to create a more personalized visualization.
-<md-example src="sunburst-borderRadius" width="400" height="400"></md-example>
+<md-example src="sunburst-borderRadius" width="400" height="400" />
## Interactivity
@@ -179,11 +179,11 @@ Moreover, for developers with further accessibility needs, we also provide speci
ECharts 5 also provides a new feature of decals to help users further differentiate data by using patterns to assist with color representation.
-<md-example src="doc-example/aria-decal-simple" width="600" height="350"></md-example>
+<md-example src="doc-example/aria-decal-simple" width="600" height="350" />
In addition, decal patterns can also help in some other scenarios, such as: helping to better distinguish data in printed materials like newspapers and books that have only a single color or very few colors; using graphical elements to facilitate a more intuitive understanding of the data by the user.
-<md-example src="doc-example/aria-decal-newspaper" width="600" height="350"></md-example>
+<md-example src="doc-example/aria-decal-newspaper" width="600" height="350" />
## Summary
diff --git a/contents/zh/basics/release-note/v5-feature.md b/contents/zh/basics/release-note/v5-feature.md
index c148d9c..db90b1c 100644
--- a/contents/zh/basics/release-note/v5-feature.md
+++ b/contents/zh/basics/release-note/v5-feature.md
@@ -16,8 +16,8 @@ Apache ECharts 始终致力于让开发者以更方便的方式创造灵活丰
Apache ECharts 5 新增支持动态排序柱状图（bar-racing）以及动态排序折线图（line-racing），帮助开发者方便地创建带有时序性的图表，展现数据随着时间维度上的变化，讲述数据的演变过程。
-<md-example src="bar-race-country" width="700" height="400"></md-example>
-<md-example src="line-race" width="700" height="400"></md-example>
+<md-example src="bar-race-country" width="700" height="400" />
+<md-example src="line-race" width="700" height="400" />
动态排序图展现了不同的类目随着时间在排名上的衍变。而开发者只需要通过几行简单的配置项就可以在 ECharts 中开启这样的效果。
@@ -93,13 +93,13 @@ Apache ECharts 5 带来了适于表达时间标签刻度的时间轴。时间轴
这些升级，不仅可以让开发者用更简单的配置项实现酷炫的效果，而且带来了更丰富的定制能力。
-<md-example src="gauge-clock" width="600" height="600"></md-example>
+<md-example src="gauge-clock" width="600" height="600" />
#### 扇形圆角
圆角可以带来更美观而柔和的视觉，也能够赋予更多的创造力。Apache ECharts 5 支持了饼图、旭日图、矩形树图的扇形圆角。可不要小看了简单的圆角配置项，合理地搭配其他的效果，就可以形成更具个性的的可视化作品。
-<md-example src="sunburst-borderRadius" width="400" height="400"></md-example>
+<md-example src="sunburst-borderRadius" width="400" height="400" />
## 交互能力
@@ -179,11 +179,11 @@ Apache ECharts 一直非常重视无障碍设计，我们希望让视觉障碍
ECharts 5 还新增提供了贴花的功能，用图案辅助颜色表达，进一步帮助用户区分数据。
-<md-example src="doc-example/aria-decal-simple" width="600" height="350"></md-example>
+<md-example src="doc-example/aria-decal-simple" width="600" height="350" />
此外，贴花图案还能在一些其他的场景下提供帮助，比如：在报纸、书籍之类只有单色或者非常少的颜色的印刷品中，帮助更好地区分数据；用图形元素方便用户对数据产生更直观的理解等。
-<md-example src="doc-example/aria-decal-newspaper" width="600" height="350"></md-example>
+<md-example src="doc-example/aria-decal-newspaper" width="600" height="350" />
## 小结
diff --git a/pages/_.vue b/pages/_.vue
index 5704dde..9f2db52 100644
--- a/pages/_.vue
+++ b/pages/_.vue
@@ -13,7 +13,13 @@
</li>
</ul>
</div>
- <post-content :content="html"></post-content>
+ <!--
+ 'nuxt-content' class for DocSearch
+ https://github.com/algolia/docsearch-configs/blob/master/configs/apache_echarts.json
+ -->
+ <div class="nuxt-content">
+ <post-content :content="html"></post-content>
+ </div>
</div>
<contributors :path="postPath"></contributors>
</div>
@@ -77,7 +83,7 @@ function slugify(s: string) {
)
}
-export default Vue.extend({
+export default {
components: {
Contributors,
PostContent
@@ -118,7 +124,19 @@ export default Vue.extend({
// @ts-ignore
this._lazyload && this._lazyload.destroy()
},
- async asyncData({ $content, params, i18n, $el }: any) {
+ head() {
+ return {
+ meta: [
+ {
+ hid: 'docsearch:language',
+ name: 'docsearch:language',
+ // @ts-ignore
+ content: this.$i18n.locale
+ }
+ ]
+ }
+ },
+ async asyncData({ params, i18n }: any) {
const postPath = `${i18n.locale}/${params.pathMatch}`
const fileContent = await import(`~/contents/${postPath}.md`)
const content = replaceVars(
@@ -150,7 +168,7 @@ export default Vue.extend({
return { html: md.render(content), postPath }
}
-})
+}
</script>
<style lang="scss"></style>
diff --git a/types/nuxt.d.ts b/types/nuxt.d.ts
index a04cd2e..50900af 100644
--- a/types/nuxt.d.ts
+++ b/types/nuxt.d.ts
@@ -11,7 +11,6 @@ declare module 'vue/types/options' {
isDev: boolean
store: Store<any> // Consider vuex-typex in future
env: object
- $content: Function
params: object
query: object
}
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org