From 1c57e9ec1bb02f7746200111744c81a47159b3e1 Mon Sep 17 00:00:00 2001 From: Victor Chukwuebuka Umeh <41862157+vyktoremario@users.noreply.github.com> Date: Mon, 31 Mar 2025 17:40:19 +0100 Subject: [PATCH 1/3] add env and env config type --- .env.example | 5 +++++ src/components/Header/Header.astro | 3 +++ src/components/Header/Nav/config.tsx | 8 ++++++++ src/components/Header/NavBar.tsx | 4 ++-- src/components/Header/aiSearch/Search.tsx | 8 ++++++-- 5 files changed, 24 insertions(+), 4 deletions(-) diff --git a/.env.example b/.env.example index c91f7e7ae73..2970f11c33a 100644 --- a/.env.example +++ b/.env.example @@ -3,3 +3,8 @@ ALGOLIA_WRITE_API_KEY= ALGOLIA_INDEX_NAME=docs-test PUBLIC_ALGOLIA_SEARCH_APP_ID= PUBLIC_ALGOLIA_SEARCH_PUBLIC_API_KEY= + +# Google AI Search +PUBLIC_GOOGLE_PROJECT_ID= +PUBLIC_GOOGLE_APP_ID= +PUBLIC_GOOGLE_ACCESS_TOKEN= diff --git a/src/components/Header/Header.astro b/src/components/Header/Header.astro index a21efde3792..8b93eb0964f 100644 --- a/src/components/Header/Header.astro +++ b/src/components/Header/Header.astro @@ -9,6 +9,9 @@ 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 || "", + googleProjectId: import.meta.env.PUBLIC_GOOGLE_PROJECT_ID || "", + googleAppId: import.meta.env.PUBLIC_GOOGLE_APP_ID || "", + googleAccessToken: import.meta.env.PUBLIC_GOOGLE_ACCESS_TOKEN || "", } --- diff --git a/src/components/Header/Nav/config.tsx b/src/components/Header/Nav/config.tsx index a16f3cde6c2..5963d2888ec 100644 --- a/src/components/Header/Nav/config.tsx +++ b/src/components/Header/Nav/config.tsx @@ -58,3 +58,11 @@ export type AppConfig = { productsNav: ProductsNav subProductsNav?: SubProductsNav } & LinksConfig + +export type AlgoliaVars = { + algoliaAppId: string + algoliaPublicApiKey: string + googleProjectId: string + googleAppId: string + googleAccessToken: string +} diff --git a/src/components/Header/NavBar.tsx b/src/components/Header/NavBar.tsx index a6eaf00cd2e..37de39c057b 100644 --- a/src/components/Header/NavBar.tsx +++ b/src/components/Header/NavBar.tsx @@ -3,7 +3,7 @@ import { NavBar as Nav } from "./Nav/index.ts" import { Search } from "./aiSearch/Search.tsx" import { useNavBar } from "./useNavBar/useNavBar.ts" import styles from "./scroll.module.css" -import { ProductsNav, SubProductsNav } from "./Nav/config.tsx" +import { AlgoliaVars, ProductsNav, SubProductsNav } from "./Nav/config.tsx" export const NavBar = ({ productsNav, @@ -16,7 +16,7 @@ export const NavBar = ({ subProductsNav: SubProductsNav path: string showSearch?: boolean - algoliaVars: { algoliaAppId: string; algoliaPublicApiKey: string } + algoliaVars: AlgoliaVars }) => { const navRef = React.useRef(null) diff --git a/src/components/Header/aiSearch/Search.tsx b/src/components/Header/aiSearch/Search.tsx index e8d7e58dfc0..5e22b137a87 100644 --- a/src/components/Header/aiSearch/Search.tsx +++ b/src/components/Header/aiSearch/Search.tsx @@ -1,10 +1,11 @@ import { SearchButton } from "chainlink-algolia-search" import "chainlink-algolia-search/dist/index.css" +import { AlgoliaVars } from "../Nav/config.tsx" export const Search = ({ - algoliaVars: { algoliaAppId, algoliaPublicApiKey }, + algoliaVars: { algoliaAppId, algoliaPublicApiKey, googleProjectId, googleAppId, googleAccessToken }, }: { - algoliaVars: { algoliaAppId: string; algoliaPublicApiKey: string } + algoliaVars: AlgoliaVars }) => { return ( ) } From 8ff23c48152ffd61da0db6dd9cca80b0aea6a2d3 Mon Sep 17 00:00:00 2001 From: Victor Chukwuebuka Umeh <41862157+vyktoremario@users.noreply.github.com> Date: Mon, 31 Mar 2025 17:52:05 +0100 Subject: [PATCH 2/3] search uses react markdown and that calls browser apis --- src/components/Header/Header.astro | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/components/Header/Header.astro b/src/components/Header/Header.astro index 8b93eb0964f..a33def1a72c 100644 --- a/src/components/Header/Header.astro +++ b/src/components/Header/Header.astro @@ -22,6 +22,12 @@ const algoliaVars = { width="0" style="display:none;visibility:hidden"> - + From 7959f27fbe338c9c3d69097637883757cf078346 Mon Sep 17 00:00:00 2001 From: Victor Chukwuebuka Umeh <41862157+vyktoremario@users.noreply.github.com> Date: Tue, 1 Apr 2025 10:29:53 +0100 Subject: [PATCH 3/3] render search after hydration --- src/components/Header/Header.astro | 8 +------- src/components/Header/NavBar.tsx | 18 +++++++++++++++--- src/components/Header/aiSearch/Search.tsx | 4 +++- 3 files changed, 19 insertions(+), 11 deletions(-) diff --git a/src/components/Header/Header.astro b/src/components/Header/Header.astro index a33def1a72c..8b93eb0964f 100644 --- a/src/components/Header/Header.astro +++ b/src/components/Header/Header.astro @@ -22,12 +22,6 @@ const algoliaVars = { width="0" style="display:none;visibility:hidden"> - + diff --git a/src/components/Header/NavBar.tsx b/src/components/Header/NavBar.tsx index 37de39c057b..9031958a9c6 100644 --- a/src/components/Header/NavBar.tsx +++ b/src/components/Header/NavBar.tsx @@ -1,10 +1,11 @@ -import React from "react" +import React, { lazy, Suspense, useEffect, useState } from "react" import { NavBar as Nav } from "./Nav/index.ts" -import { Search } from "./aiSearch/Search.tsx" import { useNavBar } from "./useNavBar/useNavBar.ts" import styles from "./scroll.module.css" import { AlgoliaVars, ProductsNav, SubProductsNav } from "./Nav/config.tsx" +const LazySearch = lazy(() => import("./aiSearch/Search.tsx")) + export const NavBar = ({ productsNav, subProductsNav, @@ -19,6 +20,7 @@ export const NavBar = ({ algoliaVars: AlgoliaVars }) => { const navRef = React.useRef(null) + const [isClient, setIsClient] = useState(false) const { setNavBarInfo } = useNavBar() @@ -54,13 +56,23 @@ export const NavBar = ({ } } + useEffect(() => { + setIsClient(true) + }, []) + return (