Included the Search Bar

docsearch.json

@@ -0,0 +1,18 @@
+{
+    "index_name": "bitbom",
+    "start_urls": ["https://bitbom.dev"],
+    "sitemap_urls": ["https://bitbom.dev/sitemap.xml"],
+    "selectors": {
+      "lvl0": {
+        "selector": ".navbar__link--active",
+        "global": true,
+        "default_value": "Documentation"
+      },
+      "lvl1": "article h1",
+      "lvl2": "article h2",
+      "lvl3": "article h3",
+      "lvl4": "article h4",
+      "lvl5": "article h5",
+      "text": "article p, article li"
+    }
+  }

docusaurus.config.ts

@@ -128,11 +128,14 @@ const config: Config = {
         src: 'img/bitbomLogoBig.png',
       },
       items: [
-
         {type: 'docSidebar', sidebarId: 'docs', label: 'Docs', position: 'left'},
         {to: '/demos/starting-up-minefield', label: 'Demos', position: 'left'},
         {to: '/blog', label: 'Blog', position: 'left'},
         {to: '/glossary', label: 'Glossary', position: 'left'},
+        {
+          type: 'search',
+          position: 'left',
+        },
         {
           type: 'custom-wrapper',
           position: 'right',
@@ -206,6 +209,12 @@ const config: Config = {
     //   phpLoader: 'matomo.php',
     //   jsLoader: 'matomo.js',
     // },
+    algolia: {
+      appId: 'XVADXTT1S0',
+      apiKey: 'dd44c26b3affe3e878fa9469701eb849', // search only API key
+      indexName: 'bitbom',
+      contextualSearch: true,
+    },
   } satisfies Preset.ThemeConfig,
 };
 

src/css/custom.css

@@ -54,6 +54,8 @@
   --theme-lightest-cyan: #ADE8F4;
   --theme-palest-cyan: #CAF0F8;
   --theme-white: #FFFFFF;
+
+  --search-bar-background: #EDF2F5;
 }
 
 
@@ -240,3 +242,19 @@ canary-trigger-searchbar::part(kbd) {
     background-position: 0% 50%;
   }
 }
+
+/* Customize DocSearch colors */
+.DocSearch {
+  --docsearch-text-color: var(--glasskube-grey-0);
+  --docsearch-muted-color: var(--glasskube-grey-0);
+  --docsearch-container-background: rgba(12, 38, 59, 0.7);
+}
+
+/* Dark mode colors */
+[data-theme='dark'] .DocSearch {
+  --docsearch-text-color: var(--glasskube-main-light);
+  --docsearch-muted-color: var(--glasskube-main-light);
+  --docsearch-container-background: rgba(12, 38, 59, 0.8);
+  --docsearch-modal-background: var(--glasskube-background-dark);
+  --docsearch-searchbox-background: var(--glasskube-background-dark);
+}