docs: migrate to Algolia DocSearch v3 (#6410)

* docs: migrate to Algolia DocSearch v3 * make search bar full width
react-bootstrap · Jul 29, 2022 · f66cf79 · f66cf79
1 parent 5940109
commit f66cf79
Show file tree

Hide file tree

Showing 7 changed files with 192 additions and 843 deletions.
diff --git a/www/gatsby-browser.js b/www/gatsby-browser.js
@@ -1,4 +1,5 @@
 require('./src/css/global.scss');
+require('@docsearch/css/dist/style.css');
 
 // prevent FontAwesome icons' flash from a very large one down to a properly sized one
 require('@fortawesome/fontawesome-svg-core/styles.css');

diff --git a/www/package.json b/www/package.json
@@ -30,6 +30,8 @@
     }
   },
   "devDependencies": {
+    "@docsearch/css": "^3.1.1",
+    "@docsearch/react": "^3.1.1",
     "@fortawesome/fontawesome-svg-core": "^1.3.0",
     "@fortawesome/free-brands-svg-icons": "^5.15.4",
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
@@ -44,7 +46,6 @@
     "classnames": "^2.3.1",
     "common-tags": "^1.8.2",
     "copy-text-to-clipboard": "^3.0.1",
-    "docsearch.js": "^2.6.3",
     "dom-helpers": "^5.2.1",
     "formik": "^2.2.9",
     "gatsby": "^2.32.13",

diff --git a/www/src/components/SideNav.js b/www/src/components/SideNav.js
@@ -1,8 +1,8 @@
+import { DocSearch } from '@docsearch/react';
 import startCase from 'lodash/startCase';
 import classNames from 'classnames';
 import * as React from 'react';
 import Nav from 'react-bootstrap/Nav';
-import FormControl from 'react-bootstrap/FormControl';
 
 import styled from 'astroturf';
 import Button from 'react-bootstrap/Button';
@@ -158,19 +158,6 @@ const components = [
 
 const utilities = ['transitions', 'ratio', 'restart-ui'];
 
-// We need to configure this
-function attachSearch(ref) {
-  if (ref && window)
-    import('docsearch.js').then(({ default: docsearch }) => {
-      docsearch({
-        apiKey: '00f98b765b687b91399288e7c4c68ce1',
-        indexName: 'react_bootstrap_v4',
-        inputSelector: `#${ref.id}`,
-        debug: process.env.NODE_ENV !== 'production', // Set debug to true if you want to inspect the dropdown
-      });
-    });
-}
-
 const nameOverrides = {
   'why-react-bootstrap': 'Why React-Bootstrap',
   rtl: 'RTL',
@@ -219,12 +206,11 @@ class SideNav extends React.Component {
     const { location, ...props } = this.props;
     return (
       <SidePanel {...props}>
-        <form className="py-3 d-flex align-items-center">
-          <FormControl
-            id="docs-search-input"
-            type="text"
-            placeholder="Search…"
-            ref={attachSearch}
+        <form className="py-3 d-flex align-items-center justify-content-between">
+          <DocSearch
+            appId="C38ZI55F9H"
+            apiKey="33985ee571397d832ef243988ff4c891"
+            indexName="react_bootstrap_v4"
           />
           <MenuButton onClick={this.handleCollapse}>
             <svg

diff --git a/www/src/css/algolia.scss b/www/src/css/algolia.scss
@@ -0,0 +1,8 @@
+// Removes a tiny vertical scrollbar in the list item.
+.DocSearch-Hit-content-wrapper {
+  overflow: hidden;
+}
+
+.DocSearch-Button {
+  flex-grow: 1;
+}