Skip to content

Commit 5324eb2

Browse files
chriswhongchriswhong
committed
feat: implement algolia search
1 parent 44f9887 commit 5324eb2

16 files changed

+648
-652
lines changed

‎.env-sample

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
GATSBY_ALGOLIA_APP_ID=SOMESHORTAPIKEY
2+
GATSBY_ALGOLIA_SEARCH_KEY=SOMEREALLYLONGAPIKEYTHATISLONG
3+
ALGOLIA_ADMIN_KEY=SOMEREALLYLONGAPIKEYTHATISLONG

‎config.js

+1-8
Original file line numberDiff line numberDiff line change
@@ -58,14 +58,7 @@ const config = {
5858
text: 'FAQ',
5959
link: '/docs/faq'
6060
}
61-
],
62-
search: {
63-
enabled: false,
64-
indexName: '',
65-
algoliaAppId: process.env.GATSBY_ALGOLIA_APP_ID,
66-
algoliaSearchKey: process.env.GATSBY_ALGOLIA_SEARCH_KEY,
67-
algoliaAdminKey: process.env.ALGOLIA_ADMIN_KEY
68-
}
61+
]
6962
},
7063
sidebar: {
7164
// modified from original config, this is now only for ordering top-level groups

‎gatsby-config.js

+7-12
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
require('dotenv').config()
2-
const queries = require('./src/utils/algolia')
32
const config = require('./config')
43
const plugins = [
54
{
@@ -86,21 +85,17 @@ const plugins = [
8685
options: {
8786
writeKey: 'b4iAxJT8ISitRFQ6qZGS9w7RTnaOpvju'
8887
}
89-
}
90-
]
91-
// check and add algolia
92-
if (config.header.search && config.header.search.enabled && config.header.search.algoliaAppId && config.header.search.algoliaAdminKey) {
93-
plugins.push({
88+
},
89+
{
9490
resolve: 'gatsby-plugin-algolia',
9591
options: {
96-
appId: config.header.search.algoliaAppId, // algolia application id
97-
apiKey: config.header.search.algoliaAdminKey, // algolia admin key to index
98-
queries,
99-
chunkSize: 10000 // default: 1000
92+
appId: process.env.GATSBY_ALGOLIA_APP_ID,
93+
apiKey: process.env.ALGOLIA_ADMIN_KEY,
94+
queries: require('./src/utils/algolia-queries')
10095
}
10196
}
102-
)
103-
}
97+
]
98+
10499
// check and add pwa functionality
105100
if (config.pwa && config.pwa.enabled && config.pwa.manifest) {
106101
plugins.push({

‎package.json

+3-5
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
"@philpl/buble": "0.19.7",
2020
"@playlyfe/gql": "2.6.2",
2121
"@turf/turf": "5.1.6",
22-
"algoliasearch": "3.35.1",
22+
"algoliasearch": "^4.10.3",
2323
"autoprefixer": "10.3.1",
2424
"babel-eslint": "10.1.0",
2525
"bootstrap": "4.4.1",
@@ -35,7 +35,7 @@
3535
"gatsby": "3.9.1",
3636
"gatsby-cli": "2.8.26",
3737
"gatsby-link": "2.2.27",
38-
"gatsby-plugin-algolia": "0.5.0",
38+
"gatsby-plugin-algolia": "^0.22.0",
3939
"gatsby-plugin-catch-links": "3.9.0",
4040
"gatsby-plugin-emotion": "6.9.0",
4141
"gatsby-plugin-eslint": "3.0.0",
@@ -77,14 +77,12 @@
7777
"react-helmet": "5.2.1",
7878
"react-highlight.js": "1.0.7",
7979
"react-id-generator": "3.0.0",
80-
"react-instantsearch-dom": "6.0.0",
80+
"react-instantsearch-dom": "^6.12.0",
8181
"react-live": "2.2.2",
8282
"react-loadable": "5.5.0",
8383
"readable-stream": "3.6.0",
8484
"redoc": "2.0.0-rc.55",
8585
"stream-browserify": "3.0.0",
86-
"styled-components": "5.2.0",
87-
"styled-icons": "9.0.1",
8886
"tailwindcss": "2.2.4",
8987
"util": "0.12.4",
9088
"yaml": "1.10.2"

‎src/components/DocsSectionLandingPage.js

+10-11
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,13 @@ import { Link } from 'gatsby'
55
import Icon from './Icon'
66
import DocsContentWide from './DocsContentWide'
77

8-
const DocsSectionLandingPage = ({ docsSectionInfo, allMdx }) => {
9-
const { text, subtitle, description, colorClass } = docsSectionInfo
10-
return (
11-
<DocsContentWide>
8+
const DocsSectionLandingPage = ({ docsSectionInfo, allMdx }) => (
9+
<DocsContentWide>
10+
{ docsSectionInfo && (
1211
<div className='text-qrigray-600 font-light'>
13-
<div className={classNames('font-bold text-2xl mb-6', colorClass)}>{text}</div>
14-
<div className={classNames('font-bold text-lg text-black mb-4')}>{subtitle}</div>
15-
<div className={classNames('mb-4')}>{description}</div>
12+
<div className={classNames('font-bold text-2xl mb-6', docsSectionInfo.colorClass)}>{docsSectionInfo.text}</div>
13+
<div className={classNames('font-bold text-lg text-black mb-4')}>{docsSectionInfo.subtitle}</div>
14+
<div className={classNames('mb-4')}>{docsSectionInfo.description}</div>
1615
<div className='grid grid-cols-3 gap-4'>
1716
{allMdx.edges.map(({ node }) => {
1817
const { metaTitle, metaDescription } = node.frontmatter
@@ -21,7 +20,7 @@ const DocsSectionLandingPage = ({ docsSectionInfo, allMdx }) => {
2120
<div
2221
className='rounded-lg border-solid border border-qrigray-100 box-border px-4 py-3'
2322
>
24-
<Icon icon='docsRing' size='2xs' className={classNames('mb-2', colorClass)} />
23+
<Icon icon='docsRing' size='2xs' className={classNames('mb-2', docsSectionInfo.colorClass)} />
2524
<div className='font-bold text-sm text-black mb-2'>{metaTitle}</div>
2625
<div className='text-xs'>{metaDescription}</div>
2726
</div>
@@ -30,8 +29,8 @@ const DocsSectionLandingPage = ({ docsSectionInfo, allMdx }) => {
3029
})}
3130
</div>
3231
</div>
33-
</DocsContentWide>
34-
)
35-
}
32+
)}
33+
</DocsContentWide>
34+
)
3635

3736
export default DocsSectionLandingPage

‎src/components/Header.js

+16-25
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
11
import React from 'react'
2-
import { StaticQuery, graphql, Link } from 'gatsby'
3-
import Loadable from 'react-loadable'
2+
import { StaticQuery, graphql } from 'gatsby'
43
import classNames from 'classnames'
54

65
import config from '../../config.js'
7-
import LoadingProvider from './mdxComponents/loading'
86
import Sidebar from './sidebar'
97
import Icon from './Icon'
8+
import Link from './Link'
109

1110
const isSearchEnabled = !!(config.header.search && config.header.search.enabled)
1211

@@ -17,11 +16,6 @@ if (isSearchEnabled && config.header.search.indexName) {
1716
)
1817
}
1918

20-
const LoadableComponent = Loadable({
21-
loader: () => import('./search/index'), //eslint-disable-line
22-
loading: LoadingProvider
23-
})
24-
2519
function myFunction () {
2620
var x = document.getElementById('navbar')
2721
if (x.className === 'topnav') {
@@ -31,7 +25,12 @@ function myFunction () {
3125
}
3226
}
3327

34-
const Header = ({ location, showSidebar, border = true }) => (
28+
const Header = ({
29+
location,
30+
showSidebar,
31+
border = true,
32+
onSearchClick
33+
}) => (
3534
<StaticQuery
3635
query={
3736
graphql`
@@ -66,47 +65,36 @@ const Header = ({ location, showSidebar, border = true }) => (
6665
<nav className={classNames('flex px-10 py-4 items-center z-10 relative', {
6766
'border-b border-qrigray-200': border
6867
})}>
69-
<Link to={finalLogoLink} className={'mr-3'}>
68+
<Link colorClassName={'text-black'} to={finalLogoLink} className={'mr-3'}>
7069
<img className={'img-responsive displayInline'} src={(logo.image !== '') ? logo.image : logoImg} alt={'logo'} />
7170
</Link>
72-
<div className='text-xl'>
73-
<Link to='/'>
71+
<div className='text-xl flex'>
72+
<Link colorClassName={'text-black'} to='/'>
7473
<span className='font-extrabold'>Qri</span>
7574
</Link>
7675
<span className='text-xl'> /</span>
77-
<Link to='/docs'>
76+
<Link colorClassName={'text-black'} to='/docs'>
7877
<span className='text-qriqritile-600'>Docs</span>
7978
</Link></div>
8079
<span onClick={myFunction} className={'navBarToggle'}>
8180
<span className={'iconBar'}></span>
8281
<span className={'iconBar'}></span>
8382
<span className={'iconBar'}></span>
8483
</span>
85-
{isSearchEnabled ? (
86-
<div className={'searchWrapper hiddenMobile navBarUL'}>
87-
<LoadableComponent collapse={true} indices={searchIndices} />
88-
</div>
89-
) : null}
9084
<div id="navbar" className={'flex-grow text-right'}>
9185
<div className={'sm:hidden'}>
9286
{showSidebar && <><Sidebar location={location} /> <hr/></>}
93-
{isSearchEnabled ? (
94-
<div className={'searchWrapper'}>
95-
<LoadableComponent collapse={true} indices={searchIndices} />
96-
</div>
97-
) : null}
9887
</div>
9988
<ul className={'flex justify-end text-sm font-semibold tracking-wide'}>
10089
{headerLinks.map((headerLink, key) => {
10190
const { link, text, colorClass } = headerLink
10291

10392
if (link !== '' && text !== '') {
104-
// internal links get a <Link/>
10593
if (link.charAt(0) === '/') {
10694
return (
10795
<li key={key} className='ml-10 flex items-center'>
10896
{colorClass && (<Icon icon='docsRing' size='2xs' className={classNames(colorClass, 'mr-2')}/>)}
109-
<Link to={link}>{text}</Link>
97+
<Link colorClassName={'text-black'} to={link}>{text}</Link>
11098
</li>
11199
)
112100
}
@@ -118,6 +106,9 @@ const Header = ({ location, showSidebar, border = true }) => (
118106
)
119107
}
120108
})}
109+
<li className='ml-10 flex items-center'>
110+
<Link colorClassName={'text-black'} onClick={onSearchClick}><Icon icon='search' size='md'/></Link>
111+
</li>
121112
</ul>
122113
</div>
123114
</nav>

‎src/components/Icon.js

+2
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@ import {
4545
import Discord from './icon/Discord'
4646
import DocsRing from './icon/DocsRing'
4747
import Github from './icon/Github'
48+
import Search from './icon/Search'
4849
import Twitter from './icon/Twitter'
4950
import Youtube from './icon/Youtube'
5051

@@ -111,6 +112,7 @@ const Icon = ({
111112
discord: <Discord className={className} size={size} />,
112113
docsRing: <DocsRing className={className} size={size} />,
113114
github: <Github className={className} size={size} />,
115+
search: <Search className={className} size={size} />,
114116
twitter: <Twitter className={className} size={size} />,
115117
youtube: <Youtube className={className} size={size} />
116118
}

‎src/components/Link.js

+16-4
Original file line numberDiff line numberDiff line change
@@ -9,17 +9,29 @@ const CustomLink = ({
99
size = 'sm',
1010
className,
1111
colorClassName = defaultColorClassName,
12+
onClick,
1213
children
1314
}) => {
14-
const combinedClassNames = classNames('hover:cursor-pointer transition-all duration-100', colorClassName)
15+
const combinedClassNames = classNames('cursor-pointer transition-all duration-100', colorClassName)
1516

17+
// use a div by default
1618
let theLink = (
17-
<Link to={to} className={combinedClassNames}>
19+
<div onClick={onClick} className={combinedClassNames}>
1820
{children}
19-
</Link>
21+
</div>
2022
)
2123

22-
if (to.includes('http')) {
24+
// if to exists, make it a gatsby <Link>
25+
if (to) {
26+
theLink = (
27+
<Link to={to} className={combinedClassNames}>
28+
{children}
29+
</Link>
30+
)
31+
}
32+
33+
// if to contains http:// or https:// make it an <a>
34+
if (to?.match(/^https?:\/\//)) {
2335
theLink = (
2436
<a
2537
href={to}

0 commit comments

Comments
 (0)