-
|
Hi 👋 I'm sure I'm doing something wrong as I have very limited experience with react / ts / ... But I'm facing a weird issue I'd love some explanation about. I'm trying to use the npm library of shields and creating react components to embed the result of My issue is that the total width of the first badge seem to affect every other badge on the page. And I'm not sure how to approach the issue. It looks like this: This is achieved by just running I don't think it's a problem with the library itself, given that you can reproduce using the "live" site. (I've also tried to rollback to the 3.3.1 version of the library just in case). For instance, just open: https://img.shields.io/badge/label-message-blue, copy the resulting What would be the way to have this work properly? Thank you! |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 2 replies
-
|
Well this is an interesting one. Here's the issue broken down to a minimal repro: <!DOCTYPE html>
<html>
<body>
<h1>Some badges</h1>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="96" height="20" role="img" aria-label="label: message"><title>label: message</title><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="96" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="37" height="20" fill="#555"/><rect x="37" width="59" height="20" fill="#007ec6"/><rect width="96" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text aria-hidden="true" x="195" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="270">label</text><text x="195" y="140" transform="scale(.1)" fill="#fff" textLength="270">label</text><text aria-hidden="true" x="655" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="490">message</text><text x="655" y="140" transform="scale(.1)" fill="#fff" textLength="490">message</text></g></svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="130" height="20" role="img" aria-label="label: longermessage"><title>label: longermessage</title><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="130" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="37" height="20" fill="#555"/><rect x="37" width="93" height="20" fill="#007ec6"/><rect width="130" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text aria-hidden="true" x="195" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="270">label</text><text x="195" y="140" transform="scale(.1)" fill="#fff" textLength="270">label</text><text aria-hidden="true" x="825" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="830">longermessage</text><text x="825" y="140" transform="scale(.1)" fill="#fff" textLength="830">longermessage</text></g></svg>
</body>
</html>View that in a browser, you'll see the described behaviour. The reason why this is happening is because the IDs on the So if I were to edit this to <!DOCTYPE html>
<html>
<body>
<h1>Some badges</h1>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="96" height="20" role="img" aria-label="label: message"><title>label: message</title><linearGradient id="s1" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r1"><rect width="96" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r1)"><rect width="37" height="20" fill="#555"/><rect x="37" width="59" height="20" fill="#007ec6"/><rect width="96" height="20" fill="url(#s1)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text aria-hidden="true" x="195" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="270">label</text><text x="195" y="140" transform="scale(.1)" fill="#fff" textLength="270">label</text><text aria-hidden="true" x="655" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="490">message</text><text x="655" y="140" transform="scale(.1)" fill="#fff" textLength="490">message</text></g></svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="130" height="20" role="img" aria-label="label: longermessage"><title>label: longermessage</title><linearGradient id="s2" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r2"><rect width="130" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r2)"><rect width="37" height="20" fill="#555"/><rect x="37" width="93" height="20" fill="#007ec6"/><rect width="130" height="20" fill="url(#s2)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text aria-hidden="true" x="195" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="270">label</text><text x="195" y="140" transform="scale(.1)" fill="#fff" textLength="270">label</text><text aria-hidden="true" x="825" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="830">longermessage</text><text x="825" y="140" transform="scale(.1)" fill="#fff" textLength="830">longermessage</text></g></svg>
</body>
</html>View that second one in a browser, it will render as expected. The thing I have changed is the identifiers on the I think there is probably some value in fixing this, but also it is not a super-common use-case (shields has been around for 10 years and this is the first time it has come up). Maybe the library could have a (non-default) setting where you can tell it to make the ids a UUID or something to cover this case? I wouldn't want this to be the default though. For shields.io there is value in the IDs being a single character for bandwidth reasons. We serve ~50 million badges per day and we spend as much on bandwidth as we do on compute so keeping the SVGs small does matter for us. |
Beta Was this translation helpful? Give feedback.
-
|
Awesome thanks for the quick answer. I did expect this to be some sort of ID being re-used, I just didn't really know where to look. While I understand that most people wouldn't see this (since they would usually just embed y'all's url in an That being said, yes, being able (on the npm library side of things, I perfectly understand the point you raise about the public facing API) to make it a random UUID, or even potentially to name them (because why not I guess?), would be an awesome addition I think. I'd greatly appreciate it if this could be implemented in the near future. Thanks! PS: If you need me to do anything, like create an issue on the repo or smth, let me know :-) |
Beta Was this translation helpful? Give feedback.
-
|
Yes. I am surprised this has not come up before tbh. I've raised an issue for it at #10336 However, in the immediate term: I do have a suggested workaround for you. This might work well given you're rendering with react. <!DOCTYPE html>
<html>
<body>
<h1>Some badges</h1>
<span id="badge1"></span>
<span id="badge2"></span>
<script>
const badges = [
{
id: 'badge1',
content: '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="96" height="20" role="img" aria-label="label: message"><title>label: message</title><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="96" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="37" height="20" fill="#555"/><rect x="37" width="59" height="20" fill="#007ec6"/><rect width="96" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text aria-hidden="true" x="195" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="270">label</text><text x="195" y="140" transform="scale(.1)" fill="#fff" textLength="270">label</text><text aria-hidden="true" x="655" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="490">message</text><text x="655" y="140" transform="scale(.1)" fill="#fff" textLength="490">message</text></g></svg>'
},
{
id: 'badge2',
content: '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="130" height="20" role="img" aria-label="label: longermessage"><title>label: longermessage</title><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="130" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="37" height="20" fill="#555"/><rect x="37" width="93" height="20" fill="#007ec6"/><rect width="130" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text aria-hidden="true" x="195" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="270">label</text><text x="195" y="140" transform="scale(.1)" fill="#fff" textLength="270">label</text><text aria-hidden="true" x="825" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="830">longermessage</text><text x="825" y="140" transform="scale(.1)" fill="#fff" textLength="830">longermessage</text></g></svg>'
}
]
badges.forEach(function(badge) {
const target = document.querySelector("#" + badge.id);
const shadow = target.attachShadow({ mode: "open" });
const span = document.createElement("span");
span.innerHTML = badge.content;
shadow.appendChild(span);
})
</script>
</body>
</html>This uses the SVG output as generated by the library as it stands and will render as expected. I expect if you only want to render a few badges this will be fine. I guess if you wanted to render hundreds of images on a page or something the overhead of each one being its own Shadow DOM might have a performance impact. |
Beta Was this translation helpful? Give feedback.
Yes. I am surprised this has not come up before tbh.
I've raised an issue for it at #10336
However, in the immediate term: I do have a suggested workaround for you. This might work well given you're rendering with react.
If you put each badge inside its own Shadow DOM it doesn't matter if the IDs aren't unique because it encapsulates each one in its own DOM/scope. Here's a proof of concept: