From c2e5ca7db0740796c17ce75a66b9a6637fb17253 Mon Sep 17 00:00:00 2001
From: liuboaibc <kukudehero@gmail.com>
Date: Tue, 18 Aug 2020 17:30:06 +0800
Subject: [PATCH] add notice and tabs

---
 assets/scss/common.scss                    | 109 +++++++++++++++++++++
 config/_default/config.toml                |   2 +-
 content/en/docs/introduction/advantages.md |  34 +++++++
 i18n/en.yaml                               |   8 ++
 layouts/docs/list.html                     |   2 +-
 layouts/docs/single.html                   |   2 +
 layouts/shortcodes/notice.html             |   5 +
 layouts/shortcodes/tab.html                |   3 +
 layouts/shortcodes/tabs.html               |   4 +
 static/js/markdown-tab.js                  |  25 +++++
 10 files changed, 192 insertions(+), 2 deletions(-)
 create mode 100644 layouts/shortcodes/notice.html
 create mode 100644 layouts/shortcodes/tab.html
 create mode 100644 layouts/shortcodes/tabs.html
 create mode 100644 static/js/markdown-tab.js

diff --git a/assets/scss/common.scss b/assets/scss/common.scss
index 87528ca1c..6a3231c55 100644
--- a/assets/scss/common.scss
+++ b/assets/scss/common.scss
@@ -225,3 +225,112 @@ section {
     }
   }
 }
+
+.notices {
+  margin: 20px 0;
+  position: relative;
+
+  p {
+    padding: 0 10px;
+    margin: 0!important;
+    height: 30px;
+    line-height: 30px;
+    color: #ffffff;
+  }
+
+  div {
+    padding: 10px;
+  }
+}
+
+.notices.note {
+  p {
+    background: #6ab0de
+  }
+  div {
+    background: #e7f2fa;
+  }
+}
+
+.notices.tip {
+  p {
+    background: #78C578
+  }
+  div {
+    background: #E6F9E6;
+  }
+}
+
+.notices.info {
+  p {
+    background: #F0B37E
+  }
+  div {
+    background: #FFF2DB;
+  }
+}
+
+.notices.warning {
+  p {
+    background: #E06F6C
+  }
+  div {
+    background: #FAE2E2;
+  }
+}
+
+/* content tabs */
+.code-tabs {
+  border: 1px solid #dee2e6;
+  overflow: hidden;
+  margin: 20px 0px;
+}
+
+.code-tabs .tab-content {
+  padding: 20px 15px;
+  margin-bottom: 0;
+}
+
+.code-tabs .tab-content .tab-pane{
+  margin-bottom: 0;
+}
+
+.code-tabs .nav-tabs {
+  padding-left: 0;
+  margin-bottom: 0;
+  border-bottom: 1px solid #dee2e6;
+}
+
+.code-tabs .nav-tabs .nav-item {
+  display: inline-block;
+  padding: 10px;
+  margin-top: 0;
+  border-right: 1px solid #dee2e6;
+}
+
+.code-tabs .nav-tabs .nav-item .nav-link {
+  text-decoration: none;
+  font-weight: 500;
+  border: 0;
+  margin-bottom: 0;
+}
+
+.code-tabs .nav-tabs .nav-item::before {
+  display: none;
+}
+
+.code-tabs .nav-tabs .nav-item.active {
+  background: #55bc8a;
+}
+
+.code-tabs .nav-tabs .nav-item.active .nav-link {
+  color: #ffffff;
+}
+
+.code-tabs .tab-pane {
+  display: none;
+}
+
+.code-tabs .active {
+  display: block;
+}
diff --git a/config/_default/config.toml b/config/_default/config.toml
index 4aadd7e47..c5006c6e7 100644
--- a/config/_default/config.toml
+++ b/config/_default/config.toml
@@ -1,4 +1,4 @@
-baseURL = "https://hugo-first.netlify.app"
+baseURL = "https://kubesphere-v3.netlify.app"
 
 [markup]
   [markup.tableOfContents]
diff --git a/content/en/docs/introduction/advantages.md b/content/en/docs/introduction/advantages.md
index aa550d58e..64c1f2e89 100644
--- a/content/en/docs/introduction/advantages.md
+++ b/content/en/docs/introduction/advantages.md
@@ -8,6 +8,40 @@ weight: 1400
 
 ## Vision
 
+{{< notice note >}} 
+### This is a simple note. 
+{{</ notice >}}
+
+{{< notice tip >}} 
+This is a simple tip. 
+{{</ notice >}}
+
+{{< notice info >}} 
+This is a simple info. 
+{{</ notice >}}
+
+{{< notice warning >}} 
+This is a simple warning. 
+{{</ notice >}}
+
+{{< tabs >}}
+
+{{< tab "first" >}} 
+### Why KubeSphere
+{{</ tab >}}
+
+{{< tab "second" >}} 
+```
+console.log('test')
+```
+{{</ tab >}}
+
+{{< tab "third" >}} 
+this is third tab 
+{{</ tab >}} 
+
+{{</ tabs >}}
+
 KubeSphere is a distributed operating system that provides full stack system services and a pluggable framework for third-party software integration for enterprise-critical containerized workloads running in data center.
 
 Kubernetes has now become the de facto standard for deploying containerized applications at scale in private, public and hybrid cloud environments. However, many people easily get confused when they start to use Kubernetes as it is complicated and has many additional components to manage, some of which need to be installed and deployed by users themselves, such as storage service and network service. At present, Kubernetes only provides open source solutions or projects, which may be difficult to install, maintain and operate to some extent. For users, learning costs and barrier to entry are both high. In a word, it is not easy to get started quickly.
diff --git a/i18n/en.yaml b/i18n/en.yaml
index 2f275fb94..35f133ff1 100644
--- a/i18n/en.yaml
+++ b/i18n/en.yaml
@@ -70,6 +70,14 @@
   translation: Feedback
 - id: share
   translation: Share
+- id: note
+  translation: Note
+- id: tip
+  translation: Tip
+- id: info
+  translation: Info
+- id: warning
+  translation: Warning
 
 
 
diff --git a/layouts/docs/list.html b/layouts/docs/list.html
index c985bd909..63444489e 100644
--- a/layouts/docs/list.html
+++ b/layouts/docs/list.html
@@ -14,5 +14,5 @@
         {{ partial "section" . }}
     </div>
 </section>
-
+<script src='{{ "js/markdown-tab.js" | relURL }}'></script>
 {{ end }}
\ No newline at end of file
diff --git a/layouts/docs/single.html b/layouts/docs/single.html
index 2745a244e..4346a4572 100644
--- a/layouts/docs/single.html
+++ b/layouts/docs/single.html
@@ -138,6 +138,8 @@
 </section>
 {{ if .IsPage }}
 <script src='{{ "js/aside.js" | relURL }}'></script>
+<script src='{{ "js/markdown-tab.js" | relURL }}'></script>
+
 {{ end }}
 <script>
     var languageCode = '{{.Site.Language.Lang}}'
diff --git a/layouts/shortcodes/notice.html b/layouts/shortcodes/notice.html
new file mode 100644
index 000000000..5838cfa18
--- /dev/null
+++ b/layouts/shortcodes/notice.html
@@ -0,0 +1,5 @@
+<div class="notices {{ .Get 0 }}">
+  {{ $type := .Get 0}}
+  <p>{{ i18n $type }}</p>
+  <div>{{ .Inner | markdownify }}</div>
+</div>
\ No newline at end of file
diff --git a/layouts/shortcodes/tab.html b/layouts/shortcodes/tab.html
new file mode 100644
index 000000000..68b6bff34
--- /dev/null
+++ b/layouts/shortcodes/tab.html
@@ -0,0 +1,3 @@
+<div class="tab-pane" title="{{ .Get 0 }}">
+  {{ .Inner | markdownify }}
+</div>
\ No newline at end of file
diff --git a/layouts/shortcodes/tabs.html b/layouts/shortcodes/tabs.html
new file mode 100644
index 000000000..24e4e82dc
--- /dev/null
+++ b/layouts/shortcodes/tabs.html
@@ -0,0 +1,4 @@
+<div class="code-tabs">
+  <ul class="nav nav-tabs"></ul>
+  <div class="tab-content">{{ .Inner }}</div>
+</div>
\ No newline at end of file
diff --git a/static/js/markdown-tab.js b/static/js/markdown-tab.js
new file mode 100644
index 000000000..8706e405a
--- /dev/null
+++ b/static/js/markdown-tab.js
@@ -0,0 +1,25 @@
+  // tab
+  $('.tab-content').find('.tab-pane').each(function (idx, item) {
+    var navTabs = $(this).closest('.code-tabs').find('.nav-tabs'),
+      title = $(this).attr('title');
+    navTabs.append('<li class="nav-item"><a class="nav-link" href="#">' + title + '</a></li>');
+  });
+
+  $('.code-tabs ul.nav-tabs').each(function () {
+    $(this).find("li:first").addClass('active');
+  })
+
+  $('.code-tabs .tab-content').each(function () {
+    $(this).find("div:first").addClass('active');
+  });
+
+  $('.nav-tabs a').click(function (e) {
+    e.preventDefault();
+    var tab = $(this).parent(),
+      tabIndex = tab.index(),
+      tabPanel = $(this).closest('.code-tabs'),
+      tabPane = tabPanel.find('.tab-pane').eq(tabIndex);
+    tabPanel.find('.active').removeClass('active');
+    tab.addClass('active');
+    tabPane.addClass('active');
+  });
\ No newline at end of file