From 4a46327603e39a9cfb6f99261f911b9c2723d5cd Mon Sep 17 00:00:00 2001
From: 4513ECHO <mail@4513echo.dev>
Date: Sat, 22 Feb 2025 11:35:40 +0900
Subject: [PATCH] feat: Replace fresh with honox

---
 .github/workflows/deploy.yml              |  26 +++++++++
 .gitignore                                |   3 +-
 app/client.ts                             |  12 ++++
 {components => app/components}/Icons.tsx  |  14 ++++-
 app/components/LinkBox.tsx                |  23 ++++++++
 app/global.d.ts                           |   8 +++
 app/routes/_404.tsx                       |   8 +++
 app/routes/_error.tsx                     |  12 ++++
 app/routes/_renderer.tsx                  |  38 ++++++++++++
 {routes => app/routes}/dot.ts             |   8 +--
 {routes => app/routes}/index.tsx          |  67 +++++++++-------------
 app/server.ts                             |   8 +++
 app/style.css                             |   1 +
 components/Link.tsx                       |  22 -------
 deno.json                                 |  62 ++++++++++----------
 dev.ts                                    |   5 --
 fresh.config.ts                           |   7 ---
 fresh.gen.ts                              |  25 --------
 islands/Toggle.tsx                        |  28 ---------
 main.ts                                   |   5 --
 {static => public}/.well-known/nostr.json |   0
 {static => public}/icon.png               | Bin
 {static => public}/icon.webp              | Bin
 {static => public}/robots.txt             |   0
 routes/_app.tsx                           |  41 -------------
 routes/_middleware.ts                     |  65 ---------------------
 scripts/gravatar.ts                       |  15 -----
 twind.config.ts                           |  10 ----
 vite.config.ts                            |  21 +++++++
 29 files changed, 236 insertions(+), 298 deletions(-)
 create mode 100644 .github/workflows/deploy.yml
 create mode 100644 app/client.ts
 rename {components => app/components}/Icons.tsx (52%)
 create mode 100644 app/components/LinkBox.tsx
 create mode 100644 app/global.d.ts
 create mode 100644 app/routes/_404.tsx
 create mode 100644 app/routes/_error.tsx
 create mode 100644 app/routes/_renderer.tsx
 rename {routes => app/routes}/dot.ts (51%)
 rename {routes => app/routes}/index.tsx (55%)
 create mode 100644 app/server.ts
 create mode 100644 app/style.css
 delete mode 100644 components/Link.tsx
 delete mode 100755 dev.ts
 delete mode 100644 fresh.config.ts
 delete mode 100644 fresh.gen.ts
 delete mode 100644 islands/Toggle.tsx
 delete mode 100644 main.ts
 rename {static => public}/.well-known/nostr.json (100%)
 rename {static => public}/icon.png (100%)
 rename {static => public}/icon.webp (100%)
 rename {static => public}/robots.txt (100%)
 delete mode 100644 routes/_app.tsx
 delete mode 100644 routes/_middleware.ts
 delete mode 100644 scripts/gravatar.ts
 delete mode 100644 twind.config.ts
 create mode 100644 vite.config.ts

diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
new file mode 100644
index 0000000..eac0b9e
--- /dev/null
+++ b/.github/workflows/deploy.yml
@@ -0,0 +1,26 @@
+name: Deploy
+
+on:
+  push:
+    branches: [main]
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      id-token: write
+    steps:
+      - uses: actions/checkout@v4
+      - uses: denoland/setup-deno@v2
+        with:
+          deno-version: v2.x
+      - name: Build
+        run: deno task build
+      - uses: denoland/deployctl@v1
+        with:
+          entrypoint: dist/index.js
+          project: 4513echo
+          include: |
+            deno.json
+            dist
diff --git a/.gitignore b/.gitignore
index c649a99..c925c21 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1 +1,2 @@
-/_fresh
+/dist
+/node_modules
diff --git a/app/client.ts b/app/client.ts
new file mode 100644
index 0000000..efdfe37
--- /dev/null
+++ b/app/client.ts
@@ -0,0 +1,12 @@
+import { createClient } from "honox/client";
+
+createClient({
+  hydrate: async (elem, root) => {
+    const { hydrateRoot } = await import("react-dom/client");
+    hydrateRoot(root, elem);
+  },
+  createElement: async (type, props) => {
+    const { createElement } = await import("react");
+    return createElement(type, props);
+  },
+});
diff --git a/components/Icons.tsx b/app/components/Icons.tsx
similarity index 52%
rename from components/Icons.tsx
rename to app/components/Icons.tsx
index f8c30a5..85e9bcf 100644
--- a/components/Icons.tsx
+++ b/app/components/Icons.tsx
@@ -5,9 +5,21 @@ export function Sizume() {
         d="m23,63.5c2.9-1.9,6-3.8,9.5-4.2s7.5,1.2,8.6,4.5c1.5,4.2-2.2,8.4-5.8,11-3.4,2.5-7.1,4.6-11.2,5.6-4.1,1-8.6.7-12.3-1.3-4.3-2.4-6.9-7-7.9-11.8s-.4-9.7.4-14.5C7.4,36,14.5,19.7,26.2,7.3c2.5-2.7,6.1-5.4,9.6-4,3.4,1.4,4.2,5.8,4.1,9.5-.3,11.3-3.3,22.4-8.7,32.3-.7,1.2-1.4,2.5-2.6,3.3s-2.8,1.1-4,.4c-2.2-1.4-1.3-4.9.3-7,3.4-4.8,8.2-8.4,13.8-10.4,3.9-1.4,8.6-1.7,11.7.9,2.4,2.1,3.2,5.5,2.7,8.6s-2.2,5.9-4.1,8.4c-1.4,1.8-3.7,3.6-5.6,2.4-2.2-1.3-1.1-4.7.4-6.8,2.7-4,6.3-8.2,11.1-8.8,5.2-.6,10.1,3.3,11.8,8.2s.7,10.3-1.5,15c-4,8.9-12,15.9-21.4,18.7"
         fill="none"
         stroke="currentColor"
-        stroke-width="3"
+        strokeWidth="3"
       >
       </path>
     </svg>
   );
 }
+
+export function Twitter() {
+  return (
+    <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+      <title>Twitter</title>
+      <path
+        d="M21.543 7.104c.015.211.015.423.015.636 0 6.507-4.954 14.01-14.01 14.01v-.003A13.94 13.94 0 0 1 0 19.539a9.88 9.88 0 0 0 7.287-2.041 4.93 4.93 0 0 1-4.6-3.42 4.916 4.916 0 0 0 2.223-.084A4.926 4.926 0 0 1 .96 9.167v-.062a4.887 4.887 0 0 0 2.235.616A4.928 4.928 0 0 1 1.67 3.148 13.98 13.98 0 0 0 11.82 8.292a4.929 4.929 0 0 1 8.39-4.49 9.868 9.868 0 0 0 3.128-1.196 4.941 4.941 0 0 1-2.165 2.724A9.828 9.828 0 0 0 24 4.555a10.019 10.019 0 0 1-2.457 2.549z"
+        fill="#1D9BF0"
+      />
+    </svg>
+  );
+}
diff --git a/app/components/LinkBox.tsx b/app/components/LinkBox.tsx
new file mode 100644
index 0000000..aad0b0a
--- /dev/null
+++ b/app/components/LinkBox.tsx
@@ -0,0 +1,23 @@
+// @ts-types="@types/react"
+import type { ReactNode } from "react";
+
+export interface LinkProps {
+  href: string;
+  name: string;
+  icon: ReactNode | string;
+}
+
+export function LinkBox(props: LinkProps) {
+  return (
+    <li className="py-2 rounded-full bg-gray-600 hover:bg-gray-500">
+      <a className="flex items-center" rel="me" href={props.href}>
+        {typeof props.icon === "string"
+          ? <img className="mx-4 w-6 h-6" src={props.icon} alt={props.name} />
+          : <div className="mx-4 w-6 h-6">{props.icon}</div>}
+        <p className="items-center text-sm text-gray-100 font-mono overflow-x-auto">
+          {props.name}
+        </p>
+      </a>
+    </li>
+  );
+}
diff --git a/app/global.d.ts b/app/global.d.ts
new file mode 100644
index 0000000..838e8cd
--- /dev/null
+++ b/app/global.d.ts
@@ -0,0 +1,8 @@
+import "hono";
+import "@hono/react-renderer";
+
+declare module "@hono/react-renderer" {
+  interface Props {
+    title?: string;
+  }
+}
diff --git a/app/routes/_404.tsx b/app/routes/_404.tsx
new file mode 100644
index 0000000..ab91e4f
--- /dev/null
+++ b/app/routes/_404.tsx
@@ -0,0 +1,8 @@
+import type { NotFoundHandler } from "hono";
+
+const handler: NotFoundHandler = (c) => {
+  c.status(404);
+  return c.render(<p>404 Not Found</p>);
+};
+
+export default handler;
diff --git a/app/routes/_error.tsx b/app/routes/_error.tsx
new file mode 100644
index 0000000..5d90824
--- /dev/null
+++ b/app/routes/_error.tsx
@@ -0,0 +1,12 @@
+import type { ErrorHandler } from "hono";
+
+const handler: ErrorHandler = (e, c) => {
+  if ("getResponse" in e) {
+    return e.getResponse();
+  }
+  console.error(e.message);
+  c.status(500);
+  return c.render(<p>Internal Server Error</p>);
+};
+
+export default handler;
diff --git a/app/routes/_renderer.tsx b/app/routes/_renderer.tsx
new file mode 100644
index 0000000..9004881
--- /dev/null
+++ b/app/routes/_renderer.tsx
@@ -0,0 +1,38 @@
+import { reactRenderer } from "@hono/react-renderer";
+import { Link, Script } from "honox/server";
+
+export default reactRenderer(({ children, title }) => {
+  return (
+    <html lang="ja">
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>{title}</title>
+        <link
+          rel="icon"
+          href="https://www.gravatar.com/avatar/1179b2be2101d818dbb543537e6c3107?s=1024"
+        />
+        <Script src="/app/client.ts" async />
+        <Link rel="stylesheet" href="/app/style.css" />
+        <script
+          data-goatcounter="https://4513echo.goatcounter.com/count"
+          async
+          src="//gc.zgo.at/count.js"
+        />
+        <script
+          type="application/ld+json"
+          dangerouslySetInnerHTML={{
+            __html: JSON.stringify({
+              "@context": "http://schema.org",
+              "@type": "WebSite",
+              "name": "4513echo.dev",
+              "url": "https://4513echo.dev",
+              "author": { "@type": "Person", "name": "響" },
+            }),
+          }}
+        />
+      </head>
+      <body className="bg-[#8685b1]">{children}</body>
+    </html>
+  );
+});
diff --git a/routes/dot.ts b/app/routes/dot.ts
similarity index 51%
rename from routes/dot.ts
rename to app/routes/dot.ts
index ff8cafc..a4bcca4 100644
--- a/routes/dot.ts
+++ b/app/routes/dot.ts
@@ -1,9 +1,9 @@
-import type { FreshContext } from "$fresh/server.ts";
+import { createRoute } from "honox/factory";
 import { STATUS_CODE } from "@std/http/status";
 
-export function handler(req: Request, _ctx: FreshContext): Response {
-  const rev = new URL(req.url).searchParams.get("rev") || "main";
+export default createRoute((c) => {
+  const rev = c.req.query("rev") || "main";
   const location =
     `https://raw.githubusercontent.com/4513ECHO/dotfiles/${rev}/up`;
   return Response.redirect(location, STATUS_CODE.TemporaryRedirect);
-}
+});
diff --git a/routes/index.tsx b/app/routes/index.tsx
similarity index 55%
rename from routes/index.tsx
rename to app/routes/index.tsx
index 2322531..459c4fe 100644
--- a/routes/index.tsx
+++ b/app/routes/index.tsx
@@ -1,61 +1,49 @@
-import { Link, LinkProps } from "@/components/Link.tsx";
-import * as Icons from "@/components/Icons.tsx";
-import { iconUrl } from "@/scripts/gravatar.ts";
+import { createRoute } from "honox/factory";
+import { LinkBox, LinkProps } from "@/components/LinkBox.tsx";
+import { Sizume, Twitter } from "@/components/Icons.tsx";
 import {
   SiBluesky,
-  SiBlueskyHex,
   SiDiscord,
-  SiDiscordHex,
   SiGithub,
-  SiGithubHex,
   SiGravatar,
-  SiGravatarHex,
   SiMatrix,
-  SiMatrixHex,
   SiMisskey,
-  SiMisskeyHex,
   SiPypi,
-  SiPypiHex,
   SiReddit,
-  SiRedditHex,
   SiScrapbox,
-  SiScrapboxHex,
-  SiTwitter,
-  SiTwitterHex,
   SiZenn,
-  SiZennHex,
-} from "@icons-pack/react-simple-icons";
+} from "react-icons/si";
 
 const links: LinkProps[] = [
   {
     href: "https://bsky.app/profile/4513echo.dev",
     name: "@4513echo.dev",
-    icon: <SiBluesky color={SiBlueskyHex} />,
+    icon: <SiBluesky size={24} color="#0285FF" />,
   },
   {
     href: "https://discord.com/users/807886286462517279",
     name: "響々",
-    icon: <SiDiscord color={SiDiscordHex} />,
+    icon: <SiDiscord size={24} color="#5865F2" />,
   },
   {
     href: "https://github.com/4513ECHO",
     name: "4513ECHO",
-    icon: <SiGithub color={SiGithubHex} />,
+    icon: <SiGithub size={24} color="#181717" />,
   },
   {
     href: "https://gravatar.com/4513echo",
     name: "4513echo",
-    icon: <SiGravatar color={SiGravatarHex} />,
+    icon: <SiGravatar size={24} color="#1E8CBE" />,
   },
   {
     href: "https://matrix.to/#/@4513echo:matrix.org",
     name: "@4513echo:matrix.org",
-    icon: <SiMatrix color={SiMatrixHex} />,
+    icon: <SiMatrix size={24} color="#000000" />,
   },
   {
     href: "https://mi.cbrx.io/@4513echo",
     name: "@4513echo@mi.cbrx.io",
-    icon: <SiMisskey color={SiMisskeyHex} />,
+    icon: <SiMisskey size={24} color="#A1CA03" />,
   },
   {
     href:
@@ -67,54 +55,55 @@ const links: LinkProps[] = [
   {
     href: "https://pypi.org/user/4513echo",
     name: "4513echo",
-    icon: <SiPypi color={SiPypiHex} />,
+    icon: <SiPypi size={24} color="#3775A9" />,
   },
   {
     href: "https://reddit.com/user/4513echo",
     name: "u/4513echo",
-    icon: <SiReddit color={SiRedditHex} />,
+    icon: <SiReddit size={24} color="#FF4500" />,
   },
   {
     href: "https://scrapbox.io/4513echo",
     name: "/4513echo",
-    icon: <SiScrapbox color={SiScrapboxHex} />,
+    icon: <SiScrapbox size={24} color="#06B632" />,
   },
   {
     href: "https://sizu.me/4513echo",
     name: "響",
-    icon: <Icons.Sizume />,
+    icon: <Sizume />,
   },
   {
     href: "https://twitter.com/4513echo",
     name: "@4513echo",
-    icon: <SiTwitter color={SiTwitterHex} />,
+    icon: <Twitter />,
   },
   {
     href: "https://zenn.dev/4513echo",
     name: "響",
-    icon: <SiZenn color={SiZennHex} />,
+    icon: <SiZenn size={24} color="#3EA8FF" />,
   },
 ];
 
-export default function Home() {
-  return (
-    <div class="p-4 mx-auto max-w-screen-md text(center gray-100)">
+export default createRoute((c) => {
+  return c.render(
+    <div className="p-4 mx-auto max-w-screen-md text-center text-gray-100">
       <img
         alt="My icon"
-        class="h-24 w-24 rounded-full m-auto"
-        src={iconUrl}
+        className="h-24 w-24 rounded-full m-auto"
+        src="https://www.gravatar.com/avatar/1179b2be2101d818dbb543537e6c3107?s=1024"
       />
-      <h1 class="text-lg font-mono p-4">4513echo.dev</h1>
-      <p class="p-4">
+      <h1 className="text-lg font-mono p-4">4513echo.dev</h1>
+      <p className="p-4">
         響です。
       </p>
       <nav>
-        <ul class="mx-6 space-y-2">
+        <ul className="mx-6 space-y-2">
           {links.map(({ href, name, icon }) => (
-            <Link href={href} name={name} icon={icon} />
+            <LinkBox key={name} href={href} name={name} icon={icon} />
           ))}
         </ul>
       </nav>
-    </div>
+    </div>,
+    { title: "4513echo.dev" },
   );
-}
+});
diff --git a/app/server.ts b/app/server.ts
new file mode 100644
index 0000000..0de9afb
--- /dev/null
+++ b/app/server.ts
@@ -0,0 +1,8 @@
+import { showRoutes } from "hono/dev";
+import { createApp } from "honox/server";
+
+const app = createApp();
+
+showRoutes(app);
+
+export default app;
diff --git a/app/style.css b/app/style.css
new file mode 100644
index 0000000..551bfd1
--- /dev/null
+++ b/app/style.css
@@ -0,0 +1 @@
+@import "tailwindcss" source("../app");
diff --git a/components/Link.tsx b/components/Link.tsx
deleted file mode 100644
index ee87966..0000000
--- a/components/Link.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import type { ComponentChildren } from "preact";
-
-export interface LinkProps {
-  href: string;
-  name: string;
-  icon: ComponentChildren | string;
-}
-
-export function Link(props: LinkProps) {
-  return (
-    <li class="py-2 rounded-full bg-gray-600 hover:bg-gray-500">
-      <a class="flex items-center" rel="me" href={props.href}>
-        {typeof props.icon === "string"
-          ? <img class="mx-4 w-6 h-6" src={props.icon} alt={props.name}></img>
-          : <div class="mx-4 w-6 h-6">{props.icon}</div>}
-        <p class="items-center text(sm gray-100) font-mono overflow-x-auto">
-          {props.name}
-        </p>
-      </a>
-    </li>
-  );
-}
diff --git a/deno.json b/deno.json
index a4d3f16..2091aa6 100644
--- a/deno.json
+++ b/deno.json
@@ -1,53 +1,55 @@
 {
   "compilerOptions": {
-    "jsx": "react-jsx",
-    "jsxImportSource": "preact",
     "lib": [
+      "esnext",
       "dom",
       "dom.asynciterable",
-      "deno.ns"
+      "deno.ns",
+      "deno.unstable"
     ],
-    "noUncheckedIndexedAccess": true,
-    "useUnknownInCatchVariables": true
+    "jsx": "react-jsx",
+    "jsxImportSource": "react",
+    "jsxImportSourceTypes": "@types/react",
+    "noUncheckedIndexedAccess": true
   },
   "exclude": [
-    "**/_fresh/*",
-    "fresh.gen.ts"
+    "dist"
   ],
   "lint": {
     "rules": {
       "include": [
         "eqeqeq",
         "no-await-in-loop"
-      ],
-      "tags": [
-        "recommended",
-        "fresh"
       ]
     }
   },
   "lock": false,
+  "nodeModulesDir": "auto",
   "tasks": {
-    "check": "deno fmt --check && deno lint && deno check **/*.ts **/*.tsx",
-    "build": "deno run --allow-all dev.ts build",
-    "convert_to_webp": "deno run --allow-read=. --allow-write=. scripts/convert_to_webp.ts",
-    "preview": "deno run --allow-all main.ts",
-    "start": "deno run --allow-all --watch=static/,routes/ dev.ts",
-    "update": "deno run --allow-all --reload https://fresh.deno.dev/update ."
+    "check": "deno fmt --check && deno lint && deno check .",
+    "convert_to_webp": "deno run -R=. -W=. scripts/convert_to_webp.ts",
+    "dev": "vite",
+    "build": "vite build --mode client && vite build",
+    "preview": "deno serve -ENR=. dist/index.js"
   },
   "imports": {
-    "$fresh/": "https://deno.land/x/fresh@1.6.8/",
-    "@/": "./",
-    "@core/unknownutil": "jsr:@core/unknownutil@^3.18.1",
-    "@headlessui/react": "https://esm.sh/@headlessui/react@2.0.4?alias=react:preact/compat,react-dom:preact/compat,@types/react:preact/compat&external=preact&target=es2022",
-    "@icons-pack/react-simple-icons": "https://esm.sh/@icons-pack/react-simple-icons@9.5.0?alias=react:preact/compat,react-dom:preact/compat,@types/react:preact/compat&external=preact&target=es2022",
-    "preact": "npm:preact@^10.22.0",
-    "@preact/signals": "npm:@preact/signals@^1.2.3",
-    "@std/crypto": "jsr:@std/crypto@^0.224.0",
-    "@std/encoding": "jsr:@std/encoding@^0.224.3",
-    "@std/http": "jsr:@std/http@^0.224.4",
-    "@twind/core": "npm:@twind/core@^1.1.3",
-    "@twind/preset-autoprefix": "npm:@twind/preset-autoprefix@^1.0.7",
-    "@twind/preset-tailwind": "npm:@twind/preset-tailwind@^1.1.4"
+    "@deno/vite-plugin": "npm:@deno/vite-plugin@^1.0.4",
+    "@hono/react-renderer": "npm:@hono/react-renderer@^0.3.0",
+    "@hono/vite-build": "npm:@hono/vite-build@^1.3.0",
+    "@hono/vite-dev-server": "npm:@hono/vite-dev-server@^0.18.1",
+    "@tailwindcss/vite": "npm:@tailwindcss/vite@^4.0.7",
+    "@types/react": "npm:@types/react@^19.0.10",
+    "hono": "npm:hono@^4.7.2",
+    "honox": "npm:honox@^0.1.34",
+    "react": "npm:react@^19.0.0",
+    "react-dom": "npm:react-dom@^19.0.0",
+    "react-icons": "npm:react-icons@^5.5.0",
+    "tailwindcss": "npm:tailwindcss@^4.0.7",
+    "vite": "npm:vite@^6.1.1",
+    "@/": "./app/",
+    "@core/unknownutil": "jsr:@core/unknownutil@^4.3.0",
+    "@std/crypto": "jsr:@std/crypto@^1.0.4",
+    "@std/encoding": "jsr:@std/encoding@^1.0.7",
+    "@std/http": "jsr:@std/http@^1.0.13"
   }
 }
diff --git a/dev.ts b/dev.ts
deleted file mode 100755
index 2d85d6c..0000000
--- a/dev.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-#!/usr/bin/env -S deno run -A --watch=static/,routes/
-
-import dev from "$fresh/dev.ts";
-
-await dev(import.meta.url, "./main.ts");
diff --git a/fresh.config.ts b/fresh.config.ts
deleted file mode 100644
index 8c6bd01..0000000
--- a/fresh.config.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { defineConfig } from "$fresh/server.ts";
-import twindPlugin, { type Options } from "$fresh/plugins/twindv1.ts";
-import twindConfig from "@/twind.config.ts";
-
-export default defineConfig({
-  plugins: [twindPlugin(twindConfig as Options)],
-});
diff --git a/fresh.gen.ts b/fresh.gen.ts
deleted file mode 100644
index 57cdd1a..0000000
--- a/fresh.gen.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-// DO NOT EDIT. This file is generated by Fresh.
-// This file SHOULD be checked into source version control.
-// This file is automatically updated during development when running `dev.ts`.
-
-import * as $_app from "./routes/_app.tsx";
-import * as $_middleware from "./routes/_middleware.ts";
-import * as $dot from "./routes/dot.ts";
-import * as $index from "./routes/index.tsx";
-import * as $Toggle from "./islands/Toggle.tsx";
-import { type Manifest } from "$fresh/server.ts";
-
-const manifest = {
-  routes: {
-    "./routes/_app.tsx": $_app,
-    "./routes/_middleware.ts": $_middleware,
-    "./routes/dot.ts": $dot,
-    "./routes/index.tsx": $index,
-  },
-  islands: {
-    "./islands/Toggle.tsx": $Toggle,
-  },
-  baseUrl: import.meta.url,
-} satisfies Manifest;
-
-export default manifest;
diff --git a/islands/Toggle.tsx b/islands/Toggle.tsx
deleted file mode 100644
index dc9f058..0000000
--- a/islands/Toggle.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { IS_BROWSER } from "$fresh/runtime.ts";
-import { useState } from "preact/hooks";
-import { Switch } from "@headlessui/react";
-
-export default function Toggle() {
-  const [enabled, setEnabled] = useState(false);
-
-  if (!IS_BROWSER) {
-    return <></>;
-  }
-
-  return (
-    <Switch
-      checked={enabled}
-      onChange={setEnabled}
-      class={`${
-        enabled ? "bg-blue-600" : "bg-gray-200"
-      } relative inline-flex h-6 w-11 items-center rounded-full focus:outline-none`}
-    >
-      <span class="sr-only">Enable notifications</span>
-      <span
-        class={`${
-          enabled ? "translate-x-6" : "translate-x-1"
-        } inline-block h-4 w-4 transform rounded-full bg-white transition`}
-      />
-    </Switch>
-  );
-}
diff --git a/main.ts b/main.ts
deleted file mode 100644
index 84f1dfe..0000000
--- a/main.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { start } from "$fresh/server.ts";
-import manifest from "@/fresh.gen.ts";
-import config from "@/fresh.config.ts";
-
-await start(manifest, config);
diff --git a/static/.well-known/nostr.json b/public/.well-known/nostr.json
similarity index 100%
rename from static/.well-known/nostr.json
rename to public/.well-known/nostr.json
diff --git a/static/icon.png b/public/icon.png
similarity index 100%
rename from static/icon.png
rename to public/icon.png
diff --git a/static/icon.webp b/public/icon.webp
similarity index 100%
rename from static/icon.webp
rename to public/icon.webp
diff --git a/static/robots.txt b/public/robots.txt
similarity index 100%
rename from static/robots.txt
rename to public/robots.txt
diff --git a/routes/_app.tsx b/routes/_app.tsx
deleted file mode 100644
index 0861d74..0000000
--- a/routes/_app.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import type { PageProps } from "$fresh/server.ts";
-import { Head } from "$fresh/runtime.ts";
-import { iconUrl } from "@/scripts/gravatar.ts";
-
-export default function App({ Component }: PageProps) {
-  return (
-    <>
-      <Head>
-        <title>4513echo.dev</title>
-        <meta name="description" content="響のポートフォリオです。" />
-        <meta name="theme-color" content="#8685b1" />
-        <meta property="og:title" content="4513echo.dev" />
-        <meta property="og:url" content="https://4513echo.dev" />
-        <meta property="og:description" content="響のポートフォリオです。" />
-        <meta property="og:image" content={iconUrl} />
-        <link rel="icon" href={iconUrl} />
-        <script
-          data-goatcounter="https://4513echo.goatcounter.com/count"
-          async
-          src="//gc.zgo.at/count.js"
-        >
-        </script>
-        <script
-          type="application/ld+json"
-          dangerouslySetInnerHTML={{
-            __html: JSON.stringify({
-              "@context": "http://schema.org",
-              "@type": "WebSite",
-              "name": "4513echo.dev",
-              "url": "https://4513echo.dev",
-              "author": { "@type": "Person", "name": "響" },
-            }),
-          }}
-        />
-      </Head>
-      <body class="bg-[#8685b1]">
-        <Component />
-      </body>
-    </>
-  );
-}
diff --git a/routes/_middleware.ts b/routes/_middleware.ts
deleted file mode 100644
index 34b4802..0000000
--- a/routes/_middleware.ts
+++ /dev/null
@@ -1,65 +0,0 @@
-import type { FreshContext } from "$fresh/server.ts";
-
-export const handler = [logger];
-
-enum LogPrefix {
-  Outgoing = "-->",
-  Incoming = "<--",
-}
-
-function formatTime(start: number): string {
-  const delta = Date.now() - start;
-  return delta < 100 ? `${delta}ms` : `${Math.round(delta / 1000)}s`;
-}
-
-const color: Record<string, string> = {
-  7: "#800080",
-  5: "#800000",
-  4: "#808000",
-  3: "#008080",
-  2: "#008000",
-  1: "#008000",
-  0: "#808000",
-};
-
-function log(
-  func: (...data: unknown[]) => void,
-  prefix: LogPrefix,
-  method: string,
-  path: string,
-  status = 0,
-  elapsed?: string,
-): void {
-  const out = prefix === LogPrefix.Incoming
-    ? `%c${prefix} %c${method} ${path} %c%c`
-    : `%c${prefix} %c${method} ${path} %c${status} %c${elapsed}`;
-  func(
-    out,
-    "color: #808080",
-    "",
-    `color: ${color[(status / 100) | 0]}`,
-    "",
-  );
-}
-
-async function logger(req: Request, ctx: FreshContext): Promise<Response> {
-  const { search, pathname } = new URL(req.url);
-  const [method, path] = [req.method, pathname + search];
-  const func = pathname.startsWith("/_frsh/") ? console.debug : console.log;
-
-  log(func, LogPrefix.Incoming, method, path);
-
-  const startTime = Date.now();
-  const res = await ctx.next();
-
-  log(
-    func,
-    LogPrefix.Outgoing,
-    method,
-    path,
-    res.status,
-    formatTime(startTime),
-  );
-
-  return res;
-}
diff --git a/scripts/gravatar.ts b/scripts/gravatar.ts
deleted file mode 100644
index 5eb2556..0000000
--- a/scripts/gravatar.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { crypto } from "@std/crypto/crypto";
-import { encodeHex } from "@std/encoding/hex";
-
-const encoder = new TextEncoder();
-
-export async function createUrl(
-  email: string,
-  options?: { size?: number },
-): Promise<string> {
-  const hash = await crypto.subtle.digest("MD5", encoder.encode(email));
-  const searchParams = options?.size ? `?s=${options.size}` : "";
-  return `https://www.gravatar.com/avatar/${encodeHex(hash)}${searchParams}`;
-}
-
-export const iconUrl = await createUrl("mail@4513echo.dev", { size: 1024 });
diff --git a/twind.config.ts b/twind.config.ts
deleted file mode 100644
index 80e53de..0000000
--- a/twind.config.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { defineConfig } from "@twind/core";
-import presetTailwind from "@twind/preset-tailwind";
-import presetAutoprefix from "@twind/preset-autoprefix";
-
-export default {
-  ...defineConfig({
-    presets: [presetTailwind(), presetAutoprefix()],
-  }),
-  selfURL: import.meta.url,
-};
diff --git a/vite.config.ts b/vite.config.ts
new file mode 100644
index 0000000..87265bd
--- /dev/null
+++ b/vite.config.ts
@@ -0,0 +1,21 @@
+import deno from "@deno/vite-plugin";
+import build from "@hono/vite-build/deno";
+import adapter from "@hono/vite-dev-server/node";
+import tailwindcss from "@tailwindcss/vite";
+import honox from "honox/vite";
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  cacheDir: "node_modules/.vite",
+  ssr: { external: ["react", "react-dom"] },
+  esbuild: { jsx: "automatic" },
+  plugins: [
+    deno(),
+    honox({
+      devServer: { adapter },
+      client: { jsxImportSource: "react", input: ["/app/style.css"] },
+    }),
+    build({ external: ["hono"], staticRoot: "dist" }),
+    tailwindcss(),
+  ],
+});