Add Algolia search

Setup Travis to run algolia to index content for search. Ref qunitjs/qunitjs.com#151.
qunitjs · Apr 14, 2018 · 8c93ef0 · 8c93ef0
1 parent bf82dbf
commit 8c93ef0
Show file tree

Hide file tree

Showing 7 changed files with 172 additions and 5 deletions.
diff --git a/.travis.yml b/.travis.yml
@@ -0,0 +1,10 @@
+language: ruby
+cache: bundler
+script:
+  - bundle exec jekyll algolia
+branches:
+  only:
+    - master
+    - gh-pages
+rvm:
+ - 2.4
diff --git a/Gemfile b/Gemfile
@@ -1,2 +1,3 @@
 source 'https://rubygems.org'
 gem 'github-pages', group: :jekyll_plugins
+gem 'jekyll-algolia', group: :jekyll_plugins
diff --git a/Gemfile.lock b/Gemfile.lock
@@ -8,6 +8,12 @@ GEM
       tzinfo (~> 1.1)
     addressable (2.5.2)
       public_suffix (>= 2.0.2, < 4.0)
+    algolia_html_extractor (2.5.2)
+      json (~> 2.0)
+      nokogiri (~> 1.8.2)
+    algoliasearch (1.19.2)
+      httpclient (~> 2.8, >= 2.8.3)
+      json (>= 1.5.1)
     coffee-script (2.4.1)
       coffee-script-source
       execjs
@@ -26,6 +32,7 @@ GEM
     faraday (0.14.0)
       multipart-post (>= 1.2, < 3)
     ffi (1.9.23)
+    filesize (0.1.1)
     forwardable-extended (2.6.0)
     gemoji (3.0.0)
     github-pages (180)
@@ -83,6 +90,7 @@ GEM
       activesupport (>= 2)
       nokogiri (>= 1.4)
     http_parser.rb (0.6.0)
+    httpclient (2.8.3)
     i18n (0.9.5)
       concurrent-ruby (~> 1.0)
     jekyll (3.7.3)
@@ -98,6 +106,15 @@ GEM
       pathutil (~> 0.9)
       rouge (>= 1.7, < 4)
       safe_yaml (~> 1.0)
+    jekyll-algolia (1.3.4)
+      algolia_html_extractor (~> 2.5.2)
+      algoliasearch (~> 1.18)
+      filesize (~> 0.1)
+      jekyll (~> 3.0)
+      json (~> 2.0)
+      nokogiri (~> 1.6)
+      progressbar (~> 1.9)
+      verbal_expressions (~> 0.1.5)
     jekyll-avatar (0.5.0)
       jekyll (~> 3.0)
     jekyll-coffeescript (1.1.1)
@@ -192,6 +209,7 @@ GEM
       gemoji (~> 3.0)
       html-pipeline (~> 2.2)
       jekyll (~> 3.0)
+    json (2.1.0)
     kramdown (1.16.2)
     liquid (4.0.0)
     listen (3.1.5)
@@ -213,6 +231,7 @@ GEM
       sawyer (~> 0.8.0, >= 0.5.3)
     pathutil (0.16.1)
       forwardable-extended (~> 2.6)
+    progressbar (1.9.0)
     public_suffix (2.0.5)
     rb-fsevent (0.10.3)
     rb-inotify (0.9.10)
@@ -239,12 +258,14 @@ GEM
     tzinfo (1.2.5)
       thread_safe (~> 0.1)
     unicode-display_width (1.3.0)
+    verbal_expressions (0.1.5)
 
 PLATFORMS
   ruby
 
 DEPENDENCIES
   github-pages
+  jekyll-algolia
 
 BUNDLED WITH
    1.16.1
diff --git a/_config.yml b/_config.yml
@@ -28,6 +28,11 @@ kramdown:
   input: GFM
   toc_levels: "1,2"
 
+algolia: # Search
+  application_id: HOJ487LP0L
+  index_name: qunitjs
+  search_only_api_key: aed00982db05bd21dd05310be057bda8
+
 exclude:
   - Gemfile
   - Gemfile.lock

diff --git a/_includes/search.html b/_includes/search.html
@@ -0,0 +1,39 @@
+<div class="aa-input-container">
+    <input type="search" id="aa-search-input" class="aa-input-search" placeholder="Search..." name="search" autocomplete="off">
+    <svg class="aa-input-icon" viewBox="654 -372 1664 1664">
+        <path d="M1806,332c0-123.3-43.8-228.8-131.5-316.5C1586.8-72.2,1481.3-116,1358-116s-228.8,43.8-316.5,131.5  C953.8,103.2,910,208.7,910,332s43.8,228.8,131.5,316.5C1129.2,736.2,1234.7,780,1358,780s228.8-43.8,316.5-131.5  C1762.2,560.8,1806,455.3,1806,332z M2318,1164c0,34.7-12.7,64.7-38,90s-55.3,38-90,38c-36,0-66-12.7-90-38l-343-342  c-119.3,82.7-252.3,124-399,124c-95.3,0-186.5-18.5-273.5-55.5s-162-87-225-150s-113-138-150-225S654,427.3,654,332  s18.5-186.5,55.5-273.5s87-162,150-225s138-113,225-150S1262.7-372,1358-372s186.5,18.5,273.5,55.5s162,87,225,150s113,138,150,225  S2062,236.7,2062,332c0,146.7-41.3,279.7-124,399l343,343C2305.7,1098.7,2318,1128.7,2318,1164z" />
+    </svg>
+</div>
+
+<script src="https://cdn.jsdelivr.net/combine/npm/algoliasearch@3.26.0,npm/autocomplete.js@0.29.0/dist/autocomplete.min.js" defer></script>
+<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 autocompleteOptions = {
+            hint: false,
+            debug: true
+        };
+        const autocompleteSources = [
+            {
+                source: autocomplete.sources.hits(index, { hitsPerPage: 5 }),
+                displayKey: '',
+                templates: {
+                    suggestion(suggestion) {
+                        return `
+                            <a href="${suggestion.url}">
+                                <p class="aa-suggestion_content">${suggestion._highlightResult.content.value}</p>
+                                <p class="aa-suggestion_meta">${suggestion.title}</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);
+    });
+</script>
diff --git a/_layouts/wrapper.html b/_layouts/wrapper.html
@@ -1,6 +1,6 @@
 <!doctype html>
 <html lang="en">
-  <head>
+<head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="chrome=1">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -12,8 +12,8 @@
     <meta name="twitter:card" content="summary_large_image">
     <meta name="twitter:description" content="API reference documentation for QUnit">
     <meta name="twitter:title" content="QUnit API Docs">
-  </head>
-  <body>
+</head>
+<body>
     <!-- <a class="a11y" href="#main">skip to content</a> -->
 
     <header class="site-header" role="banner">
@@ -22,6 +22,10 @@
                 <img src="/img/logo-with-colored-text.svg" alt="QUnit Logo">
             </a>
 
+            <div class="site-search">
+                {% include search.html %}
+            </div>
+
             <nav class="site-nav">
                 <ul class="site-nav-list">
                     <li class="site-nav-item">
@@ -65,5 +69,5 @@
             <p class="copyright">Copyright &copy; 2018 <a href="https://js.foundation/" target="_blank" rel="noopener noreferrer">JS Foundation</a> and contributors</p>
         </div>
     </footer>
-  </body>
- </html>
+</body>
+</html>
diff --git a/css/styles.scss b/css/styles.scss
@@ -216,6 +216,93 @@ iframe {
     color: $color-brand;
 }
 
+/* Search */
+
+.site-search {
+    align-self: center;
+    position: relative;
+}
+
+.aa-input-container {
+    display: inline-block;
+    position: relative;
+}
+
+.aa-input-search {
+    width: 20rem;
+    border: 1px solid $color-off-white;
+    border-radius: 3px;
+    padding: 12px 28px 12px 12px;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+
+    &::-webkit-search-decoration,
+    &::-webkit-search-cancel-button,
+    &::-webkit-search-results-button,
+    &::-webkit-search-results-decoration {
+        display: none;
+    }
+}
+
+.aa-input-icon {
+    height: 16px;
+    width: 16px;
+    position: absolute;
+    top: 50%;
+    right: 16px;
+    transform: translateY(-50%);
+    fill: #e4e4e4;
+}
+
+.aa-dropdown-menu {
+    background-color: $color-white;
+    border-radius: 3px;
+    min-width: 20rem;
+    margin-top: $size-spacing;
+    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
+}
+
+.aa-empty {
+    padding: $size-spacing;
+}
+
+.aa-suggestion {
+    padding: $size-spacing;
+    cursor: pointer;
+    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;
+    }
+
+    &:hover,
+    &.aa-cursor {
+        background-color: rgba($color-off-white, 0.5);
+        border-left: 2px solid $color-brand;
+    }
+}
+
+.ais-Highlight {
+    font-weight: bold;
+}
+
+.aa-suggestion_content,
+.aa-suggestion_meta {
+    margin-bottom: 0;
+    color: $color-black;
+}
+
+.aa-suggestion_meta {
+    font-size: 0.8rem;
+    color: $color-brand;
+    border-top: 1px solid $color-off-white;
+    margin-top: 0.25rem;
+    padding-top: 0.25rem;
+}
+
 /* Home Page Hero */
 
 .hero {