feat: migrate DocSearch to Algolia autocomplete

.github/workflows/algolia-index.yml

@@ -30,6 +30,6 @@ jobs:
         env:
           ALGOLIA_APP_ID: ${{ secrets.ALGOLIA_APP_ID }}
           ALGOLIA_ADMIN_API_KEY: ${{ secrets.ALGOLIA_ADMIN_API_KEY }}
-          DOCSEARCH_INDEX_NAME: ${{ secrets.DOCSEARCH_INDEX_NAME }}
+          ALGOLIA_INDEX_NAME: ${{ secrets.ALGOLIA_INDEX_NAME }}
           SITE_URL: ${{ vars.SITE_URL }}
         run: deno run -A scripts/sync_algolia_index.ts

README.md

@@ -30,53 +30,28 @@
 deno task preview
 ```
 
 This launches the prerendered build on port `8000`.
 
-## DocSearch (Algolia)
+## Algolia search
 
-This site can integrate [DocSearch](https://docsearch.algolia.com/).
+This site uses Algolia search.
 
-There are two ways to use the search box in this app:
+1. Create or choose an Algolia index.
+2. Generate a search-only API key.
+3. Set runtime credentials.
+4. Start the app with `deno task start`.
 
-1. **DocSearch program (free)**: apply and wait for domain approval.
-2. **Your own Algolia setup**: create your own Algolia index/crawler and use
-   those credentials (no DocSearch domain approval required).
+Runtime environment variables:
 
-Then:
-
-1. Set the credentials in your environment.
-2. Start the app with `deno task start`.
-
-Environment variables:
-
-```
-DOCSEARCH_APP_ID=...
-DOCSEARCH_API_KEY=...
-DOCSEARCH_INDEX_NAME=...
+```text
+ALGOLIA_APP_ID=...
+ALGOLIA_SEARCH_API_KEY=...
+ALGOLIA_INDEX_NAME=...
 ```
 
-When the three variables are present, a search box is rendered in the header. If
+When all three variables are present, a search box is rendered in the header. If
 they are missing, the UI stays hidden.
 
-### If your domain is not approved by DocSearch
-
-If you see a message like "Your domain was not approved for DocSearch", the UI
-integration in this repository is still valid, but the **DocSearch-hosted
-crawler** cannot be used for that domain.
-
-Use one of these options:
-
-1. Re-apply after confirming your production domain is publicly accessible and
-   contains crawlable content.
-2. Use your own Algolia crawler/index and set `DOCSEARCH_*` variables from that
-   index.
-
-Quick checks after configuration:
-
-1. Ensure all three env vars are set.
-2. Open devtools and verify no `@docsearch/js` initialization errors appear.
-3. Confirm your index has records and the API key is search-only for that index.
-
 ### Create your own index in deployment steps
 
 This repository includes a deploy-time index sync flow:
@@ -97,7 +72,7 @@
 Secrets:
 	ALGOLIA_APP_ID
 	ALGOLIA_ADMIN_API_KEY
-	DOCSEARCH_INDEX_NAME
+	ALGOLIA_INDEX_NAME
 
 Variables:
 	SITE_URL=https://9renpoto.win
@@ -108,7 +83,7 @@
 ```bash
 ALGOLIA_APP_ID=... \
 ALGOLIA_ADMIN_API_KEY=... \
-DOCSEARCH_INDEX_NAME=... \
+ALGOLIA_INDEX_NAME=... \
 SITE_URL=https://9renpoto.win \
 deno task algolia:sync
 ```
@@ -122,9 +97,9 @@
 After indexing, set runtime env vars for search UI:
 
 ```text
-DOCSEARCH_APP_ID=<ALGOLIA_APP_ID>
-DOCSEARCH_API_KEY=<search-only API key>
-DOCSEARCH_INDEX_NAME=<same index name>
+ALGOLIA_APP_ID=<ALGOLIA_APP_ID>
+ALGOLIA_SEARCH_API_KEY=<search-only API key>
+ALGOLIA_INDEX_NAME=<same index name>
 ```
 
 [![Made with Fresh](https://fresh.deno.dev/fresh-badge.svg)](https://fresh.deno.dev)

client.ts

@@ -1,3 +1,2 @@
 // Import CSS files here for hot module reloading to work.
 import "./static/styles.css";
-import "@docsearch/css";

components/Header.tsx

@@ -1,18 +1,18 @@
 import IconActivity from "@/components/icons/Activity.tsx";
 import Campfire from "@/components/icons/Campfire.tsx";
 import IconRss from "@/components/icons/Rss.tsx";
-import DocSearch from "@/islands/DocSearch.tsx";
+import AlgoliaSearch from "@/islands/AlgoliaSearch.tsx";
 import HamburgerButton from "../islands/HamburgerButton.tsx";
 
 interface HeaderProps {
   title: string;
-  docSearchAppId?: string;
-  docSearchApiKey?: string;
-  docSearchIndexName?: string;
+  algoliaAppId?: string;
+  algoliaSearchApiKey?: string;
+  algoliaIndexName?: string;
 }
 
 export function Header(
-  { title, docSearchAppId, docSearchApiKey, docSearchIndexName }: HeaderProps,
+  { title, algoliaAppId, algoliaSearchApiKey, algoliaIndexName }: HeaderProps,
 ) {
   const menus = [
     { name: <IconRss />, href: "/rss.xml" },
@@ -29,12 +29,12 @@ export function Header(
           </a>
         </div>
         <div class="hidden md:block w-full max-w-sm">
-          <DocSearch
-            appId={docSearchAppId}
-            apiKey={docSearchApiKey}
-            indexName={docSearchIndexName}
+          <AlgoliaSearch
+            appId={algoliaAppId}
+            apiKey={algoliaSearchApiKey}
+            indexName={algoliaIndexName}
             placeholder="Search posts"
-            containerId="docsearch-desktop"
+            containerId="algolia-search-desktop"
           />
         </div>
         <div class="hidden md:flex items-center gap-6">
@@ -60,12 +60,12 @@ export function Header(
           ))}
         </HamburgerButton>
         <div class="md:hidden w-full">
-          <DocSearch
-            appId={docSearchAppId}
-            apiKey={docSearchApiKey}
-            indexName={docSearchIndexName}
+          <AlgoliaSearch
+            appId={algoliaAppId}
+            apiKey={algoliaSearchApiKey}
+            indexName={algoliaIndexName}
             placeholder="Search posts"
-            containerId="docsearch-mobile"
+            containerId="algolia-search-mobile"
           />
         </div>
       </div>

deno.json

@@ -52,13 +52,13 @@
     "@std/path": "jsr:@std/path@^1.0.0",
     "@std/testing": "jsr:@std/testing@^0.225.3",
     "@testing-library/dom": "npm:@testing-library/dom@^9.3.4",
+    "@algolia/autocomplete-js": "npm:@algolia/autocomplete-js@^1.19.4",
+    "algoliasearch/lite": "npm:algoliasearch@^5/lite",
     "autoprefixer": "npm:autoprefixer@^10.4.19",
     "fresh": "jsr:@fresh/core@^2.1.2",
     "linkedom": "npm:linkedom@^0.18.4",
     "marked": "https://cdn.jsdelivr.net/npm/marked@4/lib/marked.esm.js",
     "@types/marked": "npm:@types/marked@^4.0.8",
-    "@docsearch/css": "npm:@docsearch/css@^3.9.0",
-    "@docsearch/js": "npm:@docsearch/js@^4.6.0",
     "preact": "npm:preact@^10.27.2",
     "preact-render-to-string": "npm:preact-render-to-string@^6.5.4",
     "tailwindcss": "npm:tailwindcss@^3.4.6",