Algolia search modifications (#3522)

* working on modifying the display of search results

* added product and version to search results dropdown, updated search attributes

* fixed result highlighting

* updated the sidebar toggle icon

assets/styles/layouts/_algolia-search-overrides.scss

@@ -104,6 +104,18 @@
   }
 }
 
+// Search result version tags
+.algolia-autocomplete .algolia-docsearch-suggestion .search-product-version {
+  font-size: .8em;
+  font-weight: $medium;
+  opacity: .5;
+  margin-left: .35rem;
+}
+
+.algolia-autocomplete .algolia-docsearch-suggestion--title .search-product-version {
+  display: none;
+}
+
 ////////////////////////////////////////////////////////////////////////////////
 ///////////////////////////////// MEDIA QUERIES ////////////////////////////////
 ////////////////////////////////////////////////////////////////////////////////

assets/styles/layouts/_sidebar-toggle.scss

@@ -37,7 +37,7 @@ $vertical-offset: -14px;
 
 .content-wrapper .sidebar-toggle {
   display: none;
-  padding: .3rem .3rem .3rem .4rem;
+  padding: .4rem .6rem;
   width: 35px;
   left: 0;
   background-color: $body-bg;
@@ -52,12 +52,12 @@ $vertical-offset: -14px;
   &:before { transform: rotateY(180deg); }
   &:after { transform: rotate(180deg); }
   & > a {
-    font-size: 1.25rem;
+    font-size: 1rem;
   }
 }
 
 .sidebar .sidebar-toggle {
-  padding: .2rem;
+  padding: .4rem .6rem;
   width: 30px;
   right: 0;
   background-color: $article-bg;
@@ -70,7 +70,7 @@ $vertical-offset: -14px;
     right: 0;
   }
   & > a {
-    font-size: 1.5rem;
+    font-size: 1rem;
   }
 }
 

layouts/_default/landing-influxdb.html

@@ -9,7 +9,7 @@
 <div class="page-wrapper">
   {{ partial "sidebar.html" . }}
   <div class="content-wrapper">
-    <div class="sidebar-toggle" onclick="toggle_sidebar('sidebar-open');return false;"><a href="#">&#xe91c;</a></div>
+    {{ partial "sidebar/sidebar-toggle.html" }}
 
     <div class="cards">
       <div class="card main" id="get-started">

layouts/_default/list.html

@@ -4,7 +4,7 @@
 <div class="page-wrapper">
   {{ partial "sidebar.html" . }}
   <div class="content-wrapper">
-    <div class="sidebar-toggle" onclick="toggle_sidebar('sidebar-open');return false;"><a href="#">&#xe91c;</a></div>
+    {{ partial "sidebar/sidebar-toggle.html" }}
 
     <div class="article">
       <article class="article--content">

layouts/_default/section.html

@@ -4,7 +4,7 @@
 <div class="page-wrapper">
   {{ partial "sidebar.html" . }}
   <div class="content-wrapper">
-    <div class="sidebar-toggle" onclick="toggle_sidebar('sidebar-open');return false;"><a href="#">&#xe91c;</a></div>
+    {{ partial "sidebar/sidebar-toggle.html" }}
     {{ partial "article.html" . }}
     <div class="copyright">© {{ now.Year }} InfluxData, Inc.</div>
   </div>

layouts/_default/single.html

@@ -4,7 +4,7 @@
 <div class="page-wrapper">
   {{ partial "sidebar.html" . }}
   <div class="content-wrapper">
-    <div class="sidebar-toggle" onclick="toggle_sidebar('sidebar-open');return false;"><a href="#">&#xe91c;</a></div>
+    {{ partial "sidebar/sidebar-toggle.html" }}
     {{ partial "article.html" . }}
     <div class="copyright">© {{ now.Year }} InfluxData, Inc.</div>
   </div>

layouts/_default/tags-landing.html

@@ -4,7 +4,7 @@
 <div class="page-wrapper">
   {{ partial "sidebar.html" . }}
   <div class="content-wrapper">
-    <div class="sidebar-toggle" onclick="toggle_sidebar('sidebar-open');return false;"><a href="#">&#xe91c;</a></div>
+    {{ partial "sidebar/sidebar-toggle.html" }}
 
     <div class="article">
       <article class="article--content">

layouts/partials/footer/search.html

@@ -15,15 +15,53 @@ docsearch({
   inputSelector: '#algolia-search-input',
   // Set debug to true if you want to inspect the dropdown
   debug: true,
+  transformData: function (hits) {
+    function fmtVersion (version) {
+      if (version == null) {
+        return '';
+      } else if (version === 'cloud') {
+        return 'Cloud';
+      } else if (/v\d\./.test(version)) {
+        return version;
+      } else {
+        return '';
+      }
+    };
+    productNames = {
+      influxdb: 'InfluxDB',
+      enterprise_influxdb: 'InfluxDB Enterprise',
+      flux: 'Flux',
+      telegraf: 'Telegraf',
+      chronograf: 'Chronograf',
+      kapacitor: 'Kapacitor',
+      platform: 'InfluxData Platform',
+      resources: 'Additional Resources',
+    };
+    hits.map(hit => {
+      pathData = new URL(hit.url).pathname.split('/').filter(n => n);
+      product = productNames[pathData[0]];
+      version = fmtVersion(pathData[1]);
+
+      hit.product = product;
+      hit.version = version;
+      hit.hierarchy.lvl0 =
+        hit.hierarchy.lvl0 +
+        ` <span class=\"search-product-version\">${product} ${version}</span>`;
+      hit._highlightResult.hierarchy.lvl0.value =
+        hit._highlightResult.hierarchy.lvl0.value +
+        ` <span class=\"search-product-version\">${product} ${version}</span>`;
+    });
+    return hits;
+  },
   algoliaOptions: {
     hitsPerPage: 10,
     'facetFilters': [
       {{ if or (eq $product "platform") (eq $product "resources") (le (len $productPathData) 1) }}
         'latest:true'
       {{ else if $includeFlux }}
-        ['searchTag: {{ $product }}-{{ $currentVersion }}', 'flux:true']
+        ['searchTag: {{ $product }}-{{ $currentVersion }}', 'flux:true', 'resources:true']
       {{ else }}
-        'searchTag: {{ $product }}-{{ $currentVersion }}'
+        ['searchTag: {{ $product }}-{{ $currentVersion }}', 'resources:true']
       {{ end }}
     ]
   },

layouts/partials/header/coveo-meta-data.html

@@ -1,7 +1,7 @@
 {{ $productPathData := findRE "[^/]+.*?" .RelPermalink }}
 {{ $product := index $productPathData 0 | default "none" }}
 {{ $currentVersion := index $productPathData 1 | default "none" }}
-{{ $isLatest := cond (eq .Kind "home") true (or (eq $currentVersion (index $.Site.Data.products $product).latest) (eq $currentVersion "cloud") (eq $product "platform")) }}
+{{ $isLatest := cond (eq .Kind "home") true (or (eq $currentVersion (index $.Site.Data.products $product).latest) (eq $currentVersion "cloud") (eq $product "platform") (eq $product "resources")) }}
 
 <meta name="latest" content="{{ cond $isLatest true false }}">
 <meta name="last-modified" content="{{ .Lastmod }}">

layouts/partials/header/search-attributes.html

@@ -4,6 +4,7 @@
 {{ $latestFlux := .Site.Data.products.flux.latest }}
 {{ $fluxPath := print "/flux/" $latestFlux "/" }}
 {{ $isFluxLatest := cond (in .RelPermalink $fluxPath) true false }}
+{{ $isResources :=  cond (eq $product "resources") true false}}
 {{ $searchTag := print $product "-" $currentVersion }}
 
 {{ if not .IsHome }}
@@ -18,3 +19,7 @@
 {{ if $isFluxLatest }}
   <meta name="docsearch:flux" content="true">
 {{ end }}
+
+{{ if $isResources }}
+  <meta name="docsearch:resources" content="true">
+{{ end }}

layouts/partials/sidebar.html

@@ -32,7 +32,7 @@
 {{ $searchPlaceholder := .Scratch.Get "searchPlaceholder" }}
 
 <aside class="sidebar">
-  <div class="sidebar-toggle" onclick="toggle_sidebar('sidebar-closed');return false;"><a href="#">&#xe919;</a></div>
+  {{ partial "sidebar/sidebar-toggle.html" (dict "state" "close") }}
   <div class="search-and-nav-toggle">
     <div class="sidebar--search">
       <input  class="sidebar--search-field"

layouts/partials/sidebar/sidebar-toggle.html

@@ -0,0 +1,3 @@
+{{- $initialState := .state | default "open" -}}
+{{- $modifiedState := cond (eq $initialState "close") "closed" "open" -}}
+<div class="sidebar-toggle" onclick="toggle_sidebar('sidebar-{{ $modifiedState }}');return false;"><a href="#"><span class="cf-icon sidebar-{{ $initialState }}-new"></span></a></div>