Coveo: Add new implementation using API

Author: lamATnginx

assets/css/v2/style.css

@@ -1275,6 +1275,38 @@ main {
   }
 }
 
+/* MARK: Coveo API
+*/
+
+.standalone__searchbox {
+  background-color: white;
+  border: 1px solid black;
+  width: fit-content;
+
+  .form {
+    display: flex;
+    justify-content: center;
+    gap: 1rem;
+    padding: 0.25rem 0.5rem;
+
+    .submit-button {
+      background-color: inherit;
+      color: oklch(var(--color-brand));
+      border: none;
+      padding: 0;
+      cursor: pointer;
+      margin-top: 0.2rem;
+    }
+
+    .input {
+      background-color: inherit;
+      border: none;
+      padding: 0;
+      outline: none;
+    }
+  }
+}
+
 /* MARK: Coveo
 */
 

assets/js/coveo/standalone-search.js

@@ -0,0 +1,150 @@
+const SEARCH_HUB = 'HUB_ES_Nginx_Docs_And_Org';
+
+function isJwtExpired(token) {
+  const parts = token.split('.');
+  if (parts.length !== 3) {
+    return true;
+  }
+
+  const [_, payload] = parts;
+  const decodedPayload = atob(payload);
+  const payloadObj = JSON.parse(decodedPayload);
+
+  const currentTime = Math.floor(Date.now() / 1000);
+  const expTime = payloadObj.exp;
+  return currentTime >= expTime;
+}
+
+async function getsearchObj() {
+  const response = await fetch(
+    window.location.origin + '/api/v1/auth/search_token'
+  );
+  return response.json();
+}
+
+async function getValidSearchCredentials() {
+  const accessToken = localStorage.getItem('coveo_jwt_v1');
+  const organizationId = localStorage.getItem('coveo_org_id_v1');
+
+  const needsFetch =
+    !accessToken || !organizationId || isJwtExpired(accessToken);
+  if (needsFetch) {
+    const { token, org_id } = await getsearchObj();
+    localStorage.setItem('coveo_jwt_v1', token);
+    localStorage.setItem('coveo_org_id_v1', org_id);
+    return {
+      accessToken: token,
+      organizationId: org_id,
+    };
+  }
+
+  return {
+    accessToken,
+    organizationId,
+  };
+}
+
+async function sendCoveoRequest(payload, endpoint = '') {
+  const { organizationId, accessToken } = await getValidSearchCredentials();
+  const url = `https://${organizationId}.org.coveo.com/rest/${endpoint}/`;
+
+  fetch(
+    new Request(url, {
+      method: 'POST',
+      headers: new Headers({
+        Accept: 'application/json',
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${accessToken}`,
+      }),
+      body: JSON.stringify(payload),
+    })
+  )
+    .then((response) => {
+      if (!response.ok) {
+        // Throw some error to user
+      }
+      return response.json();
+    })
+    .then((responseData) => {
+      const queryText = payload.q;
+      const duration = responseData.duration;
+      const searchUid = responseData.searchUid;
+
+      logQuery(queryText, duration, searchUid);
+    });
+}
+
+async function sendCoveoAnalyticsRequest(payload) {
+  const { organizationId, accessToken } = await getValidSearchCredentials();
+  const url = `https://${organizationId}.analytics.org.coveo.com/rest/ua/v15/analytics/search`;
+
+  fetch(
+    new Request(url, {
+      method: 'POST',
+      headers: new Headers({
+        Accept: 'application/json',
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${accessToken}`,
+      }),
+      body: JSON.stringify(payload),
+    })
+  )
+    .then((response) => {
+      if (!response.ok) {
+        // Throw some error to user
+      }
+      return response.json();
+    })
+    .then((responseData) => {
+      console.log(responseData);
+    });
+}
+
+/**
+ * Sends a request for suggestions based on given query. Should run everytime a query is updated.
+ *
+ * @param {*} q
+ */
+const suggestQuery = async (q) => {};
+
+/**
+ * Sends a request to submit the given query. Should run whenever the form is submitted.
+ *
+ * @param {*} q
+ */
+const submitQuery = async (q) => {
+  const payload = {
+    q: q,
+    locale: 'en-US',
+    searchHub: SEARCH_HUB,
+    tab: 'default',
+  };
+
+  sendCoveoRequest(payload, 'search/v2');
+
+  // const destination = `/search.html?q=${q}`;
+  // window.location.href = destination;
+};
+
+const logQuery = async (q, duration, searchUid) => {
+  const payload = {
+    language: 'en',
+    queryText: q,
+    responseTime: duration,
+    searchQueryUid: searchUid,
+    actionCause: 'searchFromLink',
+  };
+
+  sendCoveoAnalyticsRequest(payload);
+};
+
+document.addEventListener('DOMContentLoaded', () => {
+  const form = document.getElementById('standalone__searchbox-form');
+  const input = document.getElementById('standalone__searchbox-input');
+
+  form.addEventListener('submit', (event) => {
+    event.preventDefault();
+    const q = encodeURIComponent(input.value.trim());
+    submitQuery(q);
+  });
+});

layouts/partials/coveo-api-search.html

@@ -0,0 +1,6 @@
+<div class="standalone__searchbox" id="standalone__searchbox">
+  <form class="form" id="standalone__searchbox-form" action="/search.html">
+    <button class="submit-button" id="standalone__searchbox-submit-button">{{ partial "lucide" (dict "context" . "icon" "search") }}</button>
+    <input type="text" class="input" id="standalone__searchbox-input" placeholder="Search NGINX Docs..." name="q">
+  </form>
+</div>

layouts/partials/header.html

@@ -17,7 +17,8 @@
           </label>
           <div class="header__search" data-testid="header__search">
               <!-- Standalone search box. -->
-              {{ partial "coveo-atomic-search.html" (dict "id" "search-standalone-header") }}
+              <!-- {{ partial "coveo-atomic-search.html" (dict "id" "search-standalone-header") }} -->
+              {{ partial "coveo-api-search" . }}
           </div>
           {{ end }}
       </div>

layouts/partials/scripts.html

@@ -16,6 +16,10 @@
 <script src="{{ $mermaid.RelPermalink }}" type="text/javascript" integrity="{{ $mermaid.Data.Integrity }}"></script>
 {{ end }}
 
+<!-- Coveo API -->
+{{ $searchStandalone := resources.Get "/js/coveo/standalone-search.js" | fingerprint "sha512" }}
+<script src="{{ $searchStandalone.RelPermalink }}" type="text/javascript"></script>
+
 <!-- Coveo Atomic -->
 <script
   type="module"