Skip to content

Commit 4ad4d1f

Browse files
Zelig880Zelig880
committed
Add code required for AI to load
1 parent dfc1387 commit 4ad4d1f

File tree

5 files changed

+65
-27
lines changed

5 files changed

+65
-27
lines changed

‎src/components/Header/Header.astro‎

Lines changed: 21 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,19 @@ const { productsNav, subProductsNav } = getNavigationProps()
88
const path = Astro.url.pathname
99
const algoliaVars = {
1010
algoliaAppId: import.meta.env.PUBLIC_ALGOLIA_SEARCH_APP_ID || "",
11-
algoliaPublicApiKey: import.meta.env.PUBLIC_ALGOLIA_SEARCH_PUBLIC_API_KEY || "",
11+
algoliaPublicApiKey: import.meta.env.ALGOLIA_PUBLIC_SEARCH_PUBLIC_API_KEY || "",
1212
}
13+
14+
const categoryOrder = ["Documentation"]
15+
16+
const popularCards = [
17+
{
18+
url: "https://dev.chain.link/resources/quickstarts",
19+
imgSrc: "/images/algolia/quick-start.png",
20+
label: "Quickstarts",
21+
},
22+
{ url: "https://dev.chain.link/tools", imgSrc: "/images/algolia/tools.png", label: "Tools" },
23+
]
1324
---
1425

1526
<!-- Google Tag Manager (noscript) -->
@@ -19,6 +30,14 @@ const algoliaVars = {
1930
width="0"
2031
style="display:none;visibility:hidden"></iframe>
2132
<!-- End Google Tag Manager (noscript) -->
22-
<NavBar path={path} productsNav={productsNav} subProductsNav={subProductsNav} algoliaVars={algoliaVars} client:idle />
33+
<NavBar
34+
path={path}
35+
productsNav={productsNav}
36+
subProductsNav={subProductsNav}
37+
algoliaVars={algoliaVars}
38+
categoryOrder={categoryOrder}
39+
popularCards={popularCards}
40+
client:idle
41+
/>
2342

2443
<NotificationBanner />

‎src/components/Header/Nav/NavBar.tsx‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,15 @@ import { useScrollPosition } from "./useScrollPosition.tsx"
77
import { ProductNavigation } from "./ProductNavigation/ProductNavigation.tsx"
88
import { useHideHeader } from "./useHideHeader.tsx"
99
import ProductChainTable from "../../QuickLinks/sections/ProductChainTable.tsx"
10+
import AlgoliaSearch from "../aiSearch/Search.tsx"
1011

1112
export type SearchTrigger = React.ReactNode
1213

1314
export type NavBarProps = {
14-
searchTrigger?: SearchTrigger
15+
showSearch: boolean
16+
algoliaVars: { algoliaAppId: string; algoliaPublicApiKey: string }
17+
categoryOrder: string[]
18+
popularCards: Array<{ url: string; imgSrc: string; label: string }>
1519
path: string
1620
onHideChange?: (hidden: boolean) => void
1721
productsNav: ProductsNav
@@ -23,7 +27,9 @@ export const navBarHeight = 64
2327

2428
export const NavBar = ({
2529
path,
26-
searchTrigger,
30+
algoliaVars,
31+
categoryOrder,
32+
popularCards,
2733
onHideChange,
2834
productsNav,
2935
subProductsNav,
@@ -76,7 +82,6 @@ export const NavBar = ({
7682
<div className={styles.menuSection}>
7783
<ProductNavigation
7884
path={path}
79-
searchTrigger={searchTrigger}
8085
setNavMenuOpen={setIsMenuOpen}
8186
productsNav={productsNav}
8287
subProductsNav={subProductsNav}
@@ -86,7 +91,7 @@ export const NavBar = ({
8691
/>
8792
</div>
8893
<div className={styles.rightSection} onMouseEnter={exitMegamenu}>
89-
{searchTrigger && <div className={styles.searchTrigger}>{searchTrigger}</div>}
94+
<AlgoliaSearch algoliaVars={algoliaVars} categoryOrder={categoryOrder} popularCards={popularCards} />
9095
</div>
9196
</div>
9297
</div>

‎src/components/Header/Nav/ProductNavigation/ProductNavigation.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,9 @@
11
import { SubProductsNav, ProductsNav } from "../config.tsx"
2-
import { SearchTrigger } from "../NavBar.tsx"
32
import { ProductNavigation as Desktop } from "./Desktop/ProductNavigation.tsx"
43
import { ProductNavigation as Mobile } from "./Mobile/ProductNavigation.tsx"
54

65
type Props = {
76
path: string
8-
searchTrigger?: SearchTrigger
97
setNavMenuOpen: (navMenuOpen: boolean) => void
108
productsNav: ProductsNav
119
subProductsNav?: SubProductsNav

‎src/components/Header/NavBar.tsx‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import React from "react"
22
import { NavBar as Nav } from "./Nav/index.ts"
3-
import { Search } from "./aiSearch/Search.tsx"
43
import { useNavBar } from "./useNavBar/useNavBar.ts"
54
import styles from "./scroll.module.css"
65
import { ProductsNav, SubProductsNav } from "./Nav/config.tsx"
@@ -11,12 +10,16 @@ export const NavBar = ({
1110
path,
1211
showSearch = true,
1312
algoliaVars,
13+
categoryOrder,
14+
popularCards,
1415
}: {
1516
productsNav: ProductsNav
1617
subProductsNav: SubProductsNav
1718
path: string
1819
showSearch?: boolean
1920
algoliaVars: { algoliaAppId: string; algoliaPublicApiKey: string }
21+
categoryOrder: string[]
22+
popularCards: Array<{ url: string; imgSrc: string; label: string }>
2023
}) => {
2124
const navRef = React.useRef(null)
2225

@@ -60,7 +63,10 @@ export const NavBar = ({
6063
productsNav={productsNav}
6164
subProductsNav={subProductsNav}
6265
path={path}
63-
searchTrigger={showSearch ? <Search algoliaVars={algoliaVars} /> : undefined}
66+
showSearch={showSearch}
67+
algoliaVars={algoliaVars}
68+
categoryOrder={categoryOrder}
69+
popularCards={popularCards}
6470
onHideChange={onHideChange}
6571
doubleNavbar={doubleNavbar()}
6672
/>

‎src/components/Header/aiSearch/Search.tsx‎

Lines changed: 27 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,33 @@
1-
import { SearchButton } from "chainlink-algolia-search"
1+
// src/components/Header/aiSearch/SearchReact.tsx
2+
import React, { useEffect, useState, ComponentType } from "react"
3+
import { SearchButtonProps } from "chainlink-algolia-search"
24
import "chainlink-algolia-search/dist/index.css"
35

4-
export const Search = ({
5-
algoliaVars: { algoliaAppId, algoliaPublicApiKey },
6-
}: {
7-
algoliaVars: { algoliaAppId: string; algoliaPublicApiKey: string }
8-
}) => {
6+
function AlgoliaSearch({ algoliaVars, categoryOrder, popularCards }) {
7+
// Only render the component on the client side
8+
const [isClient, setIsClient] = useState(false)
9+
const [SearchButtonComponent, setSearchButtonComponent] = useState<ComponentType<SearchButtonProps> | null>(null)
10+
11+
useEffect(() => {
12+
setIsClient(true)
13+
import("chainlink-algolia-search").then((module) => {
14+
setSearchButtonComponent(() => module.SearchButton)
15+
})
16+
}, [])
17+
18+
// Return null during server-side rendering
19+
if (!isClient || !SearchButtonComponent) {
20+
return <div></div>
21+
}
22+
923
return (
10-
<SearchButton
11-
algoliaAppId={algoliaAppId}
12-
algoliaPublicApiKey={algoliaPublicApiKey}
13-
popularCards={[
14-
{
15-
url: "https://dev.chain.link/resources/quickstarts",
16-
imgSrc: "/images/algolia/quick-start.png",
17-
label: "Quickstarts",
18-
},
19-
{ url: "https://dev.chain.link/tools", imgSrc: "/images/algolia/tools.png", label: "Tools" },
20-
]}
24+
<SearchButtonComponent
25+
algoliaAppId={algoliaVars.algoliaAppId}
26+
algoliaPublicApiKey={algoliaVars.algoliaPublicApiKey}
27+
categoryOrder={categoryOrder}
28+
popularCards={popularCards}
2129
/>
2230
)
2331
}
32+
33+
export default AlgoliaSearch

0 commit comments

Comments
 (0)