Configure and add UI

_config.yml

@@ -97,6 +97,22 @@ extlinks:
 algolia:
   application_id: OOK48W9UCL
   index_name: sentry-docs
+  settings:
+    attributesToHighlight:
+      - title
+      - headings
+      - content
+      - html
+      - categories
+      - tags
+    highlightPreTag: '<strong class="text-danger">'
+    highlightPostTag: '</strong>'
+    attributesToSnippet:
+      - content:20
+    attributeForDistinct: title
+    attributesForFaceting:
+      - searchable(categories)
+      - searchable(tags)
 
 # Hack to give us an empty array prototype
 #  {% assign labels = site.Array

src/_assets/css/_includes/grid.scss

@@ -28,6 +28,7 @@ body {
   display: flex;
   min-height: 100%;
   flex-direction: column;
+  overflow: hidden;
 
   > main {
     display: flex;

src/_assets/css/_includes/search.scss

@@ -1,39 +1,17 @@
-.search-results {
-  &:empty {
-    &::before {
-      content: 'Searching the docs';
-    }
-    &::after {
-      content: '...';
-      animation-name: search-loading;
-      animation-duration: 0.75s;
-      animation-iteration-count: infinite;
-    }
-  }
-
-  .path-segment {
-    color: $jewel0;
+#hits {
+  position: relative;
 
-    + .path-segment {
-      &::before {
-        color: $mediumPurple;
-        content: ' » ';
-      }
-    }
+  .list-group {
+    position: absolute;
+    z-index: 5;
   }
 }
 
-@keyframes search-loading {
-  0% {
-    content: '.';
-  }
-  33% {
-    content: '..';
-  }
-  66% {
-    content: '...';
-  }
-  100% {
-    content: '';
-  }
+.ais-Highlight {
+  color: $highlightPurple;
+}
+
+.search-results {
+  font-size: 14px;
+  width: 200%;
 }

src/_includes/sidebar.html

@@ -1,14 +1,3 @@
-<form action="{% link search/index.html %}" method="get" autocomplete="off">
-  <div class="input-group mb-3">
-    <input type="text" class="form-control" name="q" placeholder="Search the docs" aria-label="Search the docs">
-    <div class="input-group-append">
-      <input type="submit" value="Go" class="btn btn-secondary">
-    </div>
-  </div>
-</form>
-
-<hr>
-
 {%- assign __collection = site.document_tree
   | where: 'slug': '_documentation'
   | first

src/_js/lib/Search.js

@@ -1,70 +1,46 @@
-import qs from 'query-string';
-import Lunr from './Lunr';
-import { escape } from './Helpers';
-
-const renderResult = function(data) {
-  const relativePath = data.path.replace(/^\/|\/$/g, '');
-
-  const url = escape(`${window.location.origin}/${relativePath}/`);
-  const path = relativePath
-    .split(/[#\/]/)
-    .map(segment => {
-      return `<span class="path-segment">${escape(segment)}</span>`;
-    })
-    .join('');
-  return $(`
-    <div class="mb-3">
-      <h3 class="h5 mb-0"><a href="${url}">${escape(data.title)}</a></h3>
-      <div class="pl-2">
-        <aside>(${path})</aside>
-        <p class="mb-0">${escape(data.excerpt)}</p>
-      </div>
-    </div>
-  `);
-};
-
-const renderResults = function(results, query) {
-  const $results = $('[data-search-results]').clone();
-  if (!results || !results.length) {
-    const msg = `No results${!!results ? ` matching "${escape(query)}"` : ''}`;
-    $results.append(`<p>${msg}</p>`);
-  }
-  $.each(results, function(i, result) {
-    $results.append(renderResult(result));
-  });
-  return $results;
-};
-
-class Search {
-  constructor($target) {
-    this.data;
-    this.results = {};
-    this.pageTemplate = $('html').html();
-
-    this.init = this.init.bind(this);
-
-    this.$target = $target;
-    this.Lunr = new Lunr({
-      cacheUrl: '/search/cache.json',
-      indexUrl: '/search/index.json'
-    });
-  }
-
-  // Fetch search results and attach the results
-  init() {
-    const params = qs.parse(location.search);
-
-    if (!params.q) {
-      return Promise.resolve().then(() => {
-        $('[data-search-results]').append(renderResults());
-      });
+import instantsearch from 'instantsearch.js';
+import { searchBox, hits } from 'instantsearch.js/es/widgets';
+$(function() {
+  const search = instantsearch({
+    appId: 'OOK48W9UCL',
+    apiKey: '2d64ec1106519cbc672d863b0d200782',
+    indexName: 'sentry-docs',
+    searchFunction: function(helper) {
+      var $hits = $('#hits');
+      if (helper.state.query === '') {
+        $hits.addClass('d-none');
+      } else {
+        helper.search();
+        $hits.removeClass('d-none');
+      }
     }
-    $('input[name="q"]').val(params.q);
+  });
 
-    return this.Lunr.search(params.q).then(results => {
-      $('[data-search-results]').append(renderResults(results, params.q));
-    });
-  }
-}
+  search.addWidget(
+    searchBox({
+      container: '#search-box',
+      placeholder: 'Search the docs',
+      magnifier: false,
+      reset: false,
+      cssClasses: {
+        input: 'form-control'
+      }
+    })
+  );
+
+  search.addWidget(
+    hits({
+      container: '#hits',
+      cssClasses: {
+        root: 'list-group search-results'
+      },
+      templates: {
+        empty: '<div class="list-group-item">No results</div>',
+        allItems:
+          '{{#hits}}<a href="{{ url }}" class="list-group-item list-group-item-action"><h6 class="mb-1">{{{ _highlightResult.title.value }}}</h6>{{{ _snippetResult.content.value }}}</a>{{/hits}}'
+      }
+    })
+  );
 
-export default new Search();
+  search.start();
+});

src/_js/lib/User.js

@@ -90,6 +90,7 @@ export default class User {
         this.update();
       })
       .catch(error => {
+        $('[data-hide-when-logged-in]').toggleClass('d-none', false);
         this.update();
       })
       .then(() => {