Skip to content

Update resizer to use Fastly IO#3550

Merged
isTravis merged 3 commits intomainfrom
tr/resize-refactor
Apr 2, 2026
Merged

Update resizer to use Fastly IO#3550
isTravis merged 3 commits intomainfrom
tr/resize-refactor

Conversation

@isTravis
Copy link
Copy Markdown
Member

@isTravis isTravis commented Apr 1, 2026

We've been running two generations of AWS's Serverless Image Handler CloudFormation stack for image resizing:

  • resize.pubpub.org (v1, Thumbor-based): URLs like https://resize.pubpub.org/fit-in/600x0/key/file.jpg
  • resize-v3.pubpub.org (v3, Sharp-based): URLs like https://resize-v3.pubpub.org/{base64-encoded-json}

This PR replaces both with Fastly Image Optimizer, which sits as query parameters on the origin assets.pubpub.org URL. So instead of proxying through a separate resize domain, images are now served as e.g. https://assets.pubpub.org/key/file.jpg?width=800&fit=bounds.

What changed

utils/images.ts is the core of this. There's a new internal parseResizeUrl function that handles all three URL formats (v1 Thumbor, v3 Sharp base64, and the new Fastly IO format) and returns a structured result with the clean asset URL plus any resize parameters. Everything else builds on top of that:

  • getResizedUrl keeps the same (url, fit, width, height) signature so call sites don't need to change. The Sharp-style fit values (inside, cover, outside, etc.) are mapped to Fastly IO equivalents (bounds, cover) internally.
  • extractAssetsUrl strips a resize URL back to the raw assets.pubpub.org URL, discarding resize params.
  • convertResizeUrlToFastlyUrl does the same extraction but preserves the resize params, converting them to Fastly IO format.
  • normalizeResizeUrlsInHtml uses regex to find legacy resize URLs in raw HTML strings and runs them through convertResizeUrlToFastlyUrl.
  • getSrcSet now uses Fastly's dpr parameter for pixel density variants instead of multiplying widths.

Editor schemas (image.ts, base.ts) now run extractAssetsUrl in both parseDOM and toDOM for image url/href attributes and link mark href. This handles the edge case where users hardcoded old resize URLs directly into document content. Since the editor applies its own resize params at render time, we just need the clean asset URL here.

LayoutHtml.tsx runs normalizeResizeUrlsInHtml on the raw HTML before it hits dangerouslySetInnerHTML. This is the other place where hardcoded resize URLs show up: users pasted HTML with old resize URLs into layout HTML blocks. Unlike the editor schemas, these don't have render-time resize logic, so we preserve the original width/height/fit from the old URL and convert it to Fastly IO params.

Edge cases

The main edge cases here are hardcoded legacy URLs. In most places we store clean assets.pubpub.org URLs and pass them through getResizedUrl at render time. But some users hardcoded resize.pubpub.org or resize-v3.pubpub.org URLs directly into:

  • Image node url fields in ProseMirror documents
  • Image href fields (the clickable link wrapping an image)
  • Link mark href fields
  • Raw HTML in layout blocks (pages and collections)

The parseResizeUrl function handles all of these, and the conversion is applied at the appropriate point for each context.

Fastly config note

The iframe spam filtering that was previously handled by CloudFront Functions has been replicated in Fastly VCL config, which replaced CloudFront's functions.

Reversibility

Call sites still use Sharp-style fit names (inside, cover, outside). The mapping to Fastly happens internally in getResizedUrl. If we need to revert to resize-v3, only getResizedUrl needs to change.

Launching

In this PR, everything points to assets2.pubpub.org which is the domain fastly is configured for. The order of operations for a zero-downtime migration look like:

  • Merge this PR and publish (everything on prod now points to assets2.pubpub.org from getResizedUrl)
  • Point assets.pubpub.org at fastly instead of cloudfront in our DNS
  • Update fastly to support both assets2.pubpub.org and assets.pubpub.org
  • Update the code to use assets.pubpub.org (rather than assets2.pubpub.org) in getResizedUrl and re-deploy. At this point, everything on prod is again pointing at assets.pubpub.org
  • Remove assets2.pubpub.org from Fastly and DNS.

@isTravis isTravis requested review from 3mcd, gabestein and tefkah April 1, 2026 20:27
@isTravis
Copy link
Copy Markdown
Member Author

isTravis commented Apr 1, 2026

Currently deployed on duqduq if you want to test on different communities/pubs.

@isTravis isTravis merged commit 04c3e49 into main Apr 2, 2026
1 check passed
@isTravis isTravis deleted the tr/resize-refactor branch April 2, 2026 18:20
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant