feat: Use Algolia Docsearch

addon/components/search-input.js

@@ -1,72 +1,55 @@
 /* eslint-disable ember/no-classic-components, ember/no-classic-classes, ember/require-tagless-components, prettier/prettier, ember/no-get, ember/no-actions-hash */
 import { getOwner } from '@ember/application';
 import Component from '@ember/component';
-import { get, set } from '@ember/object';
-import { and } from '@ember/object/computed';
-import { inject as service } from '@ember/service';
-import { task, timeout } from 'ember-concurrency';
 
 import layout from '../templates/components/search-input';
 
-const SEARCH_DEBOUNCE_PERIOD = 300;
-const SEARCH_CLOSE_PERIOD = 200;
+import docsearch from '@docsearch/js';
+
+import '@docsearch/css';
 
 export default Component.extend({
   layout,
 
   classNames: ['search-input'],
 
-  searchService: service('search'),
-
-  _resultTetherConstraints: Object.freeze([
-    {
-      to: 'window',
-      pin: ['left','right']
-    }
-  ]),
-
-  _focused: false,
-
-  init() {
-    this._super(...arguments);
+  didInsertElement() {
     const config = getOwner(this).resolveRegistration('config:environment');
-    this.deprecationsGuideURL = config['deprecationsGuideURL'];
-  },
-
-  showDropdown: and('query', '_focused'),
-
-  search: task(function * (query) {
-
-    yield timeout(SEARCH_DEBOUNCE_PERIOD);
-
-    set(this, 'query', query);
-
-    // Hide and don't run query if there's no search query
-    if (!query) {
-      return set(this, '_focused', false);
+    const { algoliaId, algoliaKey, indexName } = config['algolia'] || {};
+    const deprecationsGuideURL = config['deprecationsGuideURL'];
+
+    const docsearchParams = {
+      container: '#docsearch',
+      placeholder: 'Search the guides',
+      appId: algoliaId,
+      indexName: indexName,
+      apiKey: algoliaKey,
+      searchParameters: {
+        hitsPerPage: 15,
+        restrictSearchableAttributes: ['content'],
+      },
+    };
+
+    if (this.projectVersion && this.projectVersion.match(/\d+\.\d+\.\d+/)) {
+      docsearchParams.searchParameters.facetFilters = [
+        [`version:${this.projectVersion}`],
+      ];
     }
 
-    // ensure search results are visible if the menu was previously closed above
-    set(this, '_focused', true);
-
-    yield get(this, 'searchService.search').perform(query, this.projectVersion);
-
-  }).restartable(),
-
-  closeMenu: task(function * () {
-    yield timeout(SEARCH_CLOSE_PERIOD);
-
-    set(this, '_focused', false);
-  }),
-
-  actions: {
-    onfocus() {
-      set(this, '_focused', true);
-    },
-
-    onblur() {
-      this.get('closeMenu').perform();
+    if (deprecationsGuideURL) {
+      docsearchParams.getMissingResultsUrl = () => deprecationsGuideURL;
+      docsearchParams.translations = {
+        modal: {
+          noResultsScreen: {
+            noResultsText: 'No results for',
+            suggestedQueryText: 'Try searching for',
+            reportMissingResultsText: 'Try searching the',
+            reportMissingResultsLinkText: 'deprecations guide.',
+          },
+        },
+      };
     }
 
-  }
+    docsearch(docsearchParams);
+  },
 });

addon/styles/agola-search.css

@@ -1,68 +1,34 @@
-#search-input {
-  border-radius: 18px;
-  border: 2px solid var(--color-card-border);
-  line-height: 30px;
-  padding-left: 8px;
-  width: 100%;
+.DocSearch {
+  --docsearch-primary-color: var(--color-brand);
+  --docsearch-highlight-color: var(--color-brand-hc-dark);
+  --docsearch-text-color: var(--color-gray-700);
+  --docsearch-muted-color: var(--color-gray-600);
+  --docsearch-searchbox-shadow: inset 0 0 0 2px var(--docsearch-primary-color);
+  --docsearch-modal-background: var(--color-gray-200);
+  --docsearch-footer-background: var(--color-gray-100);
+  --docsearch-modal-shadow: none;
+  --docsearch-footer-shadow: none;
+  --docsearch-logo-color: var(--color-gray-600);
+  --docsearch-hit-background: var(--color-gray-200);
+  --docsearch-hit-color: var(--color-gray-700);
+  --docsearch-hit-shadow: none;
 }
 
-/* Dropdown styling */
-.ds-dropdown-results {
-  z-index: 1; // makes sure that the search is above the version selector
-}
-.ds-dropdown-menu {
-  width: 500px;
-  background-color: white;
-  color: black;
-  border-radius: 8px;
-  margin-top: 10px;
-  border: 2px solid var(--color-card-border);
-  overflow-x: hidden;
+.DocSearch .cls-1, .cls-2 {
+  fill: var(--color-gray-600) !important;
 }
 
-/* Dropdown header styling */
-.algolia-docsearch-suggestion__main {
-  background-color: var(--color-info);
-  padding: 8px 16px;
+.DocSearch-Input:focus{
+  outline: none;
+  box-shadow: initial;
 }
 
-.algolia-docsearch-suggestion__main > .algolia-docsearch-suggestion--wrapper {
-  border: none;
-  padding: 0;
-}
-
-/* No results styling */
-.algolia-docsearch-suggestion--noresults {
-  color: var(--color-gray-600);
-  padding: 8px 16px;
-}
-
-/* Result styling */
-.algolia-docsearch-suggestion--wrapper {
-  display: flex;
-  border-bottom: 1px solid var(--color-card-border);
-  gap: 10px;
-  font-size: 14px;
-  padding: 8px 16px;
-}
-
-.algolia-docsearch-suggestion--subcategory-column {
-  flex-basis: 80px;
-  min-width: 80px;
-}
-
-.algolia-docsearch-suggestion--subcategory-column-text {
-  font-weight: bold;
-}
-
-/* Search sponsor styling */
-.powered-by-algolia {
-  display: flex;
-  justify-content: end;
-  margin: 8px;
-}
-.powered-by-algolia > a {
-  display: flex;
+#search-input {
+  border-radius: 18px;
+  border: 2px solid var(--color-card-border);
+  line-height: 30px;
+  padding-left: 8px;
+  width: 100%;
 }
 
 @media (min-width: 1008px) {
@@ -72,6 +38,15 @@
 }
 
 @media (max-width: 1007px) {
+  .DocSearch-Button {
+    width: 100%;
+    margin-left: 0 !important;
+  }
+
+  .DocSearch-Button-Placeholder {
+    display: flex !important;
+  }
+
   .ds-dropdown-menu {
     width: calc(100vw - 2rem);
   }

addon/templates/components/search-input.hbs

@@ -1,45 +1 @@
-{{!-- template-lint-disable link-rel-noopener no-action no-curly-component-invocation --}}
-{{#if this.searchService.index}}
-  <input
-    id="search-input"
-    type="search"
-    value={{this.value}}
-    oninput={{perform this.search value="target.value"}}
-    placeholder="Search the guides"
-    autocomplete="off"
-    onfocus={{action "onfocus"}}
-    onblur={{action "onblur"}}
-    data-test-search-input
-  >
-
-  {{!-- Search results dropdown --}}
-  <EmberTether @target="#search-input" @targetAttachment="bottom right" @attachment="top right" @constraints={{this._resultTetherConstraints}} @class="ds-dropdown-results">
-    {{#if this.showDropdown}}
-      <div class="ds-suggestions ds-dropdown-menu">
-        <DropdownHeader>
-          Search Results
-        </DropdownHeader>
-
-        {{#each this.searchService.results as |result|}}
-          <SearchResult @result={{result}} />
-        {{else}}
-          <div class="algolia-docsearch-suggestion">
-            <div class="algolia-docsearch-suggestion--noresults">
-              <p>
-                No results found.
-                {{#if this.deprecationsGuideURL}}
-                  Try searching the <a href={{this.deprecationsGuideURL}} target="_deprecations">deprecations guide</a>.
-                {{/if}}
-              </p>
-            </div>
-          </div>
-        {{/each}}
-        <div class="powered-by-algolia">
-          <a href="https://www.algolia.com/" target="_blank" rel="noopener">
-            <img src="/images/logos/search-by-algolia.svg" alt="Search Powered by Algolia">
-          </a>
-        </div>
-      </div>
-    {{/if}}
-  </EmberTether>
-{{/if}}
+<div id="docsearch"></div>