Website global search feature

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

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: kramdown
 plugins:

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: kramdown
 plugins:

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;
   }

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>

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;
+}

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;