Website: Algolia search

brefphp · Sep 23, 2023 · 89c63a3 · 89c63a3
1 parent b20c6af
commit 89c63a3
Show file tree

Hide file tree

Showing 4 changed files with 248 additions and 0 deletions.
diff --git a/website/package-lock.json b/website/package-lock.json
diff --git a/website/package.json b/website/package.json
@@ -8,6 +8,8 @@
   },
   "dependencies": {
     "@aws-sdk/client-cloudwatch": "^3.393.0",
+    "@docsearch/css": "^3.5.2",
+    "@docsearch/react": "^3.5.2",
     "@heroicons/react": "^2.0.18",
     "@octokit/graphql": "^7.0.1",
     "next": "^13.4.9",

diff --git a/website/styles/main.css b/website/styles/main.css
@@ -1,7 +1,14 @@
+@import "@docsearch/css/dist/style.css";
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
+:root {
+    /* Algolia DocSearch https://github.com/algolia/docsearch/blob/main/packages/docsearch-css/src/_variables.css */
+    --docsearch-primary-color: theme(colors.blue.500);
+}
+
 body {
     font-family: "Inter var", system-ui, sans-serif;
 }
@@ -47,3 +54,17 @@ body {
     border-radius: 9999px;
     vertical-align: text-top;
 }
+
+/* Algolia */
+.DocSearch.DocSearch-Button {
+    @apply relative md:w-64 hidden md:flex min-w-[200px] w-full appearance-none rounded-lg px-3 py-2 transition-colors text-base leading-tight md:text-sm bg-black/[.05] contrast-more:border contrast-more:border-current ring-gray-500;
+}
+.DocSearch .DocSearch-Button-Placeholder {
+    @apply text-gray-500 text-sm font-normal !important;
+}
+.DocSearch-Search-Icon {
+    display: none !important;
+}
+.DocSearch-Button-Keys {
+    @apply opacity-75 scale-75;
+}
diff --git a/website/theme.config.jsx b/website/theme.config.jsx
@@ -2,6 +2,7 @@
 import { useRouter } from 'next/router';
 import { AnimatedLogo } from './src/components/AnimatedLogo';
 import Footer from './src/components/Footer';
+import { DocSearch } from '@docsearch/react';
 
 export default {
     logo: <AnimatedLogo className="h-8" />,
@@ -63,6 +64,9 @@ export default {
             </span>
         )
     },
+    search: {
+        component: <DocSearch appId="7J23TEKSTT" indexName="bref" apiKey="0d252e6edd70998021bc0044444c42c4" />
+    },
     components: {
         // https://github.com/shuding/nextra/blob/main/packages/nextra-theme-docs/src/mdx-components.tsx
         h1: props => (