docsearch

package.json

@@ -62,6 +62,8 @@
     },
     "dependencies": {
         "@algolia/autocomplete-js": "^1.17.7",
+        "@docsearch/css": "3",
+        "@docsearch/js": "3",
         "@rehype-pretty/transformers": "^0.13.2",
         "@sveltejs/adapter-netlify": "^4.3.6",
         "hastscript": "^9.0.0",

src/lib/components/DocSearch.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import '@docsearch/css';
+	import docsearch from '@docsearch/js';
+	import { onMount } from 'svelte';
+
+	onMount(() => {
+		docsearch({
+			container: '#docsearch',
+			appId: '2Y8OU39U1X',
+			indexName: 'docsearch_mock',
+			apiKey: '0e82d6007f06d9f280629a37bb8a0892'
+		});
+	});
+</script>
+
+<div id="docsearch"></div>

src/lib/components/SiteHeader.svelte

@@ -3,7 +3,7 @@
 	import ModeToggle from '$lib/components/ModeToggle.svelte';
 	import { MainNav, MobileNav } from '$lib/components/nav';
 	import { Icons } from '$lib/components/icons';
-	import CommandMenu from '$lib/components/CommandMenu.svelte';
+	import DocSearch from '$lib/components/DocSearch.svelte';
 	import { buttonVariants } from '$lib/components/ui/button';
 	import { siteConfig } from '$lib/config/site.js';
 	import { cn } from '$lib/utils.js';
@@ -18,7 +18,7 @@
 		<MobileNav />
 		<div class="flex flex-1 items-center justify-between space-x-2 md:justify-end">
 			<div class="w-full flex-1 md:w-auto md:flex-none">
-				<CommandMenu />
+				<DocSearch />
 			</div>
 			<nav class="flex items-center">
 				<a href={siteConfig.links.github} target="_blank" rel="noopener noreferrer">