Public
Cool work bag picks, inspired by replies to @adelwu_'s tweet.
Val Town is a collaborative website to build and scale JavaScript apps.
Deploy APIs, crons, & store data – all from the browser, and deployed in milliseconds.

cool-work-bags

Outbound catalog of cool work bags, inspired by replies to @adelwu_'s tweet. Every card links out to the original store; images are proxied + cached so flaky CDNs don't break the page.

File layout

main.tsx              Hono app: /, /image, /source
components/Page.tsx   Full-page JSX layout, Twind theme, tweet embed, remix pill
components/Card.tsx   Single-bag card
data/bags.ts          Bag[] data + Tier type + per-bag fetchHeaders for picky CDNs
client/filter.ts      Browser-side tier filter + free-text search

Routes

  • GET / — the catalog page
  • GET /image?i=N — image proxy with blob caching, with per-bag header overrides
  • GET /source — 302 to the val's code page on val.town

Image cache

Cached under blob keys carry-market/images/v2/{i} and carry-market/images/v2/{i}.type (the carry-market prefix is preserved so the cache survived the rename). Bump the BLOB_PREFIX version segment in main.tsx to invalidate everything; delete a single key to refresh one bag.

Adding a bag

Append an entry to bags in data/bags.ts. The index becomes the /image?i=N identifier and the animation-delay seed, so prefer appending over inserting.

If the image upstream needs special headers (e.g. a Referer), add a fetchHeaders field on that entry rather than monkey-patching the handler.