Search: Include results from the new api.qunitsjs.com index

* Add a second autocomplete source for the 'qunitjs-api'
  Algolia index that exits as of
  qunitjs/qunit@2486b22829d5e.

* Fix its URLs to start with https://api.qunitjs.com as otherwise
  the links are 404 Not Found. The indexer part of jekyll-algolia
  indexes based on local context only. This means it can index
  new content during the Travis build, but also means it's not
  aware of the "real" URL when queried from a sibling site.
  There might be an official way to do this, but I couldn't find
  one.

* Fix the empty() template for "No results"  to be part of the
  shared 'templates' options rather than per-source as otherwise
  the message will render twice if neither index has results.

* Change the '& + &' border-top rule for lines between results
  to now be at the top of all results including the first one.
  This is needed because each source has its own aa-suggestions
  wrapper and thus the line between the last API result and first
  main site result would otherwise be missing.
  The line is subtle enough that it seems invisible to me at
  the edge between white and dark purple, but we could make it
  more invisible with a negative margin, or with some more
  elaborate selectors or by somehow making autocomplete.js merge
  the results before rendering. I haven't done either for now as
  this seems simpler and good enough.

Other improvements:

* Make use of the heading information from Algolia's index.
  The makes results render as:

  - Plugins › qunit-assert-step
    A QUnit plugin for asserting the proper sequence…

  Instead of:

  - Plugins
    A QUnit plugin for asserting the proper sequence…

* Make use of the anchor information from Algolia's index.
  This makes the result URL and its on-click behaviour
  jump straight to the relevant heading.

* Remove `<div class="aa-empty">` wrapper. It seems autocomplete.js
  already does this, which mean it was actually generating
  div.aa-empty>div.aa-empty and thus a double margin.
  This was fixed.

* Exclude the no-js /guides/ page from the index since it only
  contains summaries of the pages it links to and distracts
  in results.

Closes qunitjs/qunit#1460.

_config.yml

@@ -46,9 +46,17 @@ kramdown:
   input: GFM
   toc_levels: "1,2"
 
-algolia: # Search
+# Search
+algolia:
   application_id: HOJ487LP0L
+  # Which index the Travis job will create/update
+  # with the content of the current Jekyll site.
+  # The auth key for this is injected as secure env variable.
   index_name: qunitjs
+  files_to_exclude:
+    # Index destination instead of intermediary
+    - guides.md
+  # Auth key for client-side search queries.
   search_only_api_key: aed00982db05bd21dd05310be057bda8
 
 # Input files

_includes/search.html

@@ -16,30 +16,64 @@
 <script>
     window.addEventListener('DOMContentLoaded', function setupSearch() {
         const client = algoliasearch('{{ site.algolia.application_id }}', '{{ site.algolia.search_only_api_key }}');
-        const index = client.initIndex('{{ site.algolia.index_name }}');
+        const indexMain = client.initIndex('{{ site.algolia.index_name }}');
+        const indexApi = client.initIndex('qunitjs-api');
         const autocompleteOptions = {
-            hint: false
+            hint: false,
+            ariaLabel: 'search input',
+            // Set debug to true if you want to inspect the dropdown
+            debug: true,
+            templates: {
+                // https://github.com/algolia/autocomplete.js/issues/248
+                empty(query) {
+                    return `No results for "${query.query}".`;
+                }
+            }
         };
+        function formatURL(suggestion) {
+            if (suggestion.anchor && suggestion.url.indexOf('#') === -1) {
+                return suggestion.url + '#' + suggestion.anchor;
+            } else {
+                return suggestion.url;
+            }
+        }
         const autocompleteSources = [
             {
-                source: autocomplete.sources.hits(index, { hitsPerPage: 5 }),
+                source: autocomplete.sources.hits(indexApi, { hitsPerPage: 5 }),
+                displayKey: '',
+                templates: {
+                    suggestion(suggestion) {
+                        const title = [ suggestion.title ].concat(suggestion.headings).join(' › ');
+                        const content = suggestion._highlightResult.content && suggestion._highlightResult.content.value || '';
+                        suggestion._href = 'https://api.qunitjs.com' + formatURL(suggestion);
+                        return `
+                            <a href="${suggestion._href}" tabindex="-1">
+                                <p class="aa-suggestion_title">${title}</p>
+                                <p class="aa-suggestion_content">${content}</p>
+                            </a>
+                        `;
+                    }
+                }
+            },
+            {
+                source: autocomplete.sources.hits(indexMain, { hitsPerPage: 5 }),
                 displayKey: '',
                 templates: {
                     suggestion(suggestion) {
+                        const title = [ suggestion.title ].concat(suggestion.headings).join(' › ');
+                        const content = suggestion._highlightResult.content && suggestion._highlightResult.content.value || '';
+                        suggestion._href = formatURL(suggestion);
                         return `
-                            <a href="${suggestion.url}" tabindex="-1">
-                                <p class="aa-suggestion_content">${suggestion._highlightResult.content.value}</p>
-                                <p class="aa-suggestion_meta">${suggestion.title}</p>
+                            <a href="${suggestion._href}" tabindex="-1">
+                                <p class="aa-suggestion_title">${title}</p>
+                                <p class="aa-suggestion_content">${content}</p>
                             </a>
                         `;
-                    },
-                    empty(query) {
-                        return `<div class="aa-empty">No results for "${query.query}".</div>`;
                     }
                 }
             }
         ];
         autocomplete('#aa-search-input', autocompleteOptions, autocompleteSources)
-            .on('autocomplete:selected', (event, suggestion) => window.location = suggestion.url);
+            .on('autocomplete:selected', (event, suggestion) => location.href = suggestion._href || suggestion.url);
     });
 </script>

css/styles.scss

@@ -14,6 +14,8 @@ $color-off-white: #eee;
 // https://brand.jquery.org/colors/#qunit-purple
 $color-brand: #9c3493; // bright purple  (primary)
 $color-accent: #390F39; // deep purple  (secondary)
+
+$color-darkgrey: #63676d; // based on 2015 api.jquery.com design
 $color-black: #333;
 
 $screen-s: 480px;
@@ -356,37 +358,46 @@ iframe {
 .aa-suggestion {
     padding: $size-spacing;
     cursor: pointer;
+    border-top: 1px solid $color-off-white;
     border-left: 2px solid transparent;
     border-right: 2px solid transparent;
     transition: background-color 0.2s, border-color 0.2s;
 
-    & + & {
-        border-top: 1px solid $color-off-white;
+    a {
+        // reset default link style
+        text-decoration: none;
     }
 
     &:hover,
     &.aa-cursor {
         background-color: rgba($color-off-white, 0.5);
         border-left: 2px solid $color-brand;
+
+        .aa-suggestion_title {
+            text-decoration: underline;
+        }
     }
 }
 
 .ais-Highlight {
     font-weight: bold;
 }
 
-.aa-suggestion_content,
-.aa-suggestion_meta {
-    margin-bottom: 0;
-    color: $color-black;
+.aa-suggestion_title,
+.aa-suggestion_content {
+    // reset paragraph margin
+    margin: 0;
+    // clip title chunks and content match  to one line
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
-
-.aa-suggestion_meta {
-    font-size: 0.8rem;
+.aa-suggestion_title {
     color: $color-brand;
-    border-top: 1px solid $color-off-white;
-    margin-top: 0.25rem;
-    padding-top: 0.25rem;
+}
+.aa-suggestion_content {
+    font-size: 0.8rem;
+    color: $color-darkgrey;
 }
 
 /* Mobile Toggle Controls */