Skip to content

Commit b9b14cc

Browse files
rocketnovasawyerh
andauthored
Update storybook config to display USWDS images when deploying to a subdir (#98)
## Ticket #97 ## Changes - Update regex for storybook string replacement to support deploying to a subdirectory ## Context for reviewers I deployed #89 to WIC MT Demo Project in order to get our storybook deployed using github pages. I found an issue where the images weren't displaying properly and made a PR for it: navapbc/wic-mt-demo-project-eligibility-screener#168 This PR is a port of that one. See also Slack discussion: https://nava.slack.com/archives/C03G1SWD9H7/p1669820652173809 I inspected the [generated github action artifact](https://github.com/navapbc/template-application-nextjs/actions/runs/3633298101) and confirmed that we are currently correctly prepending the BASE_PATH to any relative paths in storybook that begin with url(/. However, USWDS also uses this syntax url("/ and our regex doesn't catch that. ## Testing 1. Go to [this github action run](), which builds storybook for this branch and deploys it to github pages 2. Download the generated artifact 3. Unzip the artifact 4. Grep the unzipped files and confirm that `"/uswds/img` does not appear and that `"template-application-nextjs/uswds/img` does appear Co-authored-by: Sawyer Hollenshead <[email protected]>
1 parent ead264e commit b9b14cc

File tree

1 file changed

+5
-2
lines changed

1 file changed

+5
-2
lines changed

app/.storybook/main.js

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -49,8 +49,11 @@ const config = {
4949
options: {
5050
// Support deploying Storybook to a subdirectory (like GitHub Pages).
5151
// This adds the BASE_PATH to the beginning of all relative URLs in the CSS.
52-
search: /url\(\//g,
53-
replace: `url(${BASE_PATH}/`,
52+
// It handles relative urls, whether they are quoted or not.
53+
search: /url\(("?)\//g,
54+
replace(match, p1, offset, string) {
55+
return `url(${p1}${BASE_PATH}/`;
56+
},
5457
},
5558
},
5659
{

0 commit comments

Comments
 (0)