Monorepo for Aesthetic.Computer
aesthetic.computer
fix: site-specific OG images use raw mosaic without branding text bleed-through
Upload a separate "mosaic-raw" (tiles + blur, no text overlay) to CDN
during mosaic generation. Site-specific OG endpoints (keeps/buy) use
this clean base so the underlying "KidLisp.com" branding doesn't ghost
through the blur. Also change kidlisp-og.png redirect from 301 to 302
to prevent browsers permanently caching stale redirects.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
+23
-9
+6
-1
oven/grabber.mjs
+6
-1
oven/grabber.mjs
···
3618
3618
mosaic = await sharp(mosaic)
3619
3619
.blur(8) // sigma value - higher = more blur
3620
3620
.toBuffer();
3621
-
3621
+
3622
+
// Upload raw mosaic (no branding) for site-specific OG images to composite on
3623
+
uploadOGImageToSpaces(mosaic, 'mosaic-raw').catch(err =>
3624
+
console.error('Failed to upload raw mosaic:', err.message)
3625
+
);
3626
+
3622
3627
// Add dark overlay to make text pop, then add branding
3623
3628
const darkOverlay = Buffer.from(`
3624
3629
<svg width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg">
+17
-8
oven/server.mjs
+17
-8
oven/server.mjs
···
1443
1443
const url = await getLatestOGImageUrl(layout);
1444
1444
1445
1445
if (url) {
1446
-
// Redirect to CDN - instant response
1446
+
// Redirect to CDN - instant response (302 so browsers don't permanently cache stale redirects)
1447
1447
res.setHeader('Cache-Control', 'public, max-age=3600');
1448
1448
res.setHeader('X-Cache', 'CDN');
1449
-
return res.redirect(301, url);
1449
+
return res.redirect(302, url);
1450
1450
}
1451
1451
1452
1452
// No cached image yet - trigger background regeneration and serve a recent fallback
···
1526
1526
if (!['keeps', 'buy'].includes(site)) return res.status(400).json({ error: 'Invalid site', valid: ['keeps', 'buy'] });
1527
1527
try {
1528
1528
addServerLog('info', '🖼️', `Site OG: ${site}.kidlisp.com`);
1529
-
const result = await generateKidlispOGImage('mosaic', false);
1530
-
// If cached, download the image from CDN; otherwise use the buffer directly
1531
-
let mosaicBuffer = result.buffer;
1532
-
if (!mosaicBuffer && result.url) {
1533
-
const resp = await fetch(result.url);
1534
-
if (!resp.ok) throw new Error(`Failed to fetch cached mosaic: ${resp.status}`);
1529
+
// Use raw mosaic (no branding text) as background
1530
+
const rawUrl = await getLatestOGImageUrl('mosaic-raw');
1531
+
let mosaicBuffer;
1532
+
if (rawUrl) {
1533
+
const resp = await fetch(rawUrl);
1534
+
if (!resp.ok) throw new Error(`Failed to fetch raw mosaic: ${resp.status}`);
1535
1535
mosaicBuffer = Buffer.from(await resp.arrayBuffer());
1536
+
} else {
1537
+
// Fallback: generate mosaic and use its buffer (will have branding but better than nothing)
1538
+
const result = await generateKidlispOGImage('mosaic', false);
1539
+
mosaicBuffer = result.buffer;
1540
+
if (!mosaicBuffer && result.url) {
1541
+
const resp = await fetch(result.url);
1542
+
if (!resp.ok) throw new Error(`Failed to fetch mosaic: ${resp.status}`);
1543
+
mosaicBuffer = Buffer.from(await resp.arrayBuffer());
1544
+
}
1536
1545
}
1537
1546
const bg = await sharp(mosaicBuffer).blur(6).toBuffer();
1538
1547
const darkOverlay = Buffer.from(`<svg width="1200" height="630" xmlns="http://www.w3.org/2000/svg"><rect width="100%" height="100%" fill="rgba(0,0,0,0.4)"/></svg>`);