From c478f45e19a52c535edb99548efb9275ee0dd8f5 Mon Sep 17 00:00:00 2001
From: Rikin Kachhia <rikin.kachhia@gmail.com>
Date: Thu, 13 Dec 2018 16:38:45 +0530
Subject: [PATCH] migrate docs search to algolia doc search (close #1146)
 (#1199)

---
 docs/_static/hasura-custom.css     |  96 ++++++--------
 docs/_theme/djangodocs/layout.html | 195 ++---------------------------
 2 files changed, 50 insertions(+), 241 deletions(-)

diff --git a/docs/_static/hasura-custom.css b/docs/_static/hasura-custom.css
index 425990769f9..e32cf4a4ea3 100644
--- a/docs/_static/hasura-custom.css
+++ b/docs/_static/hasura-custom.css
@@ -80,60 +80,6 @@ h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visit
 
 /* End of Loader */
 
-/* Search links */
-
-.algolia_search_attribution {
-  font-size: 18px;
-  margin-top: 10px;
-  text-align: left;
-}
-
-.algolia_search_attribution .algolia_image {
-  vertical-align: middle;
-  width: 70px;
-}
-
-.no_of_results {
-  display: inline;
-  color: #CF9C0E;
-  font-weight: 600;
-}
-
-.no_results {
-  text-align: left;
-}
-
-.search_query {
-  color: #CF9C0E;
-  font-weight: 600
-}
-
-.search_results_anchor {
-  text-decoration-color: #CF9C0E;
-}
-
-.search_results_description {
-  width: 60%;
-}
-
-.search_wrapper {
-  min-height: 76vh;
-}
-
-.search_bullets::before {
-  color: #788095;
-}
-
-.search_bullets {
-  list-style-type: disc;
-  text-align: left;
-}
-
-.search_heading {
-  color: #788095;
-}
-
-/* End of Search */
 
 .hide {
   display: none !important;
@@ -613,13 +559,39 @@ p {
   width: 64%;
 }
 
-.search_icon {
+.input_search_box .search_icon {
   position: absolute;
   top: 13px;
   left: 10px;
   font-size: 18px;
   color: #FEC53D;
   cursor: pointer;
+  z-index: 1;
+}
+
+.input_search_box .algolia-autocomplete {
+  width: 100%;
+}
+
+.input_search_box .algolia-autocomplete.algolia-autocomplete-left .ds-dropdown-menu,
+.input_search_box .algolia-autocomplete.algolia-autocomplete-right .ds-dropdown-menu {
+  left: -25px !important;
+  max-width: calc(156% + 50px);
+  min-width: calc(156% + 50px);  /* 1 / width(input_search_box) + 50px */
+}
+
+.input_search_box .algolia-autocomplete a {
+  text-decoration: none;
+}
+
+.input_search_box .algolia-autocomplete .algolia-docsearch-suggestion--highlight {
+  color: #FF993A;
+}
+
+.input_search_box .algolia-autocomplete .algolia-docsearch-suggestion--category-header .algolia-docsearch-suggestion--category-header-lvl0 .algolia-docsearch-suggestion--highlight,
+.input_search_box .algolia-autocomplete .algolia-docsearch-suggestion--category-header .algolia-docsearch-suggestion--category-header-lvl1 .algolia-docsearch-suggestion--highlight,
+.input_search_box .algolia-autocomplete .algolia-docsearch-suggestion--text .algolia-docsearch-suggestion--highlight {
+  box-shadow: inset 0 -2px 0 0 #FF993A;
 }
 
 .input_search_box input {
@@ -1369,6 +1341,13 @@ ol, ul {
     margin-left: 10px;
   }
 
+  .input_search_box .algolia-autocomplete.algolia-autocomplete-left .ds-dropdown-menu,
+  .input_search_box .algolia-autocomplete.algolia-autocomplete-right .ds-dropdown-menu {
+    left: -34px !important;
+    max-width: calc(166% + 10px);
+    min-width: calc(166% + 10px);  /* 1 / width(input_search_box) + 10px */
+  }
+
   .mobile-only {
     display: initial;
   }
@@ -1425,6 +1404,13 @@ ol, ul {
     margin-left: 10px;
   }
 
+  .input_search_box .algolia-autocomplete.algolia-autocomplete-right .ds-dropdown-menu,
+  .input_search_box .algolia-autocomplete.algolia-autocomplete-left .ds-dropdown-menu {
+    left: -34px !important;
+    max-width: calc(111% + 10px);
+    min-width: calc(111% + 10px);  /* 1 / width(input_search_box) + 10px */
+  }
+
   #sidebar {
     top: 170px;
     height: calc(100% - 170px);
diff --git a/docs/_theme/djangodocs/layout.html b/docs/_theme/djangodocs/layout.html
index 8b84788d749..8aecfef6958 100644
--- a/docs/_theme/djangodocs/layout.html
+++ b/docs/_theme/djangodocs/layout.html
@@ -16,6 +16,7 @@
   <!--<meta name="viewport" content="user-scalable=no">-->
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" />
 {% endblock %}
 
 {% block document %}
@@ -146,75 +147,6 @@
         {%- endif %}
       </div>
     </div>
-    <div class="search_wrapper_template hide">
-      <div class="search_box_head">
-        <h3 class="head_wrapper search_heading">
-          <div class="inline-block">
-            <%= totalResults %> result<%= totalResults > 1 ? 's' : '' %> for <span class="search_query">'<%= _.escape(searchString) %>'</span>
-          </div>
-          <div class="algolia_search_attribution">
-            <span>
-              powered by
-            </span>
-            <span>
-              <img class="algolia_image" src="{{ pathto('_images/layout/algolia-logo.svg', 1) }}" alt="Algolia Hasura Search" />
-            </span>
-          </div>
-        </h3>
-      </div>
-      <%
-          if ( objs.length > 0 ) {
-      %>
-      <ul>
-      <%
-            _.each(objs, function(obj, index ) {
-      %>
-              <li class="search_bullets">
-                <a class="search_results_anchor" href="{{ pathto('', 1) }}<%= obj.url %>">
-                  <div class="no_of_results">
-                    <%= obj.title %>
-                  </div>
-                </a>
-                <div class="search_results_description">
-                  <%= obj.description.length > 200 ? obj.description.slice(0, 200 ) + ' ...' : obj.description %>
-                </div>
-              </li>
-            </a>
-      <%
-          });
-      %>
-      </ul>
-      <%
-        } else {
-      %>
-        <div class="no_results"> Sorry! we cannot find what you are searching for! </div>
-      <%
-        }
-      %>
-      <div class = "pagination_container wd_100" id = "pagination_container"></div>
-      <div style="clear: both;"></div>
-    </div>
-    <div class="search_wrapper main_wrapper hide">
-      <div class="wd_80">
-        <div class="search_head_wrapper">
-          <div class="inline-block input_search_box">
-            <span class="fa fa-search search_icon"></span>
-            <input type="text" class="search_element" placeholder="Search docs..." />
-          </div>
-          <div class="header_links inline-block">
-            <div class="buttons">
-              <div class="inline-block">
-                <!-- a target="_blank" href="https://dashboard.{{ BASE_DOMAIN }}/login" -->
-                <button class="indiv_btns black supportBtn"> Support </button>
-                <!--/ a -->
-              </div>
-            </div>
-          </div>
-        </div>
-        <br/>
-        <div class="search_wrapper_content"></div>
-      </div>
-    </div>
   </div>
 {% endblock %}
 
@@ -333,124 +265,15 @@
   </script>
 
   <!-- search -->
+  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
   <script type="text/javascript">
-    $(document).ready( function() {
-      var lastSearched = "";
-
-      const showContent = function() {
-        $('.content_wrapper').removeClass('hide');
-        $('.search_wrapper').addClass('hide');
-      };
-
-      const showSearchResults = function() {
-        $('.content_wrapper').addClass('hide');
-        $('.search_wrapper').removeClass('hide');
-      };
-
-      const searchFunc = function( query, callback, page, restrictAttributes, attributesToRetrieve ) {
-        var ALGOLIA_APPLICATION_ID = "{{ ALGOLIA_APPLICATION_ID }}";
-        var ALGOLIA_SEARCH_KEY = "{{ ALGOLIA_SEARCH_KEY }}";
-
-        var hitsPerPage = 100;
-        var page_no = parseInt(page) - 1;
-        var offset = (hitsPerPage * (page - 1));
-
-        var indexName = "{{ ALGOLIA_INDEX_NAME }}";
-
-        //var client = algoliasearch(APPLICATION_ID, SEARCH_ONLY_KEY);
-        var client = algoliasearch(ALGOLIA_APPLICATION_ID, ALGOLIA_SEARCH_KEY, {"protocol":"https:"}); // localhost
-        var index = client.initIndex(indexName);
-
-        var queries = {
-          query: query,
-          hitsPerPage: hitsPerPage,
-          page: page_no,
-          offset: offset,
-          restrictSearchableAttributes : restrictAttributes
-        };
-
-        if ( attributesToRetrieve ) {
-          queries["attributesToRetrieve"] = attributesToRetrieve;
-        }
-
-        index.search(queries, callback );
-      };
-
-      const search = function(searchTerm) {
-        function callback(err, content ) {
-          const searchHtmlTemplate = $('.search_wrapper_template').html();
-          const template = _.template(_.unescape(searchHtmlTemplate));
-          const templated_html = template({
-            "objs": content.hits,
-            "searchString": content.query,
-            "totalResults": content.nbHits
-          });
-
-          $(".search_wrapper_content").html(templated_html);
-
-          hideLoading();
-          showSearchResults();
-
-          trackga('docs', 'search', content.query, content.nbHits);
-        }
-
-
-        showLoading();
-
-        searchFunc(searchTerm, callback, 1, [], ['url', 'description', 'title', 'image', 'tags']);
-      };
-
-      const handleQueryParams = function() {
-        const re = /query=(.*)$/;
-        const match = re.exec(window.location.search);
-
-        var searchTerm = '';
-        if ( match ) {
-          searchTerm = decodeURIComponent(match[1]);
-
-          if (searchTerm) {
-            search(searchTerm);
-          } else {
-            showContent();
-          }
-        } else {
-          showContent();
-        }
-
-        $('.search_element').val(searchTerm);
-        lastSearched = searchTerm;
-      };
-
-      const doSearch = function(value) {
-        if (lastSearched !== value) {
-          window.history.pushState({"url": (window.location.pathname + '?query=' + value + '')}, 'Search Page', '?query=' + value + '');
-          handleQueryParams();
-        }
-      };
-
-      const inputSearchHandler = function(e) {
-        // Execute on enter only
-        if (e.keyCode === 13) {
-          doSearch(e.target.value)
-        }
-      };
-      $('.search_element').on('keyup', inputSearchHandler);
-
-      const iconSearchHandler = function(e) {
-        doSearch(e.target.nextSibling.nextSibling.value)
-      };
-      $('.fa-search').on('click', iconSearchHandler);
-
-      // handle state
-      window.onpopstate = function() {
-        handleQueryParams();
-      };
-
-      if (window.location.search.length > 0) {
-        handleQueryParams();
-      }
-    });
-  </script>
+    docsearch({
+      apiKey: 'c59018461c19e20fe11459136e57900c',
+      indexName: 'hasura',
+      inputSelector: '.search_element',
+      debug: false
+  });
+</script>
 
   <!-- mobile sidebar -->
   <script type="text/javascript">