website

#astro#js#html#css

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

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

0ea7b3d — pyrossh 2026-07-08T19:16:16+05:30 
docs: simplify to single HonoX app, no monorepo or shared packages
Files changed (1) hide show
  1. docs/superpowers/specs/2026-07-08-migrate-to-honox-design.md +142 -380
docs/superpowers/specs/2026-07-08-migrate-to-honox-design.md CHANGED
@@ -1,102 +1,92 @@
1
- # pyrossh.dev — Migrate to HonoX
1
+ # pyrossh.dev — Migrate to HonoX (single app)
2
2
 
3
- **Goal:** Replace the current architecture of ~18 individual Cloudflare Workers + dev-router + assets worker with a single HonoX application using hono/jsx and HTMX for interactivity. Keep the existing `packages/shared/` library packages (with minor updates).
3
+ **Goal:** Replace the current monorepo of ~18 Workers + dev-router + assets worker + 4 shared packages with a single HonoX application. No monorepo, no shared packages — just one app with local imports.
4
4
 
5
5
  ## Motivation
6
6
 
7
- Current architecture is over-engineered for the site's complexity:
7
+ Current architecture has 22+ npm packages for a personal website. This is over-engineered:
8
8
 
9
- - 18 separate worker packages, each with its own `wrangler.jsonc`, `package.json`, and deployment
9
+ - 18 individual worker packages, each with its own config
10
+ - 4 shared packages (config, types, core, ui) linked via pnpm workspaces
10
- - A dev-router that imports all 18 workers for local development
11
+ - Dev-router that imports all workers for local development
11
- - An assets worker that proxies non-CSS requests to an R2 bucket
12
+ - Assets worker proxying to R2 bucket
12
- - Manual route pattern matching (`/^\/posts\/(.+)$/`) instead of standard routing
13
+ - Manual route pattern matching
13
14
 
14
- A single HonoX app with file-based routing eliminates all of this. Using hono/jsx means no custom renderer bridge and no extra JSX runtime dependency.
15
+ A single HonoX app with file-based routing, hono/jsx for templating, hono/css for styling, s3mini for storage, and htmx for interactivity eliminates all of this.
15
16
 
16
- ## Architecture
17
-
18
- ### Before (current)
19
-
20
- ```
21
- packages/workers/
22
- assets/ → CSS + R2 proxy worker
23
- home/ → /
24
- cv/ → /cv
25
- posts/index/ → /posts
26
- posts/detail/ → /posts/:id
27
- repos/readme/ → /repos/:id
28
- repos/commits/index/ → /repos/:id/commits
29
- repos/commits/detail/ → /repos/:id/commits/:hash
30
- repos/files/index/ → /repos/:id/files
31
- repos/files/detail/ → /repos/:id/files/*
32
- repos/files/history/ → /repos/:id/files/*/history
33
- repos/files/blame/ → /repos/:id/files/*/blame
34
- repos/issues/index/ → /repos/:id/issues
35
- repos/issues/detail/ → /repos/:id/issues/:issueId
36
- only-bible-app/index/ → /only-bible-app
37
- only-bible-app/privacy/ → /only-bible-app/privacy-policy
38
- only-bible-app/terms/ → /only-bible-app/terms-and-conditions
39
- robots/ → /robots.txt
40
- rss/ → /rss.xml
41
- not-found/ → 404
42
- server-error/ → 500
43
- dev-router/ → imports all above for wrangler dev
44
- ```
45
-
46
- Each worker is its own npm package (`@pyrossh/home`, `@pyrossh/cv`, etc.), bundled and deployed separately. Each has its own `wrangler.jsonc` with individual route patterns and Cloudflare deployment.
47
-
48
- ### After
17
+ ## Project Structure
49
18
 
50
19
  ```
51
20
  pyrossh.dev/
52
21
  app/
53
- global.d.ts # HonoX type declarations
22
+ global.d.ts # HonoX type declarations
54
- server.ts # createApp() entry point
23
+ server.ts # createApp() entry
55
- client.ts # Client entry (for HonoX, minimal)
24
+ client.ts # HonoX client entry
25
+ config.ts # SITE_TITLE, REPOS list, TOOLS list, NAV_ITEMS, SITE_URL
26
+ types.ts # RuntimePost, RuntimeRepo, Commit, FileEntry, GitBugIssue, etc.
27
+ s3.ts # S3mini singleton from env vars
28
+ components/ # UI components
29
+ header.tsx
30
+ footer.tsx
31
+ repo-layout.tsx
32
+ file-layout.tsx
33
+ commit-entry.tsx
34
+ issue-card.tsx
35
+ file-tree.tsx
36
+ formatted-date.tsx
37
+ lib/ # Business logic (ported from @pyrossh/core)
38
+ markdown.ts
39
+ content.ts # getPosts, getPost — reads from S3
40
+ gitReader.ts # getCommits, getFiles, getFileContentData, etc.
41
+ gitBug.ts # GitBug issue CRUD
42
+ files.ts # File tree builder, icon resolver
43
+ repoContent.ts # getRepoReadme
56
44
  routes/
57
- _renderer.tsx # Standard HonoX jsxRenderer
45
+ _renderer.tsx # HonoX jsxRenderer with layout
58
- _404.tsx # Not found
46
+ _404.tsx # Not found
59
- _error.tsx # Error page
47
+ _error.tsx # Error page
60
- index.tsx # Home (/)
48
+ index.tsx # Home (/)
61
- cv.tsx # CV (/cv)
49
+ cv.tsx # CV (/cv)
50
+ posts/
62
- posts/index.tsx # Blog list (/posts)
51
+ index.tsx # Blog list (/posts)
63
- posts/[id].tsx # Blog post (/posts/:id)
52
+ [id].tsx # Blog post (/posts/:id)
53
+ repos/
64
- repos/[id].tsx # Repo README (/repos/:id)
54
+ [id].tsx # Repo README (/repos/:id)
55
+ [id]/
65
- repos/[id]/commits.tsx # Commits list
56
+ commits.tsx
66
- repos/[id]/commits/[hash].tsx # Commit detail
57
+ commits/[hash].tsx
67
- repos/[id]/files.tsx # File tree
58
+ files.tsx
68
- repos/[id]/files/[...path].tsx # File view
59
+ files/[...path].tsx
69
- repos/[id]/files/[...path]/history.tsx # File history
60
+ files/[...path]/history.tsx
70
- repos/[id]/files/[...path]/blame.tsx # File blame
61
+ files/[...path]/blame.tsx
71
- repos/[id]/issues.tsx # Issues list
62
+ issues.tsx
72
- repos/[id]/issues/[issueId].tsx # Issue detail
63
+ issues/[issueId].tsx
73
- only-bible-app/index.tsx
64
+ only-bible-app/
65
+ index.tsx
74
- only-bible-app/privacy-policy.tsx
66
+ privacy-policy.tsx
75
- only-bible-app/terms-and-conditions.tsx
67
+ terms-and-conditions.tsx
76
- robots.txt.ts # robots.txt
68
+ robots.txt.ts
77
- rss.xml.tsx # RSS feed
69
+ rss.xml.tsx
78
- assets/ # Static files (CSS, images, PDFs, icons)
70
+ assets/ # CSS, images, PDFs, icons (served by wrangler)
79
- content/ # Blog posts (Markdown)
71
+ content/ # Blog posts (synced to S3)
80
- packages/shared/ # Config, Types, Core, UI — unchanged
81
72
  vite.config.ts
82
73
  wrangler.jsonc
83
- package.json
84
74
  tsconfig.json
75
+ package.json
85
76
  ```
86
77
 
87
- ## Key Components
78
+ ## Architecture
88
79
 
89
- ### 1. Renderer (`_renderer.tsx`)
80
+ ### Renderer (`app/routes/_renderer.tsx`)
90
81
 
91
- Uses HonoX's standard `jsxRenderer` from `hono/jsx-renderer` — no custom BYOR bridge needed:
82
+ Standard HonoX `jsxRenderer` — renders the HTML document layout. Uses hono/jsx:
92
83
 
93
- ```typescript
84
+ ```tsx
94
- // app/routes/_renderer.tsx
95
85
  import { jsxRenderer } from 'hono/jsx-renderer'
96
86
  import { Script } from 'honox/server'
97
- import { Header } from '@pyrossh/ui/header'
87
+ import { Header } from '../components/header'
98
- import { Footer } from '@pyrossh/ui/footer'
88
+ import { Footer } from '../components/footer'
99
- import { SITE_TITLE, SITE_DESCRIPTION, SITE_URL } from '@pyrossh/config'
89
+ import { SITE_TITLE, SITE_DESCRIPTION, SITE_URL } from '../config'
100
90
 
101
91
  export default jsxRenderer(({ children, title, description, css }) => {
102
92
  const url = new URL(c.req.url)
@@ -104,31 +94,21 @@ export default jsxRenderer(({ children, title, description, css }) => {
104
94
  <html lang="en">
105
95
  <head>
106
96
  <meta charset="utf-8" />
107
- <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
97
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
108
- <meta name="theme-color" content="#131618" />
109
98
  <link rel="icon" type="image/svg+xml" href="/assets/icons/icon.svg" />
110
- <link rel="alternate" type="application/rss+xml" title={title} href="/rss.xml" />
111
99
  <link rel="canonical" href={`${SITE_URL}${url.pathname}`} />
112
100
  <link rel="stylesheet" href="/assets/css/shared.css" />
113
101
  {css && <link rel="stylesheet" href={css} />}
114
102
  <title>{title ?? SITE_TITLE}</title>
115
- <meta name="title" content={title ?? SITE_TITLE} />
116
103
  <meta name="description" content={description ?? SITE_DESCRIPTION} />
117
- <meta name="author" content="pyrossh" />
118
- <meta property="og:site_name" content="pyrossh.dev" />
119
- <meta property="og:type" content="website" />
120
- <meta property="og:url" content={url.href} />
121
104
  <meta property="og:title" content={title ?? SITE_TITLE} />
122
105
  <meta property="og:description" content={description ?? SITE_DESCRIPTION} />
123
106
  <meta property="og:image" content="/assets/icons/icon.svg" />
124
- <meta name="twitter:card" content="summary_large_image" />
125
107
  <Script src="/app/client.ts" />
126
108
  </head>
127
109
  <body>
128
110
  <Header currentPath={url.pathname} />
129
- <div class="wrapper">
130
- <main>{children}</main>
111
+ <div class="wrapper"><main>{children}</main></div>
131
- </div>
132
112
  <Footer />
133
113
  <script src="https://unpkg.com/[email protected]"></script>
134
114
  </body>
@@ -137,72 +117,17 @@ export default jsxRenderer(({ children, title, description, css }) => {
137
117
  })
138
118
  ```
139
119
 
140
- This is standard HonoX — no custom `c.setRender()`, no type hacks. The Layout component is defined directly in the renderer (can be extracted later if needed). The `@pyrossh/ui/layout.tsx` Layout component is no longer needed since the renderer handles the full HTML document.
141
-
142
- ### 1a. TypeScript Configuration
143
-
144
- Uses `hono/jsx` (built into Hono, no extra dependency):
145
-
146
- ```json
147
- {
148
- "compilerOptions": {
149
- "jsx": "react-jsx",
150
- "jsxImportSource": "hono/jsx",
151
- "moduleResolution": "bundler",
152
- "target": "ESNext",
153
- "module": "ESNext",
154
- "strict": true
155
- },
156
- "include": ["app", "packages/shared/ui"]
157
- }
158
- ```
159
-
160
- ### 1b. HonoX Type Declarations (`global.d.ts`)
161
-
162
- Minimal — just the standard HonoX type setup:
163
-
164
- ```typescript
165
- import {} from 'hono'
166
-
167
- type Head = {
168
- title?: string
169
- description?: string
170
- css?: string
171
- }
172
-
173
- declare module 'hono' {
174
- interface ContextRenderer {
175
- (content: string | Promise<string>, head?: Head): Response | Promise<Response>
176
- }
177
- }
178
- ```
179
-
180
- ### 2. Route Handler Pattern
120
+ All CSS (shared, per-page) is served as static files from `assets/css/` via wrangler's `assets.directory`. hono/css is available for scoped inline styles if needed later.
181
121
 
182
- Each route handler follows a consistent pattern — same JSX syntax, different runtime:
122
+ ### Routes
183
123
 
184
- ```typescript
185
- // app/routes/index.tsx
186
- import { createRoute } from 'honox/factory'
187
- import { TOOLS, SITE_TITLE } from '@pyrossh/config'
124
+ Each route handler imports from local `../lib/` and `../components/`:
188
125
 
189
- export default createRoute((c) => {
190
- return c.render(
191
- <div class="pageContainer">
192
- <h1 class="title">Hello!</h1>
193
- {/* page body content */}
194
- </div>,
195
- { title: SITE_TITLE, css: '/assets/css/workers/home.css' }
196
- )
197
- })
198
- ```
126
+ ```tsx
199
-
200
- Handlers that need S3 storage use `getS3()` — no `c.env` dependency:
201
-
202
- ```typescript
203
127
  // app/routes/posts/index.tsx
204
128
  import { createRoute } from 'honox/factory'
205
- import { getPosts, getS3 } from '@pyrossh/core'
129
+ import { getPosts } from '../lib/content'
130
+ import { getS3 } from '../s3'
206
131
 
207
132
  export default createRoute(async (c) => {
208
133
  const posts = await getPosts(getS3())
@@ -210,7 +135,10 @@ export default createRoute(async (c) => {
210
135
  <div>
211
136
  <h1>Posts</h1>
212
137
  {posts.map(post => (
138
+ <div>
213
- <a href={`/posts/${post.id}`}>{post.data.title}</a>
139
+ <a href={`/posts/${post.id}`}>{post.data.title}</a>
140
+ <time>{post.data.pubDate.toLocaleDateString()}</time>
141
+ </div>
214
142
  ))}
215
143
  </div>,
216
144
  { title: 'Posts', css: '/assets/css/workers/posts-index.css' }
@@ -218,61 +146,17 @@ export default createRoute(async (c) => {
218
146
  })
219
147
  ```
220
148
 
221
- ### 2a. HTMX Form Handlers (POST/PUT)
222
-
223
- Same pattern — named exports for POST/PUT alongside default GET:
149
+ HTMX handlers (issue CRUD) export POST/PUT alongside default GET:
224
-
225
- ```typescript
226
- // app/routes/repos/[id]/issues/[issueId].tsx
227
- import { createRoute } from 'honox/factory'
228
- import { getGitBugIssue, addGitBugIssueComment, getS3 } from '@pyrossh/core'
229
-
230
- export default createRoute(async (c) => {
231
- const issueId = c.req.param('issueId')
232
- const issue = await getGitBugIssue(getS3(), issueId)
233
- return c.render(
234
- <div>{/* issue detail */}</div>,
235
- { title: `Issue #${issue.id}`, css: '/assets/css/workers/issues-detail.css' }
236
- )
237
- })
238
-
239
- export const POST = createRoute(async (c) => {
240
- const formData = await c.req.parseBody()
241
- return c.html(/* htmx fragment */)
242
- })
243
- ```
244
-
245
- ### 3. Static Assets
246
150
 
247
- Assets are served via Cloudflare Workers' built-in `assets.directory` feature, not through a worker:
248
-
249
- ```json
151
+ ```tsx
250
- // wrangler.jsonc
251
- {
252
- "name": "pyrossh-website",
253
- "main": "dist/index.js",
254
- "compatibility_date": "2026-07-07",
255
- "compatibility_flags": ["nodejs_compat"],
256
- "assets": { "directory": "assets" },
152
+ export default createRoute(async (c) => { /* GET */ })
257
- "vars": {
258
- "S3_ENDPOINT": "https://...r2.cloudflarestorage.com/pyrossh-repos-prd",
259
- "S3_REGION": "auto",
260
- "S3_BUCKET": "pyrossh-repos-prd"
261
- },
262
- "routes": [{ "pattern": "pyrossh.dev", "custom_domain": true }]
153
+ export const POST = createRoute(async (c) => { /* form handler */ })
263
- }
264
154
  ```
265
155
 
266
- No R2 bucket binding — storage is accessed via S3-compatible API. `S3_ACCESS_KEY_ID` and `S3_SECRET_ACCESS_KEY` are set as worker secrets.
267
-
268
- This eliminates the entire assets worker and R2 proxy for static files. In development, Vite dev server or wrangler dev serves assets from the directory automatically.
269
-
270
- ### 4. S3 Storage Layer (s3mini)
156
+ ### S3 Storage
271
-
272
- All storage operations switch from Cloudflare R2 bindings (`env.REPOS`) to a portable S3 API using `s3mini`. Zero dependencies, works on Workers (no `nodejs_compat` needed), Bun, and Node.
273
157
 
274
158
  ```typescript
275
- // packages/shared/core/src/s3.ts
159
+ // app/s3.ts
276
160
  import { S3mini } from 's3mini'
277
161
 
278
162
  let _s3: S3mini | null = null
@@ -290,211 +174,89 @@ export const getS3 = () => {
290
174
  }
291
175
  ```
292
176
 
293
- The S3 client is initialized once (singleton) from environment variables. On Cloudflare Workers, `process.env` resolves from `vars` and secrets automatically. On Bun/Node, it reads from `.env` or runtime env.
294
-
295
- ### 4a. Core Function Changes
296
-
297
- All `packages/shared/core/` functions change from `R2Bucket` to `S3mini`:
298
-
299
- ```typescript
300
- // Before (Cloudflare-specific R2 binding)
301
- export const getPosts = async (bucket: R2Bucket): Promise<RuntimePost[]> => {
302
- const objects = await bucket.list({ prefix: CONTENT_PREFIX });
303
- // ...
304
- }
305
-
306
- // After (portable S3 API)
307
- import { S3mini } from 's3mini'
308
-
309
- const CONTENT_PREFIX = 'content/'
310
-
311
- export const getPosts = async (s3: S3mini): Promise<RuntimePost[]> => {
312
- const objects = await s3.listObjects('/', CONTENT_PREFIX);
313
- if (!objects) return [];
314
- const posts: RuntimePost[] = [];
315
- for (const obj of objects) {
316
- if (!obj.Key.endsWith('.md') && !obj.Key.endsWith('.mdx')) continue;
317
- const data = await s3.getObject(obj.Key);
318
- if (!data) continue;
319
- const parsed = matter(data);
320
- // ...
321
- }
322
- return posts.sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf());
323
- };
324
- ```
325
-
326
- ### 4b. Route Handler Changes
327
-
328
- Route handlers use the S3 client directly instead of `c.env.REPOS`:
177
+ All business logic functions (`getPosts`, `getCommits`, `getFiles`, `getRepoReadme`, etc.) take `S3mini` as the first parameter instead of `R2Bucket`.
329
178
 
330
- ```typescript
179
+ ### Static Assets
331
- // app/routes/posts/index.tsx
332
- import { createRoute } from 'honox/factory'
333
- import { getPosts } from '@pyrossh/core'
334
- import { getS3 } from '@pyrossh/core/s3'
335
180
 
336
- export default createRoute(async (c) => {
337
- const posts = await getPosts(getS3())
338
- return c.render(
339
- <div>
340
- <h1>Posts</h1>
341
- {posts.map(post => (
342
- <a href={`/posts/${post.id}`}>{post.data.title}</a>
343
- ))}
344
- </div>,
345
- { title: 'Posts', css: '/assets/css/workers/posts-index.css' }
181
+ Served by wrangler's `assets.directory` — no worker involved.
346
- )
347
- })
348
- ```
349
182
 
350
- All functions that previously took `bucket: R2Bucket` now take `s3: S3mini`:
351
- - `getPosts(s3)` instead of `getPosts(bucket)`
183
+ ### CSS
352
- - `getPost(s3, postId)` instead of `getPost(bucket, postId)`
353
- - `getRepoReadme(s3, repoId)` instead of `getRepoReadme(bucket, repoId)`
354
- - `getCommits(s3, repoId)` instead of `getCommits(bucket, repoId)`
355
- - `getFiles(s3, repoId)` instead of `getFiles(bucket, repoId)`
356
- - `getFileContentData(s3, repoId, path)` instead of `getFileContentData(bucket, ...)`
357
- - `getFileHistory(s3, repoId, path)` instead of `getFileHistory(bucket, ...)`
358
- - `getGitBugIssues(s3, repoId)` instead of `getGitBugIssues(bucket, repoId)`
359
- - `getGitBugIssue(s3, issueId)` instead of `getGitBugIssue(bucket, issueId)`
360
- - `createGitBugIssue(s3, repoId, data)` instead of `createGitBugIssue(bucket, ...)`
361
- - `addGitBugIssueComment(s3, issueId, data)` instead of `addGitBugIssueComment(bucket, ...)`
362
- - `setGitBugIssueState(s3, issueId, state)` instead of `setGitBugIssueState(bucket, ...)`
363
184
 
364
- ### 5. HTMX Interactivity
185
+ CSS files remain as static files in `assets/css/` (shared.css, workers/*.css). Keeps full control over styles without inline CSS bloat. hono/css is available as an option for scoped component styles.
365
186
 
366
- HTMX is loaded from CDN in the Layout component (unchanged). Interactive features (tab navigation, issue CRUD, file tree) continue to work with HTMX as before.
367
-
368
- HonoX islands are not used. The `app/client.ts` file is kept minimal — just `createClient()` for HonoX compatibility, but no island components:
369
-
370
- ```typescript
371
- // app/client.ts
372
- import { createClient } from 'honox/client'
373
- createClient()
374
- ```
375
-
376
- ### 5a. HonoX Server Entry (`app/server.ts`)
377
-
378
- The server entry initializes the HonoX app:
379
-
380
- ```typescript
381
- // app/server.ts
382
- import { createApp } from 'honox/server'
383
-
384
- const app = createApp()
385
-
386
- export default app
387
- ```
388
-
389
- ### 5b. Vite Configuration (`vite.config.ts`)
390
-
391
- Vite config uses the HonoX plugin with Cloudflare Workers adapter:
392
-
393
- ```typescript
394
- // vite.config.ts
395
- import honox from 'honox/vite'
396
- import build from '@hono/vite-build/cloudflare-workers'
397
- import adapter from '@hono/vite-dev-server/cloudflare'
398
- import { defineConfig } from 'vite'
399
-
400
- export default defineConfig({
401
- plugins: [
402
- honox({ devServer: { adapter } }),
403
- build(),
404
- ],
405
- })
406
- ```
407
-
408
- ### 6. Request Context
409
-
410
- The existing `@pyrossh/ui` Layout component accepts a `request: Request` prop. In the renderer bridge, `c.req.raw` provides the original request. This is used for:
411
- - Canonical URL generation
412
- - Current navigation path highlighting
413
- - Theme toggle
414
-
415
- ## What Gets Removed
416
-
417
- | Item | Reason |
418
- |------|--------|
419
- | `packages/workers/` (all 18 + dev-router) | Replaced by `app/routes/` |
420
- | `packages/workers/assets/` | Replaced by wrangler `assets.directory` |
421
- | Root `wrangler.toml` | Replaced by HonoX's `wrangler.jsonc` |
422
- | `REPOS` R2 bucket binding | Replaced by S3mini client |
423
- | `packages/shared/types/src/env.d.ts` | No longer needed — no R2 binding |
424
- | `worker-configuration.d.ts` | Replaced by HonoX types |
425
- | `WEBSITE_BUCKET` R2 binding (recent addition) | No longer needed |
426
-
427
- ## What Stays Unchanged
428
-
429
- - `packages/shared/config/` — site constants, repo list, tools list
430
- - `packages/shared/ui/` — UI components (Header, Footer, RepoLayout, etc.) with updated jsxImportSource
431
- - `assets/` directory — static files
432
- - `content/` directory — blog posts
433
-
434
- ## What Changes in packages/shared/
435
-
436
- | Package | Change |
437
- |---------|--------|
438
- | `packages/shared/types/` | Remove `Env` interface — no more R2 binding. Add `S3mini` type imports where needed |
439
- | `packages/shared/core/` | All functions change from `(bucket: R2Bucket)` to `(s3: S3mini)`. Add `src/s3.ts` singleton factory |
440
- | `packages/shared/core/package.json` | Add `s3mini` dependency |
441
- | `packages/shared/core/src/gitBug.ts` | Replace `R2Bucket` with `S3mini`, use `s3.listObjects/getObject/putObject/deleteObject` |
442
- | `packages/shared/core/src/gitReader.ts` | Replace `R2Bucket` with `S3mini` |
443
- | `packages/shared/core/src/content.ts` | Replace `R2Bucket` with `S3mini`, use `s3.listObjects/getObject` |
444
- | `packages/shared/core/src/repoContent.ts` | Replace `R2Bucket` with `S3mini`, use `s3.getObject` |
445
- | `packages/shared/ui/` | Switch jsxImportSource from `typed-htmx/typed-html` to `hono/jsx`. JSX syntax is the same — no component rewrites needed. Remove `Layout` component (layout moved to `_renderer.tsx`). Remove `typed-htmx` dependency |
446
- | `packages/shared/ui/tsconfig.json` | Change `jsxImportSource` to `hono/jsx` |
447
-
448
- ## Workspace Cleanup
449
-
450
- - `packages/workers/` directory is removed entirely
451
- - `pnpm-workspace.yaml` updated to remove `'packages/workers/**'` (or keep with no matches)
452
- - Root `package.json` scripts updated: `dev` becomes `vite dev`, `build` becomes `vite build --mode client && vite build`, `deploy` remains `wrangler deploy`
453
- - `@pyrossh/dev-router` package is removed (no longer needed)
454
- - The dev-router's `dependencies` list all 18 workers — those are removed from workspace resolution
455
-
456
- ## New Dependencies
187
+ ## Dependencies
457
188
 
458
189
  ```json
459
190
  {
460
191
  "dependencies": {
461
192
  "hono": "^4.x",
462
193
  "honox": "^0.1.x",
463
- "s3mini": "^0.9.x"
194
+ "s3mini": "^0.9.x",
195
+ "gray-matter": "^4.0.3",
196
+ "unified": "^11.0.0",
197
+ "remark-parse": "^11.0.0",
198
+ "remark-rehype": "^11.1.2",
199
+ "rehype-stringify": "^10.0.1",
200
+ "rehype-expressive-code": "^0.44.0",
201
+ "diff": "^9.0.0",
202
+ "pretty-bytes": "^7.1.0",
203
+ "diff2html": "^3.4.52"
464
204
  },
465
205
  "devDependencies": {
466
206
  "vite": "^6.x",
467
207
  "@hono/vite-build": "^1.x",
468
208
  "@hono/vite-dev-server": "^1.x",
469
- "@cloudflare/workers-types": "^5.x"
209
+ "@cloudflare/workers-types": "^5.x",
210
+ "typescript": "^6.x"
470
211
  }
471
212
  }
472
213
  ```
473
214
 
474
- `hono/jsx` is built into `hono` — no separate JSX dependency. `typed-htmx` is removed entirely. `hono/css` is also built into `hono` if needed for scoped styles later.
215
+ No monorepo, no pnpm workspaces, no workspace dependencies. Just `npm install` or `bun install`.
475
216
 
476
- ## Environment Variables
217
+ ## What Gets Removed
477
218
 
478
- | Variable | Required | Description |
219
+ | Item | Files |
479
- |----------|----------|-------------|
220
+ |------|-------|
221
+ | `packages/` directory | 18 workers + dev-router + 4 shared packages (~22 packages) |
480
- | `S3_ACCESS_KEY_ID` | Yes | R2 API token access key |
222
+ | Root `wrangler.toml` | Replaced by `wrangler.jsonc` |
481
- | `S3_SECRET_ACCESS_KEY` | Yes | R2 API token secret key |
223
+ | `worker-configuration.d.ts` | No R2 bindings needed |
482
- | `S3_ENDPOINT` | Yes | S3-compatible endpoint URL (e.g., `https://<account>.r2.cloudflarestorage.com/<bucket>`) |
483
- | `S3_REGION` | No | Defaults to `auto` for R2 |
224
+ | `.env` (old) | R2 access keys moved to S3 env vars |
225
+ | `pnpm-workspace.yaml` | No workspaces |
226
+ | `pnpm-lock.yaml` | Use npm or bun lockfile |
227
+ | `tsconfig.base.json` | Single tsconfig |
228
+ | `scripts/deploy-all.sh` | Single wrangler deploy |
229
+ | `alchemy.run.ts` / `.alchemy/` | Infrastructure-as-code not needed |
484
230
 
485
- On Cloudflare Workers, `S3_ACCESS_KEY_ID` and `S3_SECRET_ACCESS_KEY` are set as secrets (`wrangler secret put`). `S3_ENDPOINT` is set in `vars` in `wrangler.jsonc`. On Bun/Node, all are set in `.env` or runtime environment.
231
+ ## Environment Variables
486
232
 
487
- ## Deployment
233
+ | Variable | Description |
234
+ |----------|-------------|
235
+ | `S3_ACCESS_KEY_ID` | R2 API token access key |
236
+ | `S3_SECRET_ACCESS_KEY` | R2 API token secret key |
237
+ | `S3_ENDPOINT` | S3 endpoint URL (`https://<account>.r2.cloudflarestorage.com/<bucket>`) |
238
+ | `S3_REGION` | Defaults to `auto` |
488
239
 
489
- Build command:
240
+ ## Deployment
490
- ```bash
491
- vite build --mode client && vite build && wrangler deploy
492
- ```
493
241
 
494
- Set secrets:
495
242
  ```bash
243
+ bun install
244
+ bunx vite build --mode client && bunx vite build
245
+ bunx wrangler deploy
496
- wrangler secret put S3_ACCESS_KEY_ID
246
+ bunx wrangler secret put S3_ACCESS_KEY_ID
497
- wrangler secret put S3_SECRET_ACCESS_KEY
247
+ bunx wrangler secret put S3_SECRET_ACCESS_KEY
498
248
  ```
499
249
 
250
+ ## Summary of Simplifications
251
+
252
+ | Before | After |
253
+ |--------|-------|
254
+ | 22 npm packages | 1 app |
255
+ | pnpm workspaces | single package.json |
500
- Single worker deployed to `pyrossh.dev`. The `assets.directory` config in `wrangler.jsonc` handles static files. The S3 client connects to R2 via S3-compatible API — no R2 bucket binding needed.
256
+ | 4 shared packages with tsconfigs each | flat imports (`../lib/`, `../components/`) |
257
+ | R2 bucket binding (`env.REPOS`) | S3mini from env vars |
258
+ | typed-htmx JSX (extra dep) | hono/jsx (built in) |
259
+ | Private worker packages with individual routes | HonoX file-based routing |
260
+ | Assets worker + R2 proxy | wrangler `assets.directory` |
261
+ | Dev-router imports 18 workers | `vite dev` with HonoX |
262
+ | Separate deploy script per worker | one `wrangler deploy` |