Self-host lookaside CDN images under /public#3973
Open
imdreamrunner wants to merge 1 commit into
Open
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
meta-cla
Bot
added
the
CLA Signed
github-actions
Bot
added
the
needs:design-review
github-actions
Bot
requested review from
cvkxx,
ernestt,
kentonquatman and
rubyycheung
Contributor
PR Analysis ReportNo new or modified components detected. Bundle Size Summary
Accessibility AuditStatus: No accessibility violations detected. Generated by PR Enrichment workflow | View full report |
Astryx's demo imagery was split across two locations with different rules: docsite/CLI-template photos streamed from a Meta-internal CDN (lookaside.facebook.com/assets/astryx/*), while a few were already self-hosted under apps/docsite/public/. External contributors couldn't see which images exist, add new ones, or run the site with real imagery. This gives every demo image one home: apps/docsite/public/images/. - Downloaded the full set from the astryx Asset Manager set and committed 122 images + 1 video (Nature-1.mp4) under apps/docsite/public/images/, organized as template-assets/, per-theme folders (matcha/butter/stone/gothic/y2k), avatars/, theme *-picker.png banners, and Astryx-Banner.png. - Repointed all source references to /images/... root-relative paths (docsite theme showcase + hero, 38 CLI template files, Lightbox.doc.mjs). - Committed 47 @2x retina variants (45 unique assets) alongside their 1x siblings for every image whose asset set provides a density=2 source; not referenced yet, ready for a future srcset/next-image pass. - stripTemplateAssetRefs sentinel + regex now match /images/template-assets/ (excl. placeholder.svg); still swaps to an inline placeholder at scaffold time so generated projects have zero dependency. Test suite updated (10/10). - check-demo-media: forbid any remote http(s) src in Thumbnail examples. - templates.instructions.md explains the single-location workflow. - Inlined and removed CDN/NEUTRAL_CDN/PICKER_CDN base-path variables in favor of literal /images/... paths. - Fixed the Lightbox playground test for the self-hosted path. Everything under /images/ (not the public root) so theme-name folders can't shadow Next.js app routes. Zero lookaside references remain except the README banner (GitHub renders READMEs and needs an absolute URL; will switch to the public astryx.atmeta.com/images/ URL after merge) and a mocked, never-fetched URL in useImageMode.test.ts. Asset mapping: https://gist.github.com/imdreamrunner/1574db95a724d793e703036ee625e665
imdreamrunner
force-pushed
the
feat/self-host-lookaside-images
branch
from
bd849ba to
bfe3165
Compare
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.
Summary
Astryx's demo imagery was split across two locations with different rules:
lookaside.facebook.com/assets/astryx/*) — invisible to external contributors, and impossible to reach without Meta network access.apps/docsite/public/— the docsite's own landing/marketing art and foundations diagrams, e.g. the 7feature-*.pngillustrations, 5Foundations*.pngdiagrams, 6theme-*-preview.pngtiles, 4discover-card-*.png, and the 6neutral/preview-*.pngproduct shots (plushero-bg.png,favicon.svg, blog covers).That meant an outside contributor couldn't see which images exist, couldn't add a new one, and couldn't run the site with real imagery. This PR fixes that by giving every demo image one home:
📄 Asset mapping (every image → original Asset Manager source + 2x asset ids): https://gist.github.com/imdreamrunner/1574db95a724d793e703036ee625e665
What changed
1. One self-hosted location for all images
Nature-1.mp4) underapps/docsite/public/images/— organized astemplate-assets/(shared template images), per-theme folders (matcha/ butter/ stone/ gothic/ y2k/),avatars/, theme*-picker.pngbanners, and the brandAstryx-Banner.png./images/...root-relative paths (docsite theme showcase + hero, 38 CLI template files,Lightbox.doc.mjs)./images/(not the public root) so theme-name folders can't shadow Next.js app routes.2. Retina variants ready for later
@2xvariants (45 unique assets) alongside their 1x siblings for every image whose asset set provides adensity=2source (theme product photos, DATA avatars, theme-picker banners). Each@2xis exactly 2× its 1x sibling. Not referenced yet — ready for a futuresrcset/next/imagepass without re-fetching.3. Contributor-friendly + scaffold behavior preserved
.github/instructions/templates.instructions.mdnow explains the workflow: browsepublic/images/template-assets/to find an image, drop a file there to add one, reference by/images/template-assets/<name>.png.stripTemplateAssetRefs(the CLI scaffold step) still swaps these paths for a self-contained inline placeholder, so a generated project renders with zero setup / zero dependency. Sentinel + regex updated to/images/template-assets/(excludesplaceholder.svg); test suite 10/10.CDN/NEUTRAL_CDN/PICKER_CDNbase-path variables in favor of literal/images/...paths.4. Guardrail
check-demo-media.mjs: image-backed Thumbnail examples must inline a same-origin, samplabledata:URI (required byuseImageMode's CORS pixel-sampling).Result: zero
lookaside.facebook.comreferences remain except the README banner (READMEs render on GitHub and need an absolute URL — will switch tohttps://astryx.atmeta.com/images/Astryx-Banner.pngafter merge) and a mocked, never-fetched URL inuseImageMode.test.ts.Verification
stripTemplateAssetRefstests 10/10; full docsite suite 238/238; coreuseImageMode5/5.pnpm check:repo(sync, package-boundaries, changesets, demo-media, executable-bits): all pass (pre-commit).next dev): all/images/*assets 200, old paths 404.dev:sandbox): mirror lands atpublic/images/template-assets/; template previews render with<img src="/images/template-assets/...">.