Add Algolia search on header bar

scala · Nov 16, 2015 · 1d17455 · 1d17455
1 parent e2bc42b
commit 1d17455
Show file tree

Hide file tree

Showing 6 changed files with 272 additions and 150 deletions.
diff --git a/.gitignore b/.gitignore
@@ -4,3 +4,4 @@ _site
 .settings
 *~
 vendor/bundle
+.idea/
diff --git a/_includes/footerbar.txt b/_includes/footerbar.txt
@@ -34,3 +34,9 @@
 		</p>		
 	</div>
 </div>
+
+<!-- search -->
+<script src="//cdn.jsdelivr.net/algoliasearch/3/algoliasearch.min.js"></script>
+<script src="//cdn.jsdelivr.net/autocomplete.js/0/autocomplete.min.js"></script>
+<script src="{{ site.baseurl }}/resources/javascript/searchbar.js" type="text/javascript" ></script>
+
diff --git a/_includes/header.txt b/_includes/header.txt
@@ -153,4 +153,4 @@
     </style>
 
 </head>
-  <body onload="styleCode()">
+<body onload="styleCode()">
diff --git a/_includes/topbar.txt b/_includes/topbar.txt
@@ -36,12 +36,12 @@
 
                 <li><a href="{{ site.baseurl }}/contribute.html">Contribute</a></li>
                 <li><a href="{{ site.baseurl }}/sips">SIPs/SLIPs</a></li>
-          </ul>
-          <form method="get" id="searchform" action="{{ site.baseurl }}/search.html">
-            <input type="text" placeholder="Search"  class="field" name="q" id="q"/>
-          </form>
-           </li>
-          </ul>
+                <li>
+                    <form id="searchform" action="#">
+                        <input type="text" placeholder="Search in documentation..." class="field" name="q" id="q"/>
+                    </form>
+                </li>
+            </ul>
         </div>
     </div>
 </div>
diff --git a/resources/javascript/searchbar.js b/resources/javascript/searchbar.js
@@ -0,0 +1,41 @@
+(function() {
+    var template =
+        '<div class="aa-dataset-a">' +
+        '</div>' +
+        '<div class="branding-footer">' +
+        '<div class="branding"><span>Powered by</span><a target="_blank" href="https://algolia.com"><img src="https://www.algolia.com/assets/algolia128x40.png"/></a></div>' +
+        '</div>';
+
+    var client = algoliasearch('XT7HFL89G3', '9110ba06379a1615458dbce9604b1e2a');
+    var index = client.initIndex('scaladocs');
+    var ATTRIBUTES = ['content', 'h6', 'h5', 'h4', 'h3', 'h2', 'h1' ];
+
+    var capitalize = function(string) {
+        return string.charAt(0).toUpperCase() + string.slice(1);
+    };
+
+    autocomplete('#q', {
+        hint: false,
+        debug: false,
+        templates: {
+            dropdownMenu: template
+        }
+    }, [
+        {
+            source: autocomplete.sources.hits(index, { hitsPerPage: 5, tagFilters: [ 'en' ], numericFilters: 'importance>0' }),
+            name: 'a',
+            displayKey: 'title',
+            templates: {
+                suggestion: function(suggestion) {
+                    for(var i = 0 ; i < ATTRIBUTES.length ; i++) {
+                        if(suggestion._highlightResult[ATTRIBUTES[i]] !== undefined) {
+                            return '<span class="title"><strong>' + capitalize(suggestion._tags[1]) + '</strong>: ' + suggestion._highlightResult.title.value + '</span><span class="text">' + suggestion._highlightResult[ATTRIBUTES[i]].value + '</span>';
+                        }
+                    }
+                }
+            }
+        }
+    ]).on('autocomplete:selected', function(event, suggestion) {
+        window.location.href = suggestion.link;
+    });
+})();