55e32cf | website

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

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

55e32cf — pyrossh 2026-07-07T13:58:14+05:30

fix: remove spamscanner dependency (incompatible with Workers), fix pnpm config, resolve dev build errors

Generated files not shown: pnpm-lock.yaml

Files changed (6) hide show

docs/superpowers/plans/2026-07-07-rewrite-typed-htmx-workers.md +1406 -0
docs/superpowers/specs/2026-07-07-rewrite-typed-htmx-workers-design.md +357 -0
package.json +0 -1
packages/shared/core/package.json +0 -1
packages/workers/dev-router/wrangler.jsonc +1 -1
pnpm-workspace.yaml +8 -8

docs/superpowers/plans/2026-07-07-rewrite-typed-htmx-workers.md ADDED Viewed

@@ -0,0 +1,1406 @@
+# pyrossh.dev Rewrite — typed-htmx Workers 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 Astro into a pnpm monorepo of Cloudflare Workers using typed-htmx/typed-html JSX.
+**Architecture:** ~18 Workers, one per URL pattern, routed via Cloudflare Routes. Shared code in `@pyrossh/{config,types,core,ui}` packages. Each Worker generates HTML server-side via typed-htmx JSX. htmx drives interactivity (issue CRUD, file tree, tab navigation). Dev mode uses a single router Worker that imports all handlers.
+**Tech Stack:** Cloudflare Workers, typed-htmx/typed-html, htmx, pnpm workspaces, typescript, wrangler
+## Global Constraints
+- `"jsx": "react-jsx"` and `"jsxImportSource": "typed-htmx/typed-html"` in all tsconfigs
+- All HTML generated server-side via typed-htmx JSX
+- htmx for all interactivity (no custom JS except timeago element)
+- Each worker in its own directory under `packages/workers/`
+- Each worker has its own `wrangler.jsonc`, `package.json`, `tsconfig.json`
+- Shared CSS as string export in `@pyrossh/ui/css.ts`
+- R2 bucket binding named `REPOS` in every worker that needs it
+- Blog content stays as markdown files read from R2 or filesystem
+- No Astro dependencies in final project
+---
+### Task 1: Monorepo Scaffold & Base Config
+**Files:**
+- Create: `packages/shared/config/package.json`
+- Create: `packages/shared/config/tsconfig.json`
+- Create: `packages/shared/config/src/index.ts`
+- Modify: `package.json` (root)
+- Modify: `pnpm-workspace.yaml`
+- Create: `tsconfig.base.json`
+**Interfaces:**
+- Produces: `@pyrossh/config` package exporting `SITE_TITLE`, `SITE_DESCRIPTION`, `REPOS`, `TOOLS`, site config
+- [ ] **Step 1: Update root `pnpm-workspace.yaml`**
+```yaml
+packages:
+  - 'packages/shared/*'
+  - 'packages/workers/**'
+```
+- [ ] **Step 2: Create `tsconfig.base.json`**
+```json
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "jsxImportSource": "typed-htmx/typed-html",
+    "strict": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "types": ["@cloudflare/workers-types"]
+  }
+}
+```
+- [ ] **Step 3: Create `packages/shared/config/package.json`**
+```json
+{
+  "name": "@pyrossh/config",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "main": "src/index.ts",
+  "types": "src/index.ts"
+}
+```
+- [ ] **Step 4: Create `packages/shared/config/tsconfig.json`**
+```json
+{
+  "extends": "../../../tsconfig.base.json",
+  "include": ["src"]
+}
+```
+- [ ] **Step 5: Create `packages/shared/config/src/index.ts`**
+Port the contents of `src/consts.ts` — but since Workers can't import PNGs directly, change tool images to URL strings (reference assets served by the assets Worker later). For now, use relative paths.
+```typescript
+export const SITE_TITLE = "pyrossh";
+export const SITE_DESCRIPTION = "Welcome to my website!";
+export const REPOS = [
+  {
+    title: "rust-embed",
+    description: "rust macro which loads files into the rust binary at compile time during release and loads the file from the fs during dev.",
+    tags: ["rust", "proc-macro", "http"],
+  },
+  // ... all 14 repos from original src/consts.ts
+];
+export const TOOLS = [
+  { name: "Stats", link: "https://github.com/exelban/stats", image: "/assets/logos/stats.png" },
+  // ... all 8 tools from original src/consts.ts
+];
+export const NAV_ITEMS = [
+  { href: "/cv", label: "cv" },
+  { href: "/posts", label: "posts" },
+] as const;
+export const SITE_URL = "https://pyrossh.dev";
+```
+- [ ] **Step 6: Install root dependency**
+```bash
+pnpm add -w typed-htmx
+pnpm add -w -D @cloudflare/workers-types
+```
+- [ ] **Step 7: Commit**
+```bash
+git add pnpm-workspace.yaml tsconfig.base.json packages/shared/config/ package.json
+git commit -m "feat: scaffold monorepo with shared config package"
+```
+---
+### Task 2: @pyrossh/types — Shared TypeScript Types
+**Files:**
+- Create: `packages/shared/types/package.json`
+- Create: `packages/shared/types/tsconfig.json`
+- Create: `packages/shared/types/src/index.ts`
+- Create: `packages/shared/types/src/env.d.ts`
+**Interfaces:**
+- Consumes: nothing
+- Produces: `Env`, `R2Bucket`-aware interfaces consumed by @pyrossh/core and every worker
+- [ ] **Step 1: Create `packages/shared/types/package.json`**
+```json
+{
+  "name": "@pyrossh/types",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "main": "src/index.ts",
+  "types": "src/index.ts"
+}
+```
+- [ ] **Step 2: Create `packages/shared/types/tsconfig.json`**
+```json
+{
+  "extends": "../../../tsconfig.base.json",
+  "include": ["src"]
+}
+```
+- [ ] **Step 3: Create `packages/shared/types/src/env.d.ts`**
+```typescript
+export interface Env {
+  REPOS: R2Bucket;
+}
+```
+- [ ] **Step 4: Create `packages/shared/types/src/index.ts`**
+```typescript
+export type { Env } from './env.d.ts';
+export interface Commit {
+  hash: string;
+  author: 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 5: Commit**
+```bash
+git add packages/shared/types/
+git commit -m "feat: add shared types package"
+```
+---
+### Task 3: @pyrossh/core — Business Logic (Ported from src/utils/)
+**Files:**
+- Create: `packages/shared/core/package.json`
+- Create: `packages/shared/core/tsconfig.json`
+- Create: `packages/shared/core/src/index.ts`
+- Create: `packages/shared/core/src/gitReader.ts` (port from `src/utils/gitReader.ts`)
+- Create: `packages/shared/core/src/markdown.ts` (port from `src/utils/markdown.ts`)
+- Create: `packages/shared/core/src/content.ts` (port from `src/utils/content.ts`)
+- Create: `packages/shared/core/src/gitBug.ts` (port from `src/utils/gitBug.ts`)
+- Create: `packages/shared/core/src/files.ts` (port from `src/utils/files.ts`)
+- Create: `packages/shared/core/src/repoContent.ts` (port from `src/utils/repoContent.ts`)
+**Interfaces:**
+- Consumes: `@pyrossh/types`, `@pyrossh/config`
+- Produces all git reader, markdown, content, issue CRUD, file tree, and repo content functions
+- [ ] **Step 1: Create `packages/shared/core/package.json`**
+```json
+{
+  "name": "@pyrossh/core",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "dependencies": {
+    "@pyrossh/config": "workspace:*",
+    "@pyrossh/types": "workspace:*",
+    "unified": "^11.0.5",
+    "remark-parse": "^11.0.0",
+    "remark-rehype": "^11.1.2",
+    "rehype-stringify": "^10.0.1",
+    "rehype-expressive-code": "^0.44.0",
+    "gray-matter": "^4.0.3",
+    "diff": "^9.0.0",
+    "pretty-bytes": "^7.1.0",
+    "diff2html": "^3.4.52",
+    "spamscanner": "^6.1.5"
+  }
+}
+```
+- [ ] **Step 2: Copy `gitReader.ts` verbatim** — this file is a pure R2-dependent module. No changes needed except import paths. Copy from `src/utils/gitReader.ts` to `packages/shared/core/src/gitReader.ts`.
+- [ ] **Step 3: Create `packages/shared/core/src/markdown.ts`**
+```typescript
+import rehypeExpressiveCode from "rehype-expressive-code";
+import rehypeStringify from "rehype-stringify";
+import remarkParse from "remark-parse";
+import remarkRehype from "remark-rehype";
+import { unified } from "unified";
+// Minimal ec config for Workers context
+const ecConfig = {
+  shiki: { engine: "javascript" },
+  styleOverrides: { codeFontSize: "0.8rem", uiFontSize: "0.8rem" },
+};
+export const renderMarkdown = async (markdown: string) => {
+  const file = await unified()
+    .use(remarkParse)
+    .use(remarkRehype)
+    .use(rehypeExpressiveCode, ecConfig)
+    .use(rehypeStringify)
+    .process(markdown);
+  return String(file);
+};
+```
+- [ ] **Step 4: Create `packages/shared/core/src/content.ts`**
+Port from `src/utils/content.ts` — change filesystem reads to R2Bucket reads. Blog content will be stored in R2.
+```typescript
+import matter from "gray-matter";
+import { REPOS } from "@pyrossh/config";
+import type { RuntimeRepo, RuntimePost } from "@pyrossh/types";
+import { renderMarkdown } from "./markdown";
+const toDate = (value: unknown) => value instanceof Date ? value : new Date(String(value));
+export const getRepos = (): RuntimeRepo[] =>
+  REPOS.map((repo) => ({ id: repo.title, data: { ...repo } }));
+export const getRepo = (repoId?: string) => getRepos().find((repo) => repo.id === repoId);
+const CONTENT_PREFIX = "content/";
+export const getPosts = async (bucket: R2Bucket): Promise<RuntimePost[]> => {
+  const objects = await bucket.list({ prefix: CONTENT_PREFIX });
+  const posts: RuntimePost[] = [];
+  for (const obj of objects.objects) {
+    if (!obj.key.endsWith(".md") && !obj.key.endsWith(".mdx")) continue;
+    const file = await bucket.get(obj.key);
+    if (!file) continue;
+    const source = await file.text();
+    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 (bucket: R2Bucket, postId?: string) => {
+  const posts = await getPosts(bucket);
+  return posts.find((post) => post.id === postId);
+};
+```
+- [ ] **Step 5: Copy `gitBug.ts` verbatim** from `src/utils/gitBug.ts` to `packages/shared/core/src/gitBug.ts`. The module already accepts `R2Bucket` as parameters and uses `crypto.randomUUID()` which is available in Workers runtime. No changes needed.
+- [ ] **Step 6: Copy `files.ts` verbatim** from `src/utils/files.ts` to `packages/shared/core/src/files.ts`. This imports from `vscode-icons` which is installed in root. Add it as a dependency of @pyrossh/core.
+- [ ] **Step 7: Create `packages/shared/core/src/repoContent.ts`**
+```typescript
+export const getRepoReadme = async (
+  bucket: R2Bucket,
+  repoId: string,
+): Promise<string | undefined> => {
+  const obj = await bucket.get(`${repoId}/README.md`);
+  if (obj === null) return undefined;
+  return await obj.text();
+};
+```
+- [ ] **Step 8: Create `packages/shared/core/src/index.ts` — re-exports**
+```typescript
+export { renderMarkdown } from "./markdown";
+export { getRepos, getRepo, getPosts, getPost } from "./content";
+export { getGitBugIssues, getGitBugIssue, createGitBugIssue, addGitBugIssueComment, setGitBugIssueState } from "./gitBug";
+export type { GitBugIssueState, GitBugIssue, GitBugComment, GitBugIssuesResult } from "./gitBug";
+export { getRepoReadme } from "./repoContent";
+export { buildFileTree, sortChildren, sortAll, resolveFolderIcon, resolveFileIcon } from "./files";
+export type { FileNode } from "./files";
+export {
+  getCommits, getFiles, getFileHistory, getFileContentData, generateHTMLDiff,
+} from "./gitReader";
+export type { Commit } from "./gitReader";
+```
+- [ ] **Step 9: Commit**
+```bash
+git add packages/shared/core/ package.json pnpm-lock.yaml
+git commit -m "feat: port business logic to @pyrossh/core package"
+```
+---
+### Task 4: @pyrossh/ui — typed-htmx JSX Components
+**Files:**
+- Create: `packages/shared/ui/package.json`
+- Create: `packages/shared/ui/tsconfig.json`
+- Create: `packages/shared/ui/src/index.ts`
+- Create: `packages/shared/ui/src/css.ts` — global CSS string
+- Create: `packages/shared/ui/src/layout.tsx` — BaseLayout equivalent
+- Create: `packages/shared/ui/src/header.tsx` — Header component
+- Create: `packages/shared/ui/src/footer.tsx` — Footer component
+- Create: `packages/shared/ui/src/repo-layout.tsx` — RepoLayout equivalent
+- Create: `packages/shared/ui/src/file-layout.tsx` — FileLayout equivalent
+- Create: `packages/shared/ui/src/repo-nav.tsx` — repo tab navigation
+- Create: `packages/shared/ui/src/commit-entry.tsx` — Commit list item
+- Create: `packages/shared/ui/src/issue-card.tsx` — Issue display card
+- Create: `packages/shared/ui/src/file-tree.tsx` — Recursive file tree
+- Create: `packages/shared/ui/src/formatted-date.tsx` — Date formatter
+**Interfaces:**
+- Consumes: `typed-htmx`, `@pyrossh/config`
+- Produces: JSX component functions used by every worker
+- [ ] **Step 1: Create `packages/shared/ui/package.json`**
+```json
+{
+  "name": "@pyrossh/ui",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "dependencies": {
+    "@pyrossh/config": "workspace:*",
+    "typed-htmx": "workspace:*"
+  }
+}
+```
+- [ ] **Step 2: Create `packages/shared/ui/tsconfig.json`**
+```json
+{
+  "extends": "../../../tsconfig.base.json",
+  "include": ["src"]
+}
+```
+- [ ] **Step 3: Create `packages/shared/ui/src/css.ts`**
+Port all CSS from `src/layouts/BaseLayout.astro`'s `<style is:global>` block + CSS reset. This is a single exported string.
+```typescript
+export const globalCSS = `
+:root {
+  --color-black: light-dark(hsl(0, 0%, 0%), hsl(0, 0%, 0%));
+  --color-white: light-dark(hsl(0, 0%, 100%), hsl(0, 0%, 100%));
+  --color-accent: hsl(57.25deg 100% 70%);
+  --color-body-bg: light-dark(hsl(0, 0%, 100%), hsl(210, 13%, 15%));
+  --color-box-bg: light-dark(hsl(0, 0%, 95%), hsl(210, 13%, 9%));
+  --color-text: light-dark(hsl(0, 0%, 13%), hsl(210, 17%, 98%));
+  --color-link: light-dark(hsl(211, 100%, 45%), hsl(211, 100%, 60%));
+  --color-post-link: light-dark(hsl(0, 0%, 0%), hsl(211, 100%, 60%));
+  --color-highlight-bg: light-dark(hsl(183, 80%, 88%), hsl(183, 80%, 18%));
+  --color-code-fg: light-dark(hsl(348, 86%, 43%), hsl(348, 86%, 80%));
+  --color-code-bg: light-dark(hsl(0, 0%, 95%), hsl(0, 0%, 0%));
+  --color-pre-bg: light-dark(hsl(0, 0%, 95%), hsl(0, 0%, 0%));
+  --color-tag: light-dark(hsl(152, 96%, 35%), hsl(152, 96%, 44%));
+  --btn-light: none;
+  --btn-dark: block;
+}
+[data-theme="dark"] {
+  --btn-light: block;
+  --btn-dark: none;
+}
+body {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  background-color: var(--color-body-bg);
+  color: var(--color-text);
+  font-family: system-ui;
+  text-rendering: optimizeLegibility;
+  font-variant-ligatures: common-ligatures;
+  font-kerning: normal;
+  font-size: 1.25rem;
+  line-height: 1.5;
+  min-height: 100vh;
+}
+main {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  padding-bottom: 1em;
+}
+a { color: var(--color-link); }
+/* Copy remaining global styles from BaseLayout.astro style block */
+`;
+```
+(Include the full CSS from BaseLayout, RepoLayout, FileLayout, and all component styles as one global stylesheet — port all `<style>` blocks from all Astro components.)
+- [ ] **Step 4: Create `packages/shared/ui/src/layout.tsx`**
+```tsx
+import { globalCSS } from "./css";
+import { Header } from "./header";
+import { Footer } from "./footer";
+import { SITE_TITLE, SITE_DESCRIPTION, SITE_URL } from "@pyrossh/config";
+interface LayoutProps {
+  title: string;
+  description?: string;
+  request?: Request;
+  children: any;
+}
+export function Layout({ title, description, request, children }: LayoutProps) {
+  const url = request ? new URL(request.url) : undefined;
+  const canonicalURL = url ? `${SITE_URL}${url.pathname}` : SITE_URL;
+  return (
+    <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={title} href="/rss.xml" />
+        <link rel="canonical" href={canonicalURL} />
+        <title>{title}</title>
+        <meta name="title" content={title} />
+        <meta name="description" content={description || SITE_DESCRIPTION} />
+        <meta name="author" content="pyrossh" />
+        <meta name="keywords" content="pyrossh.dev,pyrossh,website" />
+        <meta property="og:site_name" content="pyrossh.dev" />
+        <meta property="og:type" content="website" />
+        <meta property="og:url" content={url?.href || SITE_URL} />
+        <meta property="og:title" content={title} />
+        <meta property="og:description" content={description || SITE_DESCRIPTION} />
+        <meta property="og:image" content="/assets/icons/icon.svg" />
+        <meta property="twitter:card" content="summary_large_image" />
+        <meta property="twitter:url" content={url?.href || SITE_URL} />
+        <meta property="twitter:title" content={title} />
+        <meta property="twitter:description" content={description || SITE_DESCRIPTION} />
+        <meta property="twitter:image" content="/assets/icons/icon.svg" />
+        <style>{globalCSS}</style>
+        <script src="https://unpkg.com/[email protected]"></script>
+        <script src="/assets/js/timeago.js"></script>
+      </head>
+      <body>
+        <Header currentPath={url?.pathname} />
+        <main>{children}</main>
+        <Footer />
+      </body>
+    </html>
+  );
+}
+```
+- [ ] **Step 5: Create `packages/shared/ui/src/header.tsx`**
+```tsx
+import { NAV_ITEMS } from "@pyrossh/config";
+interface HeaderProps {
+  currentPath?: string;
+}
+export function Header({ currentPath }: HeaderProps) {
+  const isActive = (href: string) => currentPath?.startsWith(href) ? "true" : "false";
+  return (
+    <>
+      <div class="safe-area" style="background:#131618;position:sticky;top:0;padding-top:env(safe-area-inset-top)" />
+      <header style="background:#131618">
+        <div style="max-width:min(70ch,100%-4rem);margin:0 auto">
+          <nav style="display:flex;align-items:center;justify-content:space-between;line-height:56px">
+            <a href="/" style="font-size:22px;font-weight:400;color:var(--color-accent);text-decoration:none">
+              木 pyrossh
+            </a>
+            <div style="display:flex;align-items:center;gap:0;font-size:22px;color:white">
+              <button id="theme-toggle" type="button" style="background:none;border:none;cursor:pointer;font-size:1.3rem;padding-right:12px;color:white"
+                onclick="document.documentElement.toggleAttribute('data-theme')">
+                <span style="display:var(--btn-light)">☀️</span>
+                <span style="display:var(--btn-dark)">🌙</span>
+              </button>
+              <span>|</span>
+              {NAV_ITEMS.map(item => (
+                <>
+                  <a href={item.href}
+                    aria-current={isActive(item.href)}
+                    style={`display:inline-block;text-decoration:none;font-size:22px;line-height:56px;color:white;font-weight:400;padding:0 12px;
+                      ${currentPath?.startsWith(item.href) ? 'text-decoration:underline;text-decoration-color:var(--color-accent);text-underline-offset:8px' : ''}`}>
+                    {item.label}
+                  </a>
+                  <span>|</span>
+                </>
+              ))}
+            </div>
+          </nav>
+        </div>
+      </header>
+    </>
+  );
+}
+```
+- [ ] **Step 6: Create `packages/shared/ui/src/footer.tsx`**
+```tsx
+export function Footer() {
+  return (
+    <>
+      <footer style="background:#131818;margin-top:auto">
+        <div style="max-width:min(70ch,100%-4rem);margin:0 auto;padding:16px 0;display:flex;flex-direction:row">
+          <div style="flex:1" />
+          <p style="display:flex;align-items:center;color:var(--color-white);font-size:1rem;margin:0">
+            Copyright © <current-year>{new Date().getFullYear()}</current-year>
+            <a href="https://pyrossh.dev" style="font-size:1rem;margin-left:0.5rem;color:var(--color-white);font-weight:500;text-underline-offset:2px">
+              pyrossh
+            </a>
+          </p>
+        </div>
+      </footer>
+      <div style="background:#131818;position:sticky;bottom:0;padding-bottom:env(safe-area-inset-bottom)" />
+    </>
+  );
+}
+```
+- [ ] **Step 7: Create `packages/shared/ui/src/repo-layout.tsx`**
+Port the full RepoLayout.astro to JSX — repo header with description, tags, git clone command, and tab navigation.
+```tsx
+import { Layout } from "./layout";
+import type { RuntimeRepo } from "@pyrossh/types";
+interface RepoLayoutProps {
+  repo: RuntimeRepo;
+  request: Request;
+  children: any;
+  currentTab: string;
+}
+export function RepoLayout({ repo, request, children, currentTab }: RepoLayoutProps) {
+  const { title, description, tags } = repo.data;
+  const url = new URL(request.url);
+  const pathname = url.pathname;
+  return (
+    <Layout title={`${title} — pyrossh`} description={description} request={request}>
+      <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 => <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 (
+              <div style="padding-right:0.5rem">
+                <a href={href}
+                  aria-current={active ? "true" : "false"}
+                  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>
+    </Layout>
+  );
+}
+```
+- [ ] **Step 8: Create remaining UI components**
+Create `commit-entry.tsx`, `issue-card.tsx`, `file-tree.tsx`, `formatted-date.tsx`, `repo-layout.tsx`, `file-layout.tsx` — each ported from their Astro equivalents. FileLayout wraps RepoLayout with file-specific sub-navigation (Contents | History | Blame).
+- [ ] **Step 9: Create `packages/shared/ui/src/index.ts` — re-exports**
+Export all component functions from a single entry point.
+- [ ] **Step 10: Commit**
+```bash
+git add packages/shared/ui/
+git commit -m "feat: add ui components package with typed-htmx JSX"
+```
+---
+### Task 5: Simple Workers — robots, rss, not-found, server-error
+**Files:**
+- Create: `packages/workers/robots/package.json`
+- Create: `packages/workers/robots/tsconfig.json`
+- Create: `packages/workers/robots/wrangler.jsonc`
+- Create: `packages/workers/robots/src/index.ts`
+- Create: `packages/workers/rss/package.json` + similar files
+- Create: `packages/workers/not-found/` (4 files)
+- Create: `packages/workers/server-error/` (4 files)
+**Pattern for each worker:** package.json, tsconfig.json, wrangler.jsonc, src/index.ts(x)
+- [ ] **Step 1: Create the robots.txt worker**
+`packages/workers/robots/wrangler.jsonc`:
+```json
+{
+  "name": "pyrossh-robots",
+  "main": "src/index.ts",
+  "compatibility_date": "2026-07-07",
+  "compatibility_flags": ["nodejs_compat"],
+  "workers_dev": false,
+  "routes": [{ "pattern": "pyrossh.dev/robots.txt", "custom_domain": true }]
+}
+```
+`packages/workers/robots/src/index.ts`:
+```typescript
+export default {
+  async fetch(request: Request): Promise<Response> {
+    const url = new URL(request.url);
+    const sitemapURL = new URL("sitemap-index.xml", url.origin);
+    const robots = `User-agent: *\nAllow: /\n\nSitemap: ${sitemapURL.href}\n`;
+    return new Response(robots, {
+      headers: { "content-type": "text/plain" },
+    });
+  },
+};
+```
+- [ ] **Step 2: Create the RSS worker**
+`packages/workers/rss/wrangler.jsonc`:
+```json
+{
+  "name": "pyrossh-rss",
+  "main": "src/index.ts",
+  "compatibility_date": "2026-07-07",
+  "compatibility_flags": ["nodejs_compat"],
+  "workers_dev": false,
+  "routes": [{ "pattern": "pyrossh.dev/rss.xml", "custom_domain": true }],
+  "r2_buckets": [{ "binding": "REPOS", "bucket_name": "pyrossh-repos-prd" }]
+}
+```
+`packages/workers/rss/src/index.ts`:
+```typescript
+import { getPosts } from "@pyrossh/core";
+import type { Env } from "@pyrossh/types";
+import { SITE_TITLE, SITE_DESCRIPTION, SITE_URL } from "@pyrossh/config";
+export default {
+  async fetch(request: Request, env: Env): Promise<Response> {
+    const posts = await getPosts(env.REPOS);
+    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");
+    const rss = `<?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>`;
+    return new Response(rss, {
+      headers: { "content-type": "application/rss+xml; charset=utf-8" },
+    });
+  },
+};
+```
+- [ ] **Step 3: Create the 404 worker**
+`packages/workers/not-found/src/index.tsx`:
+```tsx
+import { Layout } from "@pyrossh/ui";
+export default {
+  async fetch(request: Request): Promise<Response> {
+    return new Response(
+      <Layout title="404 — Not Found" request={request}>
+        <h1>404</h1>
+        <p>Page not found.</p>
+      </Layout>,
+      { headers: { "content-type": "text/html" }, status: 404 }
+    );
+  },
+};
+```
+Route pattern: `pyrossh.dev/*` (catch-all, lowest priority).
+- [ ] **Step 4: Create the 500 worker** (same pattern, returns 500 status).
+- [ ] **Step 5: Install dependencies in each worker**
+Each worker package.json needs `"@pyrossh/ui": "workspace:*"` and/or `"@pyrossh/core": "workspace:*"` and `"@pyrossh/types": "workspace:*"`.
+```bash
+pnpm install
+```
+- [ ] **Step 6: Commit**
+```bash
+git add packages/workers/robots/ packages/workers/rss/ packages/workers/not-found/ packages/workers/server-error/
+git commit -m "feat: add simple workers — robots, rss, 404, 500"
+```
+---
+### Task 6: Home Worker
+**Files:**
+- Create: `packages/workers/home/package.json`
+- Create: `packages/workers/home/tsconfig.json`
+- Create: `packages/workers/home/wrangler.jsonc`
+- Create: `packages/workers/home/src/index.tsx`
+- [ ] **Step 1: Create the home worker**
+`packages/workers/home/wrangler.jsonc`:
+```json
+{
+  "name": "pyrossh-home",
+  "main": "src/index.tsx",
+  "compatibility_date": "2026-07-07",
+  "compatibility_flags": ["nodejs_compat"],
+  "workers_dev": false,
+  "routes": [{ "pattern": "pyrossh.dev/", "custom_domain": true }]
+}
+```
+`packages/workers/home/src/index.tsx`:
+```tsx
+import { Layout } from "@pyrossh/ui";
+import { REPOS, TOOLS, SITE_TITLE } from "@pyrossh/config";
+export default {
+  async fetch(request: Request): Promise<Response> {
+    return new Response(
+      <Layout title={SITE_TITLE} description="Tech Lead from Bangalore who likes to create frameworks and programming languages." request={request}>
+        <div>
+          <h1 style="font-size:1.875rem;font-weight:700;margin-bottom:1rem">Hello!</h1>
+          <p style="font-size:1.1rem">
+            <a href="https://www.linkedin.com/in/pyrossh" target="_blank" rel="noopener noreferrer" style="text-decoration:underline">
+              <strong>I'm</strong>
+            </a>
+            a tech lead based out of Bangalore, India...
+          </p>
+          {/* Full home page content ported from index.astro — interests, contact, tools, repos grid */}
+          <div style="display:grid;grid-template-columns:1fr;gap:1rem">
+            <section>
+              <h2 style="font-size:1.4rem;font-weight:600">Interests</h2>
+              <ul style="display:grid;grid-template-columns:auto auto auto;gap:0.5rem;text-align:center;list-style:none;padding:0;margin-top:0.5rem">
+                {["HTML","CSS","Javascript","S3","SQL","Bun","Astro","Tauri","Remix","Zig","K8s","Iceberg"].map(i =>
+                  <li style="background-color:var(--color-box-bg);padding:0.25rem;font-size:1.1rem">{i}</li>
+                )}
+              </ul>
+            </section>
+            {/* contact, tools, repos sections — full port of index.astro */}
+          </div>
+        </div>
+      </Layout>,
+      { headers: { "content-type": "text/html" } }
+    );
+  },
+};
+```
+(Port the complete HTML structure from `src/pages/index.astro`, converting all Astro `{map(...)}` to JSX `{arr.map(...)}` and `<style>` to inline styles.)
+- [ ] **Step 2: Commit**
+```bash
+git add packages/workers/home/
+git commit -m "feat: add home page worker"
+```
+---
+### Task 7: CV Worker
+**Files:**
+- Create: `packages/workers/cv/package.json` + configs
+- Create: `packages/workers/cv/src/index.tsx`
+Renders resume page — links to PDF download and embeds SVG inline:
+```tsx
+import { Layout } from "@pyrossh/ui";
+import { SITE_URL } from "@pyrossh/config";
+export default {
+  async fetch(request: Request): Promise<Response> {
+    return new Response(
+      <Layout title="Curriculum Vitae" description="Peter John CV" request={request}>
+        <div>
+          <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" rel="noopener noreferrer" 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>
+        </div>
+      </Layout>,
+      { headers: { "content-type": "text/html" } }
+    );
+  },
+};
+```
+Route: `pyrossh.dev/cv`
+- [ ] **Commit**
+---
+### Task 8: Only Bible App Workers
+**Files:**
+- Create: `packages/workers/only-bible-app/index/` — route `/only-bible-app`
+- Create: `packages/workers/only-bible-app/privacy/` — route `/only-bible-app/privacy-policy`
+- Create: `packages/workers/only-bible-app/terms/` — route `/only-bible-app/terms-and-conditions`
+Each is a static page worker, porting the HTML from the corresponding `.astro` pages. No dynamic data needed.
+- [ ] **Step 1: Create `packages/workers/only-bible-app/index/src/index.tsx`**
+Port `src/pages/only-bible-app/index.astro` — app landing page with links to Google Play and App Store.
+- [ ] **Step 2: Create privacy policy and terms workers**
+Port `src/pages/only-bible-app/privacy-policy/index.astro` and `terms-and-conditions/index.astro`.
+- [ ] **Step 3: Commit**
+```bash
+git add packages/workers/only-bible-app/
+git commit -m "feat: add only-bible-app workers"
+```
+---
+### Task 9: Blog Workers
+**Files:**
+- Create: `packages/workers/posts/index/` — route `pyrossh.dev/posts`
+- Create: `packages/workers/posts/detail/` — route `pyrossh.dev/posts/*`
+- [ ] **Step 1: Blog list worker**
+```tsx
+import { Layout } from "@pyrossh/ui";
+import { getPosts } from "@pyrossh/core";
+import type { Env } from "@pyrossh/types";
+export default {
+  async fetch(request: Request, env: Env): Promise<Response> {
+    const posts = await getPosts(env.REPOS);
+    return new Response(
+      <Layout title="Posts" description="Posts" request={request}>
+        <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 => (
+            <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>
+      </Layout>,
+      { headers: { "content-type": "text/html" } }
+    );
+  },
+};
+```
+- [ ] **Step 2: Blog post detail worker**
+```tsx
+import { Layout } from "@pyrossh/ui";
+import { getPost } from "@pyrossh/core";
+import type { Env } from "@pyrossh/types";
+export default {
+  async fetch(request: Request, env: Env): Promise<Response> {
+    const url = new URL(request.url);
+    const postId = url.pathname.replace("/posts/", "").replace(/\/$/, "");
+    const post = await getPost(env.REPOS, postId);
+    if (!post) {
+      return Response.redirect(`${url.origin}/404`, 302);
+    }
+    return new Response(
+      <Layout title={post.data.title} description={post.data.description} request={request}>
+        <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;color:light-dark(hsl(from var(--color-text) h s 40%), hsl(from var(--color-text) h s 80%))">
+            {post.data.pubDate.toLocaleDateString()}
+          </time>
+          <hr style="margin:0.5rem 0;border-color:var(--color-text)" />
+          <div dangerouslySetInnerHTML={{ __html: post.html }} />
+        </article>
+      </Layout>,
+      { headers: { "content-type": "text/html" } }
+    );
+  },
+};
+```
+- [ ] **Step 3: Commit**
+```bash
+git add packages/workers/posts/
+git commit -m "feat: add blog list and detail workers"
+```
+---
+### Task 10: Repo Readme Worker
+**Files:**
+- Create: `packages/workers/repos/readme/package.json` + configs
+- Create: `packages/workers/repos/readme/src/index.tsx`
+- [ ] **Step 1: Create the repo readme worker**
+This handles `GET /repos/{repoId}` — the broadest repos pattern. Shows the README tab.
+```tsx
+import { RepoLayout } from "@pyrossh/ui";
+import { getRepo, getRepoReadme, renderMarkdown } from "@pyrossh/core";
+import type { Env } from "@pyrossh/types";
+export default {
+  async fetch(request: Request, env: Env): Promise<Response> {
+    const url = new URL(request.url);
+    const repoId = url.pathname.replace("/repos/", "").replace(/\/$/, "");
+    const repo = getRepo(repoId);
+    if (!repo) return Response.redirect(`${url.origin}/404`, 302);
+    const readmeRaw = await getRepoReadme(env.REPOS, repo.id);
+    const readmeHtml = readmeRaw ? await renderMarkdown(readmeRaw) : "";
+    return new Response(
+      <RepoLayout repo={repo} request={request} currentTab="Readme">
+        <article>
+          <div dangerouslySetInnerHTML={{ __html: readmeHtml }} />
+        </article>
+      </RepoLayout>,
+      {
+        headers: { "content-type": "text/html", "Cache-Control": "public, max-age=300, s-maxage=3600" },
+      }
+    );
+  },
+};
+```
+Route: `pyrossh.dev/repos/*`
+- [ ] **Step 2: Commit**
+---
+### Task 11: Repo Commits Workers
+**Files:**
+- Create: `packages/workers/repos/commits/index/` — route `pyrossh.dev/repos/*/commits`
+- Create: `packages/workers/repos/commits/detail/` — route `pyrossh.dev/repos/*/commits/*`
+- [ ] **Step 1: Commits list worker**
+Ports `src/pages/repos/[...repoId]/commits/index.astro` — lists commits from gitReader.
+- [ ] **Step 2: Commit detail worker**
+Ports `src/pages/repos/[...repoId]/commits/[...hash]/index.astro` — shows commit details and HTML diff via diff2html.
+- [ ] **Step 3: Commit**
+---
+### Task 12: Repo Files Workers
+**Files:**
+- Create: `packages/workers/repos/files/index/` — route `pyrossh.dev/repos/*/files`
+- Create: `packages/workers/repos/files/detail/` — route `pyrossh.dev/repos/*/files/*`
+- Create: `packages/workers/repos/files/history/` — route `pyrossh.dev/repos/*/files/*/history`
+- Create: `packages/workers/repos/files/blame/` — route `pyrossh.dev/repos/*/files/*/blame`
+- [ ] **Step 1: File tree worker** — lists files from gitReader, builds file tree, renders recursive list.
+- [ ] **Step 2: File view worker** — shows file content with syntax highlighting, image preview, or binary notice.
+- [ ] **Step 3: File history worker** — shows commits that modified the file.
+- [ ] **Step 4: File blame worker** — WIP, shows placeholder.
+- [ ] **Step 5: Commit**
+---
+### Task 13: Repo Issues Workers
+**Files:**
+- Create: `packages/workers/repos/issues/index/` — route `pyrossh.dev/repos/*/issues`
+- Create: `packages/workers/repos/issues/detail/` — route `pyrossh.dev/repos/*/issues/*`
+- [ ] **Step 1: Issues list worker**
+Ports `src/pages/repos/[...repoId]/issues/index.astro`. Shows open/closed counts, new issue form, and issue list. Forms use `hx-post` to submit to the issues detail worker:
+```tsx
+<form hx-post={`/repos/${repo.id}/issues`} hx-target="#issues-list" hx-swap="innerHTML">
+  <input type="hidden" name="repoId" value={repo.id} />
+  <input name="title" placeholder="Title" required />
+  <textarea name="body" placeholder="Description"></textarea>
+  <button type="submit">Create</button>
+</form>
+```
+- [ ] **Step 2: Issues detail worker**
+Ports `src/pages/repos/[...repoId]/issues/[...issueId]/index.astro`. Shows issue body, comments, state toggle (hx-put), and comment form (hx-post). Handles both GET (page render) and POST/PUT (htmx actions):
+```typescript
+async fetch(request: Request, env: Env): Promise<Response> {
+  const url = new URL(request.url);
+  const [, repoId, , issueId] = url.pathname.split("/");
+  if (request.method === "POST") {
+    // Handle issue creation or comment
+    const formData = await request.formData();
+    // ...
+    return htmxFragment(/* updated issue list or comment thread */);
+  }
+  if (request.method === "PUT") {
+    // Handle state toggle
+    // ...
+    return htmxFragment(/* updated status badge */);
+  }
+  // GET: render full page
+  // ...
+}
+```
+- [ ] **Step 3: Commit**
+---
+### Task 14: Assets Worker
+**Files:**
+- Create: `packages/workers/assets/` — serves static files (CSS, images, PDFs, icons, JS)
+- [ ] **Step 1: Create the assets worker**
+Serves files from the `assets/` directory. In production, this can be a static R2 bucket or a Worker that serves files from a mapped directory.
+```tsx
+// Simple approach: redirect to R2 bucket or serve from Worker's assets
+export default {
+  async fetch(request: Request): Promise<Response> {
+    const url = new URL(request.url);
+    const assetPath = url.pathname.replace("/assets/", "");
+    // Serve from R2 bucket, or compile-time bundled assets
+    // For now, redirect to committed assets directory
+  },
+};
+```
+Route: `pyrossh.dev/assets/*`
+For development simplicity, assets can be served directly from the filesystem by the dev router.
+- [ ] **Step 2: Commit**
+---
+### Task 15: Dev Router Worker
+**Files:**
+- Create: `packages/workers/dev-router/package.json` + configs
+- Create: `packages/workers/dev-router/src/index.ts`
+- [ ] **Step 1: Create the dev router**
+This is a development-only Worker that imports all route handlers and dispatches by URL path:
+```typescript
+import home from "@pyrossh/home";
+import cv from "@pyrossh/cv";
+import blogList from "@pyrossh/posts-index";
+import blogDetail from "@pyrossh/posts-detail";
+import repoReadme from "@pyrossh/repos-readme";
+import repoCommits from "@pyrossh/repos-commits-index";
+import repoCommitDetail from "@pyrossh/repos-commits-detail";
+import repoFiles from "@pyrossh/repos-files-index";
+import repoFileDetail from "@pyrossh/repos-files-detail";
+import repoFileHistory from "@pyrossh/repos-files-history";
+import repoFileBlame from "@pyrossh/repos-files-blame";
+import repoIssues from "@pyrossh/repos-issues-index";
+import repoIssueDetail from "@pyrossh/repos-issues-detail";
+import onlyBible from "@pyrossh/only-bible-index";
+import onlyBiblePrivacy from "@pyrossh/only-bible-privacy";
+import onlyBibleTerms from "@pyrossh/only-bible-terms";
+import robots from "@pyrossh/robots";
+import rss from "@pyrossh/rss";
+import notFound from "@pyrossh/not-found";
+import serverError from "@pyrossh/server-error";
+interface Route {
+  pattern: RegExp | string;
+  worker: { fetch: (request: Request, env: any, ctx: ExecutionContext) => Promise<Response> };
+}
+const routes: Route[] = [
+  { pattern: /^\/robots\.txt$/, worker: robots },
+  { pattern: /^\/rss\.xml$/, worker: rss },
+  { pattern: /^\/$/, worker: home },
+  { pattern: /^\/cv$/, worker: cv },
+  { pattern: /^\/posts\/(.+)$/, worker: blogDetail },
+  { pattern: /^\/posts$/, worker: blogList },
+  // Repo routes
+  { pattern: /^\/repos\/[^/]+\/issues\/[^/]+$/, worker: repoIssueDetail },
+  { pattern: /^\/repos\/[^/]+\/issues$/, worker: repoIssues },
+  { pattern: /^\/repos\/[^/]+\/commits\/[^/]+$/, worker: repoCommitDetail },
+  { pattern: /^\/repos\/[^/]+\/commits$/, worker: repoCommits },
+  { pattern: /^\/repos\/[^/]+\/files\/.+\/history$/, worker: repoFileHistory },
+  { pattern: /^\/repos\/[^/]+\/files\/.+\/blame$/, worker: repoFileBlame },
+  { pattern: /^\/repos\/[^/]+\/files\/.+$/, worker: repoFileDetail },
+  { pattern: /^\/repos\/[^/]+\/files$/, worker: repoFiles },
+  { pattern: /^\/repos\/.+$/, worker: repoReadme },
+  // Only Bible
+  { pattern: /^\/only-bible-app\/privacy-policy$/, worker: onlyBiblePrivacy },
+  { pattern: /^\/only-bible-app\/terms-and-conditions$/, worker: onlyBibleTerms },
+  { pattern: /^\/only-bible-app/, worker: onlyBible },
+];
+// Assets — serve from local filesystem in dev
+export default {
+  async fetch(request: Request, env: any, ctx: ExecutionContext): Promise<Response> {
+    const url = new URL(request.url);
+    for (const route of routes) {
+      const match = typeof route.pattern === "string"
+        ? url.pathname === route.pattern
+        : route.pattern.test(url.pathname);
+      if (match) {
+        try {
+          return await route.worker.fetch(request, env, ctx);
+        } catch (err) {
+          return await serverError.fetch(request, env, ctx);
+        }
+      }
+    }
+    return await notFound.fetch(request, env, ctx);
+  },
+};
+```
+- [ ] **Step 2: Commit**
+---
+### Task 16: Root Package Scripts & Deployment
+**Files:**
+- Modify: `package.json` (root) — add scripts
+- Create: `scripts/deploy-all.sh`
+- [ ] **Step 1: Add root scripts**
+```json
+{
+  "scripts": {
+    "dev": "wrangler dev --config packages/workers/dev-router/wrangler.jsonc",
+    "dev:home": "wrangler dev --config packages/workers/home/wrangler.jsonc",
+    "deploy:all": "bash scripts/deploy-all.sh",
+    "deploy:worker": "wrangler deploy --config",
+    "typecheck": "tsc --noEmit"
+  }
+}
+```
+- [ ] **Step 2: Create `scripts/deploy-all.sh`**
+```bash
+#!/bin/bash
+set -euo pipefail
+find packages/workers -name 'wrangler.jsonc' -not -path '*/dev-router/*' | while read -r config; do
+  echo "Deploying: $config"
+  wrangler deploy --config "$config"
+done
+```
+- [ ] **Step 3: Commit**
+```bash
+git add package.json scripts/
+git commit -m "chore: add root scripts and deploy script"
+```
+---
+### Task 17: Remove Old Astro Source
+**Files:**
+- Delete: entire `src/` directory
+- Delete: `astro.config.mjs`
+- Delete: `ec.config.mjs`
+- Delete: `.astro/` directory
+- Delete: Astro-specific dependencies from root `package.json`
+- Modify: `wrangler.toml` — remove Astro-specific config
+- [ ] **Step 1: Remove old source**
+```bash
+rm -rf src/ .astro/
+git rm -r src/ .astro/
+```
+- [ ] **Step 2: Update root `package.json`**
+Remove dependencies: `astro`, `@astrojs/*`, `astro-*`, `unplugin-icons`, `@iconify-json/*`, `astro-color-scheme`, etc.
+- [ ] **Step 3: Clean up root `wrangler.toml`**
+Keep only zone/account config, remove the `[assets]` block and Astro-specific entries.
+- [ ] **Step 4: Commit**
+```bash
+git add -A
+git commit -m "feat: remove old Astro source after full migration"
+```

docs/superpowers/specs/2026-07-07-rewrite-typed-htmx-workers-design.md ADDED Viewed

@@ -0,0 +1,357 @@
+# Rewrite pyrossh.dev with Cloudflare Workers + typed-htmx + monorepo
+## Motivation
+Replace Astro 6 with a purpose-built architecture: individual Cloudflare Workers (one per URL pattern) generating HTML via typed-htmx/typed-html JSX, orchestrated via Cloudflare Routes for path-based routing. This provides complete control over the rendering pipeline, minimal bundle sizes per endpoint, and a clean monorepo structure that mirrors the URL hierarchy.
+## Scope
+Rewrite the entire `src/` directory into a pnpm workspaces monorepo. Migrate ~20 routes into individual Worker packages. Replace Astro components with typed-htmx JSX templates. Keep existing business logic (git reader, markdown pipeline, content parser, git-bug issues) as shared packages. Remove Astro, its adapter, and all Astro-specific dependencies.
+## Architecture
+### Routing
+Each Worker declares its route pattern in `wrangler.jsonc`. Cloudflare Routes match requests to the correct Worker at the edge:
+```
+pyrossh.dev/cv                          → cv Worker
+pyrossh.dev/posts                       → posts/index Worker
+pyrossh.dev/posts/*                     → posts/detail Worker
+pyrossh.dev/repos/*                     → repos/readme Worker
+pyrossh.dev/repos/*/commits             → repos/commits/index Worker
+pyrossh.dev/repos/*/commits/*           → repos/commits/detail Worker
+pyrossh.dev/repos/*/files               → repos/files/index Worker
+pyrossh.dev/repos/*/files/*             → repos/files/detail Worker
+pyrossh.dev/repos/*/files/*/history     → repos/files/history Worker
+pyrossh.dev/repos/*/files/*/blame       → repos/files/blame Worker
+pyrossh.dev/repos/*/issues              → repos/issues/index Worker
+pyrossh.dev/repos/*/issues/*            → repos/issues/detail Worker
+pyrossh.dev/only-bible-app              → only-bible-app/index Worker
+pyrossh.dev/only-bible-app/privacy-policy → only-bible-app/privacy Worker
+pyrossh.dev/only-bible-app/terms-and-conditions → only-bible-app/terms Worker
+pyrossh.dev/robots.txt                  → robots Worker
+pyrossh.dev/rss.xml                     → rss Worker
+pyrossh.dev/assets/*                    → assets Worker (CSS, images, PDFs)
+```
+More specific patterns match before broader ones (Cloudflare edge behavior).
+In development, a single dev-router Worker imports all route handlers as modules and dispatches by URL path — no need to run 18 separate `wrangler dev` instances.
+### Monorepo Structure
+```
+pyrossh.dev/
+├── packages/
+│   ├── shared/
+│   │   ├── config/               # Constants, SITE_TITLE, REPOS list, TOOLS list
+│   │   │   ├── package.json      # @pyrossh/config
+│   │   │   └── src/index.ts
+│   │   ├── core/                 # Git reader, markdown pipeline, content utils, R2 IO
+│   │   │   ├── package.json      # @pyrossh/core
+│   │   │   └── src/
+│   │   │       ├── gitReader.ts  # Bare git pack parser (from existing)
+│   │   │       ├── markdown.ts   # Unified pipeline (from existing)
+│   │   │       ├── content.ts    # Blog content reader (from existing)
+│   │   │       ├── gitBug.ts     # Issue CRUD on R2 (from existing)
+│   │   │       ├── files.ts      # File tree builder (from existing)
+│   │   │       └── repoContent.ts# README reader (from existing)
+│   │   ├── ui/                   # Layouts, components, CSS as typed-htmx JSX
+│   │   │   ├── package.json      # @pyrossh/ui
+│   │   │   └── src/
+│   │   │       ├── layout.tsx    # Base HTML shell, head, header, footer
+│   │   │       ├── header.tsx    # Nav bar with active link detection
+│   │   │       ├── footer.tsx    # Copyright footer
+│   │   │       ├── repo-nav.tsx  # Repo sub-navigation tabs
+│   │   │       ├── file-tree.tsx # Recursive file tree component
+│   │   │       ├── issue-card.tsx# Issue display card
+│   │   │       ├── commit-entry.tsx # Commit list item
+│   │   │       ├── formatted-date.tsx # Date formatting
+│   │   │       └── css.ts        # CSS string export for inlining
+│   │   └── types/                # Shared TypeScript types
+│   │       ├── package.json      # @pyrossh/types
+│   │       └── src/
+│   │           ├── env.d.ts      # R2 binding types, Worker env interfaces
+│   │           └── index.ts      # Shared domain types
+│   └── workers/
+│       ├── home/
+│       │   ├── package.json      # @pyrossh/home
+│       │   ├── wrangler.jsonc    # route: pyrossh.dev/
+│       │   ├── tsconfig.json
+│       │   └── src/index.tsx
+│       ├── cv/
+│       ├── posts/
+│       │   ├── index/
+│       │   └── detail/
+│       ├── repos/
+│       │   ├── readme/
+│       │   ├── commits/
+│       │   │   ├── index/
+│       │   │   └── detail/
+│       │   ├── files/
+│       │   │   ├── index/
+│       │   │   ├── detail/
+│       │   │   ├── history/
+│       │   │   └── blame/
+│       │   └── issues/
+│       │       ├── index/
+│       │       └── detail/
+│       ├── only-bible-app/
+│       │   ├── index/
+│       │   ├── privacy/
+│       │   └── terms/
+│       ├── robots/
+│       ├── rss/
+│       ├── assets/               # Static files: CSS, resume PDF/SVG, images
+│       ├── not-found/            # 404
+│       ├── server-error/         # 500
+│       └── dev-router/           # Dev-only: imports & dispatches to all workers
+├── pnpm-workspace.yaml
+├── tsconfig.base.json
+├── package.json                  # Root scripts
+└── wrangler.toml                 # Zone-level config (optional)
+```
+### Shared Packages
+**`@pyrossh/config`** — Pure constants, no dependencies. Exports `SITE_TITLE`, `SITE_DESCRIPTION`, `REPOS` array, `TOOLS` array, menu items.
+**`@pyrossh/core`** — All domain logic migrated from existing `src/utils/`:
+- `gitReader.ts` — Identical port, uses R2 binding interface
+- `markdown.ts` — Same unified pipeline (remark → rehype → expressive-code → stringify)
+- `content.ts` — Reads blog markdown from content directory in repo
+- `gitBug.ts` — Issue CRUD with spamscanner
+- `files.ts` — File tree builder with vscode-icons
+- `repoContent.ts` — README fetcher
+All core functions accept `R2Bucket` as a parameter (DI-style), keeping them testable and R2-implementation-agnostic.
+**`@pyrossh/ui`** — typed-htmx/typed-html JSX components:
+```tsx
+// Example: layout.tsx
+import type { HtmlChildren } from 'typed-htmx/typed-html'
+import { css } from './css'
+export function Layout({ title, children, request }: {
+  title: string
+  children: HtmlChildren
+  request?: Request
+}) {
+  return (
+    <html lang="en">
+      <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>{title}</title>
+        <style>{css}</style>
+        <script src="https://unpkg.com/htmx.org@2"></script>
+      </head>
+      <body>
+        <Header currentPath={request ? new URL(request.url).pathname : ''} />
+        <main>{children}</main>
+        <Footer />
+      </body>
+    </html>
+  )
+}
+```
+**`@pyrossh/types`** — Env interfaces:
+```typescript
+export interface Env {
+  REPOS: R2Bucket
+  CONTENT: R2Bucket
+}
+```
+### Each Worker Pattern
+Every worker follows the same structure:
+```tsx
+// packages/workers/cv/src/index.tsx
+import { Layout } from '@pyrossh/ui'
+export default {
+  async fetch(request: Request, env: Env, ctx: ExecutionContext) {
+    return new Response(
+      <Layout title="CV - pyrossh" request={request}>
+        <h1>Curriculum Vitae</h1>
+        {/* CV content */}
+      </Layout>,
+      { headers: { 'content-type': 'text/html' } }
+    )
+  }
+}
+```
+### Development Workflow
+**Dev router** (`packages/workers/dev-router/src/index.tsx`) — imports all workers and dispatches by URL path:
+```tsx
+import home from '@pyrossh/home'
+import cv from '@pyrossh/cv'
+import blogList from '@pyrossh/posts-index'
+// ...
+const routes = [
+  { pattern: '/', worker: home },
+  { pattern: '/cv', worker: cv },
+  { pattern: '/posts', worker: blogList },
+  { pattern: new URLPattern({ pathname: '/posts/:slug' }), worker: blogPost },
+  // ...
+]
+export default {
+  async fetch(request: Request, env: Env, ctx: ExecutionContext) {
+    const url = new URL(request.url)
+    for (const route of routes) {
+      const match = route.pattern instanceof URLPattern
+        ? route.pattern.exec(url)
+        : url.pathname === route.pattern
+      if (match) return route.worker.fetch(request, env, ctx)
+    }
+    return notFound.fetch(request, env, ctx)
+  }
+}
+```
+Run with: `wrangler dev --config packages/workers/dev-router/wrangler.jsonc`
+For focused development on a single worker: `cd packages/workers/home && wrangler dev`.
+### htmx Interactivity
+htmx handles all dynamic UI without custom JavaScript:
+| Feature | htmx approach |
+|---------|--------------|
+| Issue creation | `form hx-post="/repos/{repo}/issues"` → server returns updated issue list fragment |
+| Issue commenting | `form hx-post="/repos/{repo}/issues/{id}/comments"` → server returns comment thread |
+| Issue state toggle | `button hx-put="/repos/{repo}/issues/{id}/state"` → server returns badge |
+| File tree expand | `span hx-get="/repos/{repo}/files/{dir}?expanded=true" hx-target="next ul"` |
+| Repo tab nav | `a hx-get="/repos/{repo}/{tab}" hx-target="#tab-content" hx-push-url="true"` |
+| Relative timestamps | `timeago` custom element (tiny client script) |
+Each htmx request hits the same Worker (for that route pattern), which returns an HTML fragment instead of a full page when `HX-Request` header is present.
+### CSS Strategy
+A single CSS file in the assets Worker, served at `pyrossh.dev/assets/main.css`:
+- Uses `light-dark()` for theme support
+- CSS custom properties for colors, spacing, typography
+- Same visual design as current site
+Each Worker's Layout component links to it. The assets Worker also serves images, resume PDF/SVG, and app store icons.
+Alternatively, CSS can be inlined as a string in `@pyrossh/ui/css.ts` for zero external requests (preferred for initial load speed). Theme toggle uses a small inline script + CSS class on `<html>`.
+### Data Flow
+```
+Browser ──GET /repos/rust-embed──▶  Cloudflare Edge
+                                        │
+                                        ▼
+                              Route match: repos/readme Worker
+                                        │
+                                        ▼
+                              repos/readme/src/index.tsx
+                                        │
+                          ┌─────────────┼─────────────┐
+                          ▼             ▼             ▼
+                    @pyrossh/core  @pyrossh/ui   @pyrossh/config
+                    (git reader,   (Layout,       (constants)
+                     markdown)      components)
+                          │
+                          ▼
+                    R2 Bucket (REPOS)
+                          │
+                          ▼
+                    HTML Response (with htmx attributes)
+```
+### Deployment
+Each worker deployed independently via `wrangler deploy`:
+```bash
+wrangler deploy --config packages/workers/cv/wrangler.jsonc
+```
+All workers share the same `zone_id` and `route` patterns in their respective `wrangler.jsonc`. Deployment can be scripted:
+```bash
+# Deploy all workers
+for dir in packages/workers/*/ packages/workers/*/*/; do
+  if [ -f "$dir/wrangler.jsonc" ]; then
+    wrangler deploy --config "$dir/wrangler.jsonc"
+  fi
+done
+```
+Or individual workers can be deployed on demand.
+### Error Handling
+- `not-found` Worker: route `pyrossh.dev/*` (catch-all at Cloudflare edge). Renders 404 page.
+- `server-error` Worker: not a route, but a shared error handler each worker uses in try/catch.
+### Testing
+Existing Playwright tests will be adapted to target the dev router (localhost:8787). Tests remain the same — they verify page content and navigation. Unit tests for `@pyrossh/core` can use Vitest.
+## Files to Create
+Root config:
+- `pnpm-workspace.yaml` — add `packages/workers/**`
+- `tsconfig.base.json` — shared TS config with `jsx: "react-jsx"`, `jsxImportSource: "typed-htmx/typed-html"`
+- `package.json` — root scripts: `dev`, `dev:worker`, `build`, `deploy:all`, `deploy:worker`
+Shared packages (created with `package.json`, `tsconfig.json`, `src/index.ts`):
+- `packages/shared/config/src/index.ts`
+- `packages/shared/core/src/gitReader.ts`, `markdown.ts`, `content.ts`, `gitBug.ts`, `files.ts`, `repoContent.ts` (ported from existing `src/utils/`)
+- `packages/shared/ui/src/layout.tsx`, `header.tsx`, `footer.tsx`, `repo-nav.tsx`, `file-tree.tsx`, `issue-card.tsx`, `commit-entry.tsx`, `formatted-date.tsx`, `css.ts`
+- `packages/shared/types/src/env.d.ts`, `index.ts`
+Worker packages (each with `package.json`, `wrangler.jsonc`, `tsconfig.json`, `src/index.tsx`):
+- All 18 workers listed in the Monorepo Structure section above
+- `packages/workers/dev-router/` — dev-only router
+## Files to Remove
+After migration:
+- `src/` directory (entire Astro source)
+- `astro.config.mjs`
+- `vite.config.ts` (if not needed for workers)
+- `ec.config.mjs`
+- `.astro/` directory
+- Astro-specific dependencies from root `package.json`:
+  - `astro`
+  - `@astrojs/cloudflare`
+  - `@astrojs/check`
+  - `@astrojs/rss`
+  - `@astrojs/sitemap`
+  - `astro-color-scheme`
+  - `astro-expressive-code`
+  - `unplugin-icons` (icons per-worker or in assets Worker)
+  - `@iconify-json/*` (if only used in Astro components)
+## Dependencies to Add
+Root / shared:
+- `typed-htmx`
+- `htmx.org` (client script, served from assets Worker or CDN)
+- `wrangler` (already present)
+- `concurrently` (for dev scripts if needed)
+- `typescript` (already present)
+`@pyrossh/core`:
+- `unified`, `remark-parse`, `remark-rehype`, `rehype-stringify`, `rehype-expressive-code`
+- `gray-matter`
+- `diff`
+- `spamscanner`
+- `pretty-bytes`
+- `diff2html`
+`@pyrossh/ui`:
+- `typed-htmx`

package.json CHANGED Viewed

@@ -20,7 +20,6 @@
     "rehype-stringify": "^10.0.1",
     "remark-parse": "^11.0.0",
     "remark-rehype": "^11.1.2",
-    "spamscanner": "^6.1.5",
     "timeago.js": "^4.0.2",
     "typed-htmx": "^0.3.1",
     "unified": "^11.0.5"

packages/shared/core/package.json CHANGED Viewed

@@ -16,7 +16,6 @@
     "rehype-stringify": "^10.0.1",
     "remark-parse": "^11.0.0",
     "remark-rehype": "^11.1.2",
-    "spamscanner": "^6.1.5",
     "unified": "^11.0.5",
     "vscode-icons": "https://github.com/vscode-icons/vscode-icons.git"
   }

packages/workers/dev-router/wrangler.jsonc CHANGED Viewed

@@ -4,5 +4,5 @@
   "compatibility_date": "2026-07-07",
   "compatibility_flags": ["nodejs_compat"],
   "workers_dev": true,
-  "r2_buckets": [{ "binding": "REPOS", "bucket_name": "pyrossh-repos-prd" }],
+  "r2_buckets": [{ "binding": "REPOS", "bucket_name": "pyrossh-repos-prd" }]
 }

pnpm-workspace.yaml CHANGED Viewed

@@ -7,11 +7,11 @@ catalog:
   vite-plus: ^0.2.2
 allowBuilds:
-  "@tensorflow/tfjs-node": set this to true or false
+  "@tensorflow/tfjs-node": false
-  core-js: set this to true or false
+  core-js: false
-  es5-ext: set this to true or false
+  es5-ext: false
-  esbuild: set this to true or false
+  esbuild: true
-  iconv: set this to true or false
+  iconv: false
-  re2: set this to true or false
+  re2: false
-  sharp: set this to true or false
+  sharp: false
-  workerd: set this to true or false
+  workerd: true