You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@iotdb.apache.org by su...@apache.org on 2020/02/03 09:52:19 UTC
[incubator-iotdb-website] branch master updated: [IOTDB-450] Add
system design page (#59)
This is an automated email from the ASF dual-hosted git repository.
sunzesong pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-iotdb-website.git
The following commit(s) were added to refs/heads/master by this push:
new 993ca3f [IOTDB-450] Add system design page (#59)
993ca3f is described below
commit 993ca3fddd4d70e88456e99e9ce6eafffcdd6c5e
Author: Zesong Sun <sz...@mails.tsinghua.edu.cn>
AuthorDate: Mon Feb 3 17:52:11 2020 +0800
[IOTDB-450] Add system design page (#59)
* Add system design page
* Revert some changes
---
src/components/Global.vue | 5 +
src/components/NavBar.vue | 6 +-
src/router/index.js | 12 +-
src/views/Community.vue | 19 +--
src/views/Development.vue | 10 +-
src/views/LatestDoc.vue | 113 -------------
src/views/SystemDesign.vue | 410 +++++++++++++++++++++++++++++++++++++++++++++
7 files changed, 439 insertions(+), 136 deletions(-)
diff --git a/src/components/Global.vue b/src/components/Global.vue
index c9f0374..1aa7ecc 100644
--- a/src/components/Global.vue
+++ b/src/components/Global.vue
@@ -33,6 +33,10 @@
}
};
+ const SYSTEM_DESIGN_SUPPORT_VERSION = {
+ "progress": {}
+ };
+
function isReadyForPrerender(html) {
const $ = cheerio.load(html);
$('ul a').each(function (i, elem) {
@@ -48,6 +52,7 @@
downloadSparkConnector,
DEFAULT_VERSION,
SUPPORT_VERSION,
+ SYSTEM_DESIGN_SUPPORT_VERSION,
PROGRESS_STR,
DOC_ENG_PREFIX,
DOC_CHN_PREFIX,
diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index 6c08085..5f4e27f 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -31,6 +31,9 @@
<li class="nav-item">
<router-link :to="defaultDocLink" class="nav-link"><span>Documents</span></router-link>
</li>
+ <li class="nav-item">
+ <router-link :to="defaultDesignLink" class="nav-link"><span>System Design</span></router-link>
+ </li>
<li class="dropdown">
<router-link to="/Contributor" class="dropdown-toggle" data-toggle="dropdown"
role="button"
@@ -110,7 +113,8 @@
{"url": "/Development/Tsfile", "content": "Changelist of TsFile"},
{"url": "/Development/RPC", "content": "Changelist of RPC"}
],
- defaultDocLink: "/Documents/" + Global.DEFAULT_VERSION + "/chap1/sec1"
+ defaultDocLink: "/Documents/" + Global.DEFAULT_VERSION + "/chap1/sec1",
+ defaultDesignLink: "/SystemDesign/" + Global.PROGRESS_STR + "/chap0/sec1"
}
},
}
diff --git a/src/router/index.js b/src/router/index.js
index 6b9c115..8493785 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -3,12 +3,12 @@ import Router from 'vue-router'
import Home from '@/views/Home'
import Download from '@/views/Download'
import Documents from '@/views/Documents'
+import SystemDesign from '@/views/SystemDesign'
import Tools from '@/views/Tools'
import Community from '@/views/Community'
import Development from '@/views/Development'
import NotFound from "../views/NotFound"
import SingleTool from "../views/SingleTool"
-import LatestDoc from "../views/LatestDoc"
import Contributor from "@/views/Contributor"
Vue.use(Router);
@@ -26,16 +26,16 @@ export default new Router({
component: Download
},
{
- path: '/Documents/:doc',
- name: 'Documents',
- component: LatestDoc
- },
- {
path: '/Documents/:version/:chapter?/:section?',
name: 'UserGuideDocuments',
component: Documents
},
{
+ path: '/SystemDesign/:version/:chapter?/:section?',
+ name: 'SystemDesignDocuments',
+ component: SystemDesign
+ },
+ {
path: '/Tools',
name: 'Tools',
component: Tools
diff --git a/src/views/Community.vue b/src/views/Community.vue
index 56ba1b8..4192d99 100644
--- a/src/views/Community.vue
+++ b/src/views/Community.vue
@@ -25,7 +25,7 @@
import SideBar from '../components/SideBar'
import markdown from 'vue-markdown'
import axios from 'axios'
- import Golbal from '../components/Global'
+ import Global from '../components/Global'
import LoadingBar from '../components/Loading'
export default {
@@ -56,15 +56,12 @@
},
fetchData() {
const dict = {
- "Powered By": Golbal.SUPPORT_VERSION[Golbal.DEFAULT_VERSION]['doc-prefix'] +
- Golbal.SUPPORT_VERSION[Golbal.DEFAULT_VERSION]['branch'] +
- "/docs/Community-Powered%20By.md",
- "Project Committers": Golbal.SUPPORT_VERSION[Golbal.DEFAULT_VERSION]['doc-prefix'] +
- Golbal.SUPPORT_VERSION[Golbal.DEFAULT_VERSION]['branch'] +
- "/docs/Community-Project%20Committers.md",
- "History & Vision": Golbal.SUPPORT_VERSION[Golbal.DEFAULT_VERSION]['doc-prefix'] +
- Golbal.SUPPORT_VERSION[Golbal.DEFAULT_VERSION]['branch'] +
- "/docs/Community-History%26Vision.md",
+ "Powered By": Global.SUPPORT_VERSION[Global.DEFAULT_VERSION]['doc-prefix'] +
+ Global.SUPPORT_VERSION[Global.PROGRESS_STR]['branch'] +
+ "/docs/Community/Community-Powered%20By.md",
+ "History & Vision": Global.SUPPORT_VERSION[Global.DEFAULT_VERSION]['doc-prefix'] +
+ Global.SUPPORT_VERSION[Global.PROGRESS_STR]['branch'] +
+ "/docs/Community/Community-History%26Vision.md",
};
const content = this.content();
let url = null;
@@ -82,7 +79,7 @@
})
},
parse(html){
- return Golbal.isReadyForPrerender(html)
+ return Global.isReadyForPrerender(html)
}
}
}
diff --git a/src/views/Development.vue b/src/views/Development.vue
index 97497d2..defd980 100644
--- a/src/views/Development.vue
+++ b/src/views/Development.vue
@@ -55,19 +55,19 @@
fetchData() {
const dict = {
"Contributing": Global.SUPPORT_VERSION[Global.PROGRESS_STR]['doc-prefix'] +
- Global.SUPPORT_VERSION[Global.PROGRESS_STR]['branch'] + "/docs/Development-Contributing.md",
+ Global.SUPPORT_VERSION[Global.PROGRESS_STR]['branch'] + "/docs/Development/Development-Contributing.md",
"Contributing-Document": Global.SUPPORT_VERSION[Global.PROGRESS_STR]['doc-prefix'] +
- Global.SUPPORT_VERSION[Global.PROGRESS_STR]['branch'] + "/docs/Development-Document.md",
+ Global.SUPPORT_VERSION[Global.PROGRESS_STR]['branch'] + "/docs/Development/Development-Document.md",
"IDE": Global.SUPPORT_VERSION[Global.PROGRESS_STR]['doc-prefix'] +
- Global.SUPPORT_VERSION[Global.PROGRESS_STR]['branch'] + "/docs/Development-IDE.md",
+ Global.SUPPORT_VERSION[Global.PROGRESS_STR]['branch'] + "/docs/Development/Development-IDE.md",
"Tsfile": Global.SUPPORT_VERSION[Global.PROGRESS_STR]['doc-prefix'] +
Global.SUPPORT_VERSION[Global.PROGRESS_STR]['branch'] + "/tsfile/format-changelist.md",
"RPC": Global.SUPPORT_VERSION[Global.PROGRESS_STR]['doc-prefix'] +
Global.SUPPORT_VERSION[Global.PROGRESS_STR]['branch'] + "/service-rpc/rpc-changelist.md",
"Development-Chinese": Global.SUPPORT_VERSION[Global.PROGRESS_STR]['doc-prefix'] +
- Global.SUPPORT_VERSION[Global.PROGRESS_STR]['branch'] + "/docs/Development-Chinese.md",
+ Global.SUPPORT_VERSION[Global.PROGRESS_STR]['branch'] + "/docs/Development/Development-Chinese.md",
"Development-VoteRelease": Global.SUPPORT_VERSION[Global.PROGRESS_STR]['doc-prefix'] +
- Global.SUPPORT_VERSION[Global.PROGRESS_STR]['branch'] + "/docs/Development-VoteRelease.md",
+ Global.SUPPORT_VERSION[Global.PROGRESS_STR]['branch'] + "/docs/Development/Development-VoteRelease.md",
};
const content = this.content();
let url = null;
diff --git a/src/views/LatestDoc.vue b/src/views/LatestDoc.vue
deleted file mode 100644
index e5ecfbc..0000000
--- a/src/views/LatestDoc.vue
+++ /dev/null
@@ -1,113 +0,0 @@
-<template>
- <div>
- <div class="container">
- <div class="row markdown-body">
- <div class="col-sm-8">
- <loading v-if="seen"></loading>
- <language-button v-if="seen==false" :eng="eng" @click.native="switchLanguage()" />
- <vue-markdown v-if="seen==false" v-bind:source="md" :toc="true" :toc-anchor-link-symbol="toc" :postrender="parse"></vue-markdown>
- </div>
- <my-sidebar/>
- </div>
- </div>
- <br>
- <br>
- <br>
- <footer-bar/>
- </div>
-</template>
-
-<script>
- import Footer from "../components/FooterFixed"
- import SideBar from '../components/SideBar'
- import markdown from 'vue-markdown'
- import axios from 'axios'
- import Global from '../components/Global'
- import LoadingBar from '../components/Loading'
- import LanguageButton from '../components/LanguageButton'
-
- export default {
- name: "Community",
- components: {
- 'footer-bar': Footer,
- 'my-sidebar': SideBar,
- 'vue-markdown': markdown,
- 'loading': LoadingBar,
- 'language-button': LanguageButton
- },
- data() {
- return {
- msg: 'Welcome to Community Page',
- md: "",
- toc: "",
- seen: true,
- eng: true
- }
- },
- created() {
- this.fetchData();
- },
- watch: {
- '$route': 'fetchData'
- },
- methods: {
- content: function () {
- return this.$route.params.doc
- },
- switchLanguage() {
- this.eng = this.eng !== true;
- this.fetchData();
- },
- fetchData() {
- const docLanguageUrl = this.eng ? Global.DOC_ENG_PREFIX : Global.DOC_CHN_PREFIX;
- const dict = {
- "Quick Start": Global.SUPPORT_VERSION[Global.DEFAULT_VERSION]['doc-prefix'] +
- Global.SUPPORT_VERSION[Global.DEFAULT_VERSION]['branch'] + docLanguageUrl +
- "/QuickStart.md",
- "Frequently asked questions": Global.SUPPORT_VERSION[Global.DEFAULT_VERSION]['doc-prefix'] +
- Global.SUPPORT_VERSION[Global.DEFAULT_VERSION]['branch'] + docLanguageUrl +
- '/Frequently%20asked%20questions.md',
- };
- const content = this.content();
- let url = null;
- if (content in dict) {
- url = dict[content];
- } else {
- this.$router.push('/404');
- }
- const pointer = this;
- this.seen = true;
- axios.get(url)
- .then(function (response) {
- pointer.md = response.data;
- pointer.seen = false;
- })
- },
- parse(html){
- return Global.isReadyForPrerender(html)
- }
- }
- }
-</script>
-<style scoped>
- h1, h2 {
- font-weight: normal;
- }
-
- body {
- font-family: Georgia, "Times New Roman", Times, serif;
- color: #555;
- }
-
- .pager > li > a {
- width: 140px;
- padding: 10px 20px;
- text-align: center;
- border-radius: 30px;
- }
-
- .blog-footer p:last-child {
- margin-bottom: 0;
- }
-
-</style>
diff --git a/src/views/SystemDesign.vue b/src/views/SystemDesign.vue
new file mode 100644
index 0000000..d2cf2fe
--- /dev/null
+++ b/src/views/SystemDesign.vue
@@ -0,0 +1,410 @@
+<template>
+ <div>
+ <div class="main container-fluid">
+ <div class="row" style="margin: 0 0;height:90%">
+ <!--sidebar part-->
+ <div class="col-xs-3 sidebar">
+ <div class="version text-center">
+ <div class="center-block" style="width: 80%;">
+ <select class="version-select" v-model="selectVersion">
+ <option v-for="entry in versionList" :value="entry.text">
+ {{entry.text}}
+ </option>
+ </select>
+ </div>
+ </div>
+ <div id="text-catalogue" class="content center-block" style="overflow: auto">
+ <div v-for="item in result">
+ <h5 style="font-size: 16px" data-toggle="collapse" v-if="typeof(item[0]) != 'undefined'"
+ :data-target="item[0].replace(/ /g, '').replace(/:/g, '')" :class="item[0].slice(1)">
+ {{item[0]}}
+ </h5>
+ <ul class="list-group collapse in" v-if="typeof(item[0]) != 'undefined'"
+ :id="item[0].slice(1).replace(/ /g, '').replace(/:/g, '')">
+ <li v-for="chapter in item" :class="item[0].slice(1)" v-if="chapter.startsWith('##')"
+ @click="changeSectionNavContent($event)">
+ {{chapter.slice(2)}}
+ </li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ <!--content part-->
+ <div class="col-xs-9 fixed-middle">
+ <ul class="breadcrumb direct" id="bread-chapter">
+ <li><a style='color:#fcac45;'>{{text}}</a></li>
+ <li><a style='color:#fcac45;'>{{chapter}}</a></li>
+ </ul>
+ <div class="text-field" id="text-content">
+ <!--<language-button :eng="eng" @click.native="switchLanguage()"/>-->
+ <vue-markdown class="markdown-area" :source="document" :toc="true" :toc-anchor-link="true"
+ toc-anchor-link-symbol=""></vue-markdown>
+ <p class="find-mistake">This documentation is open source. Find mistakes? Want to contribute? <span
+ class="go-to-development" @click="goToDevelopment()">Go for it.</span></p>
+ </div>
+ <div class="doc-footer">
+ <span>Copyright © 2019 The Apache Software Foundation. Apache and the Apache feather logo are trademarks of The Apache Software Foundation.</span>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ </div>
+</template>
+
+<script>
+ import MarkDown from "vue-markdown"
+ import axios from 'axios'
+ import Global from '../components/Global'
+ import LanguageButton from '../components/LanguageButton'
+
+ export default {
+ name: "SystemDesign",
+ data() {
+ return {
+ versionList: [],
+ selectVersion: {},
+ document: "",
+ result: [],
+ version: "",
+ chapter: "",
+ section: "",
+ text: "",
+ eng: true
+ }
+ },
+ components: {
+ 'vue-markdown': MarkDown,
+ 'language-button': LanguageButton
+ },
+ created() {
+ this.init();
+ this.generateCatalogue();
+ this.fetchData();
+ },
+ watch: {
+ '$route': 'fetchData',
+ '$route.params.version': 'updateDocument',
+ '$route.params.chapter': 'updateDocument',
+ '$route.params.section': 'updateDocument',
+ selectVersion: function (newVersion) {
+ let version = "progress";
+ if (newVersion.startsWith("V")) {
+ version = newVersion.substr(1);
+ }
+ let url = "/SystemDesign/" + version + "/chap0/sec1";
+ this.$router.push(url);
+ }
+ },
+ methods: {
+ init() {
+ for (let key in Global.SYSTEM_DESIGN_SUPPORT_VERSION) {
+ this.versionList.push({
+ text: Global.SUPPORT_VERSION[key]['text'],
+ url: '/SystemDesign/' + key + '/chap1/sec1'
+ })
+ }
+ let version = this.getVersion();
+ if (version === "progress") {
+ this.selectVersion = "In progress";
+ } else {
+ this.selectVersion = "V" + version;
+ }
+ this.text = this.getVersionString();
+ },
+ getVersionString() {
+ let version = this.$route.params.version;
+ if (version in Global.SUPPORT_VERSION) {
+ return Global.SUPPORT_VERSION[version]['text']
+ }
+ return "";
+ },
+ changeSectionNavContent: function (event) {
+ let chapter = event.currentTarget.className;
+ let section = event.currentTarget.innerText;
+ this.$route.params.chapter = "chap" + chapter.replace(/[^0-9]/ig, "");
+ this.$route.params.section = "sec" + section.replace(/[^0-9]/ig, "");
+ let url = "/SystemDesign/" + this.getVersion() + "/" + this.getChapter() + "/" + this.getSection();
+ this.$router.push(url);
+ },
+ // get the version
+ getVersion() {
+ return this.$route.params.version;
+ },
+ // get the chapter
+ getChapter() {
+ return this.$route.params.chapter;
+ },
+ // get the section
+ getSection() {
+ return this.$route.params.section;
+ },
+ updateDocument() {
+ if (this.text !== this.getVersionString()) {
+ this.text = this.getVersionString();
+ location.reload();
+ }
+ },
+ switchLanguage() {
+ this.eng = this.eng !== true;
+ this.fetchData();
+ },
+ // use version and section to render markdown
+ fetchData() {
+ const docLanguageUrl = Global.DOC_CHN_PREFIX;
+ let version = this.getVersion();
+ if (version in Global.SUPPORT_VERSION) {
+ let chapter = Number(this.getChapter().substr(4));
+ // this is for special case of branch v0.8.x
+ if (version === "0.8.x") {
+ chapter -= 1
+ }
+ let section = Number(this.getSection().substr(3));
+ let url = Global.SUPPORT_VERSION[version]['doc-prefix'] + Global.SUPPORT_VERSION[version]['branch'] +
+ Global.DOC_ENG_PREFIX + "/SystemDesign/" + Global.SUPPORT_VERSION[version]['content'];
+ axios.get(url).then(() => {
+ this.chapter = this.result[chapter][0].substr(2);
+ this.section = this.result[chapter][section].trim().substr(3);
+ url = Global.SUPPORT_VERSION[version]['doc-prefix'] + Global.SUPPORT_VERSION[version]['branch'] +
+ docLanguageUrl + "/SystemDesign/" + this.chapter.substr(8).replace(': ', '-') + "/" + this.section + ".md";
+ axios.get(url)
+ .then((response) => {
+ this.document = response.data;
+ document.getElementById("text-content").scrollTop = 0;
+ })
+ .catch(function (error) {
+ console.log(error);
+ });
+ });
+ } else {
+ this.$router.push('/404');
+ }
+ },
+ //generate the sidebar information when version changes
+ generateCatalogue() {
+ this.result = [];
+ let version = this.getVersion();
+ if (version in Global.SUPPORT_VERSION) {
+ let url = Global.SUPPORT_VERSION[version]['doc-prefix'] + Global.SUPPORT_VERSION[version]['branch'] +
+ Global.DOC_ENG_PREFIX + "/SystemDesign/" + Global.SUPPORT_VERSION[version]['content'];
+ axios.get(url).then((response) => {
+ let rows = response.data.split("\n");
+ let i = -1;
+ for (let item of rows) {
+ if (item.startsWith("#")) {
+ this.result.push([item]);
+ i++;
+ } else if (item.startsWith("*")) {
+ this.result[i].push("##" + item.substr(1));
+ }
+ }
+ });
+ } else {
+ this.$router.push('/404');
+ }
+ },
+ goToDevelopment() {
+ this.$router.push('/Development/Contributing-Document');
+ }
+ }
+ }
+
+</script>
+
+<style scoped>
+ #bread-chapter {
+ margin-left: 2%;
+ margin-right: 17%;
+ max-width: 900px;
+ left: 25%;
+ }
+
+ .text-field {
+ position: fixed;
+ overflow-x: hidden;
+ overflow-y: auto;
+ top: 120px;
+ left: 25%;
+ bottom: 50px;
+ margin-left: 2%;
+ margin-right: 15%;
+ max-width: 1000px;
+ font-size: 16px;
+ }
+
+ .fixed-middle {
+ position: fixed;
+ top: 70px;
+ left: 24%;
+ }
+
+ .fixed-middle > ul {
+ height: 36px;
+ }
+
+ .main {
+ padding: 0;
+ }
+
+ .direct > li > a {
+ color: #fcac45;
+ }
+
+ .find-mistake {
+ margin-top: 50px;
+ text-align: center;
+ color: #fcac45;
+ }
+
+ .go-to-development {
+ text-decoration: underline;
+ cursor: pointer;
+ }
+
+ .sidebar {
+ position: fixed;
+ top: 65px;
+ bottom: 0;
+ left: 0;
+ z-index: 1000;
+ display: block;
+ overflow-x: hidden;
+ overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
+ background: #222222;
+ padding: 0 0;
+ line-height: 8px;
+ }
+
+ .version-select {
+ border: none;
+ outline: none;
+ border-radius: 5px;
+ width: 100%;
+ height: 40px;
+ margin: 30px 0;
+ background: #fcac45;
+ }
+
+ select::-ms-expand {
+ display: none;
+ }
+
+ .list-group > li {
+ cursor: pointer;
+ margin-left: 10px;
+ }
+
+ h5 {
+ color: #fcac45;
+ }
+
+ .list-group > li {
+ list-style-type: none;
+ color: #eff0f8;
+ margin-bottom: 5px;
+ padding: 5px;
+ max-width: 80%;
+
+ }
+
+ .list-group > li:hover {
+ background: grey;
+ border: 5px grey;
+ border-radius: 5px;
+ }
+
+ .direct > li > a:link {
+ color: #fcac45;
+ }
+
+ .version {
+ border-bottom: 1px solid #666666;
+ }
+
+ button {
+ height: 40px;
+ background: #fcac45;
+ }
+
+ .content.center-block {
+ margin-left: 20px;
+ top: 120px;
+ bottom: 50px;
+ }
+
+ .text-field > .markdown-area > p {
+ width: 50px;
+ }
+
+ div.mark-down > p > img {
+ width: 50px;
+ }
+
+ .doc-footer {
+ position: fixed;
+ width: 76%;
+ bottom: 0px;
+ right: 0px;
+ padding-top: 10px;
+ padding-bottom: 10px;
+ text-align: center;
+ color: #fff;
+ background: #222222;
+ }
+
+ @media (min-width: 768px) {
+ .fixed-middle {
+ top: 170px;
+ }
+
+ #text-content {
+ top: 210px;
+ }
+
+ .sidebar {
+ top: 150px;
+ }
+
+ .content.center-block {
+ top: 222px;
+ }
+ }
+
+ @media (min-width: 990px) {
+ .fixed-middle {
+ top: 120px;
+ }
+
+ #text-content {
+ top: 160px;
+ }
+
+ .sidebar {
+ top: 100px;
+ }
+
+ .content.center-block {
+ top: 180px;
+ }
+ }
+
+ @media (min-width: 1200px) {
+ .fixed-middle {
+ top: 70px;
+ }
+
+ #text-content {
+ top: 110px;
+ }
+
+ .sidebar {
+ top: 50px;
+ }
+
+ .content.center-block {
+ top: 122px;
+ }
+ }
+
+
+</style>