docs: Add search form powered by Algolia

docs/layouts/partials/footer.html

@@ -35,6 +35,19 @@
     <script src="/js/highlight.pack.js"></script>
     <script>hljs.initHighlightingOnLoad();</script>
     <script src="/js/scripts.js"></script>
+    <!-- Algolia search -->
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script> 
+    <script type="text/javascript"> 
+    docsearch({
+      apiKey: '167e7998590aebda7f9fedcf86bc4a55',
+      indexName: 'hugodocs',
+      inputSelector: '#search-input',
+      algoliaOptions: {
+        hitsPerPage: 5
+      }
+    }); 
+    </script>
+    <!-- Google Analytics -->
     {{ template "partials/analytics.html" . }}
   </body>
 </html>

docs/layouts/partials/google-cse.html

@@ -1,13 +0,0 @@
-<script>
-  (function() {
-    var cx = '004940163756227230940:9tdbvl9bwk4';
-    var gcse = document.createElement('script');
-    gcse.type = 'text/javascript';
-    gcse.async = true;
-    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
-        '//www.google.com/cse/cse.js?cx=' + cx;
-    var s = document.getElementsByTagName('script')[0];
-    s.parentNode.insertBefore(gcse, s);
-  })();
-</script>
-<gcse:search linktarget="_parent"></gcse:search>

docs/layouts/partials/header.html

@@ -15,6 +15,7 @@
     <link href="/css/style.css" rel="stylesheet">
     <link href="/css/style-responsive.css" rel="stylesheet" />
     <link href="/css/monokai-sublime.css" rel="stylesheet" />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css" />
 
   </head>
 
@@ -82,7 +83,7 @@
                           <!--</header>-->
                     <div class="panel-body">
                         <div class="row">
-                            <div class="col-lg-12 cse">
-                                {{ partial "google-cse.html" . }}
+                            <div class="col-lg-8 col-lg-offset-2 cse">
+                                {{ partial "search.html" . }}
                             </div>
                         </div>

docs/layouts/partials/search.html

@@ -0,0 +1,61 @@
+<style>
+  #search-input {
+    width: 100%;
+    border: 1px solid #B3B3B3;
+    border-radius: 3px;
+    padding: 5px;
+  }
+
+  #search-input:focus {
+    border-color: #F04A9C;
+  }
+
+  /* Search result wrapper */
+  .algolia-autocomplete {
+    width: 100%;
+  }
+
+  /* List of search results */
+  .aa-dropdown-menu {
+    box-sizing: border-box;
+    width: 100%;
+    background-color: #FFFFFF;
+    border: 1px solid #B3B3B3;
+    padding: 0;
+    font-size: 16px;
+    margin: 4 0 4 0;
+  }
+
+  /* Highlight terms in search result headers */
+  .algolia-docsearch-suggestion--category-header .algolia-docsearch-suggestion--highlight {
+    background-color: #F04A9C;
+  }
+
+  /* Highlight terms in search result body */
+  .algolia-docsearch-suggestion--highlight {
+    color: #F04A9C;
+    font-weight: 900;
+  }
+
+  /* Currently selected search result */
+  .aa-cursor .algolia-docsearch-suggestion--content {
+    color: inherit;
+  }
+
+  .aa-cursor .algolia-docsearch-suggestion {
+    background: #EFEFEF;
+    color: #353B44;
+  }
+
+  .algolia-docsearch-suggestion {
+    font-size: 16px;
+    color: #9AA2AB;
+  }
+
+  .algolia-docsearch-suggestion--category-header,
+  .algolia-docsearch-suggestion--subcategory-column {
+    display: none !important;
+  }
+</style>
+
+<input type="search" id="search-input" placeholder="Search...">