feat: Replace fresh with honox

.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

.gitignore

@@ -1 +1,2 @@
-/_fresh
+/dist
+/node_modules

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);
+  },
+});

components/Icons.tsx → 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>
+  );
+}

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>
+  );
+}

app/global.d.ts

@@ -0,0 +1,8 @@
+import "hono";
+import "@hono/react-renderer";
+
+declare module "@hono/react-renderer" {
+  interface Props {
+    title?: string;
+  }
+}

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;

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;

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>
+  );
+});

routes/dot.ts → 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);
-}
+});

routes/index.tsx → 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" },
   );
-}
+});

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;

app/style.css

@@ -0,0 +1 @@
+@import "tailwindcss" source("../app");