Added documentation

docs/src/theme/Footer.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import Footer from '@theme-original/Footer';
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+import { MendableFloatingButton } from '@mendable/search';
+
+export default function FooterWrapper(props) {
+  const {
+    siteConfig: { customFields },
+  } = useDocusaurusContext();
+
+  const iconSpan1 = React.createElement('img', {
+    src: 'img/chain.png',
+    style: { width: '40px' }
+  }, null);
+
+  const icon = React.createElement('div', {
+    style: {
+      color: '#ffffff',
+      fontSize: '22px',
+      width: '48px',
+      height: '48px',
+      margin: '0px',
+      padding: '0px',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      textAlign: 'center'
+    }
+  }, [iconSpan1]);
+
+  const mendableFloatingButton = React.createElement(
+    MendableFloatingButton,
+    {
+      style: { darkMode: true, accentColor: '#4051b5' },
+      floatingButtonStyle: { color: '#ffffff', backgroundColor: '#010810' },
+      anon_key: 'b7f52734-297c-41dc-8737-edbd13196394', // Mendable Search Public ANON key, ok to be public
+      messageSettings: {
+        openSourcesInNewTab: false,
+      },
+      showSimpleSearch: true,
+      icon: icon,
+    }
+  );
+
+  return (
+    <>
+      <Footer />
+      {mendableFloatingButton}
+    </>
+  );
+}

docs/src/theme/SearchBar.js

@@ -0,0 +1,5 @@
+// By default, the classic theme does not provide any SearchBar implementation
+// 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';

docs/src/theme/ZoomableImage.js

@@ -0,0 +1,47 @@
+import React, { useState, useEffect } from 'react';
+import ThemedImage from '@theme/ThemedImage';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
+const ZoomableImage = ({ alt, sources }) => {
+  const [isFullscreen, setIsFullscreen] = useState(false);
+
+  const toggleFullscreen = () => {
+    setIsFullscreen(!isFullscreen);
+  };
+
+  const handleKeyPress = (event) => {
+    if (event.key === 'Escape') {
+      setIsFullscreen(false);
+    }
+  };
+
+  useEffect(() => {
+    if (isFullscreen) {
+      document.addEventListener('keydown', handleKeyPress);
+    } else {
+      document.removeEventListener('keydown', handleKeyPress);
+    }
+
+    return () => {
+      document.removeEventListener('keydown', handleKeyPress);
+    };
+  }, [isFullscreen]);
+
+  return (
+    <div
+      className={`zoomable-image ${isFullscreen ? 'fullscreen' : ''}`}
+      onClick={toggleFullscreen}
+    >
+      <ThemedImage
+        className="zoomable-image-inner"
+        alt={alt}
+        sources={{
+          light: useBaseUrl(sources.light),
+          dark: useBaseUrl(sources.dark),
+        }}
+      />
+    </div>
+  );
+};
+
+export default ZoomableImage;