feat(islands): copy SearchButton from denoland/fresh#www (#90)

* feat(islands): copy SearchButton from denoland/fresh#www

* feat: add docsearch props;

__tests__/islands/SearchButton.test.tsx

@@ -0,0 +1,27 @@
+import { assert } from "$std/testing/asserts.ts";
+import { cleanup, render, setup } from "$fresh-testing-library/components.ts";
+import { fn } from "$fresh-testing-library/expect.ts";
+import { afterEach, beforeAll, describe, it } from "$std/testing/bdd.ts";
+import SearchButton from "../../islands/SearchButton.tsx";
+import docsearch from "https://esm.sh/@docsearch/js@3?target=es2020";
+
+describe("islands/SearchButton.tsx", () => {
+  beforeAll(setup);
+  afterEach(cleanup);
+
+  it("should contain class applied in props", () => {
+    // create mock implementation of docsearch
+    // @ts-ignore mock impl
+    const dsearch = fn(docsearch).mockImplementation((
+      applId: string,
+      apiKey: string,
+      indexName: string,
+      container: HTMLElement | string,
+    ) => {});
+    const { getByTitle } = render(
+      <SearchButton class="font-bold" docsearch={dsearch} />,
+    );
+    const search = getByTitle("Search Button");
+    assert(search.classList.contains("font-bold"));
+  });
+});

cspell.json

@@ -18,6 +18,7 @@
     "9renpoto",
     "bluesky",
     "denoland",
-    "healthz"
+    "healthz",
+    "preact"
   ]
 }

deno.json

@@ -7,26 +7,38 @@
     "lint": "deno run -A npm:textlint",
     "preview": "deno run -A main.ts"
   },
-  "compilerOptions": { "jsx": "react-jsx", "jsxImportSource": "preact" },
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "preact"
+  },
   "lock": false,
   "imports": {
-    "$fresh/": "https://deno.land/x/[email protected].5/",
+    "$fresh/": "https://deno.land/x/[email protected].8/",
     "$fresh_seo": "https://deno.land/x/[email protected]/mod.ts",
-    "preact": "https://esm.sh/[email protected]",
-    "preact/": "https://esm.sh/[email protected]/",
-    "preact-render-to-string": "https://esm.sh/*[email protected]",
-    "@preact/signals": "https://esm.sh/*@preact/[email protected]",
-    "@preact/signals-core": "https://esm.sh/*@preact/[email protected]",
-    "tailwindcss": "npm:[email protected]",
-    "tailwindcss/": "npm:/[email protected]/",
-    "tailwindcss/plugin": "npm:/[email protected]/plugin.js",
+    "preact": "https://esm.sh/[email protected]",
+    "preact/": "https://esm.sh/[email protected]/",
+    "@preact/signals": "https://esm.sh/*@preact/[email protected]",
+    "@preact/signals-core": "https://esm.sh/*@preact/[email protected]",
+    "tailwindcss": "npm:[email protected]",
+    "tailwindcss/": "npm:[email protected]/",
+    "tailwindcss/plugin": "npm:/[email protected]/plugin.js",
     "$fresh-testing-library/": "https://deno.land/x/[email protected]/",
     "$std/": "https://deno.land/[email protected]/",
     "@/": "./",
     "./": "./",
     "$gfm": "https://deno.land/x/[email protected]/mod.ts",
     "$ga4": "https://raw.githubusercontent.com/denoland/ga4/main/mod.ts"
   },
-  "lint": { "rules": { "tags": ["fresh", "recommended"] } },
-  "exclude": ["**/_fresh/*", "cache"]
+  "lint": {
+    "rules": {
+      "tags": [
+        "fresh",
+        "recommended"
+      ]
+    }
+  },
+  "exclude": [
+    "**/_fresh/*",
+    "cache"
+  ]
 }

fresh.gen.ts

@@ -10,7 +10,7 @@ import * as $entry_all_ from "./routes/entry/[...all].tsx";
 import * as $healthz from "./routes/healthz.tsx";
 import * as $index from "./routes/index.tsx";
 import * as $rss_xml from "./routes/rss.xml.ts";
-
+import * as $SearchButton from "./islands/SearchButton.tsx";
 import { type Manifest } from "$fresh/server.ts";
 
 const manifest = {
@@ -24,7 +24,9 @@ const manifest = {
     "./routes/index.tsx": $index,
     "./routes/rss.xml.ts": $rss_xml,
   },
-  islands: {},
+  islands: {
+    "./islands/SearchButton.tsx": $SearchButton,
+  },
   baseUrl: import.meta.url,
 } satisfies Manifest;
 

islands/SearchButton.tsx

@@ -0,0 +1,43 @@
+import { Head } from "$fresh/runtime.ts";
+import { useEffect, useRef } from "preact/hooks";
+import docsearch from "https://esm.sh/@docsearch/[email protected]?target=es2020";
+
+// Copied from algolia source code
+type DocSearchProps = {
+  appId: string;
+  apiKey: string;
+  indexName: string;
+  container: HTMLElement | string;
+};
+
+export default function SearchButton(
+  props: { docsearch?: (args: DocSearchProps) => void; class?: string },
+) {
+  const ref = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    if (ref.current) {
+      props.docsearch || docsearch({
+        appId: "SV4Q5O4SYJ",
+        apiKey: "73f700bbeef663cb76e7c4d3ca2f0fc4",
+        indexName: "9renpoto.win",
+        container: ref.current,
+      });
+    }
+  }, [ref.current]);
+  return (
+    <>
+      <Head>
+        <link
+          rel="stylesheet"
+          href="/docsearch.css"
+        />
+      </Head>
+      <div
+        title="Search Button"
+        class={`h-9 mb-6 ${props.class ?? ""}`}
+        ref={ref}
+      >
+      </div>
+    </>
+  );
+}