init

Author: markzegarelli

js/algolia/index.js

@@ -0,0 +1,54 @@
+import { html } from 'htm/preact';
+import algoliasearch from 'algoliasearch/lite';
+import { autocomplete, getAlgoliaHits } from '@algolia/autocomplete-js';
+
+// import '@algolia/autocomplete-theme-classic';
+
+const searchClient = algoliasearch(
+  'UINQ2M4D9S', 
+  '636b6d9e2dfb207e89ea7344859848f9'
+);
+
+autocomplete({
+  container: '#autocomplete',
+  placeholder: 'Search for the Segment documentation (press / to focus)',
+  debug: true,
+  getSources( {query} ) {
+    return [
+      {
+        sourceId: 'articles',
+        getItems() {
+          return getAlgoliaHits({
+            searchClient,
+            queries: [
+              {
+                indexName: 'segment-docs',
+                query,
+                params: {
+                  hitsPerPage: 5
+                },
+              },
+            ],
+          });
+        },
+        templates: {
+          item({ item }){
+            if (item.anchor != null) {
+              var anchorLink = "#" + item.anchor;
+            } else {
+              var anchorLink = "";
+            }
+            return html `<a class="aa-link" href="/docs${item.url}${anchorLink}">
+            <p class="aa-title" >${item.title}</h3>
+            <p class="aa-heading">${item.headings.join(' >')}</p>
+            <p class="aa-content">${item.content}</p></a>
+          `;
+          },
+          noResults() {
+            return 'no results';
+          }
+        }
+      }
+    ];
+  },
+});

js/index.js

@@ -19,6 +19,7 @@ import sideMenu from './side-menu'
 import tracking from './tracking'
 import searchBar from './search-bar'
 import glightbox from './glightbox'
+import autocomplete from './algolia'
 feedback()
 accordion()
 accordionGroup()
@@ -40,3 +41,4 @@ sideMenu()
 tracking()
 searchBar()
 glightbox()
+autocomplete()