PR companion is not deploying images used in live samples

[OnkarRuikar]

Summary

Related to mdn/content PR mdn/content#28805

PR companion for mdn/content doesn't deploy images to the BUILD_LIVE_SAMPLES_BASE_URL server.

URL

mdn/content#28805 (comment)

Reproduction steps

1. Commit an image (say demo.jpg) in a local branch and use it in a live sample for the page using HTML <img src=demo.jpg>
2. Submit a PR in mdn/content repo.
3. Open the preview link for the page generated by the PR companion.
4. In the live sample the image is not rendered.

In this case the image was not deployed to https://live.mdnyalp.dev/en-US/docs/Web/CSS/aspect-ratio/plumeria.jpg. Once the changes go live it will be deployed to https://live.mdnyalp.dev so this won't be reproducible using the PR.

Expected behavior

On PR preview pages live samples with images should render the images using relative paths demo.jpg or ./demo.jpg.

Actual behavior

Images committed along with markdown pages aren't rendering in live sample outputs.

Device

Desktop

Browser

Firefox

Browser version

Stable

Operating system

Linux

Screenshot

Anything else?

No response

Validations

• I have read the Community Participation Guidelines.
• I have verified that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• I have checked that this is a concrete bug. For Q&A open a GitHub Discussion.

[OnkarRuikar]

Note, the preview links in the content PR will work for a limited time. So plan the investigation accordingly.

[yin1999]

The assets (only on main branch) would only be deployed when a stage build is completed. So this would prevents us from fetching the images. Actually, the image does deployed with the main page's domain: https://pr28805.content.dev.mdn.mozit.cloud/en-US/docs/Web/CSS/aspect-ratio/plumeria.jpg.

The current live sample uses Message event handler to pass the code of the main page to the live sample iframe instead of directly generating a static page with related assets. I don’t know if this is the reason why the developers only use the single domain to deploy the live samples for PR previews.

[OnkarRuikar]

Actually, the image does deployed with the main page's domain: https://pr28805.content.dev.mdn.mozit.cloud/en-US/docs/Web/CSS/aspect-ratio/plumeria.jpg.

I think changing the environment variable from

BUILD_LIVE_SAMPLES_BASE_URL: https://live.mdnyalp.dev

to

BUILD_LIVE_SAMPLES_BASE_URL: https://pr<prNo>.content.dev.mdn.mozit.cloud

and changing the macro like following:

-- let samplePath = `${pagePath}/runner.html`.replace(/\/\/+/g, "/");
++ let samplePath = `${baseUrl}/runner.html`.replace(/\/\/+/g, "/");

may work.

[estelle]

This is currently (May 8, 2024) an issue in the following PRs:

• Draft: new guide: aspect-ratio content#33370 (closed, but see comment
• New CSS guide: Understanding aspect ratio content#33461
• documentation for HTMLMapElement.areas content#31713