Skip to content

Commit 0fa756a

Browse files
chrisflatleychrisflatley
authored
Merge pull request #40 from commitd/chrisflatley/fix-search
Fix search
2 parents 480e20c + f71f352 commit 0fa756a

File tree

5 files changed

+127
-79
lines changed

5 files changed

+127
-79
lines changed

‎theme/gatsby-config.js‎

Lines changed: 61 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ module.exports = ({
66
sidebar,
77
print,
88
checkLinks = {},
9-
search = false,
9+
search = true,
1010
}) => ({
1111
siteMetadata: {
1212
title: 'Docs',
@@ -42,24 +42,7 @@ module.exports = ({
4242
`gatsby-plugin-material-ui`,
4343
`gatsby-plugin-react-helmet`,
4444
`gatsby-plugin-sharp`,
45-
{
46-
resolve: `@gatsby-contrib/gatsby-plugin-elasticlunr-search`,
47-
options: {
48-
// don't index anything if search is off
49-
// this retains schema entries but stops the effort.
50-
fields: search ? [`title`, `description`, `content`] : [],
51-
resolvers: {
52-
Docs: {
53-
title: (node) => node.title,
54-
description: (node) => node.metaDescription,
55-
// TODO: This is the full raw body, including front matter
56-
content: (node) => node.rawBody,
57-
slug: (node) => node.slug,
58-
},
59-
},
60-
// TODO: Optional filter here, which would be useful for drafts?
61-
},
62-
},
45+
6346
{
6447
resolve: `gatsby-plugin-layout`,
6548
options: {
@@ -131,5 +114,64 @@ module.exports = ({
131114
],
132115
},
133116
},
117+
{
118+
resolve: 'gatsby-plugin-local-search',
119+
options: {
120+
// A unique name for the search index. This should be descriptive of
121+
// what the index contains. This is required.
122+
name: 'pages',
123+
124+
// Set the search engine to create the index. This is required.
125+
// The following engines are supported: flexsearch, lunr
126+
engine: 'flexsearch',
127+
128+
// GraphQL query used to fetch all data for the search index. This is
129+
// required.
130+
query: `
131+
{
132+
allMdx {
133+
nodes {
134+
id
135+
slug
136+
frontmatter {
137+
title
138+
metaDescription
139+
}
140+
excerpt
141+
rawBody
142+
}
143+
}
144+
}
145+
`,
146+
147+
// Field used as the reference value for each document.
148+
// Default: 'id'.
149+
ref: 'id',
150+
151+
// List of keys to index. The values of the keys are taken from the
152+
// normalizer function below.
153+
// Default: all fields
154+
index: ['title', 'description', 'body'],
155+
156+
// List of keys to store and make available in your UI. The values of
157+
// the keys are taken from the normalizer function below.
158+
// Default: all fields
159+
store: ['id', 'slug', 'title', 'description', 'excerpt'],
160+
161+
// Function used to map the result from the GraphQL query. This should
162+
// return an array of items to index in the form of flat objects
163+
// containing properties to index. The objects must contain the `ref`
164+
// field above (default: 'id'). This is required.
165+
normalizer: ({ data }) =>
166+
data.allMdx.nodes.map((node) => ({
167+
id: node.id,
168+
slug: node.slug,
169+
title: node.frontmatter.title,
170+
description: node.frontmatter.description,
171+
excerpt: node.excerpt,
172+
body: node.rawBody,
173+
})),
174+
},
175+
},
134176
],
135177
})

‎theme/package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,13 +29,13 @@
2929
"dependencies": {
3030
"@committed/components": "^4.2.1",
3131
"@committed/layout": "^4.2.0",
32-
"@gatsby-contrib/gatsby-plugin-elasticlunr-search": "^3.0.2",
3332
"@material-ui/core": "^4.11.0",
3433
"@material-ui/icons": "^4.11.2",
3534
"@material-ui/lab": "^4.0.0-alpha.56",
3635
"@mdx-js/mdx": "^1.6.22",
3736
"@mdx-js/react": "^1.6.22",
3837
"gatsby-plugin-layout": "^2.8.0",
38+
"gatsby-plugin-local-search": "^2.0.1",
3939
"gatsby-plugin-material-ui": "^3.0.1",
4040
"gatsby-plugin-mdx": "^2.8.0",
4141
"gatsby-plugin-react-helmet": "^4.8.0",
@@ -52,6 +52,7 @@
5252
"puppeteer": "^10.0.0",
5353
"react-helmet": "^6.1.0",
5454
"react-hotkeys-hook": "^3.3.2",
55+
"react-use-flexsearch": "^0.1.1",
5556
"remark-emoji": "^2.2.0",
5657
"remark-slug": "^6.0.0",
5758
"typeface-dosis": "^1.1.13",

‎theme/src/components/Search.tsx‎

Lines changed: 31 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -8,19 +8,14 @@ import {
88
TextField,
99
Typography,
1010
} from '@committed/components'
11-
import { Index } from 'elasticlunr'
12-
import React, {
13-
FC,
14-
useCallback,
15-
useContext,
16-
useEffect,
17-
useMemo,
18-
useState,
19-
} from 'react'
11+
import { useFlexSearch } from 'react-use-flexsearch'
12+
import React, { FC, useContext, useState } from 'react'
2013
import { DocsContext } from './Layout'
14+
import { withPrefix } from 'gatsby'
2115

2216
interface SearchProps {
2317
index: any
18+
store: any
2419
}
2520

2621
// These are defined through gatsby-node.js in the elasticlunr config
@@ -35,34 +30,16 @@ interface Result {
3530
export const Search: FC<SearchProps> = (props: SearchProps) => {
3631
const { navigate } = useContext(DocsContext)
3732

38-
const [query, setQuery] = useState('')
39-
const [results, setResults] = useState<Result[]>([])
33+
const [query, setQuery] = useState(null)
34+
const results = useFlexSearch(query, props.index, props.store)
4035

41-
const index = useMemo(() => {
42-
return Index.load(props.index)
43-
}, props.index)
44-
45-
const search = useCallback(() => {
46-
// Consider: Should we stop if query.length < 3?
47-
48-
const r = index
49-
// Expand allows for partial matches (mer matches mermaid)
50-
.search(query, JSON.parse('{ "expand": true }'))
51-
// Map over each ID and return the full document
52-
.map(({ ref }) => index.documentStore.getDoc(ref))
53-
54-
// Consider: Should be limit number of results?
55-
setResults(r)
56-
}, [index, query, setResults])
57-
58-
// Consider: Search as you type - possible not a good idea for larger sites?
59-
useEffect(() => search(), [query, search])
36+
console.log(results)
6037

6138
return (
6239
<>
6340
<Card>
6441
<CardContent>
65-
<Form display="flex" width={1} onSubmit={search}>
42+
<Form display="flex" width={1} onSubmit={(e) => e.preventDefault()}>
6643
<TextField
6744
flexGrow={1}
6845
id="query-input"
@@ -75,7 +52,7 @@ export const Search: FC<SearchProps> = (props: SearchProps) => {
7552
</Form>
7653
</CardContent>
7754
</Card>
78-
{results.length === 0 && query !== '' && (
55+
{results.length === 0 && query !== null && query !== '' && (
7956
<Typography variant="body1" gutterBottom>
8057
Sorry, no results found for "<i>{query}</i>"
8158
</Typography>
@@ -87,18 +64,28 @@ export const Search: FC<SearchProps> = (props: SearchProps) => {
8764
Found {results.length} results for "<i>{query}</i>".
8865
</Typography>
8966
<List>
90-
{results.map((r) => (
91-
<ListItem
92-
key={r.id}
93-
button
94-
onClick={() => {
95-
navigate(r.slug)
96-
}}
97-
>
98-
{r.title}
99-
{r.description && <small>: {r.description}</small>}
100-
</ListItem>
101-
))}
67+
{results.map((r) => {
68+
let desc = r.description || r.excerpt
69+
return (
70+
<ListItem
71+
key={r.id}
72+
button
73+
onClick={() => {
74+
// TODO: slug = test/mdTest is wrong, so we lowerc ase.
75+
// I don't know if there's a bug somewhere else (or ig we are wrong to have an upper case in our filename)
76+
navigate(withPrefix(r.slug.toLowerCase()))
77+
}}
78+
>
79+
<div>
80+
<b>
81+
{r.title || 'Untitled'}
82+
{desc ? ': ' : ''}
83+
</b>
84+
<small>{desc}</small>
85+
</div>
86+
</ListItem>
87+
)
88+
})}
10289
</List>
10390
</CardContent>
10491
</Card>

‎theme/src/layout/search.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,14 @@ export default () => (
77
<StaticQuery
88
query={graphql`
99
query SearchIndexQuery {
10-
siteSearchIndex {
10+
localSearchPages {
1111
index
12+
store
1213
}
1314
}
1415
`}
15-
render={({ siteSearchIndex: { index } }) => <Search index={index} />}
16+
render={({ localSearchPages: { index, store } }) => (
17+
<Search index={index} store={store} />
18+
)}
1619
/>
1720
)

‎yarn.lock‎

Lines changed: 28 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1216,13 +1216,6 @@
12161216
minimatch "^3.0.4"
12171217
strip-json-comments "^3.1.1"
12181218

1219-
"@gatsby-contrib/gatsby-plugin-elasticlunr-search@^3.0.2":
1220-
version "3.0.2"
1221-
resolved "https://registry.yarnpkg.com/@gatsby-contrib/gatsby-plugin-elasticlunr-search/-/gatsby-plugin-elasticlunr-search-3.0.2.tgz#f60462f5f6283af170a22b28e2f159dd936f6a7b"
1222-
integrity sha512-GQUwjZ6/Q6jFl5Kk1zDtquQewbjX4dsLE8g0/V/aA7s5Mvtc7plCYtvSdarqkJdfC41VC31NubHseDqUkoKeRA==
1223-
dependencies:
1224-
elasticlunr "^0.9.5"
1225-
12261219
"@gatsbyjs/reach-router@^1.3.6":
12271220
version "1.3.6"
12281221
resolved "https://registry.yarnpkg.com/@gatsbyjs/reach-router/-/reach-router-1.3.6.tgz#4e8225836959be247890b66f21a3198a0589e34d"
@@ -5388,11 +5381,6 @@ [email protected]:
53885381
resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
53895382
integrity sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=
53905383

5391-
elasticlunr@^0.9.5:
5392-
version "0.9.5"
5393-
resolved "https://registry.yarnpkg.com/elasticlunr/-/elasticlunr-0.9.5.tgz#65541bb309dddd0cf94f2d1c8861b2be651bb0d5"
5394-
integrity sha1-ZVQbswnd3Qz5Ty0ciGGyvmUbsNU=
5395-
53965384
electron-to-chromium@^1.3.413:
53975385
version "1.3.427"
53985386
resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.427.tgz#ea43d02908a8c71f47ebb46e09de5a3cf8236f04"
@@ -6490,6 +6478,11 @@ flatted@^3.1.0:
64906478
resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.1.1.tgz#c4b489e80096d9df1dfc97c79871aea7c617c469"
64916479
integrity sha512-zAoAQiudy+r5SvnSw3KJy5os/oRJYHzrzja/tBDqrZtNhUw8bt6y8OBzMWcjWr+8liV8Eb6yOhw8WZ7VFZ5ZzA==
64926480

6481+
flexsearch@^0.6.22, flexsearch@^0.6.32:
6482+
version "0.6.32"
6483+
resolved "https://registry.yarnpkg.com/flexsearch/-/flexsearch-0.6.32.tgz#1e20684d317af65baa445cdd9864a5f5b320f510"
6484+
integrity sha512-EF1BWkhwoeLtbIlDbY/vDSLBen/E5l/f1Vg7iX5CDymQCamcx1vhlc3tIZxIDplPjgi0jhG37c67idFbjg+v+Q==
6485+
64936486
follow-redirects@^1.0.0:
64946487
version "1.11.0"
64956488
resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.11.0.tgz#afa14f08ba12a52963140fe43212658897bc0ecb"
@@ -6732,6 +6725,16 @@ gatsby-plugin-layout@^2.8.0:
67326725
dependencies:
67336726
"@babel/runtime" "^7.14.0"
67346727

6728+
gatsby-plugin-local-search@^2.0.1:
6729+
version "2.0.1"
6730+
resolved "https://registry.yarnpkg.com/gatsby-plugin-local-search/-/gatsby-plugin-local-search-2.0.1.tgz#adf0aeff4b06feee57574420369ca0950a4bcdf7"
6731+
integrity sha512-qrApdH2IYfHL+dSmcwSzhDPVxlkt13N0IfEkKxfWf0gITmBwObOJBYAMnYiYUmP0dpYmSV9anJE//SLZBSsisA==
6732+
dependencies:
6733+
flexsearch "^0.6.32"
6734+
lodash "^4.17.19"
6735+
lunr "^2.3.8"
6736+
pascal-case "^3.1.1"
6737+
67356738
gatsby-plugin-manifest@^3.8.0:
67366739
version "3.8.0"
67376740
resolved "https://registry.yarnpkg.com/gatsby-plugin-manifest/-/gatsby-plugin-manifest-3.8.0.tgz#11d3ff6532b8edf58d18acfd7121a5fe097a0c80"
@@ -9556,6 +9559,11 @@ lru-queue@^0.1.0:
95569559
dependencies:
95579560
es5-ext "~0.10.2"
95589561

9562+
lunr@^2.3.8:
9563+
version "2.3.9"
9564+
resolved "https://registry.yarnpkg.com/lunr/-/lunr-2.3.9.tgz#18b123142832337dd6e964df1a5a7707b25d35e1"
9565+
integrity sha512-zTU3DaZaF3Rt9rhN3uBMGQD3dD2/vFQqnvZCDv4dl5iOzq2IZQqTxu90r4E5J+nP70J3ilqVCrbho2eWaeW8Ow==
9566+
95599567
make-dir@^1.0.0, make-dir@^1.2.0:
95609568
version "1.3.0"
95619569
resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-1.3.0.tgz#79c1033b80515bd6d24ec9933e860ca75ee27f0c"
@@ -11025,7 +11033,7 @@ pascal-case@^2.0.0:
1102511033
camel-case "^3.0.0"
1102611034
upper-case-first "^1.1.0"
1102711035

11028-
pascal-case@^3.1.2:
11036+
pascal-case@^3.1.1, pascal-case@^3.1.2:
1102911037
version "3.1.2"
1103011038
resolved "https://registry.yarnpkg.com/pascal-case/-/pascal-case-3.1.2.tgz#b48e0ef2b98e205e7c1dae747d0b1508237660eb"
1103111039
integrity sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==
@@ -11988,6 +11996,13 @@ react-transition-group@^4.4.0:
1198811996
loose-envify "^1.4.0"
1198911997
prop-types "^15.6.2"
1199011998

11999+
react-use-flexsearch@^0.1.1:
12000+
version "0.1.1"
12001+
resolved "https://registry.yarnpkg.com/react-use-flexsearch/-/react-use-flexsearch-0.1.1.tgz#2db48989a9197ee3d9776a6c2ae1ff6e65919ba2"
12002+
integrity sha512-UDRDB26HPcAo0gXNkUYYkcjoYCW4FSWr7Ich4adgVr7bqefJG7fnjlcqnwsKQkbZuteRLYzzox+1FKRTt3Z5vg==
12003+
dependencies:
12004+
flexsearch "^0.6.22"
12005+
1199112006
react@^17.0.2:
1199212007
version "17.0.2"
1199312008
resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"

0 commit comments

Comments
 (0)