Restructure docs (#11620)

docs/src/theme/CodeBlock/index.js

@@ -0,0 +1,57 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import React from "react";
+import CodeBlock from "@theme-original/CodeBlock";
+
+function Imports({ imports }) {
+  return (
+    <div
+      style={{
+        paddingTop: "1.3rem",
+        background: "var(--prism-background-color)",
+        color: "var(--prism-color)",
+        marginTop: "calc(-1 * var(--ifm-leading) - 5px)",
+        marginBottom: "var(--ifm-leading)",
+        boxShadow: "var(--ifm-global-shadow-lw)",
+        borderBottomLeftRadius: "var(--ifm-code-border-radius)",
+        borderBottomRightRadius: "var(--ifm-code-border-radius)",
+      }}
+    >
+      <h4 style={{ paddingLeft: "0.65rem", marginBottom: "0.45rem" }}>
+        API Reference:
+      </h4>
+      <ul style={{ paddingBottom: "1rem" }}>
+        {imports.map(({ imported, source, docs }) => (
+          <li key={imported}>
+            <a href={docs}>
+              <span>{imported}</span>
+            </a>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+export default function CodeBlockWrapper({ children, ...props }) {
+  // Initialize imports as an empty array
+  let imports = [];
+
+  // Check if children is a string
+  if (typeof children === "string") {
+    // Search for an IMPORTS comment in the code
+    const match = /<!--IMPORTS:(.*?)-->\n/.exec(children);
+    if (match) {
+      imports = JSON.parse(match[1]);
+      children = children.replace(match[0], "");
+    }
+  } else if (children.imports) {
+    imports = children.imports;
+  }
+
+  return (
+    <>
+      <CodeBlock {...props}>{children}</CodeBlock>
+      {imports.length > 0 && <Imports imports={imports} />}
+    </>
+  );
+}

docs/src/theme/SearchBar.js

@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+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}
+        style={{ accentColor: "#4F956C", darkMode: false }}
+        placeholder="Search"
+        dialogPlaceholder="How do I use a LLM Chain?"
+        messageSettings={{ openSourcesInNewTab: false, prettySources: true }}
+        searchBarStyle={{
+          borderColor: "#9d9ea1",
+          color:"#9d9ea1"
+        }}
+        askAIText="Ask Mendable AI"
+        isPinnable
+        showSimpleSearch
+      />
+    </div>
+  );
+}