[DO NOT MERGE] Test algolia search (#2248)

* use algolia search package

* fix env var name in .env.example

* fix env var typescript

* remove unused old search components

* search button should always show now on mobile and desktop

* Update Algolia search package

* Update package to 0.3

* Update Package.lock

* Update algolia search to version 0.4.2

* Update Search Preview

* Update fallback image

* Update Search package to 0.6.3

* Update to algolia 0.7

* Add Specific links and upgrade to V 0.8

* Version 0.8.3

* Version 0.8.4

* revert change on icon

---------

Co-authored-by: Simone Cuomo <simone@thisdot.co>

.env.example

@@ -1,3 +1,5 @@
 ALGOLIA_APP_ID=I9A62UQS9Z
 ALGOLIA_WRITE_API_KEY=
-ALGOLIA_INDEX_NAME=docs-test
+ALGOLIA_INDEX_NAME=docs-test
+PUBLIC_ALGOLIA_SEARCH_APP_ID=
+PUBLIC_ALGOLIA_SEARCH_PUBLIC_API_KEY=

package.json

@@ -53,6 +53,7 @@
     "@openzeppelin/contracts": "^4.9.6",
     "astro": "^4.15.1",
     "bignumber.js": "^9.1.2",
+    "chainlink-algolia-search": "^0.8.4",
     "clipboard": "^2.0.11",
     "dotenv": "^16.4.5",
     "ethers": "^5.7.2",

src/components/Header/Header.astro

@@ -3,6 +3,10 @@ import NotificationBanner from "~/features/notifications/components/Notification
 import { NavBar } from "./NavBar"
 
 const path = Astro.url.pathname
+const algoliaVars = {
+  algoliaAppId: import.meta.env.PUBLIC_ALGOLIA_SEARCH_APP_ID || "",
+  algoliaPublicApiKey: import.meta.env.PUBLIC_ALGOLIA_SEARCH_PUBLIC_API_KEY || "",
+}
 ---
 
 <!-- Google Tag Manager (noscript) -->
@@ -12,6 +16,6 @@ const path = Astro.url.pathname
   width="0"
   style="display:none;visibility:hidden"></iframe>
 <!-- End Google Tag Manager (noscript) -->
-<NavBar path={path} client:idle />
+<NavBar path={path} client:idle algoliaVars={algoliaVars} />
 
 <NotificationBanner />

src/components/Header/Nav/navBar.module.css

@@ -236,10 +236,6 @@
     fill: var(--color-text-primary);
   }
 
-  .searchTrigger {
-    display: initial;
-  }
-
   .rightSection {
     justify-content: flex-end;
   }

src/components/Header/NavBar.tsx

@@ -5,7 +5,15 @@ import { getNavigationProps } from "./getNavigationProps"
 import { useNavBar } from "./useNavBar/useNavBar"
 import styles from "./scroll.module.css"
 
-export const NavBar = ({ path, showSearch = true }: { path: string; showSearch?: boolean }) => {
+export const NavBar = ({
+  path,
+  showSearch = true,
+  algoliaVars,
+}: {
+  path: string
+  showSearch?: boolean
+  algoliaVars: { algoliaAppId: string; algoliaPublicApiKey: string }
+}) => {
   const navRef = React.useRef(null)
 
   const { setNavBarInfo } = useNavBar()
@@ -47,7 +55,7 @@ export const NavBar = ({ path, showSearch = true }: { path: string; showSearch?:
       <Nav
         {...getNavigationProps()}
         path={path}
-        searchTrigger={showSearch ? <Search /> : undefined}
+        searchTrigger={showSearch ? <Search algoliaVars={algoliaVars} /> : undefined}
         onHideChange={onHideChange}
         doubleNavbar={doubleNavbar()}
       />

src/components/Header/aiSearch/Search.tsx

@@ -1,11 +1,23 @@
-import { SearchButton } from "./SearchButton"
-import { SearchModal } from "./SearchModal"
+import { SearchButton } from "chainlink-algolia-search"
+import "chainlink-algolia-search/dist/index.css"
 
-export const Search = () => {
+export const Search = ({
+  algoliaVars: { algoliaAppId, algoliaPublicApiKey },
+}: {
+  algoliaVars: { algoliaAppId: string; algoliaPublicApiKey: string }
+}) => {
   return (
-    <>
-      <SearchButton />
-      <SearchModal />
-    </>
+    <SearchButton
+      algoliaAppId={algoliaAppId}
+      algoliaPublicApiKey={algoliaPublicApiKey}
+      popularCards={[
+        {
+          url: "https://dev.chain.link/resources/quickstarts",
+          imgSrc: "/images/algolia/quick-start.png",
+          label: "Quickstarts",
+        },
+        { url: "https://dev.chain.link/tools", imgSrc: "/images/algolia/tools.png", label: "Tools" },
+      ]}
+    />
   )
 }