docs: Improve the search UX in Langflow docs (#4089)

* Add Mendable search bar component

* Align Mendable anon_key retrieval

* Update url and tagline in docusaurus config

* Move sitemap config to preset options

* Add Mendable anon key to docusaurus config

docs/src/theme/Footer.js

@@ -37,7 +37,7 @@ export default function FooterWrapper(props) {
 
   const mendableFloatingButton = React.createElement(MendableFloatingButton, {
     floatingButtonStyle: { color: "#000000", backgroundColor: "#f6f6f6" },
-    anon_key: 'b7f52734-297c-41dc-8737-edbd13196394', // Mendable Search Public ANON key, ok to be public
+    anon_key: customFields.mendableAnonKey,
     showSimpleSearch: true,
     icon: icon,
   });

docs/src/theme/SearchBar.js

@@ -2,4 +2,22 @@
 // If you swizzled this, it is your responsibility to provide an implementation
 // Tip: swizzle the SearchBar from the Algolia theme for inspiration:
 // npm run swizzle @docusaurus/theme-search-algolia SearchBar
-export {default} from '@docusaurus/Noop';
+import React from 'react'
+import { MendableSearchBar } from '@mendable/search'
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext'
+
+export default function SearchBarWrapper() {
+  const {
+    siteConfig: { customFields },
+  } = useDocusaurusContext()
+  return (
+    <div className="mendable-search">
+      <MendableSearchBar
+        anon_key={customFields.mendableAnonKey}
+        placeholder="Search..."
+        dialogPlaceholder="How to deploy my application?"
+        showSimpleSearch
+      />
+    </div>
+  )
+}