feat(blog): building a blog environment using honox

cellajs · Mar 19, 2024 · 702ecaf · 702ecaf
1 parent 84d2ff7
commit 702ecaf
Show file tree

Hide file tree

Showing 12 changed files with 632 additions and 80 deletions.
diff --git a/blog/.gitignore b/blog/.gitignore
@@ -0,0 +1,12 @@
+node_modules
+dist
+.wrangler
+.dev.vars
+.hono
+
+# Change them to your taste:
+wrangler.toml
+package-lock.json
+yarn.lock
+pnpm-lock.yaml
+bun.lockb
diff --git a/blog/app/client.ts b/blog/app/client.ts
@@ -0,0 +1,3 @@
+import { createClient } from 'honox/client'
+
+createClient()
diff --git a/blog/app/global.d.ts b/blog/app/global.d.ts
@@ -0,0 +1,15 @@
+import {} from 'hono'
+
+type Head = {
+  title?: string
+}
+
+declare module 'hono' {
+  interface Env {
+    Variables: {}
+    Bindings: {}
+  }
+  interface ContextRenderer {
+    (content: string | Promise<string>, head?: Head): Response | Promise<Response>
+  }
+}
diff --git a/blog/app/islands/counter.tsx b/blog/app/islands/counter.tsx
@@ -0,0 +1,11 @@
+import { useState } from 'hono/jsx'
+
+export default function Counter() {
+  const [count, setCount] = useState(0)
+  return (
+    <div>
+      <p>{count}</p>
+      <button onClick={() => setCount(count + 1)}>Increment</button>
+    </div>
+  )
+}
diff --git a/blog/app/routes/_renderer.tsx b/blog/app/routes/_renderer.tsx
@@ -0,0 +1,18 @@
+import { Style } from 'hono/css'
+import { jsxRenderer } from 'hono/jsx-renderer'
+import { Script } from 'honox/server'
+
+export default jsxRenderer(({ children, title }) => {
+  return (
+    <html lang="en">
+      <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>{title}</title>
+        <Script src="/app/client.ts" async />
+        <Style />
+      </head>
+      <body>{children}</body>
+    </html>
+  )
+})
diff --git a/blog/app/routes/index.tsx b/blog/app/routes/index.tsx
@@ -0,0 +1,18 @@
+import { css } from 'hono/css'
+import { createRoute } from 'honox/factory'
+import Counter from '../islands/counter'
+
+const className = css`
+  font-family: sans-serif;
+`
+
+export default createRoute((c) => {
+  const name = c.req.query('name') ?? 'Hono'
+  return c.render(
+    <div class={className}>
+      <h1>Hello, {name}!</h1>
+      <Counter />
+    </div>,
+    { title: name }
+  )
+})
diff --git a/blog/app/server.ts b/blog/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/blog/package.json b/blog/package.json
@@ -0,0 +1,20 @@
+{
+  "name": "blog",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build --mode client && vite build",
+    "preview": "wrangler pages dev ./dist",
+    "deploy": "$npm_execpath run build && wrangler pages deploy ./dist"
+  },
+  "dependencies": {
+    "hono": "^4.1.2",
+    "honox": "^0.1.9"
+  },
+  "devDependencies": {
+    "@cloudflare/workers-types": "^4.20240208.0",
+    "@hono/vite-cloudflare-pages": "^0.2.4",
+    "vite": "^5.0.12",
+    "wrangler": "^3.32.0"
+  }
+}
diff --git a/blog/tsconfig.json b/blog/tsconfig.json
@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "strict": true,
+    "lib": ["ESNext", "DOM"],
+    "types": ["@cloudflare/workers-types"],
+    "jsx": "react-jsx",
+    "jsxImportSource": "hono/jsx"
+  }
+}
diff --git a/blog/vite.config.ts b/blog/vite.config.ts
@@ -0,0 +1,15 @@
+import pages from "@hono/vite-cloudflare-pages";
+import honox from "honox/vite";
+import client from "honox/vite/client";
+import { defineConfig } from "vite";
+
+export default defineConfig(({ mode }) => {
+  if (mode === "client") {
+    return {
+      plugins: [client()],
+    };
+  }
+  return {
+    plugins: [honox(), pages()],
+  };
+});