[v1.9] merge with search PR

Author: Huxpro

_includes/footer.html

@@ -30,6 +30,9 @@
 <!-- Custom Theme JavaScript -->
 <script src="{{ "/js/hux-blog.min.js " | prepend: site.baseurl }}"></script>
 
+<!-- script pointing to jekyll-search.js -->
+<script src="/js/simple-jekyll-search.min.js"></script>
+
 <!-- Service Worker -->
 {% if site.service-worker %}
 <script src="{{ "/js/snackbar.js " | prepend: site.baseurl }}"></script>
@@ -78,7 +81,7 @@
 
     $(document).ready(function () {
         var $chart = document.querySelector("#chart");
-        $chart.onload = function(){
+        $chart.onload = function () {
             resizeIframe($chart)
         }
         window.addEventListener("resize", () => {
@@ -266,4 +269,16 @@
     // init
     _render();
 </script>
-{% endif %}
+{% endif %}
+
+<!-- Search Settings -->
+<script>
+    SimpleJekyllSearch({
+        searchInput: document.getElementById('search-input'),
+        resultsContainer: document.getElementById('results-container'),
+        json: '/search.json',
+        searchResultTemplate: '<li><a href="{url}">{title}</a></li>',
+        noResultsText: 'No results found',
+        fuzzy: true
+    });
+</script>

_includes/nav.html

@@ -30,13 +30,32 @@
                     </li>
                     {% endif %}
                     {% endfor %}
+                    <li class="search-icon">
+                        <a href="javascript:void(0)" class="fa fa-search"></a>
+                    </li>
                 </ul>
             </div>
         </div>
         <!-- /.navbar-collapse -->
     </div>
     <!-- /.container -->
 </nav>
+<!-- Search Box -->
+<div class="search-box">
+  <div class="wrapper">
+    <div class="search-grid">
+      <form class="search-form">
+        <div id="search-container">
+          <input type="text" id="search-input" class="search" placeholder="Search">
+        </div>
+      </form>
+      <ul id="results-container" class="results-search"></ul>
+      <div class="icon-close-container">
+        <span class="search-icon-close"><i class="fa fa-times" aria-hidden="true"></i></span>
+      </div>
+    </div>
+  </div>
+</div>
 <script>
     // Drop Bootstarp low-performance Navbar
     // Use customize navbar with high-quality material design animation
@@ -88,4 +107,4 @@
         if(e.target.className == 'icon-bar') return;
         __HuxNav__.close();
     })
-</script>
+</script>