Adds Mendable floating button. Closes #4765

docs/docusaurus.config.js

@@ -22,7 +22,16 @@ const config = {
     locales: ['en'],
   },
 
-  plugins: ['docusaurus-plugin-sass'],
+  customFields: {
+    mendableAnonKey: 'd3313d54-6f8e-40e0-90d3-4095019d4be7',
+  },
+
+  plugins: [
+    'docusaurus-plugin-sass',
+    [
+      'docusaurus-node-polyfills', { excludeAliases: ['console']}
+    ]
+  ],
 
   presets: [
     [

docs/package.json

@@ -18,6 +18,7 @@
     "@docusaurus/core": "^2.4.0",
     "@docusaurus/preset-classic": "^2.4.0",
     "@mdx-js/react": "^1.6.22",
+    "@mendable/search": "^0.0.88",
     "clsx": "^1.2.1",
     "docusaurus-plugin-sass": "^0.2.3",
     "prism-react-renderer": "^1.3.5",
@@ -29,6 +30,7 @@
     "@docusaurus/module-type-aliases": "^2.4.0",
     "@tsconfig/docusaurus": "^1.0.5",
     "asciinema-player": "^3.0.0-rc.1",
+    "docusaurus-node-polyfills": "^1.0.0",
     "typescript": "^4.7.4"
   },
   "browserslist": {

docs/poc.docusaurus.config.js

@@ -24,7 +24,16 @@ const config = {
     locales: ['en'],
   },
 
-  plugins: ['docusaurus-plugin-sass'],
+  customFields: {
+    mendableAnonKey: 'd3313d54-6f8e-40e0-90d3-4095019d4be7',
+  },
+
+  plugins: [
+    'docusaurus-plugin-sass',
+    [
+      'docusaurus-node-polyfills', { excludeAliases: ['console']}
+    ]
+  ],
 
   presets: [
     [

docs/src/scss/Global.module.scss

@@ -59,4 +59,23 @@
       color: var(--ifm-font-color-base);
     }
   }
-}
+}
+
+/* Reduce width on mobile for Mendable Search */
+@media (max-width: 767px) {
+  .mendable-search {
+    width: 200px;
+  }
+}
+
+@media (max-width: 500px) {
+  .mendable-search {
+    width: 150px;
+  }
+}
+
+@media (max-width: 380px) {
+  .mendable-search {
+    width: 140px;
+  }
+}

docs/src/theme/SearchBar.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { MendableFloatingButton } from "@mendable/search";
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+
+export default function SearchBarWrapper(): JSX.Element {
+  const {
+    siteConfig: { customFields }
+  } = useDocusaurusContext();
+
+  const style = { darkMode: false, accentColor: "#ef5552" };
+
+  const floatingButtonStyle = {
+    color: "#fff",
+    backgroundColor: "#ef5552"
+  };
+
+  return (
+    <div className="mendable-search">
+      <MendableFloatingButton
+        anon_key={customFields.mendableAnonKey}
+        style={style} 
+        floatingButtonStyle={floatingButtonStyle} />
+    </div>
+  );
+}

docs/tsconfig.json

@@ -2,6 +2,7 @@
   // This file is not used in compilation. It is here just for a nice editor experience.
   "extends": "@tsconfig/docusaurus/tsconfig.json",
   "compilerOptions": {
+    "jsx": "react",
     "baseUrl": "."
   }
 }