Merge pull request #3324 from tvdeyen/guides/algolia-docsearch

[Guides] Add Algolia Docsearch

guides/.gitignore

@@ -1,2 +1,3 @@
 .tmp
 node_modules
+build

guides/package.json

@@ -32,14 +32,12 @@
   "dependencies": {
     "axios": "^0.18.1",
     "debug": "^2.6.9",
-    "dompurify": "1.0.10",
+    "docsearch.js": "^2.6.3",
     "headroom.js": "0.9.4",
     "jquery": "^3.4.0",
     "js-yaml": "^3.13.1",
-    "lunr": "2.2.0",
     "numeral": "^2.0.6",
     "popper.js": "^1.14.3"
-
   },
   "resolutions": {
     "debug": "^2.6.9",

guides/source/assets/javascripts/common.js

@@ -71,7 +71,7 @@ function placeholderPolyfill() {
   this.classList[this.value ? 'remove' : 'add']('placeholder-shown');
 }
 
-document.querySelectorAll('[placeholder]').forEach(el => {
+document.querySelectorAll('[placeholder]').forEach((el) => {
   el.addEventListener('change', placeholderPolyfill);
   el.addEventListener('keyup', placeholderPolyfill);
-});
+});

guides/source/assets/javascripts/search.js

@@ -1,73 +1,36 @@
-import lunr from 'lunr';
-import DOMPurify from 'dompurify';
-
-var query = DOMPurify.sanitize(decodeURIComponent(window.location.search.match(/inputSearch=(.*?)(&|$)/)[1]).replace('+', ' '));
-
-function populateIndex(data) {
-  var index = lunr(function(){
-    this.field('title', { boost: 10 });
-    this.field('content');
-    this.field('url');
-    this.ref('id');
-    var lunr_index = this
-
-    data.forEach(function(item) {
-      lunr_index.add(item);
-    });
-  });
-
-  return index;
-}
-
-function contentList(data) {
-  var contents = [];
-  data.forEach(function(item) {
-    contents.push(item);
-  });
-  return contents;
-}
-
-function search(index, contents){
-  let results = index.search(query)
-  document.querySelector('.search-results-title strong').innerHTML = query;
-  addSearchResults(results, contents, query)
-}
-
-function addSearchResults(results, contents) {
-  let template = document.querySelector('.result-template').content;
-  let resultList = document.querySelector('.results-list');
-
-  results.forEach(function(result) {
-    let list_item = template.cloneNode(true);
-
-    let title = contents[result.ref].title;
-    let body = contents[result.ref].content;
-    let href = contents[result.ref].url;
-
-    list_item.querySelector('.title a').innerHTML = highlightQuery(title, query);
-    list_item.querySelector('.title a').href = href;
-    list_item.querySelector('.category').innerHTML = formatCategory(href);
-    list_item.querySelector('p').innerHTML = formatBody(body, query)
-
-    resultList.appendChild(list_item);
-  });
-}
-
-function formatCategory(href, title) {
-  let category = href.split('/')[2].split('-').join(' ').replace(/^./g, l => l.toUpperCase());
-  return 'Developer Documentation > ' + category;
-}
-
-function highlightQuery(text) {
-  let re = new RegExp('((?:^|>)[^<>]*?)('+query+')([^<>]*?(?:$|<))', "gim");
-  return text.replace(re, '$1<span class="search-highlight">$2</span>$3');
-}
-
-function formatBody(body) {
-  return highlightQuery(body.match(/<p>([\s\S]*?)<\/p>/)[0]);
-}
-
-let data = JSON.parse(sessionStorage.getItem('search_index'));
-let index = populateIndex(data);
-let contents = contentList(data);
-search(index, contents);
+import docsearch from "docsearch.js"
+
+const input = document.querySelector('#inputSearch')
+const label = document.querySelector('label[for="inputSearch"]')
+
+docsearch({
+  apiKey: 'a021104be0e00dbc782914786fc9fdec',
+  indexName: 'solidus',
+  inputSelector: '#inputSearch',
+  autocompleteOptions: {
+    autoWidth: false,
+    openOnFocus: true,
+    autoselect: true
+  }
+})
+
+input.addEventListener('focus', () => {
+  input.classList.remove('placeholder-shown')
+  label.classList.add('input-focused')
+})
+
+input.form.addEventListener('submit', (event) => {
+  event.preventDefault()
+  return false
+})
+
+input.addEventListener('blur', () => {
+  if (input.value === '') {
+    input.classList.add('placeholder-shown')
+    label.classList.remove('input-focused')
+  }
+})
+
+document.addEventListener('DOMContentLoaded', () => {
+  input.value = ''
+})

guides/source/assets/stylesheets/components/_search.scss

@@ -0,0 +1,19 @@
+.search-box .algolia-autocomplete {
+  width: 100%;
+
+  .ds-dropdown-menu {
+    min-width: 100%;
+    max-width: 100%;
+  }
+
+  &.algolia-autocomplete-right .ds-dropdown-menu::before {
+    left: 48px;
+  }
+}
+
+label[for="inputSearch"].input-focused {
+  padding-bottom: 0;
+  background: #ffffff;
+  font-size: 12px;
+  padding-top: 8px;
+}

guides/source/assets/stylesheets/site.scss

@@ -29,3 +29,4 @@
 
 
 
+@import "~docsearch.js/dist/npm/styles/main.scss";

guides/source/layouts/layout.erb

@@ -36,8 +36,7 @@
 
 <%= javascript_include_tag "vendor" %>
 <%= javascript_include_tag "common" %>
-<%= javascript_include_tag "search_index" %>
-<%= javascript_include_tag "search" if (current_page.data.index_options == "search") %>
+<%= javascript_include_tag "search" %>
 <%= yield_content :scripts %>
 </body>
 </html>

guides/source/partials/_header.erb

@@ -12,10 +12,10 @@
       </a>
     </div>
 
-    <form class="search-box" action="<%= url_for('/search/index.html') %>" novalidate>
+    <form class="search-box" novalidate>
       <div class="form-group form-group-submittable">
         <div class="has-float-label">
-          <input type="email" class="form-control h-auto placeholder-shown" name="inputSearch" id="inputSearch" placeholder="Search Solidus Documentation">
+          <input type="text" class="form-control h-auto placeholder-shown" name="inputSearch" id="inputSearch" placeholder="Search Solidus Documentation" value="">
           <label for="inputSearch">Search Solidus Documentation</label>
           <button type="submit" class="btn btn-link"><%= inline_svg("icons/search.svg", class: "isvg") %></button>
         </div>

guides/webpack.common.js

@@ -10,9 +10,8 @@ module.exports = {
   entry: {
     "common": './source/assets/javascripts/common.js',
     "search": './source/assets/javascripts/search.js',
-    "search_index": './source/assets/javascripts/search_index.js',
     "site": './source/assets/stylesheets/site.scss',
-    "vendor": ["jquery", "bootstrap", "lunr"],
+    "vendor": ["jquery", "bootstrap"],
   },
   output: {
     path: __dirname + '/.tmp/assets/javascripts',