Monorepo for Aesthetic.Computer
aesthetic.computer
1# Code Changes Summary - Grab Worker Integration
2
3This document shows all code changes made to integrate the Cloudflare grab worker with the existing aesthetic.computer codebase.
4
5---
6
7## Changed Files
8
9### 1. `/system/public/aesthetic.computer/lib/parse.mjs`
10
11**Purpose:** Generate metadata (title, description, og:image, icon) for pieces
12
13**Lines Changed:** 487-494
14
15**Before:**
16```javascript
17 } else {
18 ogImage = `https://${host}/preview/1200x630/${slug}.png`;
19 twitterImage = `https://${host}/preview/1800x900/${slug}.png`;
20 }
21
22 // Extract just the piece name (before ~) for icon URL
23 const pieceName = slug.split('~')[0];
24 icon = pieceMetadata?.icon_url || `${protocol}//${host}/icon/128x128/${pieceName}.png`;
25```
26
27**After:**
28```javascript
29 } else {
30 // Use Cloudflare Workers grab service for screenshot generation
31 ogImage = `https://grab.aesthetic.computer/preview/1200x630/${slug}.png`;
32 twitterImage = `https://grab.aesthetic.computer/preview/1800x900/${slug}.png`;
33 }
34
35 // Extract just the piece name (before ~) for icon URL
36 const pieceName = slug.split('~')[0];
37 icon = pieceMetadata?.icon_url || `https://grab.aesthetic.computer/icon/128x128/${pieceName}.png`;
38```
39
40**Impact:**
41- All og:image meta tags now point to grab.aesthetic.computer
42- All favicon/icon links now point to grab.aesthetic.computer
43- Removes dependency on `${host}` variable (always uses grab.aesthetic.computer)
44- Removes `${protocol}` variable (always uses HTTPS)
45
46**Example Output:**
47```html
48<!-- Before -->
49<meta name="og:image" content="https://aesthetic.computer/preview/1200x630/prompt.png" />
50<link rel="icon" href="https://aesthetic.computer/icon/128x128/prompt.png" />
51
52<!-- After -->
53<meta name="og:image" content="https://grab.aesthetic.computer/preview/1200x630/prompt.png" />
54<link rel="icon" href="https://grab.aesthetic.computer/icon/128x128/prompt.png" />
55```
56
57---
58
59### 2. `/system/netlify.toml`
60
61**Purpose:** Configure Netlify redirects and routing
62
63**Section 1 - Lines 285-290 (Preview Redirect)**
64
65**Before:**
66```toml
67[[redirects]]
68from = "/preview/*"
69to = "/.netlify/functions/screenshot"
70status = 200
71```
72
73**After:**
74```toml
75# Screenshot generation handled by Cloudflare Workers (grab.aesthetic.computer)
76[[redirects]]
77from = "/preview/*"
78to = "https://grab.aesthetic.computer/preview/:splat"
79status = 200
80```
81
82**Section 2 - Lines 306-310 (Icon Redirect)**
83
84**Before:**
85```toml
86[[redirects]]
87from = "/icon/*"
88to = "/.netlify/functions/screenshot"
89status = 200
90```
91
92**After:**
93```toml
94[[redirects]]
95from = "/icon/*"
96to = "https://grab.aesthetic.computer/icon/:splat"
97status = 200
98```
99
100**Impact:**
101- Requests to `aesthetic.computer/preview/*` now proxy to `grab.aesthetic.computer/preview/*`
102- Requests to `aesthetic.computer/icon/*` now proxy to `grab.aesthetic.computer/icon/*`
103- No more calls to Netlify function `screenshot.js`
104- Maintains backwards compatibility for existing URLs
105
106**Example Behavior:**
107```bash
108# User requests:
109https://aesthetic.computer/icon/128x128/prompt.png
110
111# Netlify redirects to:
112https://grab.aesthetic.computer/icon/128x128/prompt.png
113
114# Grab worker returns:
115PNG image data (399 bytes)
116```
117
118---
119
120## New Files Created
121
122### `/grab/` Directory Structure
123```
124grab/
125├── src/
126│ └── index.ts # Main worker implementation
127├── scripts/
128│ └── deploy.fish # Deployment automation
129├── package.json # Dependencies
130├── wrangler.toml # Worker configuration
131├── tsconfig.json # TypeScript config
132├── PLAN.md # Project roadmap
133├── README.md # Architecture docs
134├── DEPLOYMENT.md # Deployment guide
135├── MIGRATION.md # Migration strategy
136├── DEV-SETUP.md # Dev workflow
137├── INTEGRATION-SUMMARY.md # This integration summary
138├── CUSTOM-DOMAIN-SETUP.md # Custom domain setup guide
139└── CODE-CHANGES.md # Detailed code changes (this file)
140```
141
142### `/aesthetic-computer-vault/grab/` Directory
143```
144aesthetic-computer-vault/grab/
145├── .env # Environment variables
146├── README.md # Vault documentation
147└── wrangler.production.toml # Production config
148```
149
150---
151
152## Files NOT Changed
153
154### Static Templates
155- `/system/templates/index.html` - Only has fallback og:image, dynamic content uses parse.mjs
156- No changes needed
157
158### Other Netlify Functions
159- `/system/netlify/functions/index.mjs` - No changes needed (imports metadata from parse.mjs)
160- `/system/netlify/functions/docs.js` - References icon but doesn't need updating
161- All other functions unchanged
162
163### Client-Side Code
164- `/system/public/aesthetic.computer/boot.js` - No changes needed
165- Pieces remain unchanged
166- No JavaScript modifications required
167
168---
169
170## Validation Commands
171
172### Test Parse.mjs Changes
173```fish
174# Check that metadata function returns grab URLs
175cd /workspaces/aesthetic-computer
176grep -A 5 "ogImage =" system/public/aesthetic.computer/lib/parse.mjs
177
178# Expected output should show:
179# ogImage = `https://grab.aesthetic.computer/preview/1200x630/${slug}.png`;
180```
181
182### Test netlify.toml Changes
183```fish
184# Check redirect configuration
185grep -A 3 "from = \"/preview/" system/netlify.toml
186
187# Expected output should show:
188# to = "https://grab.aesthetic.computer/preview/:splat"
189```
190
191### Test End-to-End
192```fish
193# After custom domain is set up:
194curl -I "https://aesthetic.computer/icon/128x128/prompt.png"
195
196# Should return:
197# HTTP/2 200
198# location: https://grab.aesthetic.computer/icon/128x128/prompt.png
199# (or directly serve the image)
200```
201
202---
203
204## Rollback Instructions
205
206If you need to revert these changes:
207
208### 1. Revert parse.mjs
209```fish
210cd /workspaces/aesthetic-computer
211git checkout system/public/aesthetic.computer/lib/parse.mjs
212```
213
214Or manually change back to:
215```javascript
216ogImage = `https://${host}/preview/1200x630/${slug}.png`;
217icon = pieceMetadata?.icon_url || `${protocol}//${host}/icon/128x128/${pieceName}.png`;
218```
219
220### 2. Revert netlify.toml
221```fish
222git checkout system/netlify.toml
223```
224
225Or manually change back to:
226```toml
227[[redirects]]
228from = "/preview/*"
229to = "/.netlify/functions/screenshot"
230status = 200
231
232[[redirects]]
233from = "/icon/*"
234to = "/.netlify/functions/screenshot"
235status = 200
236```
237
238### 3. Keep Old Implementation Running
239- DO NOT delete `/system/netlify/functions/screenshot.js` yet
240- Leave Puppeteer dependencies in package.json
241- Monitor for any issues
242
243---
244
245## Deployment Strategy
246
247### Phase 1: Deploy Worker ✅
248- Worker deployed and tested
249- URLs accessible via workers.dev
250
251### Phase 2: Configure Custom Domain (Pending)
252- Set up grab.aesthetic.computer via Dashboard
253- DNS propagation
254- SSL certificate provisioning
255
256### Phase 3: Update Code ✅
257- parse.mjs updated
258- netlify.toml updated
259- Both point to grab.aesthetic.computer
260
261### Phase 4: Validation (Next)
262- Test production site
263- Monitor for errors
264- Verify social media previews
265- Check various pieces
266
267### Phase 5: Cleanup (After 1 week)
268- Remove screenshot.js
269- Remove Puppeteer dependencies
270- Update documentation
271
272---
273
274## Testing Checklist
275
276After deploying these changes:
277
278- [ ] **Metadata Generation**
279 - [ ] Icon URLs use grab.aesthetic.computer
280 - [ ] OG image URLs use grab.aesthetic.computer
281 - [ ] Twitter card URLs use grab.aesthetic.computer
282
283- [ ] **Redirects Work**
284 - [ ] /icon/* requests proxy to grab worker
285 - [ ] /preview/* requests proxy to grab worker
286 - [ ] Status codes are correct (200)
287
288- [ ] **Social Media Previews**
289 - [ ] Discord shows correct preview image
290 - [ ] Twitter shows correct preview image
291 - [ ] Facebook shows correct preview image
292 - [ ] Slack shows correct preview image
293
294- [ ] **Favicons**
295 - [ ] Browser tab shows correct favicon
296 - [ ] Bookmark shows correct icon
297 - [ ] Mobile home screen icon correct
298
299- [ ] **Performance**
300 - [ ] First request < 15 seconds
301 - [ ] Cached requests < 1 second
302 - [ ] No 504 timeouts
303
304- [ ] **Error Handling**
305 - [ ] Invalid piece names return 404
306 - [ ] Invalid dimensions return 400
307 - [ ] Canvas timeout handled gracefully
308
309---
310
311## Git Commit Message
312
313When committing these changes:
314
315```
316feat: migrate screenshot generation to Cloudflare Workers
317
318- Update parse.mjs to use grab.aesthetic.computer URLs
319- Update netlify.toml redirects to proxy to grab worker
320- Add comprehensive documentation in /grab directory
321- Maintain backwards compatibility via redirects
322
323Worker deployed at: https://aesthetic-grab.aesthetic-computer.workers.dev
324Custom domain pending: grab.aesthetic.computer
325
326Fixes: Screenshot cold starts, improves caching, global CDN
327Replaces: /system/netlify/functions/screenshot.js (to be removed after validation)
328```
329
330---
331
332## Related Documentation
333
334- **Architecture:** `/grab/README.md`
335- **Deployment:** `/grab/DEPLOYMENT.md`
336- **Development:** `/grab/DEV-SETUP.md`
337- **Migration Plan:** `/grab/MIGRATION.md`
338- **Custom Domain:** `/grab/CUSTOM-DOMAIN-SETUP.md`
339- **Integration Summary:** `/grab/INTEGRATION-SUMMARY.md`