feat: Algoliaサーチを統合

.github/workflows/deploy.yml

@@ -23,11 +23,20 @@
         with:
           deno-version: v1.x
 
+      - name: Update Algolia Index
+        if: github.ref == 'refs/heads/main'
+        run: deno run -A scripts/update_algolia_index.ts
+        env:
+          ALGOLIA_APP_ID: ${{ secrets.ALGOLIA_APP_ID }}
+          ALGOLIA_ADMIN_KEY: ${{ secrets.ALGOLIA_ADMIN_KEY }}
+          ALGOLIA_INDEX_NAME: ${{ secrets.ALGOLIA_INDEX_NAME }}
+
       - name: Build step
         run: "deno task build"
 
       - name: Upload to Deno Deploy
+        if: github.ref == 'refs/heads/main'
         uses: denoland/deployctl@v1
         with:
           project: "9renpoto"
           entrypoint: "main.ts"

components/Header.tsx

@@ -1,8 +1,19 @@
 import IconActivity from "https://deno.land/x/tabler_icons_tsx@0.0.5/tsx/activity.tsx";
 import Campfire from "https://deno.land/x/tabler_icons_tsx@0.0.5/tsx/campfire.tsx";
 import IconRss from "https://deno.land/x/tabler_icons_tsx@0.0.5/tsx/rss.tsx";
+import Search from "@/islands/Search.tsx";
 
-export function Header({ title }: { title: string }) {
+interface HeaderProps {
+  title: string;
+  algolia?: {
+    appId: string;
+    searchKey: string;
+    indexName: string;
+  };
+}
+
+export function Header(props: HeaderProps) {
+  const { title, algolia } = props;
   const menus = [
     { name: <IconRss />, href: "/rss.xml" },
     { name: <IconActivity />, href: "https://9renpoto.github.io/upptime" },
@@ -27,6 +38,15 @@ export function Header({ title }: { title: string }) {
             </a>
           </li>
         ))}
+        {algolia && (
+          <li>
+            <Search
+              appId={algolia.appId}
+              searchKey={algolia.searchKey}
+              indexName={algolia.indexName}
+            />
+          </li>
+        )}
       </ul>
     </header>
   );

deno.json

@@ -27,7 +27,8 @@
     "@std/testing": "jsr:@std/testing@^0.225.3",
     "preact": "https://esm.sh/preact@10.22.0",
     "preact/": "https://esm.sh/preact@10.22.0/",
-    "tailwindcss": "npm:tailwindcss@^3.4.6"
+    "tailwindcss": "npm:tailwindcss@^3.4.6",
+    "algoliasearch": "https://esm.sh/algoliasearch@4.20.0"
   },
   "lint": {
     "rules": {

islands/Search.tsx

@@ -0,0 +1,59 @@
+import { useState, useEffect, useRef } from "preact/hooks";
+import algoliasearch from "algoliasearch/lite";
+
+interface SearchProps {
+  appId: string;
+  searchKey: string;
+  indexName: string;
+}
+
+interface Hit {
+  objectID: string;
+  title: string;
+  snippet: string;
+}
+
+export default function Search(props: SearchProps) {
+  const { appId, searchKey, indexName } = props;
+  const [query, setQuery] = useState("");
+  const [hits, setHits] = useState<Hit[]>([]);
+  const searchInput = useRef<HTMLInputElement>(null);
+
+  const searchClient = algoliasearch(appId, searchKey);
+  const index = searchClient.initIndex(indexName);
+
+  useEffect(() => {
+    if (query.length > 0) {
+      index.search<Hit>(query).then(({ hits }) => {
+        setHits(hits);
+      });
+    } else {
+      setHits([]);
+    }
+  }, [query]);
+
+  return (
+    <div class="relative">
+      <input
+        ref={searchInput}
+        type="text"
+        value={query}
+        onInput={(e) => setQuery(e.currentTarget.value)}
+        placeholder="Search..."
+        class="border rounded-lg px-2 py-1"
+      />
+      {hits.length > 0 && (
+        <ul class="absolute top-full left-0 w-full bg-white border rounded-lg mt-1 shadow-lg z-10">
+          {hits.map((hit) => (
+            <li key={hit.objectID} class="border-b">
+              <a href={`/entry/${hit.objectID}`} class="block p-2 hover:bg-gray-100">
+                <div class="font-bold">{hit.title}</div>
+                <p class="text-sm text-gray-600">{hit.snippet}</p>
+              </a>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}

scripts/update_algolia_index.ts

@@ -0,0 +1,35 @@
+import "https://deno.land/std@0.192.0/dotenv/load.ts";
+import algoliasearch from "algoliasearch";
+import { getPosts } from "@/utils/posts.ts";
+
+const appId = Deno.env.get("ALGOLIA_APP_ID");
+const adminKey = Deno.env.get("ALGOLIA_ADMIN_KEY");
+const indexName = Deno.env.get("ALGOLIA_INDEX_NAME");
+
+if (!appId || !adminKey || !indexName) {
+  console.error(
+    "ALGOLIA_APP_ID, ALGOLIA_ADMIN_KEY, and ALGOLIA_INDEX_NAME must be set",
+  );
+  Deno.exit(1);
+}
+
+const client = algoliasearch(appId, adminKey);
+const index = client.initIndex(indexName);
+
+const posts = await getPosts();
+
+const records = posts.map((post) => ({
+  objectID: post.slug,
+  title: post.title,
+  snippet: post.snippet,
+  content: post.content,
+  publishedAt: post.publishedAt.toISOString(),
+}));
+
+try {
+  await index.saveObjects(records);
+  console.log("Algolia index updated successfully!");
+} catch (error) {
+  console.error("Failed to update Algolia index:", error);
+  Deno.exit(1);
+}