fix: configure the Algolia search

This commit is contained in:
hieu-jan 2024-03-01 19:32:42 +09:00
parent 28ac386f26
commit b969346f6d

View File

@ -1,12 +1,12 @@
import clsx from 'clsx'; import clsx from 'clsx'
import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext'
import Layout from '@theme/Layout'; import Layout from '@theme/Layout'
import Heading from '@theme/Heading'; import Heading from '@theme/Heading'
import styles from './trial.module.css'; import styles from './trial.module.css'
import HomepagePrimaryFeatures from "../components/HomepagePrimaryFeatures"; import HomepagePrimaryFeatures from '../components/HomepagePrimaryFeatures'
import HomepageSecondaryFeatures from "../components/HomepageSecondaryFeatures"; import HomepageSecondaryFeatures from '../components/HomepageSecondaryFeatures'
import HomepageTerinaryFeatures from "../components/HomepageTerinaryFeatures"; import HomepageTerinaryFeatures from '../components/HomepageTerinaryFeatures'
import { DocSearch } from '@docsearch/react'; import { DocSearch } from '@docsearch/react'
function HomepageHeader() { function HomepageHeader() {
return ( return (
@ -16,7 +16,11 @@ function HomepageHeader() {
Hello, how can we help? Hello, how can we help?
</Heading> </Heading>
<div className={styles.searchBar}> <div className={styles.searchBar}>
<DocSearch /> <DocSearch
appId={process.env.ALGOLIA_APP_ID}
apiKey={process.env.ALGOLIA_API_KEY}
indexName="jan_docs"
/>
</div> </div>
{/* <div className={styles.searchBar}> {/* <div className={styles.searchBar}>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill={"currentColor"}> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill={"currentColor"}>
@ -25,15 +29,16 @@ function HomepageHeader() {
<button>Search</button> <button>Search</button>
</div> */} </div> */}
<p className={clsx(styles.heroSubtitle)}> <p className={clsx(styles.heroSubtitle)}>
Open-source ChatGPT alternative that runs 100% offline on your computer. Open-source ChatGPT alternative that runs 100% offline on your
computer.
</p> </p>
</div> </div>
</header> </header>
); )
} }
export default function Home() { export default function Home() {
const {siteConfig} = useDocusaurusContext(); const { siteConfig } = useDocusaurusContext()
return ( return (
<Layout <Layout
title={`Home | ${siteConfig.title}`} title={`Home | ${siteConfig.title}`}
@ -41,12 +46,12 @@ export default function Home() {
> >
<div className={clsx(styles.homeBg)}> <div className={clsx(styles.homeBg)}>
<HomepageHeader /> <HomepageHeader />
<main style={{backgroundColor: "whitesmoke"}}> <main style={{ backgroundColor: 'whitesmoke' }}>
<HomepagePrimaryFeatures /> <HomepagePrimaryFeatures />
<HomepageSecondaryFeatures /> <HomepageSecondaryFeatures />
<HomepageTerinaryFeatures /> <HomepageTerinaryFeatures />
</main> </main>
</div> </div>
</Layout> </Layout>
); )
} }