feat(docs): add Algolia DocSearch

3 files changed, 29 insertions, 11 deletions

diff --git a/subprojects/docs/docusaurus.config.ts b/subprojects/docs/docusaurus.config.ts
index 1b79a0f4..67ee1db4 100644
--- a/subprojects/docs/docusaurus.config.ts
+++ b/subprojects/docs/docusaurus.config.ts
@@ -9,6 +9,7 @@ import type { Options as DocsOptions } from '@docusaurus/plugin-content-docs';
 import type { Options as PagesOptions } from '@docusaurus/plugin-content-pages';
 import type { Options as ClassicThemeOptions } from '@docusaurus/theme-classic';
 import type { UserThemeConfig } from '@docusaurus/theme-common';
+import type { UserThemeConfig as AlgoliaConfig } from '@docusaurus/theme-search-algolia';
 import type { Config } from '@docusaurus/types';
 import { Config as SwcConfig } from '@swc/core';
 import { themes } from 'prism-react-renderer';
@@ -67,6 +68,7 @@ export default {
         customCss: [require.resolve('./src/css/custom.css')],
       } satisfies ClassicThemeOptions,
     ],
+    '@docusaurus/theme-search-algolia',
   ],
   themeConfig: {
     colorMode: {
@@ -195,7 +197,12 @@ export default {
         <a href="/license/">Eclipse Public License - v 2.0</a>.
       `,
     },
-  } satisfies UserThemeConfig,
+    algolia: {
+      appId: 'KYHOYEO80F',
+      apiKey: '152acfb8d1ad9e10f29f083a6b017a69',
+      indexName: 'refinery',
+    },
+  } satisfies UserThemeConfig & AlgoliaConfig,
   webpack: {
     // Speed up builds by using a native Javascript loader.
     // See: https://github.com/facebook/docusaurus/issues/4765#issuecomment-841135926
diff --git a/subprojects/docs/package.json b/subprojects/docs/package.json
index 989e7197..d928c5b1 100644
--- a/subprojects/docs/package.json
+++ b/subprojects/docs/package.json
@@ -36,6 +36,7 @@
     "@docusaurus/plugin-sitemap": "^3.2.1",
     "@docusaurus/theme-classic": "^3.2.1",
     "@docusaurus/theme-common": "^3.2.1",
+    "@docusaurus/theme-search-algolia": "^3.2.1",
     "@fontsource-variable/jetbrains-mono": "^5.0.20",
     "@fontsource-variable/open-sans": "^5.0.28",
     "@fontsource/open-sans": "^5.0.27",
@@ -43,20 +44,25 @@
     "@mdx-js/react": "^3.0.1",
     "@swc/core": "^1.4.13",
     "clsx": "^2.1.0",
+    "mdast-util-mdx": "^3.0.0",
     "prism-react-renderer": "^2.3.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "remark-smartypants": "^2.1.0",
     "swc-loader": "^0.2.6",
     "terser-webpack-plugin": "^5.3.10",
+    "unified": "^11.0.4",
+    "unist-util-visit": "^5.0.0",
     "webpack": "^5.91.0"
   },
   "devDependencies": {
     "@docusaurus/module-type-aliases": "^3.2.1",
     "@docusaurus/types": "^3.2.1",
     "@types/babel__core": "^7.20.5",
+    "@types/mdast": "^4.0.3",
     "@types/node": "^20.12.7",
     "@types/react": "^18.2.75",
-    "@types/react-dom": "^18.2.24"
+    "@types/react-dom": "^18.2.24",
+    "@types/unist": "^3.0.2"
   }
 }
diff --git a/subprojects/docs/src/css/custom.css b/subprojects/docs/src/css/custom.css
index 5b7f17b6..8646ba5f 100644
--- a/subprojects/docs/src/css/custom.css
+++ b/subprojects/docs/src/css/custom.css
@@ -93,25 +93,30 @@ code {
 }
 
 .navbar__link--try-now {
-  color: var(--ifm-font-color-base-inverse);
-  background: var(--ifm-color-primary);
+  color: var(--ifm-color-primary);
+  background: rgb(3 138 153 / 12%);
   transition: background var(--ifm-button-transition-duration) var(--ifm-transition-timing-default);
 }
 
 .navbar__inner .navbar__link--try-now {
-  margin: 0 0.5rem 0 0.25rem;
+  margin: 0 0.75rem 0 0.5rem;
   padding: 0.25rem 1.25rem;
   border-radius: 50em;
 }
 
-.navbar__link--try-now:hover {
-  color: var(--ifm-font-color-base-inverse);
-  background: var(--ifm-color-primary-dark);
+.navbar__link--try-now:hover,
+.navbar__link--try-now:active {
+  color: var(--ifm-color-primary);
+  background: rgb(3 138 153 / 16%);
 }
 
-.navbar__link--try-now:active {
-  color: var(--ifm-font-color-base-inverse);
-  background: var(--ifm-color-primary-darker);
+[data-theme="dark"] .navbar__link--try-now {
+  background: rgb(86 182 194 / 16%);
+}
+
+[data-theme="dark"] .navbar__link--try-now:hover,
+[data-theme="dark"] .navbar__link--try-now:active {
+  background: rgb(86 182 194 / 24%);
 }
 
 .menu {