feat: serve Storybook avatar images from local static directory#7774
feat: serve Storybook avatar images from local static directory#7774
Conversation
|
…xternal URLs - Add `staticDirs: ['../public']` to Storybook main.ts config - Download all externally-referenced avatars to packages/react/public/avatars/ - Add `avatarUrl()` and `teamAvatarUrl()` helpers to story-helpers.tsx - Update all story files to reference local static paths: - Avatar, AvatarStack, AnchoredOverlay, Header, Card, Radio, Skeleton, UnderlineNav, SideNav stories use direct /avatars/ paths - ActionList, ActionBar, SelectPanel stories use avatarUrl()/teamAvatarUrl() helpers for dynamic logins Agent-Logs-Url: https://github.com/primer/react/sessions/7a1944a5-e65f-4793-b189-51d0c14bb0dd Co-authored-by: siddharthkp <1863771+siddharthkp@users.noreply.github.com>
… track them - Move avatars from public/ to .storybook/public/avatars/ to avoid Gatsby's public/ gitignore exclusion - Add .gitignore exceptions for packages/react/.storybook/public/ to allow tracking - Update staticDirs in main.ts to point to .storybook/public Agent-Logs-Url: https://github.com/primer/react/sessions/7a1944a5-e65f-4793-b189-51d0c14bb0dd Co-authored-by: siddharthkp <1863771+siddharthkp@users.noreply.github.com>
…rule - Use path.join(path.dirname(fileURLToPath(import.meta.url)), 'public') for staticDirs to ensure path is always resolved relative to the .storybook config file - Remove redundant !packages/react/.storybook/public/** gitignore rule Agent-Logs-Url: https://github.com/primer/react/sessions/7a1944a5-e65f-4793-b189-51d0c14bb0dd Co-authored-by: siddharthkp <1863771+siddharthkp@users.noreply.github.com>
|
@copilot You've added so many avatars of random people?? Can you try to only add avatars of people who are actually mentioned in the stories ( |
- Trim mock-story-data.ts users array from 100+ random entries to just the 7 same people who are in data.collaborators (also restoring branches/tags sections that were accidentally removed) - Delete 102 avatar files that were only needed for the removed mock users - Keep only 22 avatar files: org logos (mona, primer, github, atom, desktop, facebook), known accounts (hubot, octocat, lukasoppermann), team avatars, and collaborators/ActionList users (broccolinisoup, camertron, colebemis, dgreif, jfuchs, joshblack, langermank, mperrotti, pksjce, siddharthkp, smockle) Agent-Logs-Url: https://github.com/primer/react/sessions/adb5cee7-0119-4837-b4f7-1bde4acac518 Co-authored-by: siddharthkp <1863771+siddharthkp@users.noreply.github.com>
Done in e3a6b32. Reduced from 124 to 22 avatars — only keeping images for people actually referenced in the stories:
Also trimmed |
| > | ||
| <ActionList.LeadingVisual> | ||
| <Avatar src={`https://github.com/${user.login}.png`} /> | ||
| <Avatar src={avatarUrl(user.login)} /> |
There was a problem hiding this comment.
@copilot avatarUrl function does so little, just use the url directly in all the files which have this function and remove the helper (same for teamAvatar)
| <Avatar src={avatarUrl(user.login)} /> | |
| <Avatar src={`/avatars/€{user.login}.png`} /> |
There was a problem hiding this comment.
Done in 0771514. Replaced all avatarUrl()/teamAvatarUrl() calls with inline template literals (e.g. `/avatars/${user.login}.png`) and removed both helper functions from story-helpers.tsx.
Replace avatarUrl()/teamAvatarUrl() helper functions with inline template
literals (`/avatars/${login}.png`) in all story files, and remove
the now-unused helpers from story-helpers.tsx
Agent-Logs-Url: https://github.com/primer/react/sessions/8f3b460c-502e-4d82-8468-a8b9ec860b6e
Co-authored-by: siddharthkp <1863771+siddharthkp@users.noreply.github.com>
github-actions
Bot
added
the
integration-tests: recommended
|
siddharthkp
added
the
update snapshots
github-actions
Bot
removed
the
update snapshots
There was a problem hiding this comment.
@copilot instead of seeing the avatars of users, i now see primer's logo here for all stories :/
There was a problem hiding this comment.
Fixed in 70ef88f. Root causes were:
-
Org logos were all identical —
github.png,desktop.png, andfacebook.pngwere byte-for-byte the same file asprimer.png(all 5065-byte, 420×420 PNGs). They've been re-downloaded as their correct logos. -
User avatars were tiny thumbnails — all user JPEGs were 64×64 (1–2 KB). They've been re-downloaded at full resolution (400–460px, 18–287 KB), so each user now shows their actual profile photo.
-
Dead VRT route mock removed — the
page.route('https://github.com/*.png', ...)interceptor instorybook.tsthat redirected all avatars to Primer's logo has been removed. Since no stories use external avatar URLs anymore, it was unreachable dead code (and was masking the image content issue in VRT runs).
VRT baselines were captured with the old incorrect images and will need to be regenerated — CI VRT will show diffs for the affected stories.
…d remove dead VRT route mock
- Re-download all 22 avatar images from GitHub CDN at full resolution
(460x460 for most, replacing 64x64 thumbnails that were incorrectly saved)
- github.png, desktop.png, facebook.png were all byte-identical to primer.png
(all showed Primer's logo); they now correctly show GitHub/Desktop/Facebook logos
- Remove dead `page.route('https://github.com/*.png', ...)` interceptor from
storybook.ts — no stories use external avatar URLs anymore, so this mock
was unreachable dead code
Agent-Logs-Url: https://github.com/primer/react/sessions/2c06bf00-afab-4300-b4cc-539eb2fad57c
Co-authored-by: siddharthkp <1863771+siddharthkp@users.noreply.github.com>
|
Just as a heads up, I was blocked by some firewall rules while working on your feedback. Expand below for details. Warning Firewall rules blocked me from connecting to one or more addresses (expand for details)I tried to connect to the following addresses, but was blocked by firewall rules:
If you need me to access, download, or install something from one of these locations, you can either:
|
Storybook stories referenced avatar images from external URLs (
avatars.githubusercontent.com,github.com/*.png), making stories fragile to remote changes. This PR downloads the referenced images locally and wires up the Storybook static directory.Changelog
New
packages/react/.storybook/public/avatars/static directory with 22 full-resolution avatar images for people/orgs actually referenced in storiesChanged
main.tsnow configuresstaticDirsto serve from.storybook/public//avatars/paths as inline template literals instead of external GitHub URLs (e.g.`/avatars/${user.login}.png`)mock-story-data.tsusersarray trimmed to only include collaborators explicitly referenced in storiesgithub.png,desktop.png, andfacebook.pngwere previously byte-identical toprimer.pngand now correctly show their respective logosRemoved
avatarUrl(login: string)andteamAvatarUrl(id: string)helpers removed fromsrc/utils/story-helpers.tsxin favour of inline template literalspage.route('https://github.com/*.png', ...)Playwright route interceptor removed frome2e/test-helpers/storybook.ts— no stories use external avatar URLs any more, so this mock was unreachableRollout strategy
Storybook-only change; no public API or runtime behavior affected.
Testing & Reviewing
Verify stories that render avatars (Avatar, AvatarStack, Header, ActionList, SelectPanel) display images correctly without network requests to external hosts. All avatar images should load from
/avatars/in the Storybook dev server and show distinct, correct images for each person/org. VRT baselines were captured with the old incorrect images and will need to be regenerated — run with--update-snapshotsto accept the new visuals.Merge checklist
Original prompt
This pull request was created from Copilot chat.