Fix home page icons - #219
Conversation
Sorry, something went wrong.
|
|
Sorry, something went wrong.
|
|
Sorry, something went wrong.
✅ Deploy Preview for stackblitz-docs ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
Sorry, something went wrong.
| &:not(.has-bg)::before { | ||
| -webkit-mask-size: 32px; | ||
| mask-size: 32px; | ||
| mask-size: 32px; |
There was a problem hiding this comment.
Removing the -webkit-mask prefixes because:
- the unprefixed version finally shipped in Chrome 120 (current is 123);
- also we have some autoprefixing going on that will add those prefixes at build time anyway (unless we go out of our way to add a .browserslistrc to narrow down our target browsers to Chrome 120+, Safari 15.4+ and Firefox 53+).
Sorry, something went wrong.
| style['--icon'] = `url('${url}')`; | ||
| // Vite may transform SVG assets to data URLs, using single quotes for XML | ||
| // attribute values for some reason. This means we can't always quote URLs | ||
| // with single quotes, or the CSS value might be invalid. | ||
| const quote = url.includes(`"`) ? `'` : `"`; | ||
| style['--icon'] = `url(${quote}${url}${quote})`; |
There was a problem hiding this comment.
🌟 This is the fix.
Sorry, something went wrong.
| "prettier": "^3.2.5", | ||
| "sass": "^1.72.0", | ||
| "vitepress": "~1.0.1" | ||
| "vitepress": "~1.0.2" |
There was a problem hiding this comment.
Tiny VitePress update, picks up a fix for the mobile nav that doesn't affect us but is safe to have.
Sorry, something went wrong.
donmckenna
left a comment
There was a problem hiding this comment.
🙏
Sorry, something went wrong.
Our icons on the home page are working correctly in development mode, but not in the final build.
The icons end up as data URLs in the HTML build, with the SVG attributes quoted with single quotes (instead of double quotes in the source files). And we render those URLs with:
Which breaks when the url is something like:
I added some logic to use double quotes when the URL contains single quotes.