From 2835f66aec42c68735d36f12a08bdebf66bf9669 Mon Sep 17 00:00:00 2001
From: Eric Schneider <37347760+eric-schneider@users.noreply.github.com>
Date: Thu, 10 Oct 2024 11:32:02 -0700
Subject: [PATCH] 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/docusaurus.config.js   | 19 ++++++++++---------
 docs/src/theme/Footer.js    |  2 +-
 docs/src/theme/SearchBar.js | 20 +++++++++++++++++++-
 3 files changed, 30 insertions(+), 11 deletions(-)

diff --git a/docs/docusaurus.config.js b/docs/docusaurus.config.js
index fc078becc..647d0b261 100644
--- 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
index d2a56bf5a..b7b2af3d4 100644
--- 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
index dcca0c945..78ee36c05 100644
--- 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>
+  )
+}