feat(site): add orama search (#1948)

jog1t · jog1t · commit ac5de3ec07fa · 2025-01-28T05:48:05.000Z
&lt;!-- Please make sure there is an issue that this PR is correlated to. --&gt;

## Changes

&lt;!-- If there are frontend changes, please include screenshots. --&gt;
diff --git a/site/package.json b/site/package.json
@@ -24,6 +24,7 @@
 		"@mdx-js/react": "^2.1.5",
 		"@next/mdx": "^14.0.1",
 		"@next/third-parties": "latest",
+		"@orama/react-components": "^0.3.2",
 		"@rivet-gg/api": "^0.0.1-rc19",
 		"@rivet-gg/components": "workspace:*",
 		"@rivet-gg/icons": "workspace:*",
diff --git a/site/src/components/v2/Header.tsx b/site/src/components/v2/Header.tsx
@@ -16,6 +16,7 @@ import Image from "next/image";
 import Link from "next/link";
 import { type ReactNode, useState } from "react";
 import { HeaderPopupProductMenu } from "../HeaderPopupProductMenu";
+import { HeaderSearch } from "./HeaderSearch";
 
 interface HeaderProps {
 	active: "product" | "docs" | "blog" | "pricing" | "solutions";
@@ -49,6 +50,7 @@ export function Header({ active, subnav }: HeaderProps) {
 			}
 			links={
 				<>
+					<HeaderSearch />
 					<RivetHeader.NavItem asChild className="-m-2 p-2">
 						<Link href="/discord">
 							<Icon icon={faDiscord} />
diff --git a/site/src/components/v2/HeaderSearch.tsx b/site/src/components/v2/HeaderSearch.tsx
@@ -0,0 +1,47 @@
+"use client";
+import { OramaSearchBox } from "@orama/react-components";
+import { Button, Dialog, DialogPortal, Kbd, cn } from "@rivet-gg/components";
+import { useState } from "react";
+
+export function HeaderSearch() {
+	const [isOpen, setIsOpen] = useState(false);
+	return (
+		<>
+			<Button
+				onClick={() => setIsOpen(true)}
+				variant="outline"
+				className={cn(
+					"relative h-8 w-full justify-start rounded-[0.5rem] bg-background text-sm font-normal text-muted-foreground shadow-none hidden md:flex md:w-24 lg:w-40",
+				)}
+			>
+				<span className="hidden lg:inline-flex">Search...</span>
+				<span className="inline-flex lg:hidden">Search...</span>
+				<Kbd className="absolute right-[0.3rem] top-[0.3rem] hidden sm:flex">
+					<Kbd.Cmd />K
+				</Kbd>
+			</Button>
+			<Dialog open={isOpen}>
+				<DialogPortal>
+					<OramaSearchBox
+						open={isOpen}
+						layout="modal"
+						onModalStatusChanged={(status) => setIsOpen(!status)}
+						colorScheme="system"
+						onSearchResultClick={() => setIsOpen(false)}
+						placeholder="Search something..."
+						index={{
+							endpoint:
+								"https://cloud.orama.run/v1/indexes/rivet-gg-b87fiw",
+							api_key: "dcVm1fAKZeTdOfGFZCCH9xWiH7JeYCQZ",
+						}}
+						resultMap={{
+							title: "name",
+							description: "content",
+							section: "category",
+						}}
+					/>
+				</DialogPortal>
+			</Dialog>
+		</>
+	);
+}
diff --git a/yarn.lock b/yarn.lock
