feat(docs): optimized style and script loading

www/gatsby-ssr.js

@@ -1,43 +1 @@
-const React = require('react');
-
-exports.onRenderBody = ({ setHeadComponents, setPostBodyComponents }) => {
-  setHeadComponents([
-    <link
-      rel="stylesheet"
-      href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
-      integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
-      crossOrigin="anonymous"
-    />,
-    <link
-      key="solid"
-      rel="stylesheet"
-      href="https://use.fontawesome.com/releases/v5.2.0/css/solid.css"
-      integrity="sha384-wnAC7ln+XN0UKdcPvJvtqIH3jOjs9pnKnq9qX68ImXvOGz2JuFoEiCjT8jyZQX2z"
-      crossOrigin="anonymous"
-    />,
-    <link
-      key="brands"
-      rel="stylesheet"
-      href="https://use.fontawesome.com/releases/v5.2.0/css/brands.css"
-      integrity="sha384-nT8r1Kzllf71iZl81CdFzObMsaLOhqBU1JD2+XoAALbdtWaXDOlWOZTR4v1ktjPE"
-      crossOrigin="anonymous"
-    />,
-    <link
-      key="fa"
-      rel="stylesheet"
-      href="https://use.fontawesome.com/releases/v5.2.0/css/fontawesome.css"
-      integrity="sha384-HbmWTHay9psM8qyzEKPc8odH4DsOuzdejtnr+OFtDmOcIVnhgReQ4GZBH7uwcjf6"
-      crossOrigin="anonymous"
-    />,
-  ]);
-
-  setPostBodyComponents([
-    <script
-      key="asfasfasfas"
-      type="text/javascript"
-      src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"
-    />,
-  ]);
-};
-
 exports.wrapPageElement = require(`./src/wrap-page`);

www/package.json

@@ -7,13 +7,18 @@
     "url": "https://github.com/react-bootstrap/react-bootstrap/issues"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^1.2.17",
+    "@fortawesome/free-brands-svg-icons": "^5.8.1",
+    "@fortawesome/free-solid-svg-icons": "^5.8.1",
+    "@fortawesome/react-fontawesome": "^0.1.4",
     "@mdx-js/mdx": "^0.20.3",
     "@mdx-js/tag": "^0.20.3",
     "@restart/context": "^2.1.4",
     "astroturf": "^0.9.2",
     "bootstrap": "^4.3.1",
     "classnames": "^2.2.6",
     "common-tags": "^1.8.0",
+    "docsearch.js": "^2.6.2",
     "dom-helpers": "^3.4.0",
     "formik": "^1.5.3",
     "gatsby": "^2.3.31",

www/src/components/LinkToSource.js

@@ -2,6 +2,8 @@ import React from 'react';
 import styled from 'astroturf';
 import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
 import Tooltip from 'react-bootstrap/Tooltip';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faCode } from '@fortawesome/free-solid-svg-icons/faCode';
 
 import { version } from '../../../package.json';
 
@@ -23,7 +25,7 @@ export default props => {
       }
     >
       <Link href={linkToComponentOnGitHub} className="js-search-exclude">
-        <i className="fas fa-code" />
+        <FontAwesomeIcon icon={faCode} />
         <span className="sr-only">view source file</span>
       </Link>
     </OverlayTrigger>

www/src/components/NavMain.js

@@ -8,6 +8,9 @@ import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
 import Dropdown from 'react-bootstrap/Dropdown';
 import styled from 'astroturf';
 import withProps from 'recompose/withProps';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faDiscord } from '@fortawesome/free-brands-svg-icons/faDiscord';
+import { faGithub } from '@fortawesome/free-brands-svg-icons/faGithub';
 
 import logo from '../assets/logo.svg';
 
@@ -43,10 +46,6 @@ const StyledNavLink = styled(Nav.Link)`
   &:global(.active) {
     font-width: 700;
   }
-
-  & i {
-    font-size: 1.2em;
-  }
 `;
 
 const StyledDropdown = styled(Dropdown)`
@@ -122,7 +121,7 @@ function NavMain({ activePage }) {
             target="_blank"
             rel="noopener noreferrer"
           >
-            <i className="fab fa-github" />
+            <FontAwesomeIcon icon={faGithub} size="lg" />
             <span className="sr-only">Github</span>
           </StyledNavLink>
         </OverlayTrigger>
@@ -136,7 +135,7 @@ function NavMain({ activePage }) {
             target="_blank"
             rel="noopener noreferrer"
           >
-            <i className="fab fa-discord" />
+            <FontAwesomeIcon icon={faDiscord} size="lg" />
             <span className="sr-only">Discord</span>
           </StyledNavLink>
         </OverlayTrigger>

www/src/components/SideNav.js

@@ -138,12 +138,14 @@ const utilities = ['transitions', 'responsive-embed', 'react-overlays'];
 
 // We need to configure this
 function attachSearch(ref) {
-  if (ref && window.docsearch)
-    window.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
+  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
+      });
     });
 }
 

www/src/wrap-page.js

@@ -1,3 +1,5 @@
+require('bootstrap/dist/css/bootstrap.min.css');
+
 const { MDXProvider } = require('@mdx-js/tag');
 const React = require('react');