[OUDS] Add sprite to Stackblitz example to have icons#3464
[OUDS] Add sprite to Stackblitz example to have icons#3464
Conversation
github-project-automation
Bot
moved this to In Progress / Draft
in 🟣 [Orange-Boosted-Bootstrap] PRs Board
✅ Deploy Preview for boosted ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
boosted-bot
moved this from In Progress / Draft
to Need Dev Review
in 🟣 [Orange-Boosted-Bootstrap] PRs Board
louismaximepiton
left a comment
louismaximepiton
left a comment
There was a problem hiding this comment.
Just asking if we should have the brand in this file
| <body class="p-2xlarge m-none border-none ${classes}"> | ||
| <!-- Example Code --> | ||
| ${htmlSnippet.trimStart().replace(/^/gm, ' ').replace(/^ {4}$/gm, '').trimEnd()} | ||
| ${htmlSnippet.trimStart().replace(/^/gm, ' ').replace(/^ {4}$/gm, '').replaceAll(/xlink:href="\/.+\/ouds-web-sprite\.svg/g, `xlink:href="${spriteUrl}`).trimEnd()} |
There was a problem hiding this comment.
| ${htmlSnippet.trimStart().replace(/^/gm, ' ').replace(/^ {4}$/gm, '').replaceAll(/xlink:href="\/.+\/ouds-web-sprite\.svg/g, `xlink:href="${spriteUrl}`).trimEnd()} | |
| ${htmlSnippet.trimStart().replace(/^/gm, ' ').replace(/^ {4}$/gm, '').replaceAll(/xlink:href="\//g, `xlink:href="${spriteUrl}`).trimEnd()} |
| }) | ||
|
|
||
| const openOUDSWebSnippet = (htmlSnippet, jsSnippet, classes, cssBootstrap) => { | ||
| const spriteUrl = `https://web.unified-design-system.orange.com/${CONFIG.brand}/docs/${CONFIG.docsVersion}/assets/img/ouds-web-sprite.svg` |
There was a problem hiding this comment.
So we don't need BRAND
| const spriteUrl = `https://web.unified-design-system.orange.com/${CONFIG.brand}/docs/${CONFIG.docsVersion}/assets/img/ouds-web-sprite.svg` | |
| const spriteUrl = `https://web.unified-design-system.orange.com/` |
There was a problem hiding this comment.
Pull request overview
Adds OUDS Web SVG sprite support to StackBlitz “Edit on StackBlitz” examples so icon-based snippets render correctly when opened outside the docs site (addresses missing sprite issue in #3038).
Changes:
- Injects
brandinto the StackBlitz asset config via the Vite placeholder replacer. - Builds a brand/version-specific sprite URL in the StackBlitz template and preloads it.
- Rewrites
xlink:hrefsprite references in example HTML to point to the absolute sprite URL.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| site/src/plugins/stackblitz-plugin.js | Adds __BRAND__ placeholder replacement so StackBlitz JS can construct brand-scoped asset URLs. |
| site/src/assets/stackblitz.js | Constructs sprite URL, preloads it, and rewrites snippet sprite references so icons work in StackBlitz. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| <link href="${cssBootstrap ? CONFIG.cssBootstrapCdn : CONFIG.cssCdn}" rel="stylesheet" /> | ||
| <link href="https://web.unified-design-system.orange.com/docs/${CONFIG.docsVersion}/assets/css/docs.css" rel="stylesheet" /> | ||
| <link rel="preload" href="${spriteUrl}" as="image" type="image/svg+xml"> |
There was a problem hiding this comment.
The docs CSS URL here doesn’t include the brand segment, but the site’s versioned asset paths are brand-scoped (e.g., getVersionedDocsPath() returns /${brand}/docs/${docs_version}/...). For non-default brands (and to stay consistent with spriteUrl just below), this will likely 404 or load the wrong styling. Consider including CONFIG.brand in the docs.css URL (or deriving the base from config) so StackBlitz examples load the correct assets for the active brand.
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
|
Since it doesn't work right now, I'm updating this PR to draft. We might study the way where ouds-web-sprite is added to the html directly. |
Related issues
Closes #3038
Description
Checklists
Progression (for Core Team only)
ouds/mainfollowing conventional commitLive previews