You are viewing a plain text version of this content. The canonical link for it is here.
Posted to notifications@skywalking.apache.org by wu...@apache.org on 2021/04/13 06:16:07 UTC

[skywalking-website] branch master updated: Refactor: Add algolia-docsearch (#255)

This is an automated email from the ASF dual-hosted git repository.

wusheng pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/skywalking-website.git


The following commit(s) were added to refs/heads/master by this push:
     new ba2021c  Refactor: Add algolia-docsearch (#255)
ba2021c is described below

commit ba2021cf64ce77bc01b64bd4f8c574255dd76b69
Author: Juntao Zhang <jt...@163.com>
AuthorDate: Tue Apr 13 14:16:02 2021 +0800

    Refactor: Add algolia-docsearch (#255)
---
 config.toml                                        |   4 +-
 data/docs.yml                                      |   4 +-
 themes/docsy/assets/js/algolia-search.js           |  15 +++
 themes/docsy/assets/scss/_custom_project_doc.scss  |   1 +
 themes/docsy/assets/scss/sidebar-menu.scss         | 112 ++-------------------
 themes/docsy/layouts/partials/head-css.html        |   3 +
 themes/docsy/layouts/partials/scripts.html         |   6 +-
 themes/docsy/layouts/partials/search-input.html    |   2 +-
 themes/docsy/layouts/partials/sidebar-menu.html    |   4 +-
 themes/docsy/layouts/partials/sidebar-submenu.html |   4 +-
 themes/docsy/layouts/projectDoc/baseof.html        |   2 +-
 11 files changed, 43 insertions(+), 114 deletions(-)

diff --git a/config.toml b/config.toml
index 2ab9841..f556d8e 100644
--- a/config.toml
+++ b/config.toml
@@ -82,13 +82,13 @@ github_project_repo = "https://github.com/apache/skywalking"
 # github_subdir = ""
 
 # Google Custom Search Engine ID. Remove or comment out to disable search.
-gcs_engine_id = "012737790962522169780:7puelwzrjok"
+#gcs_engine_id = "012737790962522169780:7puelwzrjok"
 
 # Enable Algolia DocSearch
 algolia_docsearch = true
 
 # Enable Lunr.js offline search
-offlineSearch = true
+offlineSearch = false
 
 # User interface configuration
 [params.ui]
diff --git a/data/docs.yml b/data/docs.yml
index c73f41b..305815d 100644
--- a/data/docs.yml
+++ b/data/docs.yml
@@ -83,8 +83,8 @@
       docs:
         - version: latest
           link: /docs/skywalking-satellite/latest/readme/
-        - version: 0.1.0
-          link: /docs/skywalking-satellite/0.1.0/readme/
+        - version: v0.1.0
+          link: /docs/skywalking-satellite/v0.1.0/readme/
           commitId: dfb8195ea3cb372d8103fb3897be0e882b4bcf67
 
 - type: Operation
diff --git a/themes/docsy/assets/js/algolia-search.js b/themes/docsy/assets/js/algolia-search.js
new file mode 100644
index 0000000..da7918e
--- /dev/null
+++ b/themes/docsy/assets/js/algolia-search.js
@@ -0,0 +1,15 @@
+(function () {
+  var reg = /\/docs\/[a-zA-Z\-]+\/([\w|\.]+)\//;
+  var res = reg.exec(location.href);
+  var version = res && res[1] || "latest";
+  docsearch({
+    apiKey: 'a0589fc2fb9cc4876b9443b2911221bc',
+    indexName: 'skywalking',
+    inputSelector: '#algolia-search-input',
+    algoliaOptions: {
+      'facetFilters': ["version:" + version],
+      hitsPerPage: 8
+    },
+    debug: false
+  });
+})()
diff --git a/themes/docsy/assets/scss/_custom_project_doc.scss b/themes/docsy/assets/scss/_custom_project_doc.scss
index 28985fc..e735085 100644
--- a/themes/docsy/assets/scss/_custom_project_doc.scss
+++ b/themes/docsy/assets/scss/_custom_project_doc.scss
@@ -64,6 +64,7 @@
   }
   .td-main {
     #TableOfContents {
+      font-size: 14px;
       width: auto;
       border-left: 1px solid #dee2e6;
     }
diff --git a/themes/docsy/assets/scss/sidebar-menu.scss b/themes/docsy/assets/scss/sidebar-menu.scss
index bc30412..84c6a8d 100644
--- a/themes/docsy/assets/scss/sidebar-menu.scss
+++ b/themes/docsy/assets/scss/sidebar-menu.scss
@@ -59,6 +59,7 @@
     display: flex;
     align-items: flex-start;
     justify-content: space-between;
+    transition: font-weight 0.15s;
   }
 
   .sidebar-menu > li > a > .fa {
@@ -85,7 +86,7 @@
     background: #1a2226;
   }
 
-  .sidebar-menu li > a > .fa-angle-left {
+  .sidebar-menu li > a > .fa-angle-right {
     width: auto;
     height: auto;
     padding: 0;
@@ -93,8 +94,8 @@
     margin-top: 3px;
   }
 
-  .sidebar-menu li.active > a > .fa-angle-left {
-    transform: rotate(-90deg);
+  .sidebar-menu li.active > a > .fa-angle-right {
+    transform: rotate(90deg);
     color: #5c9af3;
   }
 
@@ -120,8 +121,8 @@
   }
 
   .sidebar-menu .sidebar-submenu > li > a {
-    padding: 5px 5px 5px 5px;
-    font-size: 14px;
+    padding: 8px 5px;
+    font-size: 16px;
     color: #2c3e50;
     display: flex;
     align-items: flex-start;
@@ -133,111 +134,16 @@
     transition: transform 0.2s;
   }
 
-  .sidebar-menu .sidebar-submenu > li > a > .fa-angle-left,
+  .sidebar-menu .sidebar-submenu > li > a > .fa-angle-right,
   .sidebar-menu .sidebar-submenu > li > a > .fa-angle-down {
     width: auto;
   }
 
   .sidebar-menu .sidebar-submenu > li.active > a, .sidebar-menu .sidebar-submenu > li > a:hover {
     color: $blue;
+    //font-weight: 400;
   }
 
-  .sidebar-menu-rtl {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-    background-color: #222d32;
-  }
-
-  .sidebar-menu-rtl > li {
-    position: relative;
-    margin: 0;
-    padding: 0;
-  }
-
-  .sidebar-menu-rtl > li > a {
-    padding: 12px 15px 12px 5px;
-    display: block;
-    border-left: 3px solid transparent;
-    color: #2c3e50;
-  }
-
-  .sidebar-menu-rtl > li > a > .fa {
-    width: 20px;
-  }
-
-  .sidebar-menu-rtl > li:hover > a, .sidebar-menu-rtl > li.active > a {
-    color: $blue;
-    background: #ffffff;
-    border-left-color: $blue;
-    font-weight: 600;
-  }
-
-  .sidebar-menu-rtl > li .label,
-  .sidebar-menu-rtl > li .badge {
-    margin-top: 3px;
-    margin-right: 5px;
-  }
-
-  .sidebar-menu-rtl li.sidebar-header {
-    padding: 10px 15px 10px 25px;
-    font-size: 12px;
-    color: #4b646f;
-    background: #1a2226;
-  }
-
-  .sidebar-menu-rtl li > a > .fa-angle-left {
-    width: auto;
-    height: auto;
-    padding: 0;
-    margin-right: 10px;
-    margin-top: 3px;
-  }
-
-  .sidebar-menu-rtl li.active > a > .fa-angle-left {
-    transform: rotate(-90deg);
-  }
-
-  .sidebar-menu-rtl li.active > .sidebar-submenu {
-    display: block;
-  }
-
-  .sidebar-menu-rtl a {
-    color: #2c3e50;
-    text-decoration: none;
-  }
-
-  .sidebar-menu-rtl .sidebar-submenu {
-    display: none;
-    list-style: none;
-    padding-right: 5px;
-    margin: 0 1px;
-    background: #f8f9fa;
-  }
-
-  .sidebar-menu-rtl .sidebar-submenu .sidebar-submenu {
-    padding-right: 20px;
-  }
-
-  .sidebar-menu-rtl .sidebar-submenu > li > a {
-    padding: 5px 15px 5px 5px;
-    display: block;
-    font-size: 14px;
-    color: #2c3e50;
-  }
-
-  .sidebar-menu-rtl .sidebar-submenu > li > a > .fa {
-    width: 20px;
-  }
-
-  .sidebar-menu-rtl .sidebar-submenu > li > a > .fa-angle-left,
-  .sidebar-menu-rtl .sidebar-submenu > li > a > .fa-angle-down {
-    width: auto;
-  }
-
-  .sidebar-menu-rtl .sidebar-submenu > li.active > a, .sidebar-menu-rtl .sidebar-submenu > li > a:hover {
-    color: $blue;
-  }
   .fa.pull-right {
     margin-left: .3em;
   }
@@ -245,7 +151,7 @@
   .pull-right {
     float: right;
   }
-  .fa-angle-left{
+  .fa-angle-right{
     color: #999;
   }
   .fa {
diff --git a/themes/docsy/layouts/partials/head-css.html b/themes/docsy/layouts/partials/head-css.html
index eb01fc4..97c6be3 100644
--- a/themes/docsy/layouts/partials/head-css.html
+++ b/themes/docsy/layouts/partials/head-css.html
@@ -11,4 +11,7 @@
 {{ end }}
 {{ if and (.Site.Params.offlineSearch) (not .Site.Params.gcs_engine_id) }}
 <link href="/css/offline-search.css" rel="stylesheet">
+{{ end }}
+{{ if .Site.Params.algolia_docsearch }}
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" />
 {{ end }}
\ No newline at end of file
diff --git a/themes/docsy/layouts/partials/scripts.html b/themes/docsy/layouts/partials/scripts.html
index 31a99f4..8a4fb76 100644
--- a/themes/docsy/layouts/partials/scripts.html
+++ b/themes/docsy/layouts/partials/scripts.html
@@ -1,12 +1,16 @@
 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/js/bootstrap.bundle.min.js"></script>
+{{ if .Site.Params.algolia_docsearch }}
+<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+{{ end }}
 {{ $jsBase := resources.Get "js/base.js" }}
 {{ $jsAnchor := resources.Get "js/anchor.js" }}
 {{ $jsSearch := resources.Get "js/search.js" | resources.ExecuteAsTemplate "js/search.js" .Site.Home }}
 {{ $jsLightbox := resources.Get "js/lightbox.js" }}
 {{ $jsSlider := resources.Get "js/slider.js" }}
-{{ $js := (slice $jsBase $jsAnchor $jsSearch $jsLightbox $jsSlider) | resources.Concat "js/main.js" }}
+{{ $algolia := resources.Get "js/algolia-search.js" }}
+{{ $js := (slice $jsBase $jsAnchor $jsSearch $jsLightbox $jsSlider $algolia) | resources.Concat "js/main.js" }}
 {{ if .Site.IsServer }}
 <script src="{{ $js.RelPermalink }}"></script>
 {{ else }}
diff --git a/themes/docsy/layouts/partials/search-input.html b/themes/docsy/layouts/partials/search-input.html
index eb7ef5a..075e0a4 100644
--- a/themes/docsy/layouts/partials/search-input.html
+++ b/themes/docsy/layouts/partials/search-input.html
@@ -1,5 +1,5 @@
 {{ if or .Site.Params.gcs_engine_id .Site.Params.algolia_docsearch }}
-<input type="search" class="form-control td-search-input" placeholder="&#xf002 {{ T "ui_search" }}" aria-label="{{ T "ui_search" }}" autocomplete="off">
+<input id="algolia-search-input" type="search" class="form-control td-search-input" placeholder="&#xf002 {{ T "ui_search" }}" aria-label="{{ T "ui_search" }}" autocomplete="off">
 {{ else if .Site.Params.offlineSearch }}
 <div id="search-nav-container">
 <input type="search" id="search-input" autocomplete="off" class="form-control td-search-input" placeholder="&#xf002 {{ T "ui_search" }}" autocomplete="on">
diff --git a/themes/docsy/layouts/partials/sidebar-menu.html b/themes/docsy/layouts/partials/sidebar-menu.html
index 50630a4..e03344e 100644
--- a/themes/docsy/layouts/partials/sidebar-menu.html
+++ b/themes/docsy/layouts/partials/sidebar-menu.html
@@ -6,9 +6,9 @@
         {{if .catalog}}
 
             {{if .path}}
-            <a href="{{ .path }}">{{ .name }}<i class="fa fa-angle-left pull-right"></i></a>
+            <a href="{{ .path }}">{{ .name }}<i class="fa fa-angle-right pull-right"></i></a>
             {{else}}
-            <a href="#">{{ .name }}<i class="fa fa-angle-left pull-right"></i></a>
+            <a href="#">{{ .name }}<i class="fa fa-angle-right pull-right"></i></a>
             {{end}}
 
             {{ partial "sidebar-submenu.html" . }}
diff --git a/themes/docsy/layouts/partials/sidebar-submenu.html b/themes/docsy/layouts/partials/sidebar-submenu.html
index b6df1ce..69adce9 100644
--- a/themes/docsy/layouts/partials/sidebar-submenu.html
+++ b/themes/docsy/layouts/partials/sidebar-submenu.html
@@ -6,9 +6,9 @@
         {{if .catalog}}
 
             {{if .path}}
-            <a href="{{ .path }}">{{ .name }}<i class="fa fa-angle-left pull-right"></i></a>
+            <a href="{{ .path }}">{{ .name }}<i class="fa fa-angle-right pull-right"></i></a>
             {{else}}
-            <a href="#">{{ .name }}<i class="fa fa-angle-left pull-right"></i></a>
+            <a href="#">{{ .name }}<i class="fa fa-angle-right pull-right"></i></a>
             {{end}}
 
             {{ partial "sidebar-submenu.html" . }}
diff --git a/themes/docsy/layouts/projectDoc/baseof.html b/themes/docsy/layouts/projectDoc/baseof.html
index 385b303..6d5a93b 100644
--- a/themes/docsy/layouts/projectDoc/baseof.html
+++ b/themes/docsy/layouts/projectDoc/baseof.html
@@ -14,7 +14,7 @@
         <div class="row flex-xl-nowrap">
           <div class="col-12 col-md-3 col-xl-2 d-print-none td-sidebar">
 
-          </div>
+</div>
           <div id="toc" class="d-none d-xl-block col-xl-2 td-toc d-print-none">
             {{ partial "toc.html" . }}
           </div>