Conversation
…pubpub URLs in images and links
Member
Author
|
Currently deployed on duqduq if you want to test on different communities/pubs. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
We've been running two generations of AWS's Serverless Image Handler CloudFormation stack for image resizing:
resize.pubpub.org(v1, Thumbor-based): URLs likehttps://resize.pubpub.org/fit-in/600x0/key/file.jpgresize-v3.pubpub.org(v3, Sharp-based): URLs likehttps://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.orgURL. 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.tsis the core of this. There's a new internalparseResizeUrlfunction 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:getResizedUrlkeeps the same(url, fit, width, height)signature so call sites don't need to change. The Sharp-stylefitvalues (inside,cover,outside, etc.) are mapped to Fastly IO equivalents (bounds,cover) internally.extractAssetsUrlstrips a resize URL back to the rawassets.pubpub.orgURL, discarding resize params.convertResizeUrlToFastlyUrldoes the same extraction but preserves the resize params, converting them to Fastly IO format.normalizeResizeUrlsInHtmluses regex to find legacy resize URLs in raw HTML strings and runs them throughconvertResizeUrlToFastlyUrl.getSrcSetnow uses Fastly'sdprparameter for pixel density variants instead of multiplying widths.Editor schemas (
image.ts,base.ts) now runextractAssetsUrlin bothparseDOMandtoDOMfor imageurl/hrefattributes and link markhref. 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.tsxrunsnormalizeResizeUrlsInHtmlon the raw HTML before it hitsdangerouslySetInnerHTML. 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.orgURLs and pass them throughgetResizedUrlat render time. But some users hardcodedresize.pubpub.orgorresize-v3.pubpub.orgURLs directly into:urlfields in ProseMirror documentshreffields (the clickable link wrapping an image)hreffieldsThe
parseResizeUrlfunction 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
fitnames (inside,cover,outside). The mapping to Fastly happens internally ingetResizedUrl. If we need to revert toresize-v3, onlygetResizedUrlneeds 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:
getResizedUrl)getResizedUrland re-deploy. At this point, everything on prod is again pointing at assets.pubpub.org