Add meilisearch UI and functinality

Signed-off-by: Md Mohin Uddin <[email protected]>

Author: mohin7

Makefile

@@ -23,9 +23,7 @@ assets: hugo-tools
 .PHONY: gen
 gen:
 	rm -rf public
-	@yqq w -i config.dev.yaml params.search_api_key --tag '!!str' $(GOOGLE_CUSTOM_SEARCH_API_KEY)
 	hugo --config=config.dev.yaml
-	@yqq w -i config.dev.yaml params.search_api_key --tag '!!str' '_replace_'
 
 .PHONY: qa
 qa: gen
@@ -35,9 +33,7 @@ qa: gen
 .PHONY: gen-prod
 gen-prod:
 	rm -rf public
-	@yqq w -i config.yaml params.search_api_key --tag '!!str' $(GOOGLE_CUSTOM_SEARCH_API_KEY)
 	hugo --minify --config=config.yaml
-	@yqq w -i config.yaml params.search_api_key --tag '!!str' '_replace_'
 
 .PHONY: release
 release: gen-prod

config.dev.yaml

@@ -18,8 +18,7 @@ params:
   domain_kubeshield: https://kubeshield-v1-hugo.web.app
   domain_bytebuilders: https://byte.builders
   domain_marketplace: https://marketplace.byte.builders
-  search_engine_ID: 015199383701854252104:jccvu4eiulw
-  search_api_key: AIzaSyBrcwLTnL09geNrFMUx1kpL--dT1379aag
+  search_api_key: 8fd610038d901dd16a111e6f1568343bb969b084a1952dafdcb1545fd8c35e96
   blog_url: https://blog.byte.builders
   slack_url: https://slack.appscode.com
   github_url: https://github.com/appscode

config.yaml

@@ -18,8 +18,7 @@ params:
   domain_kubeshield: https://kubeshield.com
   domain_bytebuilders: https://byte.builders
   domain_marketplace: https://marketplace.byte.builders
-  search_engine_ID: 015199383701854252104:jccvu4eiulw
-  search_api_key: _replace_
+  search_api_key: 8fd610038d901dd16a111e6f1568343bb969b084a1952dafdcb1545fd8c35e96
   blog_url: https://blog.byte.builders
   slack_url: https://slack.appscode.com
   github_url: https://github.com/appscode

layouts/_default/baseof.html

@@ -1112,6 +1112,10 @@ <h4>Legal</h4>
   </script>
   <!--End of Tawk.to Script-->
 
+  <!-- Meilisearch -->
+  {{ block "footer-script" . }}
+  {{ end }}
+
   <script>
     window.addEventListener('load', function() {
       jQuery('a:contains("KubeDB")').click(function() {

layouts/products/single.html

@@ -107,14 +107,26 @@ <h6>{{ .Name }}</h6>
       {{ end }}
     </ul>
 
+    <!-- =============searchbar area start  ===========================-->
     <div class="ac-searchbar">
       <label for="acSearch">
         <lord-icon src="https://cdn.lordicon.com/msoeawqm.json" target="#acSearch" trigger="hover"
           style="width:22px;height:22px">
         </lord-icon>
       </label>
-      <input id="acSearch" type="search" placeholder="Search in {{ $p.name }} Documentation!">
+
+      <input id="acSearch" type="search" placeholder="Search in {{ $p.name }} documentation!" autocomplete="off">
+
+      <!-- search result start  -->
+      <div id="meilisearch-hideid" class="search-result-box is-hidden">
+        <!-- add ".is-hidden" for hide item -->
+        <div class="search-content" id="meilisearch-hits">
+          <!-- Search List component will be generate here from dom -->
+        </div>
+      </div>
+      <!-- search result end  -->
     </div>
+    <!-- =============searchbar area end  ===========================-->
 
   </div>
   <!-- searchbar component end -->
@@ -279,39 +291,33 @@ <h4>What's on this Page</h4>
 <div class="overlay-bg"></div>
 <!-- overlay end -->
 
+<!-- responsive sidebar search area start -->
 <div class="sidebar-search-area">
   <button class="button ac-button inline-button back-button"><span
       class="material-icons-outlined">arrow_back</span>Back</button>
   <div class="search-area-top">
     <h5>Search</h5>
 
     <div class="searchbar-area">
-      <input type="search" name="search" id="searchbox" placeholder="Search..." />
-      <button onclick="queryPage(1)">
+      <input type="search" name="search" id="searchbox" placeholder="Search in {{ $p.name }} documentation!" />
+      <button>
         <lord-icon src="https://cdn.lordicon.com/msoeawqm.json" colors="primary:#ffffff" target=".searchbar-area button"
           trigger="hover" style="width:22px;height:22px">
         </lord-icon>
       </button>
     </div>
-
-    <span id="searchbar-script-container" style="display:none"></span>
-
-    <div class="search-meta-information level">
-      <div class="level-left">
-      </div>
-    </div>
-  </div>
-
-  <div class="search-result-wrapper">
   </div>
 
-  <!-- pagination area start -->
-  <div class="pagination-area">
-    <div class="pagination-list">
+  <!-- search content start -->
+  <div id="meilisearch-hideid-mobile">
+    <div class="search-content" id="meilisearch-mobile-hits">
+      <!-- Generated search list for mobile device will be generate here -->
     </div>
   </div>
-  <!-- pagination area end -->
+  <!-- search content end -->
+
 </div>
+<!-- responsive sidebar search area end -->
 
 <!-- improve page section start  -->
 <div class="improve-section-area">
@@ -330,122 +336,6 @@ <h5>Search</h5>
   </div>
 </div>
 <!-- improve page section end -->
-
-<script type="text/javascript">
-  var pageSize = 5;
-  var acSearch = document.querySelector("#acSearch");
-  var bodyOverlay = document.querySelector(".overlay-bg");
-  var sidebarSearch = document.querySelector(".sidebar-search-area");
-
-  acSearch.addEventListener("click", function () {
-    bodyOverlay.style.display = "block";
-    sidebarSearch.style.right = "0";
-    document.getElementById("searchbox").focus();
-    bodyOverlay.addEventListener("click", function () {
-      bodyOverlay.style.display = "none";
-      sidebarSearch.style.right = "-100%";
-    });
-  });
-
-  function encodeQueryData(data) {
-    var ret = [];
-    for (var d in data)
-      ret.push(encodeURIComponent(d) + '=' + encodeURIComponent(data[d]));
-    return ret.join('&');
-  }
-
-  document.querySelector(".searchbar-area input[type=search]").addEventListener("keyup", function (event) {
-    event.preventDefault();
-    if (event.keyCode === 13) {
-      queryPage(1);
-    }
-  });
-
-  function queryPage(idx) {
-    var q = document.getElementById("searchbox").value;
-    var cx = "{{.Site.Params.search_engine_ID}}";
-    var key = "{{.Site.Params.search_api_key}}";
-    var imgSize = "small";
-    var callback = "renderResult";
-
-    var src = "https://www.googleapis.com/customsearch/v1?" + encodeQueryData({
-      q: q,
-      cx: cx,
-      key: key,
-      imgSize: imgSize,
-      callback: callback,
-      start: (idx - 1) * pageSize + 1,
-      num: pageSize,
-    });
-
-    var newScript = document.createElement("script");
-    newScript.src = src;
-    e = document.getElementById("searchbar-script-container");
-    var child = e.lastElementChild;
-    if (child) {
-      e.removeChild(child);
-    }
-    e.appendChild(newScript);
-  }
-
-  function renderSearchResultEntry(e) {
-    var out = '<div class="single-search-result">' +
-      '<h3><a href="' + e.link + '">' + e.title + '</a></h3>' +
-      '<a href="' + e.link + '">' + e.htmlFormattedUrl + '</a>' +
-      '<div class="result-description-wrapper">';
-    if (e.pagemap && e.pagemap.cse_thumbnail) {
-      out += '<div class="result-thumb">' +
-        '<img src="' + e.pagemap.cse_thumbnail[0].src + '" alt="" />' +
-        '</div>';
-    }
-    out += '<div class="result-description">' +
-      '<p>' +
-      e.snippet +
-      '</p>' +
-      '</div>' +
-      '</div>' +
-      '</div>';
-    return out;
-  }
-
-  function renderResult(response) {
-    document.querySelector(".search-meta-information .level-left").innerHTML = '<div class="level-left">' +
-      '<p>' +
-      'About <span class="search-count">' + response.searchInformation.formattedTotalResults +
-      '</span> results (<span class="time-count">' + response.searchInformation.formattedSearchTime +
-      ' </span>seconds)' +
-      '</p>' +
-      '</div>';
-
-    if (!response.items) {
-      return;
-    }
-
-    var searchResultWrapper = document.querySelector(".search-result-wrapper");
-    searchResultWrapper.innerHTML = "";
-
-    for (var i = 0; i < response.items.length; i++) {
-      searchResultWrapper.innerHTML += renderSearchResultEntry(response.items[i]);
-    }
-
-    var pager = '<ul>';
-    if (response.queries.previousPage) {
-      var pageIndex = Math.floor(response.queries.previousPage[0].startIndex / pageSize) + 1;
-      pager += '<li><a href="#" onclick="queryPage(' + pageIndex + ')">Previous</a></li>';
-    }
-    if (response.queries.request) {
-      var pageIndex = Math.floor(response.queries.request[0].startIndex / pageSize) + 1;
-      pager += '<li><a href="#" onclick="queryPage(' + pageIndex + ')" class="is-active">' + pageIndex + '</a></li>';
-    }
-    if (response.queries.nextPage) {
-      var pageIndex = Math.floor(response.queries.nextPage[0].startIndex / pageSize) + 1;
-      pager += '<li><a href="#" onclick="queryPage(' + pageIndex + ')">Next</a></li>';
-    }
-    pager += '</ul>';
-    document.querySelector(".pagination-area .pagination-list").innerHTML = pager;
-  }
-</script>
-
 <!-- sidebar search area end -->
 
 {{ end }}
@@ -462,3 +352,12 @@ <h5>Search</h5>
 {{ define "cta-install" }}
 <section></section>
 {{ end }}
+
+{{ define "footer-script" }}
+{{ $js := resources.Get "/assets/js/meilisearch.js" | minify }}
+<script src="{{ $js.RelPermalink }}"></script>
+<script type="text/javascript">
+  activate_search({{ (index .Site.Data.products (string .Params.product_name)).key }}, {{ .Site.Params.search_api_key }}, "acSearch","meilisearch-hits", "meilisearch-hideid");
+  activate_search({{ (index .Site.Data.products (string .Params.product_name)).key }}, {{ .Site.Params.search_api_key }}, "searchbox","meilisearch-mobile-hits", "meilisearch-hideid-mobile");
+</script>
+{{ end }}