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
langflow-ai · Oct 10, 2024 · 2835f66 · 2835f66
1 parent 6aa34da
commit 2835f66
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 11 deletions.
diff --git a/docs/docusaurus.config.js b/docs/docusaurus.config.js
@@ -8,9 +8,9 @@ const { remarkCodeHike } = require("@code-hike/mdx");
 /** @type {import('@docusaurus/types').Config} */
 const config = {
   title: "Langflow Documentation",
-  tagline: "Langflow is a GUI for LangChain, designed with react-flow",
+  tagline: "Langflow is a low-code app builder for RAG and multi-agent AI applications.",
   favicon: "img/favicon.ico",
-  url: "https://langflow-ai.github.io",
+  url: "https://docs.langflow.org",
   baseUrl: "/",
   onBrokenLinks: "throw",
   onBrokenMarkdownLinks: "warn",
@@ -19,7 +19,7 @@ const config = {
   trailingSlash: false,
   staticDirectories: ["static"],
   customFields: {
-    mendableAnonKey: process.env.MENDABLE_ANON_KEY,
+    mendableAnonKey: "b7f52734-297c-41dc-8737-edbd13196394", // Mendable Anon Client-side key, safe to expose to the public
   },
   i18n: {
     defaultLocale: "en",
@@ -46,6 +46,13 @@ const config = {
             ],
           ],
         },
+        sitemap: {
+          // https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-sitemap
+          // https://developers.google.com/search/docs/crawling-indexing/sitemaps/build-sitemap
+          lastmod: 'datetime',
+          changefreq: null,
+          priority: null,
+        },
         gtag: {
           trackingID: "G-XHC7G628ZP",
           anonymizeIP: true,
@@ -87,12 +94,6 @@ const config = {
   themeConfig:
     /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
     ({
-      sitemap: {
-        // https://www.sitemaps.org/protocol.html#xmlTagDefinitions
-        changefreq: "weekly",
-        priority: 0.5,
-        ignorePatterns: [],
-      },
       navbar: {
         hideOnScroll: true,
         title: "Langflow",

diff --git a/docs/src/theme/Footer.js b/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,
   });

diff --git a/docs/src/theme/SearchBar.js b/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>
+  )
+}