feat: add DocSearch integration

Author: phanan

.env.sample

@@ -3,3 +3,9 @@ export PORT=3000
 
 # Simulate a Vercel deployment environment on a specific branch
 # export VERCEL_GIT_COMMIT_REF=tip
+
+
+# Algolia's DocSearch config
+NEXT_PUBLIC_DOCSEARCH_APP_ID=
+NEXT_PUBLIC_DOCSEARCH_API_KEY=
+NEXT_PUBLIC_DOCSEARCH_INDEX=

package.json

@@ -29,6 +29,8 @@
     "zustand": "^5.0.2"
   },
   "devDependencies": {
+    "@docsearch/css": "^4.1.0",
+    "@docsearch/js": "^4.1.0",
     "@types/klaw-sync": "^6.0.5",
     "@types/node": "20.14.13",
     "@types/react": "18.3.3",

src/components/doc-search/DocSearch.module.css

@@ -0,0 +1,19 @@
+.docsearch {
+  display: flex;
+  justify-content: flex-end;
+  flex: 1;
+  padding: 0 30px;
+
+  :global(.DocSearch-Button-Key) {
+    /* The default mix is at 20%, which is too subtle */
+    border-color: color-mix(in srgb, var(--docsearch-subtle-color) 70%, transparent);
+  }
+
+  @media(max-width: 768px) {
+    padding-right: 0;
+
+    :global(.DocSearch-Button) {
+      border: 0;
+    }
+  }
+}

src/components/doc-search/index.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import { useEffect } from "react";
+import docsearch from "@docsearch/js";
+import "@docsearch/css";
+import s from "./DocSearch.module.css";
+
+export default function DocSearch() {
+  useEffect(() => {
+    if (process.env.NEXT_PUBLIC_DOCSEARCH_APP_ID
+      && process.env.NEXT_PUBLIC_DOCSEARCH_INDEX
+      && process.env.NEXT_PUBLIC_DOCSEARCH_API_KEY
+    ) {
+      docsearch({
+        container: "#docsearch",
+        appId: process.env.NEXT_PUBLIC_DOCSEARCH_APP_ID,
+        indexName: process.env.NEXT_PUBLIC_DOCSEARCH_INDEX,
+        apiKey: process.env.NEXT_PUBLIC_DOCSEARCH_API_KEY,
+      })
+    }
+  }, []);
+
+  return <div className={s.docsearch}>
+    <div id="docsearch" />
+  </div>;
+};

src/components/navbar/index.tsx

@@ -10,6 +10,7 @@ import NavTree, { BreakNode, LinkNode, NavTreeNode } from "../nav-tree";
 import GhosttyWordmark from "./ghostty-wordmark.svg";
 import s from "./Navbar.module.css";
 import { useRouter } from "next/router";
+import DocSearch from "@/components/doc-search";
 
 export interface NavbarProps {
   className?: string;
@@ -94,6 +95,7 @@ export default function Navbar({
         <NextLink href="/">
           <Image src={GhosttyWordmark} alt="Ghostty" />
         </NextLink>
+        <DocSearch />
         <div className={s.desktopLinks}>
           {links && (
             <ul className={s.linkList}>

src/styles/globals.css

@@ -65,6 +65,21 @@ body {
   --callout-important: var(--atom-one-purple);
   --callout-warning: var(--atom-one-yellow);
   --callout-caution: var(--atom-one-red);
+
+  /* DocSearch customizations */
+  --docsearch-primary-color: var(--brand-color);
+  --docsearch-text-color: var(--gray-4);
+  --docsearch-subtle-color: var(--gray-2);
+  --docsearch-icon-color: var(--brand-color);
+  --docsearch-background-color: var(--gray-1);
+  --docsearch-modal-background: var(--gray-0);
+  --docsearch-searchbox-focus-background: var(--gray-1);
+  --docsearch-searchbox-background: var(--gray-0);
+  --docsearch-footer-background: #1f2937;
+  --docsearch-hit-background: #374151;
+  --docsearch-hit-color: #f9fafb;
+  --docsearch-key-background: transparent;
+  --docsearch-hit-shadow: none;
 }
 
 /* This a slightly modified atom-one-dark theme */