Updated coveo to use Atomic + support coveo on Mainframe

assets/css/v2/style.css

@@ -217,7 +217,6 @@ nav {
 .sidebar-layout {
   display: flex;
   flex-direction: column;
-  z-index: 9999;
 }
 
 @media (max-width: 1528px) {
@@ -371,6 +370,81 @@ nav {
   display: flex;
 }
 
+/* Coveo */
+#search-v2 {
+  display: inline-block !important;
+  width: 95vw;
+  grid-column: 1 / -1;
+}
+
+atomic-search-box {
+  &::part(wrapper) {
+    border-radius: 0;
+    border-color: black;
+  }
+
+  &::part(suggestions-wrapper) {
+    border-radius: 0;
+    border-color: black;
+    width: calc(100% + 2px);
+    margin-left: -1px;
+  }
+}
+
+atomic-query-summary {
+  /* Show duration */
+  &::part(duration) {
+    display: inline-block !important;
+  }
+}
+
+atomic-search-layout {
+  grid-template-areas:
+    "atomic-section-search"
+    "atomic-section-main"
+    "." !important;
+
+  grid-template-columns: minmax(50%, 100%) !important;
+
+  @media (min-width: 1024px) {
+    grid-template-areas:
+      ".                     atomic-section-search"
+      "atomic-section-facets atomic-section-main  "
+      "atomic-section-facets .                    " !important;
+
+    grid-template-columns: minmax(17rem, 24rem) minmax(50%, 100%) !important;
+    column-gap: calc(1.5rem + 2rem) !important;
+  }
+}
+
+atomic-search-layout atomic-layout-section[section="search"] {
+  /* Override Coveo's width to be full */
+  max-width: 100%;
+  width: 100% !important;
+}
+
+.atomic-full-summary-and-sort {
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+  gap: 1rem;
+  justify-content: space-between;
+
+  @media (min-width: 480px) {
+    flex-direction: row;
+    align-items: center;
+  }
+
+  atomic-sort-dropdown::part(label) {
+    margin-left: 0;
+  }
+}
+
+#atomic-search-box-xqtsq-popup {
+  z-index: 9999;
+}
+
+/* Sidebar */
 .sidebar {
   display: flex;
   flex-direction: column;

assets/js/coveo.js

@@ -20,7 +20,51 @@ async function getsearchObj() {
   return response.json();
 }
 
-document.addEventListener('DOMContentLoaded', async () => {
+async function atomicCoveo() {
+  await customElements.whenDefined('atomic-search-interface');
+  const searchInterface = document.querySelector('#search-v2');
+  const searchInterfaceStandalone =
+    document.querySelector('#search-standalone');
+  const token = localStorage.getItem('coveo_jwt_v1');
+  const org_id = localStorage.getItem('coveo_org_id_v1');
+  let searchObj = { token, org_id };
+
+  if (token === null || org_id === null || isJwtExpired(token)) {
+    searchObj = await getsearchObj();
+    localStorage.setItem('coveo_jwt_v1', searchObj.token);
+    localStorage.setItem('coveo_org_id_v1', searchObj.org_id);
+  }
+
+  if (searchInterface) {
+    await searchInterface.initialize({
+      accessToken: token,
+      organizationId: org_id,
+      preprocessRequest: (request, clientOrigin, metadata) => {
+        const body = JSON.parse(request.body);
+        body.q = `<@- ${body.q} -@>`;
+        request.body = JSON.stringify(body);
+
+        return request;
+      },
+    });
+    searchInterface.executeFirstSearch();
+  }
+
+  await searchInterfaceStandalone.initialize({
+    accessToken: token,
+    organizationId: org_id,
+    preprocessRequest: (request, clientOrigin, metadata) => {
+      const body = JSON.parse(request.body);
+      body.q = `<@- ${body.q} -@>`;
+      request.body = JSON.stringify(body);
+
+      return request;
+    },
+  });
+  searchInterfaceStandalone.executeFirstSearch();
+}
+
+async function legacyCoveo() {
   const token = localStorage.getItem('coveo_jwt_v1');
   const org_id = localStorage.getItem('coveo_org_id_v1');
   let searchObj = { token, org_id };
@@ -79,4 +123,12 @@ document.addEventListener('DOMContentLoaded', async () => {
       },
     },
   });
+}
+
+document.addEventListener('DOMContentLoaded', async () => {
+  if (localStorage.getItem('useNewTheme') === 'true') {
+    atomicCoveo();
+  } else {
+    legacyCoveo();
+  }
 });

layouts/_default/baseof.html

@@ -57,7 +57,7 @@
       });
 
       // swap out v1 and v2 elements
-      const v1ElementIds = ["sidebar", "footer", "toc", "api"]
+      const v1ElementIds = ["sidebar", "footer", "toc", "api", "search-v1"]
 
       v1ElementIds.forEach((elementId) => {
         const element = document.getElementById(elementId);
@@ -170,9 +170,10 @@
 
     <section class="base-layout">
       <section class="breadcrumb-layout">
-        <div data-mf="true" id="searchbox" style="display:none;">
-          <div class="CoveoSearchbox-v2" data-placeholder='Search NGINX Docs...'></div>
-        </div>
+        <atomic-search-interface id="search-standalone" data-mf="true" style="display:none;">
+          <atomic-search-box redirection-url="/search.html">
+          </atomic-search-box>
+        </atomic-search-interface>
         {{ if not .IsHome }}
           {{ if not (in .Params.display_breadcrumb "false" ) }}
           {{ partial "breadcrumb" .}}  

layouts/partials/scripts.html

@@ -19,6 +19,14 @@
 <script src="{{ $mermaid.RelPermalink }}" type="text/javascript" integrity="{{ $mermaid.Data.Integrity }}"></script>
 {{ end }}
 
+<!-- Coveo Atomic -->
+<script
+  type="module"
+  src="https://static.cloud.coveo.com/atomic/v3.19.0/atomic.esm.js"
+  integrity="sha512-VA9k6iDWhwxl8bwKUYPD63l93lGX7daV60k3yFxEt9EuEq4iWvsu5COq1mZ8OXKl0KCOFlUSDXS32Cy+YwbufQ=="
+  crossorigin="anonymous">
+</script>
+
 <!-- START COVEO -->
 <script class="coveo-script" src="https://static.cloud.coveo.com/searchui/v2.10104/0/js/CoveoJsSearch.Lazy.min.js"
   integrity="sha512-HxdDBIp5snbqtu1TPkBnXLKEvN9IPz3PeZW8zT9KfsflV9Ck822XDroDlpVbfCfXeiu8C0RDVn0fdu7aGy/H1g=="

layouts/partials/styles.html

@@ -41,6 +41,13 @@
   integrity="sha512-9/A9yVCU4GS6/iIwTRJKnan4Hf8gDKj3anwItN9QCsU8SixaT5xkjjWsZ/iq0TWaizhtqOLacadXJfxHlwYCcA=="
   crossorigin="anonymous" />{{ end }}
 
+<!-- load CSS Atomic CSS -->
+<link
+  rel="stylesheet"
+  href="https://static.cloud.coveo.com/atomic/v3.19.0/themes/coveo.css"
+  integrity="sha512-m2BufPi8Tc6H2jcQfDj/PIl5H57C9jeqhbDFgFXKTtOhoC4S7ULXmx74FseZ8WXpfdT9uyccMHDBJDrIZlrUUQ=="
+  crossorigin="anonymous"/>
+
 {{ $cssHeader := $css1 | minify | fingerprint "sha512"}}
 <link href="{{ $cssHeader.RelPermalink }}" rel="stylesheet" type="text/css" id="css1">
 

layouts/search/single.html

@@ -1,10 +1,10 @@
 {{ define "main" }}
 
-<div class="row flex-xl-nowrap">
+<div class="row flex-xl-nowrap" id="search-v1">
   <main class="col-md-10 content" role="main">
     <div class="container"><h1>{{ .Title}}</h1></div>
 
-    <div id="search" class="CoveoSearchInterface" data-enable-history="true">
+    <div id="search" class="CoveoSearchInterface" data-enable-history="true" >
       <div class="CoveoFolding"></div>
       <div class="CoveoAnalytics" data-search-hub="HUB_ES_Nginx_Docs_And_Org"></div>
       <div class="coveo-search-section" style="display: none;">
@@ -102,4 +102,73 @@
         </div>
       </div>
     </div>
+  </main>
+</div>
+
+<section class="main-layout" data-mf="true" style="display: none; margin-left: 2rem;" >
+  <atomic-search-interface id="search-v2">
+    <atomic-search-layout>
+      <!-- Search/Metadata Section -->
+      <atomic-layout-section section="search">
+        <div class="atomic-full-summary-and-sort">
+          <atomic-query-summary></atomic-query-summary>
+          <atomic-sort-dropdown>
+            <atomic-sort-expression label="relevance" expression="relevancy"></atomic-sort-expression>
+            <atomic-sort-expression label="most-recent" expression="date descending"></atomic-sort-expression>
+          </atomic-sort-dropdown>
+        </div>
+      </atomic-layout-section>
+
+      <!-- Facet Section -->
+      <atomic-layout-section section="facets">
+        <atomic-search-box style="display: none;">
+        </atomic-search-box>
+        <atomic-facet field="f5_product" label="Show by product"></atomic-facet>
+        <atomic-refine-toggle></atomic-refine-toggle>
+      </atomic-layout-section>
+
+      <!-- Main Section -->
+      <atomic-layout-section section="main">
+        <!-- Results -->
+        <atomic-layout-section section="results">
+          <atomic-no-results></atomic-no-results>
+          <atomic-result-list>
+            <atomic-result-template>
+              <template>
+                <!-- Title -->
+                <atomic-result-section-title>
+                  <div style="display: flex; align-items: center; justify-content: space-between;">
+                    <atomic-result-link></atomic-result-link>
+                    <atomic-quickview></atomic-quickview>
+                  </div>
+                </atomic-result-section-title>
+
+                <!-- URL -->
+                <atomic-result-section-title-metadata>
+                  <atomic-result-printable-uri></atomic-result-printable-uri>
+                </atomic-result-section-title-metadata>
+
+                <!-- Excerpt -->
+                <atomic-result-section-excerpt>
+                  <atomic-result-text field="excerpt"></atomic-result-text>
+                </atomic-result-section-excerpt>
+
+                <!-- Date -->
+                <atomic-result-section-bottom-metadata>
+                  Modification Date: <atomic-result-date format="MMM D, YYYY"></atomic-result-date>
+                </atomic-result-section-bottom-metadata>
+              </template>
+            </atomic-result-template>
+          </atomic-result-list> 
+        </atomic-layout-section>
+
+        <!-- Pagination -->
+        <atomic-layout-section section="pagination" style="margin-top: 2rem;">
+          <atomic-pager></atomic-pager>
+          <atomic-results-per-page></atomic-results-per-page>
+        </atomic-layout-section>
+      </atomic-layout-section>
+    </atomic-search-layout>
+  </atomic-search-interface>
+</section>
 {{ end }}