From 6da9168240a7fbc4d9f31f508e2a7cd4cc2daf48 Mon Sep 17 00:00:00 2001
From: Yang Shi <ys2843@nyu.edu>
Date: Tue, 19 May 2020 09:03:37 -0700
Subject: [PATCH] Website global search feature (#18288)

* init global search ui

* add hover effect to icon and refactor js

* add search bar ui styles

* fix search UI's effect on navbar height

* add fade in/out effect to search ui and navbar

* update search trigger to click and add x button for close

* add version select for search

* fix version typo

* update dropdown

* fix hitsperpage reset after change version

* fix nav trigger not show

* update search border css class name

* make dropdown style consistent

* global search mobile&tablet UI

* adjust mobile search result width

* extract global search related styles to a seperate scss

* restore formatting to existing code

* format & coding style

* fix caret height bug

* add mobile compatible UI

* add license header to js files and update dropdown width

* put docsearch css before main to overrides

* update search result panel height

* dynamically generate version dropdown

* use more accurate selector over search result

* use vh for height

* add comments  to scss

* move versions to Jekyll global variable

* remove redundant version key

* make global search default version the same as website version

Co-authored-by: Yang Shi <yangshia@amazon.com>
---
 docs/static_site/src/_config.yml              |  11 +
 docs/static_site/src/_config_beta.yml         |  13 +-
 docs/static_site/src/_config_prod.yml         |  13 +-
 docs/static_site/src/_includes/head.html      |   9 +-
 docs/static_site/src/_includes/header.html    |  45 +++-
 docs/static_site/src/_sass/globalSearch.scss  | 217 ++++++++++++++++++
 .../static_site/src/_sass/minima/_layout.scss |  16 ++
 .../src/assets/img/search-icon.svg            |   3 +
 .../static_site/src/assets/js/globalSearch.js | 118 ++++++++++
 docs/static_site/src/assets/main.scss         |   1 +
 10 files changed, 441 insertions(+), 5 deletions(-)
 create mode 100644 docs/static_site/src/_sass/globalSearch.scss
 create mode 100644 docs/static_site/src/assets/img/search-icon.svg
 create mode 100644 docs/static_site/src/assets/js/globalSearch.js

diff --git a/docs/static_site/src/_config.yml b/docs/static_site/src/_config.yml
index 6dcc9c2aa405..12987e85071f 100644
--- a/docs/static_site/src/_config.yml
+++ b/docs/static_site/src/_config.yml
@@ -37,6 +37,17 @@ description: >- # this means to ignore newlines until "baseurl:"
 twitter_username: apachemxnet
 github_username:  apache/incubator-mxnet
 youtube_username: apachemxnet
+versions: 
+  - master
+  - 1.6
+  - 1.5.0
+  - 1.4.1
+  - 1.3.1
+  - 1.2.1
+  - 1.1.0
+  - 1.0.0
+  - 0.12.1
+  - 0.11.0
 
 # Build settings
 markdown: kramdown
diff --git a/docs/static_site/src/_config_beta.yml b/docs/static_site/src/_config_beta.yml
index dc4ecdd25f65..84f62e758e24 100644
--- a/docs/static_site/src/_config_beta.yml
+++ b/docs/static_site/src/_config_beta.yml
@@ -39,7 +39,18 @@ url: https://thomasdelteil.github.io
 twitter_username: apachemxnet
 github_username:  apache/incubator-mxnet
 youtube_username: apachemxnet
-
+versions: 
+  - master
+  - 1.6
+  - 1.5.0
+  - 1.4.1
+  - 1.3.1
+  - 1.2.1
+  - 1.1.0
+  - 1.0.0
+  - 0.12.1
+  - 0.11.0
+  
 # Build settings
 markdown: redcarpet
 redcarpet:
diff --git a/docs/static_site/src/_config_prod.yml b/docs/static_site/src/_config_prod.yml
index 6c91fe91cdea..49a2a3f3619b 100644
--- a/docs/static_site/src/_config_prod.yml
+++ b/docs/static_site/src/_config_prod.yml
@@ -39,7 +39,18 @@ twitter_username: apachemxnet
 github_username:  apache/incubator-mxnet
 youtube_username: apachemxnet
 google_analytics: UA-96378503-1
-
+versions: 
+  - master
+  - 1.6
+  - 1.5.0
+  - 1.4.1
+  - 1.3.1
+  - 1.2.1
+  - 1.1.0
+  - 1.0.0
+  - 0.12.1
+  - 0.11.0
+  
 # Build settings
 markdown: redcarpet
 redcarpet:
diff --git a/docs/static_site/src/_includes/head.html b/docs/static_site/src/_includes/head.html
index 688a3dc457d5..5de810a5958e 100644
--- a/docs/static_site/src/_includes/head.html
+++ b/docs/static_site/src/_includes/head.html
@@ -5,14 +5,15 @@
   <link href="https://raw.githubusercontent.com/dmlc/web-data/master/mxnet/image/mxnet-icon.png" rel="icon" type="image/png">
   {%- seo -%}
   <script src="https://medium-widget.pixelpoint.io/widget.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" />
   <link rel="stylesheet" href="{{ "/assets/main.css" | relative_url }}">
   {%- feed_meta -%}
   {%- if jekyll.environment == 'production' and site.google_analytics -%}
     {%- include google-analytics.html -%}
   {%- endif -%}
-
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
-
+  <script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+  <script src="{{'/assets/js/globalSearch.js'|relative_url}}"></script>
   <script src="{{'/assets/js/clipboard.js'|relative_url}}"></script>
   <script src="{{'/assets/js/copycode.js'|relative_url}}"></script>
   <style>
@@ -50,6 +51,10 @@
       width: 18px;
   }
 
+  .trigger .dropdown-caret {
+      height: 57px;
+  }
+
   .dropdown-caret-path {
       fill: #FFFFFF;
   }
diff --git a/docs/static_site/src/_includes/header.html b/docs/static_site/src/_includes/header.html
index e303a14b059b..7fe71c32aa81 100644
--- a/docs/static_site/src/_includes/header.html
+++ b/docs/static_site/src/_includes/header.html
@@ -35,8 +35,51 @@
             </svg>
           </span>
       </label>
-
+      <div class="gs-search-border">
+        <div id="gs-search-icon"></div>
+        <form id="global-search-form">
+          <input id="global-search" type="text" title="Search" placeholder="Search" />
+          <div id="global-search-dropdown-container">
+            <button class="gs-current-version btn" type="button" data-toggle="dropdown">
+                <span id="gs-current-version-label">{{site.versions[0]}}</span>
+                <svg class="gs-dropdown-caret" viewBox="0 0 32 32" class="icon icon-caret-bottom" aria-hidden="true">
+                    <path class="dropdown-caret-path" d="M24 11.305l-7.997 11.39L8 11.305z"></path>
+                </svg>
+            </button>
+            <ul class="gs-opt-group gs-version-dropdown">
+              {% for version in site.versions %}
+                {% if version == site.versions[0] %}
+                  <li class="gs-opt gs-versions active">{{version}}</li>
+                {% else %}
+                  <li class="gs-opt gs-versions">{{version}}</li>
+                {% endif %}
+              {% endfor %}
+            </ul>
+        </div>
+          <span id="global-search-close">x</span>
+        </form>
+      </div>
       <div class="trigger">
+        <div id="global-search-mobile-border">
+          <div id="gs-search-icon-mobile"></div>
+          <input id="global-search-mobile" placeholder="Search..." type="text"/>
+          <div id="global-search-dropdown-container-mobile">
+            <button class="gs-current-version-mobile btn" type="button" data-toggle="dropdown">
+                <svg class="gs-dropdown-caret" viewBox="0 0 32 32" class="icon icon-caret-bottom" aria-hidden="true">
+                    <path class="dropdown-caret-path" d="M24 11.305l-7.997 11.39L8 11.305z"></path>
+                </svg>
+            </button>
+            <ul class="gs-opt-group gs-version-dropdown-mobile">
+              {% for version in site.versions %}
+                {% if version == site.versions[0] %}
+                  <li class="gs-opt gs-versions active">{{version}}</li>
+                {% else %}
+                  <li class="gs-opt gs-versions">{{version}}</li>
+                {% endif %}
+              {% endfor %}
+            </ul>
+        </div>
+        </div>
         <a class="page-link" href="{{'/get_started' | relative_url }}">Get Started</a>
         <a class="page-link" href="{{'/blog' | relative_url }}">Blog</a>
         <a class="page-link" href="{{'/features' | relative_url }}">Features</a>
diff --git a/docs/static_site/src/_sass/globalSearch.scss b/docs/static_site/src/_sass/globalSearch.scss
new file mode 100644
index 000000000000..a3867cf9365b
--- /dev/null
+++ b/docs/static_site/src/_sass/globalSearch.scss
@@ -0,0 +1,217 @@
+.trigger {
+  float: right;
+}
+
+/* Search bar - wide screen */
+.gs-search-border {
+  padding-left: 25px;
+  float: right;
+}
+
+#global-search {
+  width: 0px;
+  border: 0px;
+  background-color: transparent;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+  outline: none;
+  font-size: 1em;
+  color: #ffffff;
+  display: inline-block;
+  margin-bottom: 19px;
+}
+
+#gs-search-icon {
+  background: url(/assets/img/search-icon.svg) center no-repeat;
+  background-size: 1em;
+  height: 30px;
+  width: 30px;
+  position: relative;
+  top: 10px;
+  cursor: pointer;
+  display: inline-block;
+}
+
+#global-search-form {
+  display: none;
+  padding: 5px;
+  line-height: 1em;
+}
+
+#global-search-close {
+  cursor: pointer;
+}
+
+#global-search-dropdown-container {
+  display: inline-block;
+  position: relative;
+}
+
+#global-search-dropdown-container button {
+  background-color: inherit;
+  color: white;
+  font-size: 17px;
+  margin: 0px;
+  border: none;
+  min-width: 100%;
+  outline: 0;
+  height: 37px;
+  width: 90px;
+  padding: 0px;
+  cursor: pointer;
+}
+
+#global-search-dropdown-container-mobile
+  .gs-current-version-mobile
+  .gs-dropdown-caret,
+#global-search-dropdown-container .gs-current-version .gs-dropdown-caret {
+  position: relative;
+  top: 4px;
+  height: 18px;
+}
+
+ul.gs-version-dropdown {
+  display: none;
+  position: absolute;
+  text-align: center;
+  background-color: whitesmoke;
+  box-shadow: none;
+  z-index: 1;
+  margin: 0px;
+  padding: 0px;
+  list-style-type: none;
+}
+
+li.gs-opt.gs-versions {
+  padding: 10px;
+  cursor: pointer;
+}
+
+.gs-version-dropdown li:hover {
+  color: #ff4500 !important;
+}
+
+/* Search bar - mobile */
+#global-search-mobile {
+  width: 120px;
+  margin-right: 10px;
+  background-color: transparent;
+  border: 0px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+  outline: none;
+  font-size: 1em;
+  color: white;
+}
+
+#gs-search-icon-mobile {
+  background: url(/assets/img/search-icon.svg) center no-repeat;
+  background-size: 1em;
+  height: 30px;
+  width: 30px;
+  position: relative;
+  top: 10px;
+  cursor: pointer;
+  display: inline-block;
+}
+
+#global-search-dropdown-container-mobile {
+  display: inline-block;
+  position: absolute;
+  right: 10px;
+}
+
+#global-search-dropdown-container-mobile button {
+  background-color: inherit;
+  margin: 0px;
+  border: none;
+  outline: 0;
+  height: 37px;
+  padding: 0px;
+  cursor: pointer;
+}
+
+.gs-version-dropdown-mobile {
+  display: none;
+  position: absolute;
+  text-align: center;
+  background-color: whitesmoke;
+  box-shadow: none;
+  z-index: 1;
+  margin: 0px;
+  padding: 0px;
+  left: -50px;
+  list-style-type: none;
+  width: 166px;
+  left: -138px;
+}
+
+#global-search-mobile-border {
+  line-height: 25px;
+}
+
+#global-search-mobile::placeholder,
+#global-search::placeholder {
+  color: #eeeeee;
+}
+
+.gs-version-dropdown-mobile li.active,
+.gs-version-dropdown li.active {
+  color: #ff4500 !important;
+  font-weight: lighter;
+}
+
+.gs-version-dropdown-mobile li,
+.gs-version-dropdown li {
+  color: #424242;
+  text-decoration: none;
+  display: block;
+  padding-left: 5px;
+  padding-right: 5px;
+  font-size: 17px;
+}
+
+/* Main dropdown wrapper */
+.algolia-autocomplete .ds-dropdown-menu > div {
+  max-height: 60vh;
+  overflow-y: scroll;
+}
+
+#global-search-mobile-border .algolia-autocomplete .ds-dropdown-menu {
+  min-width: 80vw;
+}
+
+#global-search-mobile-border .algolia-autocomplete .ds-dropdown-menu > div {
+  min-width: 80vw;
+  max-height: 90vh;
+}
+
+.gs-search-border .algolia-autocomplete .ds-dropdown-menu {
+  min-width: 680px;
+}
+
+/* Main category */
+.algolia-autocomplete .algolia-docsearch-suggestion--category-header {
+  color: #000000;
+  text-align: center;
+}
+
+/* Category */
+.algolia-autocomplete .algolia-docsearch-suggestion--subcategory-column {
+  color: gray;
+}
+
+/* Title */
+.algolia-autocomplete .algolia-docsearch-suggestion--title {
+  color: black;
+  font-weight: 300;
+}
+
+/* Description description */
+.algolia-autocomplete .algolia-docsearch-suggestion--text {
+  font-size: 0.8rem;
+  color: gray;
+}
+
+/* Highlighted text */
+.algolia-autocomplete .algolia-docsearch-suggestion--highlight {
+  color: blue;
+}
diff --git a/docs/static_site/src/_sass/minima/_layout.scss b/docs/static_site/src/_sass/minima/_layout.scss
index 2097210d0dea..c8e2560a182c 100644
--- a/docs/static_site/src/_sass/minima/_layout.scss
+++ b/docs/static_site/src/_sass/minima/_layout.scss
@@ -37,6 +37,14 @@
   .nav-trigger {
     display: none;
   }
+  
+  #global-search-mobile-border {
+    display: none;
+  }
+
+  .gs-search-border {
+    display: inline-block;
+  }
 
   .menu-icon {
     display: none;
@@ -81,6 +89,14 @@
       cursor: pointer;
     }
 
+    .gs-search-border {
+      display: none;
+    }
+
+    #global-search-mobile-border {
+      display: block;
+    }
+
     .menu-icon {
       display: block;
       float: right;
diff --git a/docs/static_site/src/assets/img/search-icon.svg b/docs/static_site/src/assets/img/search-icon.svg
new file mode 100644
index 000000000000..f9f064924444
--- /dev/null
+++ b/docs/static_site/src/assets/img/search-icon.svg
@@ -0,0 +1,3 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid meet" viewBox="0 0 640 640" width="640" height="640"><defs><path d="M469.23 243.82C469.23 359.72 372.03 453.82 252.3 453.82C132.58 453.82 35.37 359.72 35.37 243.82C35.37 127.92 132.58 33.82 252.3 33.82C372.03 33.82 469.23 127.92 469.23 243.82Z" id="d18gl8KaNX"></path><path d="M618.81 619.96L387.86 389.01" id="e6Bj4lKvXb"></path></defs><g><g><g><g><use xlink:href="#d18gl8KaNX" opacity="1" fill-opacity="0" stroke="#FFFFFF" stroke-width="50" stroke-opacity="1"></use></g></g><g><g><use xlink:href="#e6Bj4lKvXb" opacity="1" fill-opacity="0" stroke="#FFFFFF" stroke-width="50" stroke-opacity="1"></use></g></g></g></g></svg>
diff --git a/docs/static_site/src/assets/js/globalSearch.js b/docs/static_site/src/assets/js/globalSearch.js
new file mode 100644
index 000000000000..bc2cf1b94c14
--- /dev/null
+++ b/docs/static_site/src/assets/js/globalSearch.js
@@ -0,0 +1,118 @@
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+/* Installation page display functions for install selector.
+   This utility allows direct links to specific install instructions.
+*/
+
+$(document).ready(function () {
+  const default_version = $("#gs-current-version-label").text() || "master";
+  // bind docsearch
+  const globalSearch = docsearch({
+    apiKey: "500f8e78748bd043cc6e4ac130e8c0e7",
+    indexName: "apache_mxnet",
+    inputSelector: "#global-search",
+    algoliaOptions: {
+      facetFilters: ["version:" + default_version],
+    },
+    debug: false, // Set debug to true if you want to inspect the dropdown
+  });
+
+  const globalSearchMobile = docsearch({
+    apiKey: "500f8e78748bd043cc6e4ac130e8c0e7",
+    indexName: "apache_mxnet",
+    inputSelector: "#global-search-mobile",
+    algoliaOptions: {
+      facetFilters: ["version:" + default_version],
+      hitsPerPage: 5,
+    },
+    debug: false, // Set debug to true if you want to inspect the dropdown
+  });
+
+  // search bar animation and event listeners for desktop 
+  $("#gs-search-icon").click(function () {
+    $(".trigger").fadeOut("fast", function () {
+      $("#global-search-form").css("display", "inline-block");
+      $("#global-search-close").show();
+      $("#global-search-dropdown-container").show();
+      $("#global-search")
+        .animate({
+          width: "300px",
+        })
+        .focus();
+    });
+  });
+
+  $("#global-search-close").click(function () {
+    $("#global-search-dropdown-container").hide();
+    $("#global-search").animate(
+      {
+        width: "0px",
+      },
+      function () {
+        $(this).hide();
+        $("#global-search-form").hide();
+        $(".trigger").fadeIn("fast");
+      }
+    );
+  });
+
+  $("#global-search-dropdown-container").click(function (e) {
+    $(".gs-version-dropdown").toggle();
+    e.stopPropagation();
+  });
+
+  $("ul.gs-version-dropdown li").each(function () {
+    $(this).on("click", function () {
+      $("#global-search").val("");
+      $(".gs-version-dropdown li.gs-opt.active").removeClass("active");
+      $(this).addClass("active");
+      $("#gs-current-version-label").html(this.innerHTML);
+      globalSearch.algoliaOptions = {
+        facetFilters: ["version:" + this.innerHTML],
+      };
+    });
+  });
+
+  // search bar event listeners for mobile and tablet 
+  $("#global-search-dropdown-container-mobile").click(function (e) {
+    $(".gs-version-dropdown-mobile").toggle();
+    e.stopPropagation();
+  });
+
+  $("ul.gs-version-dropdown-mobile li").each(function () {
+    $(this).on("click", function () {
+      $("#global-search-mobile")
+        .val("")
+        .attr("placeholder", "v - " + this.innerHTML);
+      $(".gs-version-dropdown-mobile li.gs-opt.active").removeClass("active");
+      $(this).addClass("active");
+      globalSearchMobile.algoliaOptions = {
+        facetFilters: ["version:" + this.innerHTML],
+        hitsPerPage: 5,
+      };
+    });
+  });
+
+  // Common logic
+  $(document).click(function () {
+    $(".gs-version-dropdown").hide();
+    $(".gs-version-dropdown-mobile").hide();
+  });
+});
diff --git a/docs/static_site/src/assets/main.scss b/docs/static_site/src/assets/main.scss
index 3ab5c7091e68..21755b16f5b0 100644
--- a/docs/static_site/src/assets/main.scss
+++ b/docs/static_site/src/assets/main.scss
@@ -6,3 +6,4 @@ body {
 
 
 @import "minima";
+@import "globalSearch";