refactor: filter 404 response

__tests__/Footer.test.tsx

@@ -1,16 +1,14 @@
-import { afterEach, beforeAll, describe, it } from "@std/testing/bdd";
-import { assertExists } from "@std/testing/asserts";
 import { cleanup, render, setup } from "$fresh-testing-library/components.ts";
 import { Footer } from "@/components/Footer.tsx";
+import { assertExists } from "@std/testing/asserts";
+import { afterEach, beforeAll, describe, it } from "@std/testing/bdd";
 
 describe("Footer", () => {
   beforeAll(setup);
   afterEach(cleanup);
 
   it("should exists.", () => {
-    const { container } = render(
-      <Footer />,
-    );
+    const { container } = render(<Footer />);
 
     assertExists(container);
   });

__tests__/Header.test.tsx

@@ -1,16 +1,14 @@
-import { afterEach, beforeAll, describe, it } from "@std/testing/bdd";
-import { assertExists } from "@std/testing/asserts";
 import { cleanup, render, setup } from "$fresh-testing-library/components.ts";
 import { Header } from "@/components/Header.tsx";
+import { assertExists } from "@std/testing/asserts";
+import { afterEach, beforeAll, describe, it } from "@std/testing/bdd";
 
 describe("Header", () => {
   beforeAll(setup);
   afterEach(cleanup);
 
   it("should exists.", () => {
-    const { container } = render(
-      <Header title="title" />,
-    );
+    const { container } = render(<Header title="title" />);
 
     assertExists(container);
   });

__tests__/SEO.test.tsx

@@ -1,7 +1,7 @@
-import { afterEach, beforeAll, describe, it } from "@std/testing/bdd";
-import { assertExists } from "@std/testing/asserts";
 import { cleanup, render, setup } from "$fresh-testing-library/components.ts";
 import { SEO } from "@/components/SEO.tsx";
+import { assertExists } from "@std/testing/asserts";
+import { afterEach, beforeAll, describe, it } from "@std/testing/bdd";
 
 describe("Footer", () => {
   beforeAll(setup);

__tests__/index.test.tsx

@@ -1,7 +1,7 @@
-import { afterEach, beforeAll, describe, it } from "@std/testing/bdd";
-import { assertExists } from "@std/testing/asserts";
 import { cleanup, render, setup } from "$fresh-testing-library/components.ts";
 import { PostCard } from "@/routes/index.tsx";
+import { assertExists } from "@std/testing/asserts";
+import { afterEach, beforeAll, describe, it } from "@std/testing/bdd";
 
 describe("PostCard", () => {
   beforeAll(setup);

__tests__/islands/SearchButton.test.tsx

@@ -1,9 +1,9 @@
-import { assert } from "@std/testing/asserts";
+import docsearch from "https://esm.sh/@docsearch/js@3?target=es2020";
 import { cleanup, render, setup } from "$fresh-testing-library/components.ts";
 import { fn } from "$fresh-testing-library/expect.ts";
+import { assert } from "@std/testing/asserts";
 import { afterEach, beforeAll, describe, it } from "@std/testing/bdd";
 import SearchButton from "../../islands/SearchButton.tsx";
-import docsearch from "https://esm.sh/@docsearch/js@3?target=es2020";
 
 describe("islands/SearchButton.tsx", () => {
   beforeAll(setup);
@@ -12,12 +12,14 @@ describe("islands/SearchButton.tsx", () => {
   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 dsearch = fn(docsearch).mockImplementation(
+      (
+        _applId: string,
+        _apiKey: string,
+        _indexName: string,
+        _container: HTMLElement | string,
+      ) => {},
+    );
     const { getByTitle } = render(
       <SearchButton class="font-bold" docsearch={dsearch} />,
     );

components/Bio.tsx

@@ -1,11 +1,14 @@
 export const Bio = ({ author }: { author: string }) => (
   <div class="flex items-center">
-    <img class="w-10 h-10 rounded-full mr-4" src="/profile-pic.jpg" />
+    <img
+      class="w-10 h-10 rounded-full mr-4"
+      src="/profile-pic.jpg"
+      alt="profile"
+    />
     <p>
       Written by <strong>{author}</strong>{" "}
-      who lives and works in Japan building useful things.
-      {` `}
-      <a href={`https://bsky.app/profile/9renpoto.win`}>
+      who lives and works in Japan building useful things.{" "}
+      <a href={"https://bsky.app/profile/9renpoto.win"}>
         You should follow him on Bluesky
       </a>
     </p>

components/Footer.tsx

@@ -1,5 +1,5 @@
-import Campfire from "https://deno.land/x/[email protected]/tsx/campfire.tsx";
 import BrandGithub from "https://deno.land/x/[email protected]/tsx/brand-github.tsx";
+import Campfire from "https://deno.land/x/[email protected]/tsx/campfire.tsx";
 import { author } from "@/utils/website.ts";
 
 export function Footer() {
@@ -17,13 +17,9 @@ export function Footer() {
       <div class="flex-1">
         <div class="flex items-center gap-1">
           <Campfire class="inline-block" />
-          <div class="font-bold text-2xl">
-            {author}
-          </div>
-        </div>
-        <div class="text-gray-500">
-          Lazy builder
+          <div class="font-bold text-2xl">{author}</div>
         </div>
+        <div class="text-gray-500">Lazy builder</div>
       </div>
 
       {menus.map((item) => (
@@ -32,10 +28,7 @@ export function Footer() {
           <ul class="mt-2">
             {item.children.map((child) => (
               <li class="mt-2" key={child.name}>
-                <a
-                  class="text-gray-500 hover:text-gray-700"
-                  href={child.href}
-                >
+                <a class="text-gray-500 hover:text-gray-700" href={child.href}>
                   {child.name}
                 </a>
               </li>
@@ -46,7 +39,8 @@ export function Footer() {
 
       <div class="text-gray-500 space-y-2">
         <div class="text-xs">
-          Copyright © {new Date().getFullYear()} github.com/9renpoto<br />
+          Copyright © {new Date().getFullYear()} github.com/9renpoto
+          <br />
           All right reserved.
         </div>
 

components/Header.tsx

@@ -1,6 +1,6 @@
+import IconActivity from "https://deno.land/x/[email protected]/tsx/activity.tsx";
 import Campfire from "https://deno.land/x/[email protected]/tsx/campfire.tsx";
 import IconRss from "https://deno.land/x/[email protected]/tsx/rss.tsx";
-import IconActivity from "https://deno.land/x/[email protected]/tsx/activity.tsx";
 
 export function Header({ title }: { title: string }) {
   const menus = [
@@ -13,9 +13,7 @@ export function Header({ title }: { title: string }) {
       <div class="flex items-center flex-1">
         <Campfire />
         <a href="/">
-          <div class="text-2xl ml-1 font-bold">
-            {title}
-          </div>
+          <div class="text-2xl ml-1 font-bold">{title}</div>
         </a>
       </div>
       <ul class="flex items-center gap-6">

components/SEO.tsx

@@ -1,6 +1,11 @@
 import { author } from "@/utils/website.ts";
 
-export const SEO = ({ title, description, ogImage, keywords }: {
+export const SEO = ({
+  title,
+  description,
+  ogImage,
+  keywords,
+}: {
   title: string;
   description: string;
   ogImage: string;

deno.json

@@ -29,14 +29,8 @@
   },
   "lint": {
     "rules": {
-      "tags": [
-        "fresh",
-        "recommended"
-      ]
+      "tags": ["fresh", "recommended"]
     }
   },
-  "exclude": [
-    "**/_fresh/*",
-    "cache"
-  ]
+  "exclude": ["**/_fresh/*", "cache"]
 }

fresh.config.ts

@@ -1,5 +1,5 @@
-import { defineConfig } from "$fresh/server.ts";
 import tailwind from "$fresh/plugins/tailwind.ts";
+import { defineConfig } from "$fresh/server.ts";
 import { freshSEOPlugin } from "$fresh_seo";
 import manifest from "./fresh.gen.ts";
 import { getPosts } from "./utils/posts.ts";

islands/SearchButton.tsx

@@ -1,6 +1,6 @@
+import docsearch from "https://esm.sh/@docsearch/[email protected]?target=es2020";
 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 = {
@@ -10,27 +10,26 @@ type DocSearchProps = {
   container: HTMLElement | string;
 };
 
-export default function SearchButton(
-  props: { docsearch?: (args: DocSearchProps) => void; class?: 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,
-      });
+      props.docsearch ||
+        docsearch({
+          appId: "SV4Q5O4SYJ",
+          apiKey: "73f700bbeef663cb76e7c4d3ca2f0fc4",
+          indexName: "9renpoto.win",
+          container: ref.current,
+        });
     }
   }, [ref.current]);
   return (
     <>
       <Head>
-        <link
-          rel="stylesheet"
-          href="/docsearch.css"
-        />
+        <link rel="stylesheet" href="/docsearch.css" />
       </Head>
       <div
         title="Search Button"

main.ts

@@ -5,7 +5,7 @@
 /// <reference lib="deno.ns" />
 
 import { start } from "$fresh/server.ts";
-import manifest from "./fresh.gen.ts";
 import config from "./fresh.config.ts";
+import manifest from "./fresh.gen.ts";
 
 await start(manifest, config);

routes/_404.tsx

@@ -1,6 +1,6 @@
-import { UnknownPageProps } from "$fresh/server.ts";
+import type { PageProps } from "$fresh/server.ts";
 
-export default function NotFoundPage({ url }: UnknownPageProps) {
+export default function NotFoundPage({ url }: PageProps) {
   return (
     <p class="max-w-screen-md w-full px-4 pt-16 mx-auto">404 not found {url}</p>
   );

routes/_app.tsx

@@ -1,4 +1,4 @@
-import { PageProps } from "$fresh/server.ts";
+import type { PageProps } from "$fresh/server.ts";
 import { Footer } from "@/components/Footer.tsx";
 import { Header } from "@/components/Header.tsx";
 import { title } from "@/utils/website.ts";