coveo search integration test

docusaurus.config.js

@@ -11,6 +11,7 @@ import fs from 'fs';
 import footerItems from './src/config/footer.navItems.js';
 import baseHeadTags from './src/config/baseHeadTags.js';
 import { sidebarItemsGenerator } from './custom-sidebar.js';
+import headTags from './src/config/CoveoSearchHeadTags.js';
 
 const baseUrl = '';
 const projectName = 'ai-unlimited-docs';
@@ -82,6 +83,7 @@ const config = {
   headTags: [
     ...baseHeadTags,
     ...trackingScripts,
+    ...headTags
   ],
 
   // Even if you don't use internationalization, you can use this field to set

src/components/CoveoSearch/CoveoSearch.js

@@ -0,0 +1,87 @@
+import { useEffect } from 'react';
+
+function CoveoSearch() {
+  useEffect(() => {
+    const hspApiKey = 'xx4ac4bcbd-1c8b-4482-b60b-bc0ebdc55e01';
+    const siApiKey = 'xx116e6fc7-3430-4f29-9115-fde53bc5cd24';
+    const orgId = 'teradataxrkwxj74';
+    const siPageId = 'cda56b93-b731-4e51-9a46-6a2498b40cb0';
+    const orgEndpont = `https://${orgId}.admin.org.coveo.com`;
+    const redirectionUrl = '/coveo-search';
+
+    function isSearchPage() {
+      return window.location.href.indexOf('/coveo-search') !== -1;
+    }
+
+    function injectExternalSearchbox(searchboxID) {
+      const box = document.createElement('atomic-search-box');
+      box.setAttribute('clear-filters', 'false');
+      const wrapper = document.createElement('atomic-external');
+      wrapper.appendChild(box);
+      document.getElementById(searchboxID)?.appendChild(wrapper);
+    }
+
+    async function initSearchBox() {
+      const searchInterface = document.querySelector("atomic-search-interface#searchbox");
+      if (searchInterface) {
+        await searchInterface.initialize({
+          accessToken: siApiKey,
+          organizationId: orgId,
+          organizationEndpoints: { admin: orgEndpont },
+        });
+
+        searchInterface.querySelector('atomic-search-box').redirectionUrl = redirectionUrl;
+      }
+    }
+
+    async function initSearchPage() {
+      const hsp = document.querySelector('atomic-hosted-page#searchPage');
+      if (hsp) {
+        await hsp.initialize({
+          accessToken: hspApiKey,
+          organizationId: orgId,
+          organizationEndpoints: { admin: orgEndpont },
+          pageId: siPageId
+        });
+      }
+
+      await customElements.whenDefined("atomic-search-interface");
+
+      const searchInterface = document.querySelector("atomic-search-interface#search");
+      injectExternalSearchbox('atomicExternalSearchBox');
+
+      if (searchInterface) {
+        await searchInterface.initialize({
+          accessToken: siApiKey,
+          organizationId: orgId,
+          organizationEndpoints: { admin: orgEndpont }
+        });
+
+        searchInterface.executeFirstSearch();
+      }
+    }
+
+    if (isSearchPage()) {
+      initSearchPage();
+    } else {
+      initSearchBox();
+    }
+  }, []);
+
+  return (
+    <>
+      {/* Search Box */}
+      <div id="atomicExternalSearchBox"></div>
+      <div>
+        <atomic-search-interface id="searchbox">
+          <atomic-search-box clear-filters="false"></atomic-search-box>
+        </atomic-search-interface>
+      </div>
+
+      {/* Search Page */}
+      <atomic-hosted-page id="searchPage"></atomic-hosted-page>
+    </>
+  );
+}
+
+export default CoveoSearch;

src/config/CoveoSearchHeadTags.js

@@ -0,0 +1,25 @@
+const headTags = [          
+    {
+      tagName: 'link',
+      attributes: {
+        rel: 'stylesheet',
+        href: 'https://static.cloud.coveo.com/atomic/v2/themes/coveo.css',
+      },
+    },
+    {
+      tagName: 'script',
+      attributes: {
+        src: 'https://static.cloud.coveo.com/atomic/v2/atomic.esm.js',
+        type: 'module',
+      },
+    },
+    {
+      tagName: 'script',
+      attributes: {
+        src: 'https://static.cloud.coveo.com/atomic-hosted-page/v0/atomic-hosted-page/atomic-hosted-page.esm.js',
+        type: 'module',
+      },
+    },
+  ];
+
+  export default headTags;

src/pages/quickstarts.js

@@ -7,6 +7,7 @@ import HeroImageUrl from '@site/static/img/quickstarts-hero.webp';
 import { translate } from '@docusaurus/Translate';
 import styles from './index.module.css';
 import { Typography } from '@teradata-web/react-components';
+import CoveoSearch from '../components/CoveoSearch/CoveoSearch';
 
 function HomepageHeader() {
   return (
@@ -71,6 +72,8 @@ export default function Home() {
         </script>
       </Head>
       <HomepageHeader />
+      <div>TEst</div>
+      <CoveoSearch />
       <main className={styles.features}>
         <QuickstartsPages />
       </main>