Wider support for Coveo on Mobile + Edge cases (#201)

* feat: Support coveo on mobile + show in header

* feat: Support on mobile fully + handle all bugs

* feat: Removed unneeded JS + moved to CSS

Author: lamATnginx

assets/css/v2/style.css

@@ -140,9 +140,34 @@ header {
   .header-container {
     display: flex;
     flex-direction: row;
+    flex-wrap: wrap;
     justify-content: space-between;
     align-items: center;
     width: 100%;
+
+    > ul {
+      padding: 0;
+    }
+
+    @media (max-width: 700px) {
+      a,
+      ul {
+        width: 50%;
+      }
+
+      li {
+        float: right;
+      }
+
+      div {
+        order: 3;
+        width: 100%;
+
+        #search-standalone-header {
+          margin-top: 1rem;
+        }
+      }
+    }
   }
 
   ul {
@@ -255,6 +280,7 @@ nav {
   grid-template-columns: var(--text-content-width-iphone-13) 1fr;
   grid-template-rows: var(--breadcrumb-max-height) 1fr;
   z-index: 1;
+  margin-top: 2rem;
 }
 
 .docs-container {
@@ -363,7 +389,6 @@ nav {
         --side-gutter-width
       );
     column-gap: var(--component-gap);
-    margin-top: 2rem;
   }
 
   .content-layout .side-gutter {
@@ -445,6 +470,9 @@ atomic-search-interface {
   height: fit-content;
   margin-bottom: 2rem;
   margin-top: 2rem;
+}
+
+#search-standalone-sidebar {
   min-height: 54px;
   max-height: 54px;
 }
@@ -520,6 +548,30 @@ atomic-search-layout atomic-layout-section[section="search"] {
   z-index: 9999;
 }
 
+header atomic-search-interface {
+  /* Hide by default */
+  display: none;
+}
+
+body:not(:has(.main-layout)) header atomic-search-interface {
+  /* Show on landing pages */
+  display: block;
+}
+
+@media (max-width: 1184px) {
+  /* Show on pages with sidebar if it is hidden */
+  body:has(.sidebar-layout) header atomic-search-interface {
+    display: block;
+  }
+}
+
+@media (max-width: 1023px) {
+  /* Show on search page with facet if it is hidden */
+  body:has(atomic-search-layout) header atomic-search-interface {
+    display: block;
+  }
+}
+
 /* Sidebar */
 .sidebar {
   display: flex;

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,14 @@ 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');
+
+  if (searchPageInterface) {
+    await searchPageInterface.initialize({
       accessToken: token,
       organizationId: org_id,
       analytics: { analyticsMode: 'legacy' },
@@ -48,10 +52,27 @@ async function atomicCoveo() {
         return request;
       },
     });
-    searchInterface.executeFirstSearch();
+    await searchPageInterface.executeFirstSearch();
+  } else {
+    if (sidebar) {
+      await searchBarSidebar.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;
+        },
+      });
+      await searchBarSidebar.executeFirstSearch();
+    }
   }
 
-  await searchInterfaceStandalone.initialize({
+  /* Initialize the header searchbar*/
+  await searchBarHeader.initialize({
     accessToken: token,
     organizationId: org_id,
     analytics: { analyticsMode: 'legacy' },
@@ -63,7 +84,8 @@ async function atomicCoveo() {
       return request;
     },
   });
-  searchInterfaceStandalone.executeFirstSearch();
+
+  await searchBarHeader.executeFirstSearch();
 }
 
 async function legacyCoveo() {

layouts/_default/baseof.html

@@ -61,7 +61,6 @@
 
       v1ElementIds.forEach((elementId) => {
         const element = document.getElementById(elementId);
-        console.log(element)
         if (element !== null) {
           element.style.display = isNewTheme ? "none" : "";
         }

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>

layouts/search/single.html

@@ -121,7 +121,7 @@
 
       <!-- Facet Section -->
       <atomic-layout-section section="facets">
-        <atomic-search-box></atomic-search-box>
+        <atomic-search-box id="search-standalone-searchpage"></atomic-search-box>
         <atomic-facet field="f5_product" label="Show by product"></atomic-facet>
         <atomic-refine-toggle></atomic-refine-toggle>
       </atomic-layout-section>