feat: Change Search to Algolia

app/components/search/SearchButton.client.vue

@@ -1,96 +1,92 @@
-<script setup lang="ts">
-import { Inkeep } from '@inkeep/uikit-js';
-import type { InkeepEmbedConfig } from '@inkeep/uikit-js/dist/types';
-import { defu } from 'defu';
-
-const runtimeConfig = useRuntimeConfig();
-const appConfig = useAppConfig();
+<template>
+	<div class="search">
+		<AlgoliaDocSearch />
+	</div>
+</template>
 
-const inkeepDiv = document.createElement('div');
-inkeepDiv.id = 'inkeepModal';
-inkeepDiv.style.position = 'absolute';
-document.body.appendChild(inkeepDiv);
+<script lang="ts" setup></script>
 
-const handleClose = () => {
-	inkeepWidget.render({
-		...config.properties,
-		isOpen: false,
-	});
-};
+<style lang="scss">
+#docsearch {
+	width: 100%;
+	max-width: 205px;
+}
 
-const handleOpen = () => {
-	inkeepWidget.render({
-		...config.properties,
-		isOpen: true,
-	});
-};
+.DocSearch-Button {
+	border: 1px solid var(--border-subdued) !important;
+	border-radius: var(--border-radius) !important;
+	width: 100% !important;
+	max-width: 250px !important;
+	padding: 6px 9px !important;
+	margin: 0 !important;
+	font-size: 0.8rem !important;
+	color: var(--typography-subdued) !important;
+	display: flex !important;
+	align-items: center !important;
+	gap: 0.5rem !important;
+	transition: border 0.1s ease, box-shadow 0.1s ease, color 0.1s ease,
+		background-color 0.1s ease !important;
+	background-color: var(--background) !important;
+	--docsearch-text-color: var(--typography-subdued);
+}
 
-const config: InkeepEmbedConfig = defu(
-	{
-		targetElement: '#inkeepModal',
-		componentType: 'CustomTrigger',
-		properties: {
-			isOpen: false,
-			onClose: handleClose,
-			onOpen: undefined,
-			baseSettings: {
-				apiKey: runtimeConfig.public.INKEEP_API_KEY,
-				integrationId: runtimeConfig.public.INKEEP_INTEGRATION_ID,
-				organizationId: runtimeConfig.public.INKEEP_ORGANIZATION_ID,
-			},
-		},
-	},
-	{ properties: appConfig.inkeep },
-);
+.DocSearch-Button:hover {
+	cursor: pointer !important;
+	border: 1px solid var(--purple) !important;
+	color: var(--purple) !important;
+	box-shadow: 0 0 0.5rem 0 color-mix(in srgb, var(--primary) 15%, transparent) !important;
+}
 
-const inkeepWidget = Inkeep(config.properties.baseSettings).embed(config);
-</script>
+.dark-mode .DocSearch-Button {
+	border: 1px solid var(--border-subdued) !important;
+	color: var(--typography-subdued) !important;
+	background-color: var(--background-dark) !important;
+}
 
-<template>
-	<div
-		class="search"
-		@click="handleOpen"
-	>
-		<div class="search-box">
-			<Icon name="material-symbols:search-rounded" />
-			Search
-		</div>
-	</div>
-</template>
+.dark-mode .DocSearch-Button:hover {
+	border: 1px solid var(--secondary) !important;
+	color: var(--secondary) !important;
+	box-shadow: 0 0 0.5rem 0 color-mix(in srgb, var(--secondary) 15%, transparent) !important;
+	background-color: var(
+		--background-dark-hover
+	) !important;
+}
 
-<style scoped lang="scss">
-.dark-mode .search-box {
-	&:hover {
-		border: 1px solid var(--secondary);
-		color: var(--secondary);
-		box-shadow: 0 0 0.5rem 0 color-mix(in srgb, var(--secondary) 15%, transparent);
-	}
+.DocSearch-Button-Container {
+	gap: 1rem;
 }
 
-.search-box {
-	border: 1px solid var(--border-subdued);
-	border-radius: var(--border-radius);
-	width: 100%;
-	max-width: 250px;
-	padding: 6px 9px;
-	font-size: 0.8rem;
+.DocSearch-Button .DocSearch-Search-Icon {
 	color: var(--typography-subdued);
-	display: flex;
-	align-items: center;
-	gap: 0.5rem;
-	transition: border 0.1s ease, box-shadow 0.1s ease, color 0.1s ease;
-	background-color: var(--background);
-	&:hover {
-		cursor: pointer;
-		border: 1px solid var(--purple);
-		color: var(--purple);
-		box-shadow: 0 0 0.5rem 0 color-mix(in srgb, var(--primary) 15%, transparent);
+}
+
+.DocSearch-Button:hover .DocSearch-Search-Icon {
+	color: var(--purple);
+}
+
+.DocSearch-Button-Placeholder {
+	font-size: inherit !important;
+	padding: 0 !important;
+}
+
+.DocSearch-Button-Keys {
+	display: none !important;
+}
+
+.DocSearch-Button-Key {
+	display: none !important;
+}
+
+@media (width <= 768px) {
+	.DocSearch-Button-Keys,
+	.DocSearch-Button-Placeholder {
+		display: none !important;
 	}
 }
 
 .search {
-	display: flex;
-	justify-content: center;
-	align-items: center;
+	display: flex !important;
+	justify-content: center !important;
+	align-items: center !important;
 }
 </style>

nuxt.config.ts

@@ -12,6 +12,7 @@ export default defineNuxtConfig({
 		'@nuxtjs/seo',
 		'@nuxtjs/color-mode',
 		'nuxt-posthog',
+		'@nuxtjs/algolia',
 	],
 	devtools: { enabled: true },
 	css: ['~/assets/css/main.scss'],
@@ -27,6 +28,7 @@ export default defineNuxtConfig({
 		storage: 'localStorage',
 		storageKey: 'nuxt-color-mode',
 		classSuffix: '',
+		dataValue: 'theme',
 	},
 	content: {
 		highlight: {
@@ -107,6 +109,11 @@ export default defineNuxtConfig({
 			await buildPages(__dirname);
 		},
 	},
+	algolia: {
+		docSearch: {
+			indexName: 'directus',
+		},
+	},
 	eslint: {
 		config: {
 			stylistic: {

package.json

@@ -23,13 +23,14 @@
     "dependencies": {
         "@directus/format-title": "^11.0.0",
         "@directus/sdk": "^17.0.2",
+        "@docsearch/css": "^3.8.0",
+        "@docsearch/js": "^3.8.0",
         "@iconify-json/material-symbols": "^1.2.4",
-        "@inkeep/uikit": "^0.3.12",
-        "@inkeep/uikit-js": "^0.3.12",
         "@nuxt/content": "^2.13.2",
         "@nuxt/eslint": "^0.6.0",
         "@nuxt/icon": "^1.5.6",
         "@nuxt/image": "^1.8.1",
+        "@nuxtjs/algolia": "1.10.2",
         "@nuxtjs/color-mode": "^3.5.1",
         "@nuxtjs/seo": "2.0.0-rc.23",
         "@scalar/api-reference": "^1.25.37",