feature DocSearch V3

.env.gatsby

@@ -1,6 +1,7 @@
-GATSBY_DOCSEARCH_API_KEY = 3ec989b752d176d177da4cfe814eee11
+GATSBY_DOCSEARCH_API_KEY = b72f5d9b3a7c538ebfcb8fa69ba1e077
 GATSBY_DOCSEARCH_INDEX_NAME = api-platform
 GATSBY_GOOGLE_ANALYTICS_TRACKING_ID = UA-67501746-1
 GATSBY_ROOT_URL = https://api-platform.com
 GATSBY_BUILD_TIMEOUT=600000
 GATSBY_MAPBOX_KEY = pk.eyJ1IjoiZ2luaWZpenoiLCJhIjoiY2tsZ2c3d3Z1MWs1MDJvbWpvdjM2MGg4ZSJ9.5jBAlLJbO-gf2_BQGzfZ0Q
+GATSBY_DOCSEARCH_APP_ID = ZQ00U6B6ML

package.json

@@ -2,6 +2,7 @@
   "name": "api-platform-website",
   "license": "MIT",
   "dependencies": {
+    "@docsearch/react": "^3",
     "@typescript-eslint/eslint-plugin": "^4.15.2",
     "@typescript-eslint/parser": "^4.15.2",
     "classnames": "^2.2.5",

src/components/layout/Search.js

@@ -1,87 +1,30 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import scriptLoader from 'react-async-script-loader';
-// import { currentVersion } from '../../../constants';
-
-class Search extends React.Component {
-  // eslint-disable-next-line camelcase
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    const { isScriptLoaded } = this.props;
-    if (nextProps.isScriptLoaded && !isScriptLoaded) {
-      if (nextProps.isScriptLoadSucceed) {
-        this.initDocSearch();
-      }
-    }
-  }
-
-  componentDidMount() {
-    const { isScriptLoaded, isScriptLoadSucceed } = this.props;
-
-    if (isScriptLoaded && isScriptLoadSucceed) {
-      this.initDocSearch();
-    }
-  }
-
-  /* eslint-disable no-undef */
-  initDocSearch() {
-    if (docsearch) {
-      docsearch({
-        apiKey: process.env.GATSBY_DOCSEARCH_API_KEY,
-        indexName: process.env.GATSBY_DOCSEARCH_INDEX_NAME,
-        inputSelector: this.searchInput,
-        debug: false,
-        // algoliaOptions: { facetFilters: [`version:v${currentVersion}`] },
-      });
-    }
-  }
-  /* eslint-enable no-undef */
-
-  onSearchClick = () => {
-    this.searchInput.focus();
-  };
-
-  render() {
-    const { className, onFocus, onBlur } = this.props;
-
-    return (
-      <div className={classNames('search', className)}>
-        <button
-          className="icon-search search__icon"
-          type="button"
-          onClick={this.onSearchClick}
-          title="Search docs"
-          aria-label="Search docs"
-        />
-        <form>
-          <input
-            ref={(input) => {
-              this.searchInput = input;
-            }}
-            onFocus={onFocus}
-            onBlur={onBlur}
-            className="search__input"
-            type="search"
-            placeholder="SEARCH..."
-          />
-        </form>
-      </div>
-    );
-  }
-}
+import { DocSearch } from '@docsearch/react';
+import { currentVersion } from '../../../constants';
+import '@docsearch/css';
+
+const Search = ({ className }) => (
+  <div className={classNames('search', className)}>
+    <DocSearch
+      appId={process.env.GATSBY_DOCSEARCH_APP_ID}
+      apiKey={process.env.GATSBY_DOCSEARCH_API_KEY}
+      indexName={process.env.GATSBY_DOCSEARCH_INDEX_NAME}
+      searchParameters={{
+        facetFilters: [`version:v${currentVersion}`],
+      }}
+      placeholder="Search..."
+    />
+  </div>
+);
 
 Search.propTypes = {
   className: PropTypes.string,
-  isScriptLoaded: PropTypes.bool.isRequired,
-  isScriptLoadSucceed: PropTypes.bool.isRequired,
-  onFocus: PropTypes.func,
-  onBlur: PropTypes.func,
 };
 
 Search.defaultProps = {
   className: '',
-  onFocus: () => {},
-  onBlur: () => {},
 };
 
-export default scriptLoader('https://cdn.jsdelivr.net/docsearch.js/2.5/docsearch.min.js')(Search);
+export default Search;

src/styles/components/_search.scss

@@ -1,37 +1,5 @@
 .search {
   display: flex;
-  align-items: center;
   width: 100%;
-
-  .search__icon {
-    color: $lightblue;
-    font-size: 2.4em;
-    opacity: .5;
-    margin-right: 15px;
-  }
-
-  form {
-    width: calc(100% - 40px);
-  }
-
-  .search__input {
-    background-color: var(--contrast-bg);
-    border: none;
-    color: var(--contrast-text);
-    font-size: 1.3em;
-    font-weight: $bold;
-    padding: 0 10px;
-    line-height: 40px;
-    height: 40px;
-    width: 100%;
-
-    &:focus {
-      outline: none;
-      background-color: var(--focus);
-    }
-  }
-
-  .search__input::placeholder {
-    color: var(--search-placeholder);
-  }
+  align-items: center;
 }

src/styles/main.scss

@@ -36,7 +36,7 @@
 @import './objects/preheader';
 
 // VENDOR
-@import './vendor/algolia';
+@import './vendor/docsearchcustom';
 
 // COMPONENTS
 @import './components/page';

src/styles/vendor/_docsearchcustom.scss

@@ -0,0 +1,143 @@
+.DocSearch-Button {
+  border-radius: 0;
+  background-color: var(--contrast);
+  &-Placeholder {
+    color: var(--search-placeholder);
+    font-size: 1.3em;
+    font-weight: $bold;
+  }
+  &:focus, 
+  &:hover, 
+  &:active {
+    outline: none;
+    box-shadow: none;
+    background-color: var(--focus);
+  }
+  .DocSearch-Search-Icon {
+    margin-right: 15px;
+    color: $lightblue;
+    opacity: .5;
+  }
+}
+
+.DocSearch-Modal {
+  width: 100%;
+  margin-top: calc(var(--headerH) + var(--headerMessageH));
+  background-color: var(--bg);
+
+  .DocSearch-SearchBar::placeholder {
+    color: var(--search-placeholder);
+  }
+
+  .DocSearch-Form {
+    box-shadow: none;
+    background: none;
+    .DocSearch-Input {
+      width: 100%;
+      height: 40px;
+      padding: 0 10px;
+      border: none;
+      font-size: 1.3em;
+      font-weight: $bold;
+      line-height: 40px;
+      text-transform: uppercase;
+      background-color: var(--contrast-bg);
+      color: var(--contrast-text);
+
+      &:focus {
+        outline: none;
+        background-color: var(--focus);
+      }
+    }
+
+    .DocSearch-MagnifierLabel, 
+    .DocSearch-Reset {
+      color: var(--text);
+    }
+
+    .DocSearch-MagnifierLabel {
+      margin-right: 15px;
+      color: $lightblue;
+      opacity: .5;
+    }
+  }
+
+  .DocSearch-Dropdown {
+    width: 100%;
+    padding: 0 !important;
+    font-size: $text-small;
+
+    .DocSearch-StartScreen, 
+    .DocSearch-Dropdown-Container, 
+    .DocSearch-NoResults {
+      width: 100%;
+      padding-bottom: 20px;
+      border-bottom: 1px solid #ddd;
+      margin-top: 0 !important;
+    }
+
+    .DocSearch-Hit {
+      a {
+        box-shadow: none !important;
+        background: none;
+      }
+
+      &-title {
+        color: var(--title);
+      }
+
+      &[aria-selected="true"] .DocSearch-Hit-action,
+      &[aria-selected="true"] .DocSearch-Hit-icon,
+      &[aria-selected="true"] .DocSearch-Hit-path,
+      &[aria-selected="true"] .DocSearch-Hit-text,
+      &[aria-selected="true"] .DocSearch-Hit-title,
+      &[aria-selected="true"] .DocSearch-Hit-Tree,
+      &[aria-selected="true"] mark {
+          color: var(--title) !important;
+      }
+    }
+
+    .DocSearch-Hits {
+      mark {
+        color: $blue;
+        background-color: var(--bg);
+      }
+      &:before,
+      .DocSearch-Hit-source {
+        padding: 10px !important;
+        margin-top: 0 !important;
+        margin-left: 0 !important;
+        margin-right: 0 !important;
+        text-transform: uppercase;
+        font-weight: $bold;
+        background: $blue !important;
+        color: $white !important;
+      }
+    }
+
+    .DocSearch-Title {
+      font-size: $text-small;
+      color: var(--title);
+    }
+
+    @include mq($max-width: $vw-medium) {
+      min-width: 450px !important;
+      max-width: 450px !important;
+
+      .DocSearch-Hits {
+        padding-left: 8px;
+        padding-right: 8px;
+      }
+
+      .DocSearch-Hit-Container {
+        padding: 0;
+      }
+    }
+  }
+
+  .DocSearch-Footer {
+    margin-bottom: 10px;
+    margin-right: 20px;
+    background: none;
+  }
+}