Added documentation

docs/src/css/custom.css

@@ -0,0 +1,229 @@
+/**
+ * Any CSS included here will be global. The classic template
+ * bundles Infima by default. Infima is a CSS framework designed to
+ * work well for content-centric websites.
+ */
+ :root {
+  --ifm-background-color: var(--token-primary-bg-c);
+  --ifm-navbar-link-hover-color: initial;
+  --ifm-navbar-padding-vertical: 0;
+  --ifm-navbar-item-padding-vertical: 0;
+  --ifm-font-family-base: -apple-system, BlinkMacSystemFont, Inter, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI emoji';
+  --ifm-font-family-monospace: 'SFMono-Regular', 'Roboto Mono', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
+}
+
+.theme-doc-sidebar-item-category.menu__list-item:not(:first-child) {
+  margin-top: 1.5rem!important;
+}
+
+.docusaurus-highlight-code-line {
+  background-color: rgba(0, 0, 0, 0.1);
+  display: block;
+  margin: 0 calc(-1 * var(--ifm-pre-padding));
+  padding: 0 var(--ifm-pre-padding);
+}
+
+.diagonal-box {
+  transform: skewY(-6deg);
+}
+
+.diagonal-content {
+  transform: skewY(6deg);
+}
+
+[class^='announcementBar'] {
+  z-index: 10;
+}
+
+.showcase {
+  background-color: #fff;
+}
+
+.showcase-border {
+  border-color: rgba(243, 244, 246, 1);
+}
+
+.text-description {
+  color: rgba(107, 114, 128, 1);
+}
+
+p {
+  text-align: justify;
+}
+
+/* apply */
+#hero-apply {
+  z-index: -1;
+  background-image: linear-gradient(
+    var(--ifm-footer-background-color),
+    var(--ifm-navbar-background-color)
+  );
+}
+
+.apply-form {
+  background-image: linear-gradient(#fff, #f5f5fa);
+  max-width: 600px;
+}
+
+.apply-text {
+  color: #36395a;
+}
+
+/* index */
+#hero {
+  background-image: linear-gradient(
+    var(--ifm-footer-background-color),
+    var(--ifm-navbar-background-color)
+  );
+}
+
+/**
+  * Hero component title overrides to match other heading styles
+  */
+.hero-title {
+  color: rgb(28, 30, 33);
+  font-family: var(--ifm-heading-font-family);
+}
+h1 {
+  font-size: 26px;
+}
+h2 {
+  font-size: 22px;
+}
+h3 {
+  font-size: 18px;
+}
+
+body {
+  font-size: 16px;
+}
+
+.docsearch-logo {
+  color: #21243d;
+}
+
+.apply-button:hover {
+  color: #fff;
+}
+
+/* GitHub */
+.header-github-link:hover {
+  opacity: 0.6;
+}
+
+.header-github-link:before {
+  content: '';
+  width: 24px;
+  height: 24px;
+  display: flex;
+  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
+    no-repeat;
+}
+
+/* Twitter */
+.header-twitter-link:hover {
+  opacity: 0.6;
+}
+
+.header-twitter-link::before {
+  content: '';
+  width: 24px;
+  height: 24px;
+  display: flex;
+  background: url("/logos/twitter.svg");
+  background-size: contain;
+}
+
+/* Discord */
+.header-discord-link:hover {
+  opacity: 0.6;
+}
+
+.header-discord-link::before {
+  content: '';
+  width: 24px;
+  height: 24px;
+  display: flex;
+  background: url("/logos/discord.svg");
+  background-size: contain;
+}
+
+
+/* Images */
+.image-rendering-crisp {
+  image-rendering: crisp-edges;
+
+  /* alias for google chrome */
+  image-rendering: -webkit-optimize-contrast;
+}
+
+.image-rendering-pixel {
+  image-rendering: pixelated;
+}
+
+.img-center {
+  display: flex;
+  justify-content: center;
+  width: 100%,
+}
+
+.resized-image {
+  width: 400px;
+}
+  
+/* .zoomable-image {
+cursor: zoom-in;
+}
+.zoom-image {
+  transition: transform 0.2s ease-in-out;
+}
+
+.zoom-image:hover {
+  transform: scale(1.2);
+}
+.zoom-image {
+  width: 100%;
+  transition: transform 0.2s ease-in-out;
+} */
+
+/* .zoomable-image {
+  cursor: pointer;
+  transition: transform 0.2s ease-in-out;
+} */
+
+/* .zoomable-image.fullscreen {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 9999;
+  background-color: rgba(0, 0, 0, 0.8);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.zoomable-image img {
+  max-width: 100%;
+  max-height: 100%;
+} */
+
+/* Reduce width on mobile for Mendable Search */
+@media (max-width: 767px) {
+  .mendable-search {
+    width: 200px;
+  }
+}
+
+@media (max-width: 500px) {
+  .mendable-search {
+    width: 150px;
+  }
+}
+
+@media (max-width: 380px) {
+  .mendable-search {
+    width: 140px;
+  }
+}

docs/src/pages/index.module.css

@@ -0,0 +1,23 @@
+/**
+ * CSS files with the .module.css suffix will be treated as CSS modules
+ * and scoped locally.
+ */
+
+.heroBanner {
+  padding: 4rem 0;
+  text-align: center;
+  position: relative;
+  overflow: hidden;
+}
+
+@media screen and (max-width: 996px) {
+  .heroBanner {
+    padding: 2rem;
+  }
+}
+
+.buttons {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

docs/src/pages/markdown-page.md

@@ -0,0 +1,7 @@
+---
+title: Markdown page example
+---
+
+# Markdown page example
+
+You don't need React to write simple standalone pages.

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;