Skip to content

Commit 51e1bd5

Browse files
natacha-hnatacha-h
authored
feat: upgrade DocSearch to v3 (#327)
1 parent 85a2910 commit 51e1bd5

File tree

7 files changed

+324
-110
lines changed

7 files changed

+324
-110
lines changed

‎.env.gatsby

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1-
GATSBY_DOCSEARCH_API_KEY = 3ec989b752d176d177da4cfe814eee11
1+
GATSBY_DOCSEARCH_API_KEY = b72f5d9b3a7c538ebfcb8fa69ba1e077
22
GATSBY_DOCSEARCH_INDEX_NAME = api-platform
33
GATSBY_GOOGLE_ANALYTICS_TRACKING_ID = UA-67501746-1
44
GATSBY_ROOT_URL = https://api-platform.com
55
GATSBY_BUILD_TIMEOUT=600000
66
GATSBY_MAPBOX_KEY = pk.eyJ1IjoiZ2luaWZpenoiLCJhIjoiY2tsZ2c3d3Z1MWs1MDJvbWpvdjM2MGg4ZSJ9.5jBAlLJbO-gf2_BQGzfZ0Q
7+
GATSBY_DOCSEARCH_APP_ID = ZQ00U6B6ML

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
"name": "api-platform-website",
33
"license": "MIT",
44
"dependencies": {
5+
"@docsearch/react": "^3",
56
"@typescript-eslint/eslint-plugin": "^4.15.2",
67
"@typescript-eslint/parser": "^4.15.2",
78
"classnames": "^2.2.5",

‎src/components/layout/Search.js

Lines changed: 18 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -1,87 +1,30 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
33
import classNames from 'classnames';
4-
import scriptLoader from 'react-async-script-loader';
5-
// import { currentVersion } from '../../../constants';
6-
7-
class Search extends React.Component {
8-
// eslint-disable-next-line camelcase
9-
UNSAFE_componentWillReceiveProps(nextProps) {
10-
const { isScriptLoaded } = this.props;
11-
if (nextProps.isScriptLoaded && !isScriptLoaded) {
12-
if (nextProps.isScriptLoadSucceed) {
13-
this.initDocSearch();
14-
}
15-
}
16-
}
17-
18-
componentDidMount() {
19-
const { isScriptLoaded, isScriptLoadSucceed } = this.props;
20-
21-
if (isScriptLoaded && isScriptLoadSucceed) {
22-
this.initDocSearch();
23-
}
24-
}
25-
26-
/* eslint-disable no-undef */
27-
initDocSearch() {
28-
if (docsearch) {
29-
docsearch({
30-
apiKey: process.env.GATSBY_DOCSEARCH_API_KEY,
31-
indexName: process.env.GATSBY_DOCSEARCH_INDEX_NAME,
32-
inputSelector: this.searchInput,
33-
debug: false,
34-
// algoliaOptions: { facetFilters: [`version:v${currentVersion}`] },
35-
});
36-
}
37-
}
38-
/* eslint-enable no-undef */
39-
40-
onSearchClick = () => {
41-
this.searchInput.focus();
42-
};
43-
44-
render() {
45-
const { className, onFocus, onBlur } = this.props;
46-
47-
return (
48-
<div className={classNames('search', className)}>
49-
<button
50-
className="icon-search search__icon"
51-
type="button"
52-
onClick={this.onSearchClick}
53-
title="Search docs"
54-
aria-label="Search docs"
55-
/>
56-
<form>
57-
<input
58-
ref={(input) => {
59-
this.searchInput = input;
60-
}}
61-
onFocus={onFocus}
62-
onBlur={onBlur}
63-
className="search__input"
64-
type="search"
65-
placeholder="SEARCH..."
66-
/>
67-
</form>
68-
</div>
69-
);
70-
}
71-
}
4+
import { DocSearch } from '@docsearch/react';
5+
import { currentVersion } from '../../../constants';
6+
import '@docsearch/css';
7+
8+
const Search = ({ className }) => (
9+
<div className={classNames('search', className)}>
10+
<DocSearch
11+
appId={process.env.GATSBY_DOCSEARCH_APP_ID}
12+
apiKey={process.env.GATSBY_DOCSEARCH_API_KEY}
13+
indexName={process.env.GATSBY_DOCSEARCH_INDEX_NAME}
14+
searchParameters={{
15+
facetFilters: [`version:v${currentVersion}`],
16+
}}
17+
placeholder="Search..."
18+
/>
19+
</div>
20+
);
7221

7322
Search.propTypes = {
7423
className: PropTypes.string,
75-
isScriptLoaded: PropTypes.bool.isRequired,
76-
isScriptLoadSucceed: PropTypes.bool.isRequired,
77-
onFocus: PropTypes.func,
78-
onBlur: PropTypes.func,
7924
};
8025

8126
Search.defaultProps = {
8227
className: '',
83-
onFocus: () => {},
84-
onBlur: () => {},
8528
};
8629

87-
export default scriptLoader('https://cdn.jsdelivr.net/docsearch.js/2.5/docsearch.min.js')(Search);
30+
export default Search;

‎src/styles/components/_search.scss

Lines changed: 1 addition & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,5 @@
11
.search {
22
display: flex;
3-
align-items: center;
43
width: 100%;
5-
6-
.search__icon {
7-
color: $lightblue;
8-
font-size: 2.4em;
9-
opacity: .5;
10-
margin-right: 15px;
11-
}
12-
13-
form {
14-
width: calc(100% - 40px);
15-
}
16-
17-
.search__input {
18-
background-color: var(--contrast-bg);
19-
border: none;
20-
color: var(--contrast-text);
21-
font-size: 1.3em;
22-
font-weight: $bold;
23-
padding: 0 10px;
24-
line-height: 40px;
25-
height: 40px;
26-
width: 100%;
27-
28-
&:focus {
29-
outline: none;
30-
background-color: var(--focus);
31-
}
32-
}
33-
34-
.search__input::placeholder {
35-
color: var(--search-placeholder);
36-
}
4+
align-items: center;
375
}

‎src/styles/main.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@
3636
@import './objects/preheader';
3737

3838
// VENDOR
39-
@import './vendor/algolia';
39+
@import './vendor/docsearchcustom';
4040

4141
// COMPONENTS
4242
@import './components/page';

‎src/styles/vendor/_docsearchcustom.scss

Lines changed: 143 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,143 @@
1+
.DocSearch-Button {
2+
border-radius: 0;
3+
background-color: var(--contrast);
4+
&-Placeholder {
5+
color: var(--search-placeholder);
6+
font-size: 1.3em;
7+
font-weight: $bold;
8+
}
9+
&:focus,
10+
&:hover,
11+
&:active {
12+
outline: none;
13+
box-shadow: none;
14+
background-color: var(--focus);
15+
}
16+
.DocSearch-Search-Icon {
17+
margin-right: 15px;
18+
color: $lightblue;
19+
opacity: .5;
20+
}
21+
}
22+
23+
.DocSearch-Modal {
24+
width: 100%;
25+
margin-top: calc(var(--headerH) + var(--headerMessageH));
26+
background-color: var(--bg);
27+
28+
.DocSearch-SearchBar::placeholder {
29+
color: var(--search-placeholder);
30+
}
31+
32+
.DocSearch-Form {
33+
box-shadow: none;
34+
background: none;
35+
.DocSearch-Input {
36+
width: 100%;
37+
height: 40px;
38+
padding: 0 10px;
39+
border: none;
40+
font-size: 1.3em;
41+
font-weight: $bold;
42+
line-height: 40px;
43+
text-transform: uppercase;
44+
background-color: var(--contrast-bg);
45+
color: var(--contrast-text);
46+
47+
&:focus {
48+
outline: none;
49+
background-color: var(--focus);
50+
}
51+
}
52+
53+
.DocSearch-MagnifierLabel,
54+
.DocSearch-Reset {
55+
color: var(--text);
56+
}
57+
58+
.DocSearch-MagnifierLabel {
59+
margin-right: 15px;
60+
color: $lightblue;
61+
opacity: .5;
62+
}
63+
}
64+
65+
.DocSearch-Dropdown {
66+
width: 100%;
67+
padding: 0 !important;
68+
font-size: $text-small;
69+
70+
.DocSearch-StartScreen,
71+
.DocSearch-Dropdown-Container,
72+
.DocSearch-NoResults {
73+
width: 100%;
74+
padding-bottom: 20px;
75+
border-bottom: 1px solid #ddd;
76+
margin-top: 0 !important;
77+
}
78+
79+
.DocSearch-Hit {
80+
a {
81+
box-shadow: none !important;
82+
background: none;
83+
}
84+
85+
&-title {
86+
color: var(--title);
87+
}
88+
89+
&[aria-selected="true"] .DocSearch-Hit-action,
90+
&[aria-selected="true"] .DocSearch-Hit-icon,
91+
&[aria-selected="true"] .DocSearch-Hit-path,
92+
&[aria-selected="true"] .DocSearch-Hit-text,
93+
&[aria-selected="true"] .DocSearch-Hit-title,
94+
&[aria-selected="true"] .DocSearch-Hit-Tree,
95+
&[aria-selected="true"] mark {
96+
color: var(--title) !important;
97+
}
98+
}
99+
100+
.DocSearch-Hits {
101+
mark {
102+
color: $blue;
103+
background-color: var(--bg);
104+
}
105+
&:before,
106+
.DocSearch-Hit-source {
107+
padding: 10px !important;
108+
margin-top: 0 !important;
109+
margin-left: 0 !important;
110+
margin-right: 0 !important;
111+
text-transform: uppercase;
112+
font-weight: $bold;
113+
background: $blue !important;
114+
color: $white !important;
115+
}
116+
}
117+
118+
.DocSearch-Title {
119+
font-size: $text-small;
120+
color: var(--title);
121+
}
122+
123+
@include mq($max-width: $vw-medium) {
124+
min-width: 450px !important;
125+
max-width: 450px !important;
126+
127+
.DocSearch-Hits {
128+
padding-left: 8px;
129+
padding-right: 8px;
130+
}
131+
132+
.DocSearch-Hit-Container {
133+
padding: 0;
134+
}
135+
}
136+
}
137+
138+
.DocSearch-Footer {
139+
margin-bottom: 10px;
140+
margin-right: 20px;
141+
background: none;
142+
}
143+
}

0 commit comments

Comments
 (0)