add docs search

assets/scss/common.scss

@@ -226,6 +226,37 @@ section {
   }
 }
 
+.search-input-div {
+  position: relative;
+  height: 36px;
+  padding-left: 18px;
+  padding-right: 40px;
+  border-radius: 18px;
+  background-color: #ffffff;
+
+  .algolia-autocomplete {
+    width: 100%;
+    height: 100%;
+  }
+
+  input {
+    width: 100%;
+    height: 20px;
+    margin-top: 8px;
+    font-size: 14px;
+    line-height: 20px;
+    border: none;
+    outline: none;
+    color: #657480;
+  }
+
+  svg {
+    position: absolute;
+    right: 18px;
+    top: 11px;
+  }
+}
+
 .notices {
   margin: 20px 0;
   position: relative;

assets/scss/doc.scss

@@ -11,6 +11,10 @@ body {
     padding-bottom: 20px;
     background-image: url("/images/docs/banner.png");
 
+    .common-layout {
+        position: relative;
+    }
+
     .breadcrumbnav {
         li {
             display: inline;
@@ -31,7 +35,7 @@ body {
 
     .title-div {
         height: 20px;
-        margin-top: 6px; 
+        margin-top: 20px; 
         h1 {
             display: inline-block;
             vertical-align: middle;
@@ -57,6 +61,19 @@ body {
             }
         }
     }
+
+    .search-div {
+        position: absolute;
+        bottom: 0px;
+        right: 0px;
+        width: 560px;
+        margin-top: 20px;
+  
+        @media only screen and (max-width: $mobile-max-width) {
+          position: relative;
+          width: 100%;
+        }
+      }
 }
 
 .section-menu {
@@ -605,7 +622,7 @@ body {
   
     .aside-fixed {
         position: fixed;
-        top: 250px;
+        top: 260px;
         left: 50%;
         transform: translateX(500px);
     }

assets/scss/docs.scss

@@ -31,6 +31,15 @@
         width: 100%;
       }
     }
+
+    .search-div {
+      width: 560px;
+      margin-top: 20px;
+
+      @media only screen and (max-width: $mobile-max-width) {
+        width: 100%;
+      }
+    }
   }
 }
 

assets/scss/footer.scss

@@ -48,6 +48,7 @@
             margin-left: 16px;
             color: #ccd3db;
             border: none;
+            outline: none;
             background-color: #f5f8f9;
           }
 

config/_default/config.toml

@@ -96,12 +96,12 @@ hasChildren = true
 [[languages.en.menu.main]]
 weight = 4
 name = "Documentation"
-URL = "https://kubesphere.io/docs/"
+hasChildren = true
 
     [[languages.en.menu.main]]
     parent = "Documentation"
     name = "v3.0.0"
-    URL = "https://kubesphere.io/docs"
+    URL = "docs/"
     weight = 1
 
     [[languages.en.menu.main]]
@@ -227,7 +227,7 @@ name = "文档中心"
     [[languages.zh.menu.main]]
     parent = "文档中心"
     name = "v3.0.0"
-    URL = "https://kubesphere.com.cn/docs"
+    URL = "docs/"
     weight = 1
 
     [[languages.zh.menu.main]]

content/en/search/_index.md

@@ -1,4 +0,0 @@
----
-title: search
-
----

content/zh/search/_index.md

@@ -1,4 +0,0 @@
----
-title: search
-
----

i18n/zh.yaml

@@ -51,4 +51,30 @@
 - id: background image
   translation: 背景图片
 - id: kubesphere console screenshot
-  translation: kubesphere console 截图
+  translation: kubesphere console 截图
+- id: Learn More
+  translation: 查看更过
+- id: Download this page (PDF)
+  translation: 下载该页 (PDF)
+- id: Last updated
+  translation: 最新更新
+- id: What’s on this Page
+  translation: 页面内容
+- id: Last
+  translation: 上一篇
+- id: Next
+  translation: 下一篇
+- id: edit
+  translation: 编辑
+- id: feedback
+  translation: 反馈
+- id: share
+  translation: 分享
+- id: note
+  translation: 注解
+- id: tip
+  translation: 提示
+- id: info
+  translation: 信息
+- id: warning
+  translation: 警告

layouts/docs/list.html

@@ -5,6 +5,9 @@
     <div class="title-div common-layout">
         <h1 class="title-h1">{{ .title }}</h1>
         <p class="common-p">{{ .content }}</p>
+        <div class="search-div">
+            {{ partial "searchInput" . }}
+        </div>
     </div>
 </section>
 {{ end }}

layouts/docs/single.html

@@ -20,6 +20,10 @@
                 <div></div>
             </div>
         </div>
+
+        <div class="search-div">
+            {{ partial "searchInput" . }}
+        </div>
     </div>
 </section>
 
@@ -141,7 +145,6 @@
 {{ if .IsPage }}
 <script src='{{ "js/aside.js" | relURL }}'></script>
 {{ end }}
-<script src='{{ "js/share.js" | relURL }}'></script>
 <script src='{{ "js/markdown-tab.js" | relURL }}'></script>
 <script>
     var languageCode = '{{.Site.Language.Lang}}'

layouts/partials/css.html

@@ -24,6 +24,7 @@
 
 
 {{ if .IsDescendant (.GetPage "/docs") }}
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
 {{ if not (eq . (.GetPage "/docs"))}}
 {{ $style := resources.Get "scss/doc.scss" | toCSS | minify | fingerprint }}
 <link rel="stylesheet" href="{{ $style.RelPermalink }}">

layouts/partials/head.html

@@ -12,8 +12,15 @@
 <meta property="og:image" content="{{ with .Params.snapshot }}{{ . }}{{ else }}{{ with .Site.Params.snapshot }}{{ . | absURL }}{{ end }}{{ end }}"/>
 <meta property="og:url" content="{{ .Permalink }}"/>
 
+<meta name="docsearch:language" content="{{ .Site.LanguageCode }}" />
+
 {{- partial "css.html" . -}}
 
 <script src='{{ "js/jquery-3.5.0.min.js" | relURL }}'></script>
 <script src='{{ "js/viewer.min.js" | relURL }}'></script>
 <script src='{{ "js/jquery.modal.min.js" | relURL }}'></script>
+
+{{ if .IsDescendant (.GetPage "/docs") }}
+<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+{{ end }}
+

layouts/partials/header.html

@@ -199,26 +199,6 @@ var bindClickClose = function() {
 
 var language = '{{.Site.Language.Lang}}'
 
-var bindClickDocs = function() {
-    var host = window.location.origin
-    $('a').click(function(e) {
-    var name = $(this).data('docs')
-    if (name === 'Documentation') {
-      e.preventDefault()
-      if (host === 'https://kubesphere.com.cn/' || host === 'https://kubesphere.io/') {
-          if (language === 'zh') {
-            window.open('https://kubesphere.com.cn/docs/zh-CN/')
-          } else {
-            window.open('https://kubesphere.io/docs/')
-          }
-      } else {
-          window.open('/docs/')
-      }
-    }
-  })
-}
-bindClickDocs()
-
 bindClickClose()
 
 bindScrollChangeHeader()

layouts/partials/searchInput.html

@@ -0,0 +1,28 @@
+<div class="search-input-div">
+  <input id="search" type="text">
+  <svg width="1em" height="1em" viewBox="0 0 18 18">
+    <g fill="none" fill-rule="evenodd">
+      <path d="M12.606 11.192l5.24 5.24-1.415 1.414-5.239-5.24a7.041 7.041 0 0 0 1.414-1.414z" fill="#324558"></path>
+      <path d="M7 14A7 7 0 1 1 7 0a7 7 0 0 1 0 14zm0-2A5 5 0 1 0 7 2a5 5 0 0 0 0 10z" fill="#B6C2CD"></path>
+    </g>
+  </svg>
+</div>
+<script>
+docsearch({
+  apiKey: '221332a85783d16a5b930969fe4a934a',
+  indexName: 'kubesphere',
+  inputSelector: '#search',
+  algoliaOptions: {
+      facetFilters: [`lang:${language}`],
+  },
+  transformData: function(hits) {
+    hits.forEach(hit => {
+      if (typeof window !== undefined) {
+        hit.url = hit.url.replace('kubesphere.io', window.location.host)
+      }
+    })
+    return hits
+  },
+  debug: false,
+})
+</script>

layouts/partials/share.html

@@ -14,5 +14,4 @@
   <a data-type="hackernews" href="https://news.ycombinator.com/submitlink?u={{ .Permalink }}&t={{ .Title }}" target="_blank" rel="noopener noreferrer">
     <img src="/images/share/HackerNews.svg" alt="hackernews icon">
   </a>
-</div>
-<script src='{{ "js/share.js" | relURL }}'></script>
+</div>

static/js/share.js

@@ -1,19 +0,0 @@
-var title = document.title
-var bindClickShare = function() {
-  var url = window.location.href
-  var urlObj = {
-    twitter: 'http://twitter.com/share?url=' + url + '&text=' + title,
-    reddit: 'http://reddit.com/submit?url=' + url + '&title=' + title,
-    facebook: 'http://www.facebook.com/sharer.php?u=' + url,
-    linkedin: 'http://www.linkedin.com/shareArticle?mini=true&url=' + url,
-    hackernews: 'https://news.ycombinator.com/submitlink?u=' + url + '&t=' + title,
-  }
-  $('a').click(function(e) {
-    var type = $(this).data('type')
-    if (type) {
-      e.preventDefault()
-      window.open(urlObj[type])
-    }
-  })
-}
-bindClickShare()