Render Cloud Image editor preview through runtime CloudImage#190
Merged
Conversation
The Keystatic editor preview rendered a bespoke plain <img> with its own inline styles, while production rendered the unpic-transformed, clamped image via CloudImage. Collapse to one rendering path so the preview matches what ships. Guard the empty-URL case during editing since CloudImage throws on an invalid URL.
✅ Deploy Preview for lukebennett ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
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
1 participant
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.
Problem
"Cloud Image" had two rendering paths that drifted: the Keystatic editor component-block
previewrendered a bespoke plain<img>, while production rendered through theCloudImage(@unpic/react) runtime component with the real sizing rules (MAX_WIDTH clamping, breakpoints, fit). The editor preview misrepresented what shipped.Solution
The editor
previewnow renders through the same runtimeCloudImagecomponent, so what the author sees matches production. A small guard (URL.canParse(src)) falls back to a placeholder while the URL is still being typed, sinceCloudImagethrows on an invalid URL. The field schema is unchanged — it remains the single source of the fields; only the second rendering path is removed.The classic JSX pragma and explicit React import were dropped in favour of the project's default automatic runtime (consistent with the other renderer files).
Note: the preview-only "Priority image" figcaption is gone; the
priorityfield's affordance is carried by its schema label/description, and in production it correctly drives eager loading.Verification
pnpm --filter @lukebennett/web check— prettier, biome,tsc --noEmitclean.pnpm --filter @lukebennett/web build— astro build completes.Part of an architecture review pass; sibling PRs cover the AT Protocol module, manifest contract, and renderer registry.