From 5f554d372ee749060010a47eec8b1f861907879e Mon Sep 17 00:00:00 2001
From: Lam Nguyen <la.nguyen@f5.com>
Date: Thu, 27 Mar 2025 12:03:23 -0700
Subject: [PATCH 1/3] feat: Support coveo on mobile + show in header

---
 assets/js/coveo.js               | 50 ++++++++++++++++++++------------
 layouts/_default/docs.html       |  2 +-
 layouts/partials/header.html     |  6 +++-
 layouts/partials/sidebar-v2.html |  2 +-
 4 files changed, 38 insertions(+), 22 deletions(-)

diff --git a/assets/js/coveo.js b/assets/js/coveo.js
index 9b7a462d..9f38c09d 100644
--- a/assets/js/coveo.js
+++ b/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() {
diff --git a/layouts/_default/docs.html b/layouts/_default/docs.html
index 6bc7f917..97ea795a 100644
--- a/layouts/_default/docs.html
+++ b/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>
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 097f97ca..240c834f 100644
--- a/layouts/partials/header.html
+++ b/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" ) }}
diff --git a/layouts/partials/sidebar-v2.html b/layouts/partials/sidebar-v2.html
index e4ed7617..c3e6b7d9 100644
--- a/layouts/partials/sidebar-v2.html
+++ b/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>

From 33e2e9f1a9e864d1e864f9b642efaf00731fa805 Mon Sep 17 00:00:00 2001
From: Lam Nguyen <la.nguyen@f5.com>
Date: Thu, 27 Mar 2025 13:28:05 -0700
Subject: [PATCH 2/3] feat: Support on mobile fully + handle all bugs

---
 assets/css/v2/style.css      | 30 ++++++++++++++-
 assets/js/coveo.js           | 73 ++++++++++++++++++++++++++----------
 layouts/_default/baseof.html |  1 -
 layouts/search/single.html   |  2 +-
 4 files changed, 84 insertions(+), 22 deletions(-)

diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css
index 1a5c1001..846cf1da 100644
--- a/assets/css/v2/style.css
+++ b/assets/css/v2/style.css
@@ -98,9 +98,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 {
@@ -213,6 +238,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 {
@@ -320,7 +346,6 @@ nav {
         --side-gutter-width
       );
     column-gap: var(--component-gap);
-    margin-top: 2rem;
   }
 
   .content-layout .side-gutter {
@@ -402,6 +427,9 @@ atomic-search-interface {
   height: fit-content;
   margin-bottom: 2rem;
   margin-top: 2rem;
+}
+
+#search-standalone-sidebar {
   min-height: 54px;
   max-height: 54px;
 }
diff --git a/assets/js/coveo.js b/assets/js/coveo.js
index 9f38c09d..6336d0b4 100644
--- a/assets/js/coveo.js
+++ b/assets/js/coveo.js
@@ -38,7 +38,6 @@ async function atomicCoveo() {
   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({
@@ -53,29 +52,42 @@ async function atomicCoveo() {
         return request;
       },
     });
-    searchPageInterface.executeFirstSearch();
+    await searchPageInterface.executeFirstSearch();
   } else {
-    // If there is a searchbar, only initialize the searchbar for the sidebar.
     if (sidebar) {
-      searchbar = searchBarSidebar;
-    } else {
-      searchbar = searchBarHeader;
+      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 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);
+  /* Initialize the header searchbar*/
+  await searchBarHeader.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;
-      },
-    });
-    searchbar.executeFirstSearch();
-  }
+      return request;
+    },
+  });
+
+  searchBarHeader.style.display =
+    sidebar || searchPageInterface ? 'none' : 'block';
+  await searchBarHeader.executeFirstSearch();
 }
 
 async function legacyCoveo() {
@@ -146,3 +158,26 @@ document.addEventListener('DOMContentLoaded', async () => {
     legacyCoveo();
   }
 });
+
+window.addEventListener('resize', (event) => {
+  const searchBarHeader = document.querySelector('#search-standalone-header');
+  const searchPageInterface = document.querySelector('#search-v2');
+  const searchPageSearchbar = document.querySelector(
+    '#search-standalone-searchpage'
+  );
+  const sidebar = document.querySelector('#sidebar-layout');
+
+  if (!sidebar && !searchPageInterface) {
+    // Show when there is no sidebar or on the search page
+    searchBarHeader.style.display = 'block';
+  } else if (sidebar && sidebar.offsetWidth === 0) {
+    // Show when there is a sidebar but is hidden due to resizing
+    searchBarHeader.style.display = 'block';
+  } else if (searchPageInterface && searchPageSearchbar.offsetWidth === 0) {
+    // Show when on the search page but is "sidebar" searchbar is hidden
+    searchBarHeader.style.display = 'block';
+  } else {
+    // Go back to default state
+    searchBarHeader.style.display = 'none';
+  }
+});
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 719231d3..e7447166 100644
--- a/layouts/_default/baseof.html
+++ b/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" : "";
         }
diff --git a/layouts/search/single.html b/layouts/search/single.html
index 0bd39dfe..086312d4 100644
--- a/layouts/search/single.html
+++ b/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>

From edea62b1580a2a7cde3eb2f1b19fb88661d1fdec Mon Sep 17 00:00:00 2001
From: Lam Nguyen <la.nguyen@f5.com>
Date: Fri, 28 Mar 2025 10:50:18 -0700
Subject: [PATCH 3/3] feat: Removed unneeded JS + moved to CSS

---
 assets/css/v2/style.css | 24 ++++++++++++++++++++++++
 assets/js/coveo.js      | 25 -------------------------
 2 files changed, 24 insertions(+), 25 deletions(-)

diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css
index 846cf1da..22b9ce5d 100644
--- a/assets/css/v2/style.css
+++ b/assets/css/v2/style.css
@@ -505,6 +505,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;
diff --git a/assets/js/coveo.js b/assets/js/coveo.js
index 6336d0b4..780e36cd 100644
--- a/assets/js/coveo.js
+++ b/assets/js/coveo.js
@@ -85,8 +85,6 @@ async function atomicCoveo() {
     },
   });
 
-  searchBarHeader.style.display =
-    sidebar || searchPageInterface ? 'none' : 'block';
   await searchBarHeader.executeFirstSearch();
 }
 
@@ -158,26 +156,3 @@ document.addEventListener('DOMContentLoaded', async () => {
     legacyCoveo();
   }
 });
-
-window.addEventListener('resize', (event) => {
-  const searchBarHeader = document.querySelector('#search-standalone-header');
-  const searchPageInterface = document.querySelector('#search-v2');
-  const searchPageSearchbar = document.querySelector(
-    '#search-standalone-searchpage'
-  );
-  const sidebar = document.querySelector('#sidebar-layout');
-
-  if (!sidebar && !searchPageInterface) {
-    // Show when there is no sidebar or on the search page
-    searchBarHeader.style.display = 'block';
-  } else if (sidebar && sidebar.offsetWidth === 0) {
-    // Show when there is a sidebar but is hidden due to resizing
-    searchBarHeader.style.display = 'block';
-  } else if (searchPageInterface && searchPageSearchbar.offsetWidth === 0) {
-    // Show when on the search page but is "sidebar" searchbar is hidden
-    searchBarHeader.style.display = 'block';
-  } else {
-    // Go back to default state
-    searchBarHeader.style.display = 'none';
-  }
-});