58fbdf5 | website

git clone https://git.pyrossh.dev/website

木 Personal website of pyrossh. Built with astrojs, shiki, vite.

58fbdf5 — pyrossh 2026-07-08T19:37:29+05:30

docs: add implementation plan for Hono rewrite

Files changed (1) hide show

docs/superpowers/plans/2026-07-08-honox-rewrite.md +1279 -0

docs/superpowers/plans/2026-07-08-honox-rewrite.md ADDED Viewed

@@ -0,0 +1,1279 @@
+# Hono Rewrite Implementation Plan
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task.
+**Goal:** Rewrite pyrossh.dev from a 22-package monorepo to a single Hono application with `hono/html` for templating, `s3mini` for storage, and HTMX for interactivity.
+**Architecture:** Single `src/` directory. Hono app with all routes in `src/index.ts`. Components in `src/components/`. Business logic in `src/lib/`. Static assets served by wrangler's `assets.directory`. S3-compatible storage via `s3mini` from env vars (no R2 bindings).
+**Tech Stack:** Hono (html, jsx, css), s3mini, HTMX, wrangler
+## Global Constraints
+- `hono/html` tagged templates for HTML rendering (no JSX, no `.tsx` files)
+- All storage via `s3mini` S3 client — no R2 bucket bindings
+- No monorepo, no pnpm workspaces, no shared packages
+- TypeScript strict mode, `"moduleResolution": "bundler"`
+- All source files are `.ts`
+- `wrangler.jsonc` uses `assets.directory` for static files
+- Config values and types exported from `src/config.ts` and `src/types.ts`
+- `hono/html` tagged templates: `import { html } from 'hono/html'` — use `${expr}` for interpolation, arrays auto-join
+- The `Layout` wrapper function is defined in `src/index.ts`
+- R2Bucket parameters change to `S3mini` from `s3mini` package
+- `bucket.get(key)` → `s3.getObject(key)` (returns string | null)
+- `bucket.get(key).bytes()` → `new Uint8Array(await s3.getObjectArrayBuffer(key) ?? new ArrayBuffer(0))`
+- `bucket.get(key).text()` → `s3.getObject(key)`
+- `bucket.list({prefix})` → `s3.listObjects('/', prefix)` (auto-paginated)
+- `bucket.put(key, data, opts)` → `s3.putObject(key, data, contentType)`
+- `bucket.get(key, {range})` → `s3.getObjectRaw(key, false, offset, end)` then `.arrayBuffer()`
+---
+### Task 1: Scaffold + Foundation (config, types, s3)
+**Files:**
+- Create: `package.json`
+- Create: `tsconfig.json`
+- Create: `wrangler.jsonc`
+- Create: `src/config.ts`
+- Create: `src/types.ts`
+- Create: `src/s3.ts`
+**Interfaces:**
+- Consumes: nothing
+- Produces: `SITE_TITLE`, `REPOS`, `TOOLS`, `NAV_ITEMS`, `SITE_URL`, `SITE_DESCRIPTION` from `config.ts`; `RuntimePost`, `RuntimeRepo`, `Commit`, `FileEntry`, `FileNode`, `GitBugIssue`, `GitBugComment`, `GitBugIssuesResult`, `GitBugIssueState` from `types.ts`; `getS3(): S3mini` from `s3.ts`
+- [ ] **Step 1: Create `package.json`**
+```json
+{
+  "name": "pyrossh-dev",
+  "type": "module",
+  "scripts": {
+    "dev": "wrangler dev",
+    "deploy": "wrangler deploy",
+    "cf-typegen": "wrangler types"
+  },
+  "dependencies": {
+    "hono": "^4.7.5",
+    "s3mini": "^0.9.5"
+  },
+  "devDependencies": {
+    "@cloudflare/workers-types": "^4.20250214.0",
+    "wrangler": "^4.0.0",
+    "typescript": "^5.7.0"
+  }
+}
+```
+- [ ] **Step 2: Create `tsconfig.json`**
+```json
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "skipLibCheck": true,
+    "noEmit": true,
+    "isolatedModules": true,
+    "types": ["@cloudflare/workers-types"]
+  },
+  "include": ["src"]
+}
+```
+No JSX config needed — `hono/html` uses tagged template literals, not JSX.
+- [ ] **Step 3: Create `wrangler.jsonc`**
+```json
+{
+  "$schema": "node_modules/wrangler/config-schema.json",
+  "name": "pyrossh-website",
+  "main": "src/index.ts",
+  "compatibility_date": "2026-07-07",
+  "compatibility_flags": ["nodejs_compat"],
+  "assets": { "directory": "assets" },
+  "vars": {
+    "S3_ENDPOINT": "https://account-id.r2.cloudflarestorage.com/pyrossh-repos-prd",
+    "S3_REGION": "auto"
+  },
+  "routes": [{ "pattern": "pyrossh.dev", "custom_domain": true }]
+}
+```
+Replace `account-id` with actual account ID. `S3_ACCESS_KEY_ID` and `S3_SECRET_ACCESS_KEY` are set as secrets.
+- [ ] **Step 4: Create `src/config.ts`**
+Copy verbatim from `packages/shared/config/src/index.ts`. Same exports: `SITE_TITLE`, `SITE_DESCRIPTION`, `REPOS`, `TOOLS`, `NAV_ITEMS`, `SITE_URL`.
+```bash
+cp packages/shared/config/src/index.ts src/config.ts
+```
+- [ ] **Step 5: Create `src/types.ts`**
+Copy from `packages/shared/types/src/index.ts`, removing the `Env` export (no R2 binding):
+```typescript
+export interface Commit {
+  hash: string;
+  author_name: string;
+  date: string;
+  message: string;
+  body?: string;
+}
+export interface FileEntry {
+  name: string;
+  size: number;
+  ext: string;
+  absolutePath: string;
+}
+export interface FileNode {
+  name: string;
+  path: string;
+  size: number;
+  ext: string;
+  absolutePath: string;
+  isDirectory: boolean;
+  children?: FileNode[];
+}
+export interface RuntimeRepo {
+  id: string;
+  data: {
+    title: string;
+    description: string;
+    tags: string[];
+  };
+}
+export interface RuntimePost {
+  id: string;
+  data: {
+    title: string;
+    description: string;
+    pubDate: Date;
+    updatedDate?: Date;
+    heroImage?: string;
+  };
+  body: string;
+  html: string;
+}
+export type GitBugIssueState = "open" | "closed";
+export interface GitBugIssue {
+  id: string;
+  title: string;
+  state: GitBugIssueState;
+  author?: string;
+  createdAt: string;
+  updatedAt: string;
+  labels: string[];
+  body?: string;
+  comments: GitBugComment[];
+}
+export interface GitBugComment {
+  id: string;
+  author?: string;
+  createdAt: string;
+  body: string;
+}
+export interface GitBugIssuesResult {
+  issues: GitBugIssue[];
+  isAvailable: boolean;
+}
+```
+- [ ] **Step 6: Create `src/s3.ts`**
+```typescript
+import { S3mini } from 's3mini'
+let _s3: S3mini | null = null
+export const getS3 = (): S3mini => {
+  if (!_s3) {
+    _s3 = new S3mini({
+      accessKeyId: process.env.S3_ACCESS_KEY_ID!,
+      secretAccessKey: process.env.S3_SECRET_ACCESS_KEY!,
+      endpoint: process.env.S3_ENDPOINT!,
+      region: process.env.S3_REGION ?? 'auto',
+    })
+  }
+  return _s3
+}
+```
+- [ ] **Step 7: Commit**
+```bash
+git add package.json tsconfig.json wrangler.jsonc src/config.ts src/types.ts src/s3.ts
+git commit -m "feat: scaffold Hono app with config, types, and S3 client"
+```
+---
+### Task 2: Port Core Libraries
+**Files:**
+- Create: `src/lib/markdown.ts`
+- Create: `src/lib/repoContent.ts`
+- Create: `src/lib/content.ts`
+- Create: `src/lib/files.ts`
+- Create: `src/lib/gitBug.ts`
+- Create: `src/lib/gitReader.ts`
+**Interfaces:**
+- Consumes: `getS3()`, `RuntimePost`, `RuntimeRepo`, `FileNode`, etc., `S3mini` type
+- Produces: `renderMarkdown(md)`, `getPosts(s3)`, `getPost(s3, id)`, `getRepoReadme(s3, repoId)`, `getRepos()`, `getRepo(id)`, `getCommits(s3, repoId)`, `getFiles(s3, repoId)`, `getFileHistory(s3, repoId, path)`, `getFileContentData(s3, repoId, path)`, `generateHTMLDiff(s3, repoId, hash)`, `buildFileTree`, `sortChildren`, `resolveFolderIcon`, `resolveFileIcon`, `getGitBugIssues(s3, repoId)`, `getGitBugIssue(s3, repoId, id)`, `createGitBugIssue(s3, repoId, data)`, `addGitBugIssueComment(s3, repoId, id, data)`, `setGitBugIssueState(s3, repoId, id, state, author)`
+- [ ] **Step 1: Create `src/lib/markdown.ts`**
+Copy from `packages/shared/core/src/markdown.ts` verbatim — no S3 dependency. Also add the `@pyrossh/core` dependencies to package.json (`unified`, `remark-parse`, `remark-rehype`, `rehype-stringify`, `rehype-expressive-code`, `gray-matter`).
+```bash
+cp packages/shared/core/src/markdown.ts src/lib/markdown.ts
+```
+Add these to package.json dependencies (copied from current root package.json):
+```json
+"dependencies": {
+  "hono": "^4.7.5",
+  "s3mini": "^0.9.5",
+  "gray-matter": "^4.0.3",
+  "unified": "^11.0.0",
+  "remark-parse": "^11.0.0",
+  "remark-rehype": "^11.1.2",
+  "rehype-stringify": "^10.0.1",
+  "rehype-expressive-code": "^0.44.0",
+  "diff": "^9.0.0",
+  "pretty-bytes": "^7.1.0",
+  "diff2html": "^3.4.52"
+}
+```
+- [ ] **Step 2: Create `src/lib/repoContent.ts`**
+Replace `R2Bucket` with `S3mini`:
+```typescript
+import { S3mini } from 's3mini'
+export const getRepoReadme = async (
+  s3: S3mini,
+  repoId: string,
+): Promise<string | undefined> => {
+  return (await s3.getObject(`${repoId}/README.md`)) ?? undefined
+}
+```
+- [ ] **Step 3: Create `src/lib/files.ts`**
+Copy from `packages/shared/core/src/files.ts` verbatim. No S3 dependency — only depends on `vscode-icons` for icon resolution. File tree logic is pure computation.
+```bash
+cp packages/shared/core/src/files.ts src/lib/files.ts
+```
+- [ ] **Step 4: Create `src/lib/content.ts`**
+Replace `R2Bucket` with `S3mini`, change `bucket.list()` and `bucket.get()` to s3mini equivalents:
+```typescript
+import matter from 'gray-matter'
+import { S3mini } from 's3mini'
+import type { RuntimePost } from '../types'
+import { renderMarkdown } from './markdown'
+const toDate = (value: unknown) => (value instanceof Date ? value : new Date(String(value)))
+const CONTENT_PREFIX = 'content/'
+export const getPosts = async (s3: S3mini): Promise<RuntimePost[]> => {
+  const objects = await s3.listObjects('/', CONTENT_PREFIX)
+  if (!objects) return []
+  const posts: RuntimePost[] = []
+  for (const obj of objects) {
+    if (!obj.Key.endsWith('.md') && !obj.Key.endsWith('.mdx')) continue
+    const source = await s3.getObject(obj.Key)
+    if (!source) continue
+    const parsed = matter(source)
+    const id = obj.Key.replace(CONTENT_PREFIX, '').replace(/\.(md|mdx)$/, '')
+    posts.push({
+      id,
+      data: {
+        title: String(parsed.data.title ?? ''),
+        description: String(parsed.data.description ?? ''),
+        pubDate: toDate(parsed.data.pubDate),
+        updatedDate: parsed.data.updatedDate ? toDate(parsed.data.updatedDate) : undefined,
+        heroImage: parsed.data.heroImage ? String(parsed.data.heroImage) : undefined,
+      },
+      body: parsed.content,
+      html: await renderMarkdown(parsed.content),
+    })
+  }
+  return posts.sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf())
+}
+export const getPost = async (s3: S3mini, postId?: string) => {
+  const posts = await getPosts(s3)
+  return posts.find((post) => post.id === postId)
+}
+```
+- [ ] **Step 5: Create `src/lib/gitBug.ts`**
+Port from `packages/shared/core/src/gitBug.ts`. Replace `R2Bucket` with `S3mini`. Key changes:
+```typescript
+import { S3mini } from 's3mini'
+import type { GitBugIssue, GitBugIssueState, GitBugIssuesResult, GitBugComment } from '../types'
+const safeRepoId = (repoId: string) => {
+  if (!/^[a-zA-Z0-9._-]+$/.test(repoId)) throw new Error('Invalid repository id.')
+  return repoId
+}
+const safeIssueId = (issueId: string) => {
+  if (!/^[a-f0-9]{16}$/.test(issueId)) throw new Error('Invalid issue id.')
+  return issueId
+}
+const makeIssueId = () => crypto.randomUUID().replaceAll('-', '').slice(0, 16)
+const issuesPrefix = (repoId: string) => `${safeRepoId(repoId)}/issues/`
+const issueKey = (repoId: string, issueId: string) => `${issuesPrefix(repoId)}${safeIssueId(issueId)}.json`
+const getObjectJson = async <T>(s3: S3mini, key: string): Promise<T | undefined> => {
+  try {
+    const body = await s3.getObject(key)
+    return body ? (JSON.parse(body) as T) : undefined
+  } catch { return undefined }
+}
+const putIssue = async (s3: S3mini, repoId: string, issue: GitBugIssue) => {
+  await s3.putObject(issueKey(repoId, issue.id), JSON.stringify(issue, null, 2), 'application/json; charset=utf-8')
+  return issue
+}
+// Replace all `bucket: R2Bucket` with `s3: S3mini` and `bucket.get()` → `s3.getObject()`, `bucket.list()` → `s3.listObjects()`, `bucket.put()` → `s3.putObject()`
+// Remove spamscanner import (not available on Workers — replace with a no-op or skip spam check)
+// Full function signatures change: `async (bucket: R2Bucket, ...)` → `async (s3: S3mini, ...)`
+```
+Full file content follows the same patterns as the original `gitBug.ts` but with these replacements:
+- `bucket: R2Bucket` → `s3: S3mini` in all function signatures
+- `bucket.get(key)` → `s3.getObject(key)`
+- `bucket.list({prefix})` → `s3.listObjects('/', prefix)`
+- `bucket.put(key, data, { httpMetadata })` → `s3.putObject(key, data, contentType)`
+- `getObjectJson<T>(bucket, key)` → `getObjectJson<T>(s3, key)`
+- Remove the spamscanner section or guard it with try/catch (it fails on Workers)
+- [ ] **Step 6: Create `src/lib/gitReader.ts`**
+This is the most complex port. Port from `packages/shared/core/src/gitReader.ts` (700+ lines). Change all helper functions from `R2Bucket` to `S3mini`:
+```typescript
+import { S3mini } from 's3mini'
+import type { FileNode } from '../types'
+// ... (all existing type definitions and functions unchanged)
+// Replace the three bucket helpers:
+const readText = async (s3: S3mini, key: string): Promise<string | null> => {
+  return await s3.getObject(key)
+}
+const readBytes = async (s3: S3mini, key: string): Promise<Uint8Array | null> => {
+  const buf = await s3.getObjectArrayBuffer(key)
+  return buf ? new Uint8Array(buf) : null
+}
+const readRange = async (s3: S3mini, key: string, offset: number, length: number): Promise<Uint8Array | null> => {
+  const end = offset + length - 1
+  const response = await s3.getObjectRaw(key, false, offset, end)
+  if (!response.ok) return null
+  const buf = await response.arrayBuffer()
+  return new Uint8Array(buf)
+}
+```
+Then replace every `bucket: R2Bucket` parameter with `s3: S3mini` in all internal and exported functions. The rest of the git logic (pack parsing, delta application, tree walking, diff generation) remains identical.
+Exported functions signature changes:
+- `getCommits(bucket, repoId)` → `getCommits(s3, repoId)`
+- `getFiles(bucket, repoId)` → `getFiles(s3, repoId)` (replace `bucket.list()` with `s3.listObjects()`)
+- `getFileHistory(bucket, repoId, path)` → `getFileHistory(s3, repoId, path)`
+- `getFileContentData(bucket, repoId, path)` → `getFileContentData(s3, repoId, path)`
+- `generateHTMLDiff(bucket, repoId, hash)` → `generateHTMLDiff(s3, repoId, hash)`
+For `getFiles`, replace pagination loop:
+```typescript
+// Before:
+const result = await bucket.list({ prefix, cursor })
+for (const obj of result.objects) { ... }
+cursor = result.truncated ? result.cursor : undefined
+// After:
+const objects = await s3.listObjects('/', prefix)
+if (!objects) return []
+for (const obj of objects) { ... }
+// s3mini auto-paginates — no cursor needed
+```
+- [ ] **Step 7: Commit**
+```bash
+git add src/lib/ package.json
+git commit -m "feat: port core libraries to S3mini and Hono app structure"
+```
+---
+### Task 3: Port UI Components
+**Files:**
+- Create: `src/components/header.ts`
+- Create: `src/components/footer.ts`
+- Create: `src/components/repo-layout.ts`
+- Create: `src/components/file-layout.ts`
+- Create: `src/components/commit-entry.ts`
+- Create: `src/components/issue-card.ts`
+- Create: `src/components/file-tree.ts`
+- Create: `src/components/formatted-date.ts`
+**Interfaces:**
+- Consumes: `html` from `hono/html`, `NAV_ITEMS` from `../config`, `RuntimeRepo`, `GitBugIssue`, `FileNode` from `../types`
+- Produces: Component functions returning `HtmlEscapedString | Promise<HtmlEscapedString>` — used by route handlers in `src/index.ts`
+All components use `hono/html` tagged templates instead of JSX. Pattern for converting JSX → tagged template:
+```typescript
+// JSX (before): <div class="foo">{variable}</div>
+// Tagged template (after): html`<div class="foo">${variable}</div>`
+```
+Key differences:
+- No `.tsx` extension — files are `.ts`
+- Import `html` from `hono/html`
+- Template literals use `${expr}` instead of `{expr}`
+- Components are functions that return `html` `...`  `` results
+- Children are passed as props, not as JSX children
+- `props.children` is included via `${props.children}` in the template
+- Arrays from `.map()` are auto-joined in hono/html templates
+- For raw/untrusted HTML, use the `raw` helper or just inline it (hono/html doesn't double-escape)
+- [ ] **Step 1: Create `src/components/header.ts`**
+```typescript
+import { html } from 'hono/html'
+import { NAV_ITEMS } from '../config'
+export const Header = (props: { currentPath?: string }) => html`
+<header>
+  <div class="wrapper">
+    <nav>
+      <a href="/" class="logo${props.currentPath === '/' ? ' active' : ''}">
+        木 pyrossh
+      </a>
+      <div class="links">
+        <span id="astro-color-scheme-switch">
+          <button id="theme-change" type="button"
+            onclick="document.documentElement.toggleAttribute('data-theme')">
+            <svg style="display:var(--btn-light)" viewBox="0 0 24 24" width="1.2em" height="1.2em">
+              <path fill="currentColor" d="M11.288 4.713Q11 4.425 11 4V2q0-.425.288-.712T12 1t.713.288T13 2v2q0 .425-.288.713T12 5t-.712-.288M16.95 7.05q-.275-.275-.275-.687t.275-.713l1.4-1.425q.3-.3.712-.3t.713.3q.275.275.275.7t-.275.7L18.35 7.05q-.275.275-.7.275t-.7-.275M20 13q-.425 0-.713-.288T19 12t.288-.712T20 11h2q.425 0 .713.288T23 12t-.288.713T22 13zm-8.712 9.713Q11 22.425 11 22v-2q0-.425.288-.712T12 19t.713.288T13 20v2q0 .425-.288.713T12 23t-.712-.288M5.65 7.05l-1.425-1.4q-.3-.3-.3-.725t.3-.7q.275-.275.7-.275t.7.275L7.05 5.65q.275.275.275.7t-.275.7q-.3.275-.7.275t-.7-.275m12.7 12.725l-1.4-1.425q-.275-.3-.275-.712t.275-.688t.688-.275t.712.275l1.425 1.4q.3.275.288.7t-.288.725q-.3.3-.725.3t-.7-.3M2 13q-.425 0-.712-.288T1 12t.288-.712T2 11h2q.425 0 .713.288T5 12t-.288.713T4 13zm2.225 6.775q-.275-.275-.275-.7t.275-.7L5.65 16.95q.275-.275.687-.275t.713.275q.3.3.3.713t-.3.712l-1.4 1.4q-.3.3-.725.3t-.7-.3M7.75 16.25Q6 14.5 6 12t1.75-4.25T12 6t4.25 1.75T18 12t-1.75 4.25T12 18t-4.25-1.75"/>
+            </svg>
+            <svg style="display:var(--btn-dark)" viewBox="0 0 24 24" width="1.2em" height="1.2em">
+              <path fill="currentColor" d="m15 8l-3-3l3-3l3 3zm5 3l-2-2l2-2l2 2zm-7.925 11q-2.1 0-3.937-.8t-3.2-2.162t-2.163-3.2t-.8-3.938q0-3.65 2.325-6.437T10.225 2q-.45 2.475.275 4.838t2.5 4.137t4.138 2.5t4.837.275q-.65 3.6-3.45 5.925T12.075 22"/>
+            </svg>
+          </button>
+        </span>
+        <div>|</div>
+        ${NAV_ITEMS.map((item) => html`
+          <a href="${item.href}" class="${props.currentPath?.startsWith(item.href) ? 'active' : ''}">
+            ${item.label}
+          </a>
+          <div>|</div>
+        `)}
+      </div>
+    </nav>
+  </div>
+</header>
+<div class="safe-area" />
+`
+```
+- [ ] **Step 2: Create `src/components/footer.ts`**
+```typescript
+import { html } from 'hono/html'
+export const Footer = () => html`
+<footer>
+  <div class="wrapper">
+    <div class="container">
+      <div class="spacer" />
+      <p class="copyright-container">
+        Copyright © ${new Date().getFullYear()}
+        <a class="link" href="https://pyrossh.dev">pyrossh</a>
+      </p>
+    </div>
+  </div>
+</footer>
+<div class="safe-area" />
+`
+```
+- [ ] **Step 3: Create `src/components/formatted-date.ts`**
+```typescript
+import { html } from 'hono/html'
+export const FormattedDate = (props: { date: Date }) => html`
+<time datetime="${props.date.toISOString()}">
+  ${new Intl.DateTimeFormat('en-GB', { dateStyle: 'long' }).format(new Date(props.date))}
+</time>
+`
+```
+- [ ] **Step 4: Create `src/components/commit-entry.ts`**
+```typescript
+import { html } from 'hono/html'
+export const CommitEntry = (props: {
+  repoId: string
+  commit: { hash: string; author_name?: string; author?: string; date?: string; message: string; body?: string }
+}) => {
+  const author = props.commit.author_name || props.commit.author || ''
+  return html`
+<div class="commit-entry">
+  <div>
+    <a href="/repos/${props.repoId}/commits/${props.commit.hash}" title="${props.commit.hash}" rel="nofollow">
+      ${props.commit.hash.substring(0, 8)}
+    </a>
+    —<strong>${author}</strong>
+    <small class="pull-right">
+      ${props.commit.date ? html`
+        <span>${new Date(props.commit.date).toLocaleDateString('en', { year: 'numeric', month: 'short', day: 'numeric' })}</span>
+      ` : ''}
+    </small>
+  </div>
+  <pre class="commit">${props.commit.message}</pre>
+</div>`
+}
+```
+- [ ] **Step 5: Create `src/components/issue-card.ts`**
+```typescript
+import { html } from 'hono/html'
+import type { GitBugIssue } from '../types'
+export const IssueCard = (props: { repoId: string; issue: GitBugIssue }) => {
+  const { issue, repoId } = props
+  const date = issue.updatedAt ?? issue.createdAt
+  return html`
+<article class="issue-card">
+  <div class="issue-title">
+    <a href="/repos/${repoId}/issues/${issue.id}" title="${issue.id}">${issue.title}</a>
+    <span class="state ${issue.state}">${issue.state}</span>
+  </div>
+  <div class="meta">
+    <a href="/repos/${repoId}/issues/${issue.id}" title="${issue.id}">${issue.id.substring(0, 8)}</a>
+    ${issue.author ? html`<span>by ${issue.author}</span>` : ''}
+    ${date ? html`<span>${new Date(date).toLocaleDateString('en', { year: 'numeric', month: 'short', day: 'numeric' })}</span>` : ''}
+    ${issue.comments.length > 0 ? html`<span>${issue.comments.length} comments</span>` : ''}
+  </div>
+  ${issue.labels.length > 0 ? html`
+    <div class="labels">
+      ${issue.labels.map(label => html`<span class="label">#${label}</span>`)}
+    </div>
+  ` : ''}
+</article>`
+}
+```
+- [ ] **Step 6: Create `src/components/file-tree.ts`**
+```typescript
+import { html } from 'hono/html'
+import type { FileNode } from '../types'
+const FileTreeItem = (props: { node: FileNode; repoId: string }) => {
+  const { node, repoId } = props
+  const href = `/repos/${repoId}/files/${node.path}`
+  if (node.isDirectory && node.children) {
+    return html`
+<li>
+  <details open="true">
+    <summary>
+      <a href="${href}" hx-get="${href}" hx-target="#tab-content" hx-push-url="true">${node.name}/</a>
+    </summary>
+    <ul>
+      ${node.children.map(child => FileTreeItem({ node: child, repoId }))}
+    </ul>
+  </details>
+</li>`
+  }
+  return html`
+<li>
+  <a href="${href}" hx-get="${href}" hx-target="#tab-content" hx-push-url="true">${node.name}</a>
+</li>`
+}
+export const FileTree = (props: { nodes: FileNode[]; repoId: string }) => html`
+<div class="file-tree">
+  <ul>
+    ${props.nodes.map(node => FileTreeItem({ node, repoId: props.repoId }))}
+  </ul>
+</div>`
+```
+- [ ] **Step 7: Create `src/components/repo-layout.ts`**
+Wraps children in a repo-specific layout (header, description, tabs). The `Layout` (full HTML document) is applied by the route handler — RepoLayout only provides the repo content section:
+```typescript
+import { html } from 'hono/html'
+import type { RuntimeRepo } from '../types'
+export const RepoLayout = (props: {
+  repo: RuntimeRepo
+  currentTab: string
+  children: any
+}) => {
+  const { repo, currentTab, children } = props
+  const { title, description, tags } = repo.data
+  return html`
+<div class="repo" style="padding:0.5rem;background:var(--color-box-bg);font-size:0.95rem">
+  <div class="header" style="display:flex;flex-direction:row;align-items:baseline">
+    <h1 style="font-size:1.6rem;font-weight:500;margin-bottom:0.1rem;flex:1;margin:0">
+      <a href="/" style="color:var(--color-link)">~repos</a>
+      /${title}
+    </h1>
+    <div class="tags" style="margin-top:0.5rem;display:flex;flex-wrap:wrap;gap:0.25rem">
+      ${tags.map(tag => html`<span class="tag" style="color:var(--color-tag);padding:0.15rem 0.5rem 0.5rem 0;font-size:0.95rem;font-weight:500">#${tag}</span>`)}
+    </div>
+  </div>
+  <h3 style="font-size:1rem;font-weight:500">
+    GIT_CONFIG_PARAMETERS="'http.version=HTTP/1.1'" git clone
+    <a style="color:var(--color-link)">https://git.pyrossh.dev/${title}/.git</a> ${title}
+  </h3>
+  <div style="font-size:0.95rem">${description}</div>
+  <hr style="margin-top:0.5rem;border-color:var(--color-text)" />
+  <div class="nav" style="display:flex;align-items:center;margin-top:0.5rem">
+    ${['Readme', 'Commits', 'Files'].map(tab => {
+      const href = tab === 'Readme' ? `/repos/${title}` : `/repos/${title}/${tab.toLowerCase()}`
+      const active = currentTab === tab
+      return html`
+        <div style="padding-right:0.5rem">
+          <a href="${href}" aria-current="${active}"
+            hx-get="${href}" hx-target="#tab-content" hx-push-url="true"
+            style="font-size:1rem;font-weight:500;padding-right:0.5rem;cursor:pointer;color:var(--color-link)${active ? ';text-underline-offset:4px;text-decoration:underline' : ''}">
+            ${tab}
+          </a>
+          <span style="padding-right:0.5rem">|</span>
+        </div>`
+    })}
+  </div>
+</div>
+<div id="tab-content">
+  ${children}
+</div>`
+}
+```
+- [ ] **Step 8: Create `src/components/file-layout.ts`**
+```typescript
+import { html } from 'hono/html'
+import type { RuntimeRepo, FileNode } from '../types'
+export const FileLayout = (props: {
+  repo: RuntimeRepo
+  file: FileNode
+  pathname: string
+  children: any
+}) => {
+  const { repo, file, pathname, children } = props
+  return html`
+${children}
+<div class="file-layout">
+  <hr />
+  <div class="title"><h3>${file.name}</h3></div>
+  <hr />
+  <div class="nav">
+    <div>
+      <a aria-current="${pathname === `/repos/${repo.id}/files/${file.name}`}"
+        href="/repos/${repo.id}/files/${file.name}"
+        hx-get="/repos/${repo.id}/files/${file.name}"
+        hx-target="#tab-content" hx-push-url="true">Contents</a>
+    </div>
+    <div>|</div>
+    <div>
+      <a aria-current="${pathname === `/repos/${repo.id}/files/${file.name}/history`}"
+        href="/repos/${repo.id}/files/${file.name}/history"
+        hx-get="/repos/${repo.id}/files/${file.name}/history"
+        hx-target="#tab-content" hx-push-url="true">History</a>
+    </div>
+    <div>|</div>
+    <div>
+      <a aria-current="${pathname === `/repos/${repo.id}/files/${file.name}/blame`}"
+        href="/repos/${repo.id}/files/${file.name}/blame"
+        hx-get="/repos/${repo.id}/files/${file.name}/blame"
+        hx-target="#tab-content" hx-push-url="true">Blame</a>
+    </div>
+  </div>
+  <hr />
+</div>`
+}
+```
+- [ ] **Step 9: Commit**
+```bash
+git add src/components/
+git commit -m "feat: port UI components to hono/html tagged templates"
+```
+---
+### Task 4: Create App Entry with All Routes
+**Files:**
+- Create: `src/index.ts`
+**Interfaces:**
+- Consumes: All components from `src/components/*`, all lib from `src/lib/*`, `html` from `hono/html`, `css` from `hono/css`, `getS3()`, `config`, `types`
+- Produces: Hono app default export (`ExportedHandler`)
+- [ ] **Step 1: Create `src/index.ts` with Layout wrapper**
+```typescript
+import { Hono } from 'hono'
+import { html } from 'hono/html'
+import { Header } from './components/header'
+import { Footer } from './components/footer'
+import { SITE_TITLE, SITE_DESCRIPTION, SITE_URL } from './config'
+const app = new Hono()
+const Layout = (props: {
+  title: string
+  description?: string
+  css?: string
+  children: any
+}) => {
+  const url = new URL(props.title === SITE_TITLE ? '/' : '', SITE_URL) // simplified
+  return html`
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
+    <meta name="theme-color" content="#131618" />
+    <link rel="icon" type="image/svg+xml" href="/assets/icons/icon.svg" />
+    <link rel="alternate" type="application/rss+xml" title="${props.title}" href="/rss.xml" />
+    <link rel="canonical" href="${SITE_URL}/" />
+    <link rel="stylesheet" href="/assets/css/shared.css" />
+    ${props.css ? html`<link rel="stylesheet" href="${props.css}" />` : ''}
+    <title>${props.title}</title>
+    <meta name="title" content="${props.title}" />
+    <meta name="description" content="${props.description ?? SITE_DESCRIPTION}" />
+    <meta property="og:title" content="${props.title}" />
+    <meta property="og:description" content="${props.description ?? SITE_DESCRIPTION}" />
+    <meta property="og:image" content="/assets/icons/icon.svg" />
+    <meta name="twitter:card" content="summary_large_image" />
+    <script src="https://unpkg.com/[email protected]"></script>
+  </head>
+  <body>
+    ${Header({ currentPath: '' })}
+    <div class="wrapper">
+      <main>${props.children}</main>
+    </div>
+    ${Footer()}
+  </body>
+</html>`
+}
+// ---- Routes start here ----
+// All route handlers defined below
+// Pattern: app.get('/path', (c) => c.html(Layout({ title, css, children: html`...` })))
+```
+Note: For routes that need the current URL path (for Header active state, canonical URL), use `new URL(c.req.url)` inside the route handler and pass `currentPath` to Layout.
+**Route ordering matters:** When using catch-all params like `:path{.+}`, more specific routes must be defined first. Define file routes in this order:
+1. `/repos/:id/files/:path{.+}/history` (before generic `:path`)
+2. `/repos/:id/files/:path{.+}/blame` (before generic `:path`)
+3. `/repos/:id/files/:path{.+}` (generic catch-all last)
+Same for issue detail: `/repos/:id/issues/:issueId` before `/repos/:id/issues` POST handler (though GET vs POST differentiates, be explicit).
+Content porting hint: to convert JSX from worker files to tagged templates:
+- Open the worker's `src/index.tsx` file
+- Copy the JSX inside `<Layout>...</Layout>` (the children content)
+- Replace `{expr}` with `${expr}`
+- Replace `<Comp prop={val}>` with `${Comp({prop: val})}`
+- Replace `<div>{arr.map(i => <span>{i}</span>)}</div>` with `html`<div>${arr.map(i => html`<span>${i}</span>`)}</div>``
+- For `dangerouslySetInnerHTML={{ __html: htmlContent }}`, just use `${htmlContent}` (interpolate the raw HTML string directly)
+- [ ] **Step 2: Add simple routes (home, cv, robots, 404, 500, only-bible-app)**
+```typescript
+// Home
+app.get('/', (c) => {
+  return c.html(Layout({
+    title: SITE_TITLE,
+    description: 'Tech Lead from Bangalore...',
+    css: '/assets/css/workers/home.css',
+    children: html`<h1>Hello!</h1>
+      <p>Tech lead...</p>
+      <!-- Content from packages/workers/home/src/index.tsx — convert JSX to tagged templates -->`
+  }))
+})
+// CV
+app.get('/cv', (c) => c.html(Layout({
+  title: 'Curriculum Vitae',
+  css: '/assets/css/workers/cv.css',
+  children: html`
+    <h1 style="display:flex;align-items:flex-start;font-weight:800;font-size:2rem;margin-bottom:1rem">
+      Curriculum Vitae
+      <a href="/assets/pdfs/resume.pdf" target="_blank" style="margin-left:0.4rem;margin-top:0.8rem;color:var(--color-link)">↗</a>
+    </h1>
+    <div style="border:1px solid black">
+      <img src="/assets/pdfs/resume.svg" alt="Resume" style="width:100%" />
+    </div>`
+})))
+// robots.txt
+app.get('/robots.txt', (c) => c.text('User-agent: *\nAllow: /\n'))
+// 404
+app.notFound((c) => c.html(Layout({
+  title: '404 — Not Found',
+  children: html`<h1>404</h1><p>Page not found.</p>`
+}), 404))
+// 500
+app.onError((err, c) => {
+  console.error(err)
+  return c.html(Layout({
+    title: '500 — Server Error',
+    children: html`<h1>500</h1><p>Something went wrong.</p>`
+  }), 500)
+})
+// Only Bible App pages
+app.get('/only-bible-app', (c) => c.html(Layout({
+  title: 'Only Bible App',
+  css: '/assets/css/workers/only-bible-app.css',
+  children: html`<!-- Paste: packages/workers/only-bible-app/index/src/index.tsx → convert JSX to tagged templates -->`
+})))
+app.get('/only-bible-app/privacy-policy', (c) => c.html(Layout({
+  title: 'Privacy Policy | Only Bible App',
+  css: '/assets/css/workers/only-bible-app-privacy.css',
+  children: html`<!-- Paste: packages/workers/only-bible-app/privacy/src/index.tsx → convert JSX to tagged templates -->`
+})))
+app.get('/only-bible-app/terms-and-conditions', (c) => c.html(Layout({
+  title: 'Terms & Conditions | Only Bible App',
+  css: '/assets/css/workers/only-bible-app-terms.css',
+  children: html`<!-- Paste: packages/workers/only-bible-app/terms/src/index.tsx → convert JSX to tagged templates -->`
+})))
+```
+For each route, copy the JSX content from the corresponding worker file and convert:
+- `{variable}` → `${variable}`
+- `<Component prop={value}>` → `${Component({prop: value})}`
+- `<div>{items.map(i => <span>{i}</span>)}</div>` → `html`<div>${items.map(i => html`<span>${i}</span>`)}</div>``
+- `dangerouslySetInnerHTML={{ __html: htmlContent }}` → just insert the raw HTML: `${htmlContent}` (hono/html doesn't escape interpolated values that are already HtmlEscapedString)
+- For raw string HTML from markdown, use `html` tagged template or the `raw` helper
+- [ ] **Step 3: Add blog routes (depend on S3)**
+```typescript
+import { getS3 } from './s3'
+import { getPosts, getPost } from './lib/content'
+app.get('/posts', async (c) => {
+  const posts = await getPosts(getS3())
+  return c.html(Layout({
+    title: 'Posts',
+    css: '/assets/css/workers/posts-index.css',
+    children: html`
+      <h1 style="font-weight:800;font-size:2rem">Posts</h1>
+      <ul style="display:flex;flex-direction:column;list-style:none;padding:0">
+        ${posts.map(post => html`
+          <li style="display:grid;grid-template-columns:1fr;gap:0.4rem;margin-top:1.25rem;line-height:1.5rem">
+            <div>
+              <a href="/posts/${post.id}" style="font-size:1.1rem;color:var(--color-post-link);text-underline-offset:4px">${post.data.title}</a>
+              <span style="font-size:13pt;display:block">${post.data.description}</span>
+            </div>
+            <time style="font-size:1.1rem">${post.data.pubDate.toLocaleDateString()}</time>
+          </li>`
+        )}
+      </ul>`
+  }))
+})
+app.get('/posts/:id', async (c) => {
+  const postId = c.req.param('id')
+  const post = await getPost(getS3(), postId)
+  if (!post) return c.redirect('/404')
+  return c.html(Layout({
+    title: post.data.title,
+    description: post.data.description,
+    css: '/assets/css/workers/posts-detail.css',
+    children: html`
+      <article>
+        <h1 style="text-align:left;font-size:1.8rem;font-weight:bold;line-height:1;margin-top:0.5rem;margin-bottom:0.1rem">${post.data.title}</h1>
+        <h2 style="font-size:1.1rem;font-weight:500">${post.data.description}</h2>
+        <time style="font-size:1.1rem">${post.data.pubDate.toLocaleDateString()}</time>
+        <hr style="margin:0.5rem 0;border-color:var(--color-text)" />
+        ${post.html}
+      </article>`
+  }))
+})
+```
+- [ ] **Step 4: Add RSS feed**
+```typescript
+import { SITE_TITLE, SITE_DESCRIPTION, SITE_URL } from './config'
+app.get('/rss.xml', async (c) => {
+  const posts = await getPosts(getS3())
+  const items = posts.map(post => `
+    <item>
+      <title><![CDATA[${post.data.title}]]></title>
+      <description><![CDATA[${post.data.description}]]></description>
+      <link>${SITE_URL}/posts/${post.id}/</link>
+      <guid>${SITE_URL}/posts/${post.id}/</guid>
+      <pubDate>${post.data.pubDate.toUTCString()}</pubDate>
+    </item>
+  `).join('\n')
+  return c.text(`<?xml version="1.0" encoding="UTF-8"?>
+    <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
+      <channel>
+        <title>${SITE_TITLE}</title>
+        <description>${SITE_DESCRIPTION}</description>
+        <link>${SITE_URL}</link>
+        <atom:link href="${SITE_URL}/rss.xml" rel="self" type="application/rss+xml"/>
+        ${items}
+      </channel>
+    </rss>`, 200, { 'Content-Type': 'application/rss+xml; charset=utf-8' })
+})
+```
+- [ ] **Step 5: Add repo routes**
+```typescript
+import { getRepos, getRepo, getRepoReadme, getCommits, getFiles, getFileHistory, getFileContentData, generateHTMLDiff,
+  buildFileTree, sortChildren, getGitBugIssues, getGitBugIssue, createGitBugIssue, addGitBugIssueComment, setGitBugIssueState,
+  renderMarkdown } from './lib/content'
+// Import from the actual lib files — content.ts exports getPosts/getPost/getRepos/getRepo
+// Import git operations from gitReader.ts
+// Import gitBug operations from gitBug.ts
+// Import RepoLayout, FileLayout, FileTree, IssueCard, CommitEntry from components
+// Repo README
+app.get('/repos/:id', async (c) => {
+  const repoId = c.req.param('id')
+  const repo = getRepo(repoId)
+  if (!repo) return c.redirect('/404')
+  const s3 = getS3()
+  const readmeRaw = await getRepoReadme(s3, repo.id)
+  const readmeHtml = readmeRaw ? await renderMarkdown(readmeRaw) : ''
+  return c.html(Layout({
+    title: `${repoId} — pyrossh`,
+    children: html`
+      ${RepoLayout({ repo, currentTab: 'Readme', children: html`<article>${readmeHtml}</article>` })}`
+  }))
+})
+// Repo Commits list
+app.get('/repos/:id/commits', async (c) => {
+  const repoId = c.req.param('id')
+  const repo = getRepo(repoId)
+  if (!repo) return c.redirect('/404')
+  const commits = await getCommits(getS3(), repo.id)
+  return c.html(Layout({
+    title: `${repoId} commits — pyrossh`,
+    children: html`
+      ${RepoLayout({ repo, currentTab: 'Commits',
+        children: html`${commits.map(commit => CommitEntry({ repoId: repo.id, commit }))}` })}`
+  }))
+})
+// Repo Commit detail
+app.get('/repos/:id/commits/:hash', async (c) => {
+  const { id: repoId, hash } = c.req.param()
+  const repo = getRepo(repoId)
+  if (!repo) return c.redirect('/404')
+  const s3 = getS3()
+  const commits = await getCommits(s3, repo.id)
+  const commit = commits.find(c => c.hash === hash)
+  if (!commit) return c.redirect(`/repos/${repo.id}/commits`)
+  const diffHtml = await generateHTMLDiff(s3, repo.id, commit.hash)
+  return c.html(Layout({
+    title: `${hash.substring(0, 7)} — ${repoId} — pyrossh`,
+    children: html`
+      ${RepoLayout({ repo, currentTab: 'Commits',
+        children: html`
+          ${CommitEntry({ repoId: repo.id, commit })}
+          <div>${diffHtml}</div>` })}`
+  }))
+})
+// Repo Files list
+app.get('/repos/:id/files', async (c) => {
+  const repoId = c.req.param('id')
+  const repo = getRepo(repoId)
+  if (!repo) return c.redirect('/404')
+  const files = await getFiles(getS3(), repo.id)
+  const sortedFiles = sortChildren(buildFileTree(files))
+  return c.html(Layout({
+    title: `${repoId} files — pyrossh`,
+    css: '/assets/css/workers/files-index.css',
+    children: html`
+      ${RepoLayout({ repo, currentTab: 'Files',
+        children: FileTree({ nodes: sortedFiles, repoId: repo.id }) })}`
+  }))
+})
+// Repo File detail
+app.get('/repos/:id/files/:path{.+}', async (c) => {
+  const repoId = c.req.param('id')
+  const filePath = c.req.param('path')
+  const repo = getRepo(repoId)
+  if (!repo) return c.redirect('/404')
+  const s3 = getS3()
+  const files = await getFiles(s3, repo.id)
+  const file = files.find(f => f.absolutePath === filePath)
+  if (!file) return c.redirect(`/repos/${repo.id}/files`)
+  const BINARY_EXTS = ['apk', 'dex', 'ap_', 'jar', 'fnt']
+  const IMAGE_EXTS = ['png', 'jpg', 'jpeg', 'gif', 'svg', 'webp', 'ico', 'icns', 'curve', 'atlas']
+  const LARGE_SIZE = 1024 * 512
+  const contentBuffer = await getFileContentData(s3, repo.id, file.absolutePath)
+  let content: any
+  if (!contentBuffer) content = html`<p>Unable to load file content.</p>`
+  else if (BINARY_EXTS.includes(file.ext)) content = html`<p>Binary file.</p>`
+  else if (file.size > LARGE_SIZE) content = html`<p>File too large (${file.size} bytes).</p>`
+  else if (IMAGE_EXTS.includes(file.ext)) {
+    const b64 = btoa(String.fromCharCode(...contentBuffer))
+    content = html`<img src="data:image/${file.ext};base64,${b64}" alt="${file.path}" />`
+  } else {
+    const text = new TextDecoder('utf-8').decode(contentBuffer).trim() || 'No content to display.'
+    content = html`<pre><code class="language-${file.ext}">${text}</code></pre>`
+  }
+  const url = new URL(c.req.url)
+  return c.html(Layout({
+    title: `${file.name} — ${repoId} — pyrossh`,
+    children: html`
+      ${FileLayout({ repo, file, pathname: url.pathname,
+        children: content })}`
+  }))
+})
+// File history
+app.get('/repos/:id/files/:path{.+}/history', async (c) => {
+  const repoId = c.req.param('id')
+  const filePath = c.req.param('path').replace(/\/history$/, '')
+  // ... similar pattern using getFileHistory
+})
+// File blame
+app.get('/repos/:id/files/:path{.+}/blame', async (c) => {
+  // ... similar pattern showing "WIP" placeholder
+})
+```
+For the history and blame routes, handle the URL carefully — the `:path` wildcard captures everything including `/history` suffix. Need to strip it.
+- [ ] **Step 6: Add issue routes**
+```typescript
+import { getGitBugIssues, getGitBugIssue, createGitBugIssue, addGitBugIssueComment, setGitBugIssueState } from './lib/gitBug'
+// Issues list — GET and POST
+app.get('/repos/:id/issues', async (c) => {
+  const repoId = c.req.param('id')
+  const repo = getRepo(repoId)
+  if (!repo) return c.redirect('/404')
+  const { issues, isAvailable } = await getGitBugIssues(getS3(), repo.id)
+  const openIssues = issues.filter(i => i.state === 'open')
+  const closedIssues = issues.filter(i => i.state === 'closed')
+  return c.html(Layout({
+    title: `${repoId} issues — pyrossh`,
+    css: '/assets/css/workers/issues-index.css',
+    children: html`
+      ${RepoLayout({ repo, currentTab: 'Issues',
+        children: html`
+          <section class="issues">
+            <div class="summary">
+              <strong>${issues.length}</strong> issues
+              <span>${openIssues.length} open</span>
+              <span>${closedIssues.length} closed</span>
+            </div>
+            <form class="new-issue" hx-post="/repos/${repo.id}/issues" hx-target="#issues-list" hx-swap="innerHTML">
+              <input name="repoId" type="hidden" value="${repo.id}" />
+              <input name="title" placeholder="Title" required />
+              <textarea name="body" placeholder="Description"></textarea>
+              <div class="form-row">
+                <input name="author" placeholder="Author" />
+                <input name="labels" placeholder="labels, comma-separated" />
+                <button type="submit">Create</button>
+              </div>
+            </form>
+            <div id="issues-list">
+              ${issues.length > 0
+                ? issues.map(issue => IssueCard({ repoId: repo.id, issue }))
+                : html`<p class="empty">${isAvailable ? 'No issues found.' : 'Issues unavailable.'}</p>`}
+            </div>
+          </section>` })}`
+  }))
+})
+// Issues list — POST handler (HTMX)
+app.post('/repos/:id/issues', async (c) => {
+  const repoId = c.req.param('id')
+  if (!c.req.headers.get('HX-Request')) return c.redirect(c.req.url, 303)
+  const form = await c.req.parseBody<{ title: string; body: string; author: string; labels: string }>()
+  // ... create issue, return HTMX fragment
+})
+// Issue detail — GET, POST (comment), PUT (state)
+app.get('/repos/:id/issues/:issueId', async (c) => {
+  // ... render issue detail with comments, state form, comment form
+})
+app.post('/repos/:id/issues/:issueId', async (c) => {
+  // HTMX: add comment
+})
+app.put('/repos/:id/issues/:issueId', async (c) => {
+  // HTMX: toggle state
+})
+```
+- [ ] **Step 7: Add export default app**
+```typescript
+export default app
+```
+- [ ] **Step 8: Commit**
+```bash
+git add src/index.ts
+git commit -m "feat: create Hono app with all routes"
+```
+---
+### Task 5: Install Dependencies and Cleanup
+- [ ] **Step 1: Install dependencies**
+```bash
+bun install
+```
+- [ ] **Step 2: Remove old monorepo structure**
+Remove all files and directories that are no longer needed:
+```bash
+rm -rf packages/ pnpm-workspace.yaml pnpm-lock.yaml tsconfig.base.ts worker-configuration.d.ts
+rm -rf .alchemy/ alchemy.run.ts scripts/ refs/ repos/
+rm -rf rust-embed/ node_modules/
+```
+- [ ] **Step 3: Update .gitignore**
+Remove monorepo-specific entries, ensure `node_modules` and `.wrangler` are present.
+- [ ] **Step 4: Update root `package.json` scripts**
+```json
+{
+  "scripts": {
+    "dev": "wrangler dev",
+    "deploy": "wrangler deploy",
+    "typecheck": "tsc --noEmit"
+  }
+}
+```
+- [ ] **Step 5: Commit**
+```bash
+git add -A
+git commit -m "refactor: remove monorepo, keep single Hono app"
+```
+---
+### Task 6: Verify
+- [ ] **Step 1: Run typecheck**
+```bash
+bun run typecheck
+```
+Expected: No errors (or only pre-existing vscode-icons/spamscanner errors if those deps remain).
+- [ ] **Step 2: Start dev server**
+```bash
+bun run dev
+```
+Verify the app starts without errors. Visit `http://localhost:8787` and check:
+- Home page loads with correct layout
+- CV page loads with resume embed
+- Posts page loads (content from S3)
+- Repos pages load
+- [ ] **Step 3: Set up S3 credentials for dev**
+Create `.env` with:
+```
+S3_ACCESS_KEY_ID=...
+S3_SECRET_ACCESS_KEY=...
+S3_ENDPOINT=...
+S3_REGION=auto
+```
+Wrangler automatically loads `.env` in dev mode.
+- [ ] **Step 4: Commit**
+```bash
+git commit -m "chore: initial working Hono app"
+```