Setup Algolia DocSearch

antora-ui/src/css/algolia-extra.css

@@ -0,0 +1,67 @@
+.algolia-autocomplete .ds-dropdown-menu [class^=ds-dataset-] {
+  overscroll-behavior: none;
+  max-height: calc(100vh - 3.25rem);
+}
+
+.algolia-autocomplete .algolia-docsearch-suggestion--title {
+  font-weight: 500;
+}
+
+.algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--subcategory-column {
+  font-weight: normal;
+}
+
+@media screen and (max-width: 768px) {
+  .algolia-autocomplete .ds-dropdown-menu {
+    min-width: calc(100vw - 2.75rem) !important;
+  }
+}
+
+.doc .image.conum > img {
+  height: 0.9em;
+  width: auto;
+  vertical-align: -0.1em;
+}
+
+#search-input-algolia-algolia {
+  color: #333;
+  font-family: inherit;
+  font-size: 0.95rem;
+  width: 150px;
+  border: 1px solid #dbdbdb;
+  border-radius: 0.1em;
+  line-height: 1.5;
+  padding: 0.25em;
+}
+
+#search-input-algolia {
+  color: #333;
+  font-family: inherit;
+  font-size: 0.95rem;
+  width: 150px;
+  border: 1px solid #dbdbdb;
+  border-radius: 0.1em;
+  line-height: 1.5;
+  padding: 0 0.25em;
+}
+
+#search-input-algolia:disabled {
+  background-color: #dbdbdb;
+  /* disable cursor */
+  cursor: not-allowed;
+  pointer-events: all !important;
+}
+
+#search-input-algolia:disabled::placeholder {
+  color: #4c4c4c;
+}
+
+#search-input-algolia:focus {
+  outline: none;
+}
+
+@media screen and (min-width: 769px) {
+  #search-input-algolia {
+    width: 200px;
+  }
+}

antora-ui/src/css/site.css

@@ -18,3 +18,4 @@
 @import "tailwindcss/base";
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
+@import "algolia-extra.css";

antora-ui/src/partials/footer-scripts.hbs

@@ -1,7 +1,53 @@
+{{#if env.ALGOLIA_API_KEY}}
+<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2.5.2/dist/cdn/docsearch.min.js"></script>
+<script>
+  function setupAlgoliaDocsearch(){
+    document.getElementById('search-input').hidden = true;
+    document.getElementById('search-input-algolia').hidden = false;
+    var search = docsearch({
+      {{#with env.ALGOLIA_APP_ID}}
+      appId: '{{this}}',
+      {{/with}}
+      apiKey: '{{env.ALGOLIA_API_KEY}}',
+      indexName: '{{env.ALGOLIA_IDX_NAME}}',
+      inputSelector: '#search-input-algolia',
+      autocompleteOptions: { hint: false, keyboardShortcuts: ['s'] },
+      algoliaOptions: { hitsPerPage: 10 ,facetFilters: ['version:{{page.componentVersion.displayVersion}}'] },
+    }).autocomplete
+    search.on('autocomplete:closed', function () { search.autocomplete.setVal() });
+  }
+
+  function setCookie(name, value) {
+    document.cookie = name + "=" + (value || "") + "; path=/";
+  }
+
+  function getCookie(name) {
+    var nameEQ = name + "=";
+    var ca = document.cookie.split(';');
+    for (var i = 0; i < ca.length; i++) {
+      var c = ca[i];
+      while (c.charAt(0) == ' ') c = c.substring(1, c.length);
+      if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
+    }
+    return null;
+  }
+
+  const urlParams = new URLSearchParams(window.location.search);
+  const search = urlParams.get('search');
+
+  if (search === 'algolia') {
+    setCookie('search','algolia');
+    setupAlgoliaDocsearch();
+  } else if (search === 'lunr') {
+    setCookie('search','lunr');
+  } else if (getCookie('search') === 'algolia') {
+    setupAlgoliaDocsearch();
+  }
+</script>
+{{/if}}
 <script id="site-script" src="{{{uiRootPath}}}/js/site.js" data-ui-root-path="{{{uiRootPath}}}"></script>
 <script async src="{{{uiRootPath}}}/js/vendor/highlight.js"></script>
 {{#if env.SITE_SEARCH_PROVIDER}}
 {{> search-scripts}}
 {{/if}}
 <script async src="{{{uiRootPath}}}/js/vendor/tabs.js" data-sync-storage-key="preferred-tab"></script>
-

antora-ui/src/partials/head-meta.hbs

@@ -1 +1,3 @@
-    {{!-- Add additional meta tags here --}}
+    {{#if env.ALGOLIA_API_KEY}}
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2.5.2/dist/cdn/docsearch.min.css">
+    {{/if}}

antora-ui/src/partials/nav-menu.hbs

@@ -1,19 +1,15 @@
 {{#with page.navigation}}
 <div class="nav-panel-menu is-active" data-panel="menu">
-<div class="navbar-item search hide-for-print">
-  <div id="search-field" class="field has-filter">
-    <div style="display: flex; flex-direction: column;">
-      <div style="display: flex; margin-bottom: 10px;">
-        <input id="search-input" type="text" placeholder="Search the docs" {{#if @root.page.home}} autofocus{{/if}} style="flex: 1;">
-      </div>
-      <div style="display: flex;">
-        <label class="filter checkbox" style="background: none; border: none; margin-right: 10px;">
-          <input type="checkbox" data-facet-filter="component:{{@root.page.component.name}}"> &nbsp; Only in {{@root.page.component.name}}
-        </label>
+  <div class="navbar-item search hide-for-print">
+    <div id="search-field" class="field has-filter">
+      <div style="display: flex; flex-direction: column;">
+        <div style="display: flex; margin-bottom: 10px;">
+          <input id="search-input" type="text" placeholder="Search the docs [Lunr]"{{#if page.home}} autofocus{{/if}} style="flex: 1;">
+          <input id="search-input-algolia" type="text" placeholder="Search the docs [Algolia]"{{#if page.home}} autofocus{{/if}} hidden style="flex: 1;">
+        </div>
       </div>
     </div>
   </div>
-</div>
   <nav class="nav-menu">
     {{#with @root.page.componentVersion}}
     <h3 class="title"><a href="{{{relativize ./url}}}">{{./title}}</a></h3>

sitedoc.sh

@@ -61,6 +61,11 @@ if [ ! -d "node_modules" ] || [ "$(find package.json -prune -printf '%T@\n' | cu
   npm install
 fi
 
+# TODO: Find a better way of setting these
+export ALGOLIA_APP_ID="HXFFX7FZYE"
+export ALGOLIA_API_KEY="6a58e88f13574fdb9b18ca0159e896b4"
+export ALGOLIA_IDX_NAME="cppalliancedocs"
+
 echo $ANTORA_CMD --fetch --attribute page-boost-branch="$1" --attribute page-commit-id="$commit_id" site.playbook.yml
 $ANTORA_CMD --fetch --attribute page-boost-branch="$1" --attribute page-commit-id="$commit_id" site.playbook.yml