Add searchbar to docs

docs/web/docusaurus.config.js

@@ -42,6 +42,17 @@ const config = {
   themeConfig:
     /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
     ({
+      algolia: {
+        // The application ID provided by Algolia
+        appId: "J6ARWT70HK",
+
+        // Public API key: it is safe to commit it
+        apiKey: "ac51a5b25842fad8a3a7b1f384496bf9",
+
+        indexName: "mephisto",
+        contextualSearch: false,
+        searchPagePath: false,
+      },
       navbar: {
         // title: "Mephisto",
         logo: {

docs/web/package.json

@@ -14,6 +14,8 @@
     "write-heading-ids": "docusaurus write-heading-ids"
   },
   "dependencies": {
+    "@docsearch/css": "3",
+    "@docsearch/react": "3",
     "@docusaurus/core": "2.0.0-beta.9",
     "@docusaurus/preset-classic": "2.0.0-beta.9",
     "@mdx-js/react": "^1.6.21",

docs/web/src/css/custom.css

@@ -111,3 +111,22 @@ h6 {
   font-weight: bold;
   font-style: normal;
 }
+.DocSearch-Modal {
+  margin: 80px auto auto !important;
+}
+
+@media (max-width: 750px) {
+  .DocSearch-Modal {
+    margin: 60px 0 !important;
+  }
+}
+
+/*
+  This hides the text that allows you to see all results
+  As of now when you try to see all results it takes you to a separate page
+  This page has a searchbar, but no options show.
+  That is why it is being hidden.
+*/
+.DocSearch-HitsFooter {
+  display: none !important;
+}

docs/web/src/pages/index.js

@@ -5,6 +5,8 @@ import Link from "@docusaurus/Link";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import styles from "./index.module.css";
 import HomepageFeatures from "../components/HomepageFeatures";
+import { DocSearch } from "@docsearch/react";
+import "@docsearch/css";
 
 function HomepageHeader() {
   const { siteConfig } = useDocusaurusContext();
@@ -33,11 +35,11 @@ function HomepageHeader() {
             Github
           </Link>
         </div>
+        <div className={styles.searchBarContainer}></div>
       </div>
     </header>
   );
 }
-
 export default function Home() {
   const { siteConfig } = useDocusaurusContext();
   return (

docs/web/src/pages/index.module.css

@@ -26,3 +26,9 @@ html[data-theme="dark"] .heroBanner {
   background-color: var(--ifm-background-surface-color);
   color: white;
 }
+
+.searchBarContainer {
+  display: flex;
+  justify-content: center;
+  margin-top: 1.5rem;
+}