alice.pds.demo.boltless.dev
This repository has no description
avatar: resize to the sizes the web app asks for
The worker only understood one size, `size=tiny`, which meant 32px. It now takes
26, 34, 42 or 52 — double each size on the web app's avatar scale, so avatars
stay sharp on retina screens. Anything it doesn't recognise gets the original
image, untouched.
`tiny` still works and still means 32px. This worker ships separately from the
web app, so cached urls and a deploy that hasn't caught up yet keep asking
for it.
Signed-off-by: eti <eti@eti.tf>
author
eti
date
(Aug 4, 2026, 2:13 PM +0200)
commit
0c492ba6
0c492ba6bd0ec6bedd64a863180b52579f635085
parent
33d6261e
33d6261e4018ad1e667f7e598fb6ace381060b80
+12
-5
+12
-5
avatar/src/index.js
+12
-5
avatar/src/index.js
···
158
158
);
159
159
}
160
160
161
-
const size = searchParams.get("size");
162
-
const resizeToTiny = size === "tiny";
161
+
const allowedWidths = [26, 34, 42, 52];
162
+
const requestedSize = searchParams.get("size");
163
+
164
+
let width = null;
165
+
if (requestedSize === "tiny") {
166
+
width = 32;
167
+
} else if (allowedWidths.includes(Number(requestedSize))) {
168
+
width = Number(requestedSize);
169
+
}
163
170
const format = searchParams.get("format") || "webp";
164
171
const validFormats = ["webp", "jpeg", "png"];
165
172
const outputFormat = validFormats.includes(format) ? format : "webp";
···
245
252
});
246
253
247
254
const bgColor = stringToColor(actor);
248
-
const size = resizeToTiny ? 32 : 128;
255
+
const size = width ?? 128;
249
256
const svg = `<svg width="${size}" height="${size}" viewBox="0 0 ${size} ${size}" xmlns="http://www.w3.org/2000/svg"><rect width="${size}" height="${size}" fill="${bgColor}"/></svg>`;
250
257
const svgData = new TextEncoder().encode(svg);
251
258
···
261
268
262
269
// Fetch and optionally resize the avatar
263
270
let avatarResponse;
264
-
const cfOptions = outputFormat !== "webp" || resizeToTiny ? {
271
+
const cfOptions = outputFormat !== "webp" || width ? {
265
272
cf: {
266
273
image: {
267
274
format: outputFormat,
268
-
...(resizeToTiny ? { width: 32, height: 32, fit: "cover" } : {}),
275
+
...(width ? { width, height: width, fit: "cover" } : {}),
269
276
},
270
277
},
271
278
}: {};