feat: Support coveo on mobile + show in header

Author: lamATnginx

assets/js/coveo.js

@@ -21,10 +21,8 @@ async function getsearchObj() {
 }
 
 async function atomicCoveo() {
+  /* Fetch the credentials */
   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 };
@@ -35,8 +33,15 @@ async function atomicCoveo() {
     localStorage.setItem('coveo_org_id_v1', searchObj.org_id);
   }
 
-  if (searchInterface) {
-    await searchInterface.initialize({
+  /* Initialize the interfaces with credentials */
+  const searchPageInterface = document.querySelector('#search-v2');
+  const searchBarHeader = document.querySelector('#search-standalone-header');
+  const searchBarSidebar = document.querySelector('#search-standalone-sidebar');
+  const sidebar = document.querySelector('#sidebar-layout');
+  let searchbar;
+
+  if (searchPageInterface) {
+    await searchPageInterface.initialize({
       accessToken: token,
       organizationId: org_id,
       analytics: { analyticsMode: 'legacy' },
@@ -48,22 +53,29 @@ async function atomicCoveo() {
         return request;
       },
     });
-    searchInterface.executeFirstSearch();
-  }
+    searchPageInterface.executeFirstSearch();
+  } else {
+    // If there is a searchbar, only initialize the searchbar for the sidebar.
+    if (sidebar) {
+      searchbar = searchBarSidebar;
+    } else {
+      searchbar = searchBarHeader;
+    }
 
-  await searchInterfaceStandalone.initialize({
-    accessToken: token,
-    organizationId: org_id,
-    analytics: { analyticsMode: 'legacy' },
-    preprocessRequest: (request, clientOrigin, metadata) => {
-      const body = JSON.parse(request.body);
-      body.q = `<@- ${body.q} -@>`;
-      request.body = JSON.stringify(body);
+    await searchbar.initialize({
+      accessToken: token,
+      organizationId: org_id,
+      analytics: { analyticsMode: 'legacy' },
+      preprocessRequest: (request, clientOrigin, metadata) => {
+        const body = JSON.parse(request.body);
+        body.q = `<@- ${body.q} -@>`;
+        request.body = JSON.stringify(body);
 
-      return request;
-    },
-  });
-  searchInterfaceStandalone.executeFirstSearch();
+        return request;
+      },
+    });
+    searchbar.executeFirstSearch();
+  }
 }
 
 async function legacyCoveo() {

layouts/_default/docs.html

@@ -15,7 +15,7 @@
   {{ end }}
 
   <section class="main-layout">
-    <div class="sidebar-layout">
+    <div class="sidebar-layout" id="sidebar-layout">
       <nav data-mf="true" id="sidebar-v2" class="sidebar" style="display:none;">
         {{ partial "sidebar-v2.html" . }}
       </nav>

layouts/partials/header.html

@@ -6,11 +6,15 @@
     </a>
     {{ if ( not ( in .Site.Params.buildtype "package" ) ) }}
       <div class="navbar navbar-nav">
-            <!-- Standalone search box. -->
+        <!-- Standalone search box. -->
         <div id="searchbox">
           <!--div class="CoveoAnalytics" data-search-hub="HUB_ES_Nginx_Docs_And_Org"></div-->
           <div class="CoveoSearchbox" data-placeholder='Search NGINX Docs...'></div>
         </div>
+        <atomic-search-interface id="search-standalone-header" data-mf="true" style="display:none;">
+          <atomic-search-box redirection-url="/search.html">
+          </atomic-search-box>
+        </atomic-search-interface>
       </div>
     {{ end }}
     {{ if ( in .Site.Params.buildtype "package" ) }}

layouts/partials/sidebar-v2.html

@@ -20,7 +20,7 @@
 {{ $productIdentifier := index ((split $relPermalink "/")) 1 }}
 {{ $productName := index $productMap $productIdentifier }}
 
-<atomic-search-interface id="search-standalone" data-mf="true" style="display:none;">
+<atomic-search-interface id="search-standalone-sidebar" data-mf="true" style="display:none;">
     <atomic-search-box redirection-url="/search.html">
     </atomic-search-box>
 </atomic-search-interface>