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;
+}

yarn.lock

@@ -14,6 +14,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@algolia/autocomplete-core@npm:1.7.1":
+  version: 1.7.1
+  resolution: "@algolia/autocomplete-core@npm:1.7.1"
+  dependencies:
+    "@algolia/autocomplete-shared": 1.7.1
+  checksum: 511176e9c2a9f2e2be62552e48e72dadfcc6638cda4a2990fd3453aed3ce4e7d8ca1bd6a9ccb912430c77734b00a8b836aaad97facc1987157af4ac00f590f4a
+  languageName: node
+  linkType: hard
+
 "@algolia/autocomplete-preset-algolia@npm:1.5.2":
   version: 1.5.2
   resolution: "@algolia/autocomplete-preset-algolia@npm:1.5.2"
@@ -26,13 +35,32 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@algolia/autocomplete-preset-algolia@npm:1.7.1":
+  version: 1.7.1
+  resolution: "@algolia/autocomplete-preset-algolia@npm:1.7.1"
+  dependencies:
+    "@algolia/autocomplete-shared": 1.7.1
+  peerDependencies:
+    "@algolia/client-search": ^4.9.1
+    algoliasearch: ^4.9.1
+  checksum: cb031d5ed43f2e10f325f6291cfab851cc5622d96ae8ba1913815ead16b7ce2969b0c51f921d54c47195b2200af8ceecf1c587d2580f842c337f1d8e2f6317c2
+  languageName: node
+  linkType: hard
+
 "@algolia/autocomplete-shared@npm:1.5.2":
   version: 1.5.2
   resolution: "@algolia/autocomplete-shared@npm:1.5.2"
   checksum: 35d60ea6c38d0cae79e431460e3014da5a71408061fafa9bb5882e91de26dd923c18b5ed905fbea87639875f1d0c0857057a27eac6e786856646b8553a2aa61f
   languageName: node
   linkType: hard
 
+"@algolia/autocomplete-shared@npm:1.7.1":
+  version: 1.7.1
+  resolution: "@algolia/autocomplete-shared@npm:1.7.1"
+  checksum: 0e137f1a470fab9b1bc493284b0be9b83503bda8aa37be9726a8fddf4791dccbd28f9eec399a7c75c1eb3196510dac7be454307fc97fbca2999f3fbc30756c28
+  languageName: node
+  linkType: hard
+
 "@algolia/cache-browser-local-storage@npm:4.11.0":
   version: 4.11.0
   resolution: "@algolia/cache-browser-local-storage@npm:4.11.0"
@@ -4741,13 +4769,36 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@docsearch/css@npm:3, @docsearch/css@npm:3.1.1":
+  version: 3.1.1
+  resolution: "@docsearch/css@npm:3.1.1"
+  checksum: bbcee5b5cf050bffd6d0e6123f0cbcf3167569998fda5ae1b6def54eb341f23f592a30830e655fc8485591f9950abe4d63767ce7dbc91f88dec25e42ee2d951a
+  languageName: node
+  linkType: hard
+
 "@docsearch/css@npm:3.0.0":
   version: 3.0.0
   resolution: "@docsearch/css@npm:3.0.0"
   checksum: 1a02fb808369908f9ae0174cd18fd152fa1cbebe5725d197fd52588696794ecfd384c504c09be55926cc2b36360173216365b46aae72769d581496d0418a0f16
   languageName: node
   linkType: hard
 
+"@docsearch/react@npm:3":
+  version: 3.1.1
+  resolution: "@docsearch/react@npm:3.1.1"
+  dependencies:
+    "@algolia/autocomplete-core": 1.7.1
+    "@algolia/autocomplete-preset-algolia": 1.7.1
+    "@docsearch/css": 3.1.1
+    algoliasearch: ^4.0.0
+  peerDependencies:
+    "@types/react": ">= 16.8.0 < 19.0.0"
+    react: ">= 16.8.0 < 19.0.0"
+    react-dom: ">= 16.8.0 < 19.0.0"
+  checksum: 36035fc878b563e49b3aafc102372075118f2ebaea74b29f0048da6a92025ff9e14936706280f70003076aa5e9272eb6370f3564601a79660bd83bc62778934f
+  languageName: node
+  linkType: hard
+
 "@docsearch/react@npm:^3.0.0-alpha.39":
   version: 3.0.0
   resolution: "@docsearch/react@npm:3.0.0"
@@ -10338,11 +10389,11 @@ __metadata:
   linkType: hard
 
 "acorn@npm:^8.5.0":
-  version: 8.7.1
-  resolution: "acorn@npm:8.7.1"
+  version: 8.8.0
+  resolution: "acorn@npm:8.8.0"
   bin:
     acorn: bin/acorn
-  checksum: aca0aabf98826717920ac2583fdcad0a6fbe4e583fdb6e843af2594e907455aeafe30b1e14f1757cd83ce1776773cf8296ffc3a4acf13f0bd3dfebcf1db6ae80
+  checksum: 7270ca82b242eafe5687a11fea6e088c960af712683756abf0791b68855ea9cace3057bd5e998ffcef50c944810c1e0ca1da526d02b32110e13c722aa959afdc
   languageName: node
   linkType: hard
 
@@ -30950,6 +31001,8 @@ resolve@^2.0.0-next.3:
   version: 0.0.0-use.local
   resolution: "web@workspace:docs/web"
   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