Add png status badge

[SethFalco]

Is your feature request related to a problem? If so, please describe.

On certain sites, we aren't allowed to use SVG files unless they're from trusted sources.
For my particular case, it's the Visual Studio Code Marketplace, which disallows SVGs for security reasons. (More Info)

Describe the solution you'd like

Could we have a separate URL that generates a PNG version of SVGBadgeWidget?

Then there could be 2 versions:

• SVG - /widgets/{project-name}/-/status-badge.svg / /widgets/{project-name}/-/svg-badge.svg
• PNG - /widgets/{project-name}/-/status-badge.png

Additional context

I think a nice way might be to add a utility in the weblate.utils module to convert an SVG to PNG in memory?
This way it's really efficient to build the image because it's just inserting variables into XML, and can be converted into the PNG as a final step.

Otherwise, it could be fine to just build the image like any of the other raster/bitmap widgets?

The rest is only relevant if there is a way to convert an SVG with CSS/JavaScript to a PNG. I was just playing with SVGs, but had issues rasterizing them. Just noting the thoughts here.

---

I've tried looking a bit, but it seems most aren't able to handle things like <style> or <foreignObject>.
If there is a way to achieve this, then this approach could be used to resolve other issues in the repository as well.

#4198 (comment) - If this used an SVG base, then one can just use getComputedTextWidth to size the button according to the text.

<svg version="1.1" viewBox="0 0 512 512"
  xmlns="http://www.w3.org/2000/svg">
  <title>My Cool SVG</title>
  <desc>Base for Open Graph Thing</desc>

  <rect id="rect" rx="16" fill="grey"/>
  <text id="text" x="64" y="64" font-size="16" fill="white">Use Weblate</text>

  <script>
    const PADDING = 16;

    const rect = document.getElementById('rect');
    const text = document.getElementById('text');

    const textLength = text.getComputedTextLength();
    
    const textX = parseInt(text.getAttribute('x'));
    const textY = parseInt(text.getAttribute('y'));
    const textSize = parseInt(text.getAttribute('font-size'));

    const x = textX - PADDING;
    const y = textY - (textSize) - (PADDING / 2);
    const width = textLength + (PADDING * 2);
    const height = textSize + PADDING;

    rect.setAttribute('x', x);
    rect.setAttribute('y', y);
    rect.setAttribute('width', width);
    rect.setAttribute('height', height);
  </script>
</svg>

#6219 - If this used an SVG base, then one can just use CSS to truncate and use an ellipsis.

<svg version="1.1" viewBox="0 0 512 512"
  xmlns="http://www.w3.org/2000/svg">
  <title>My Cool SVG</title>
  <desc>Base for Open Graph Thing</desc>

  <style>
    div {
      width: 256px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    #project-name {
      font-weight: bold;
    }
  </style>

  <foreignObject x="0" y="0" width="512" height="512">
    <div xmlns="http://www.w3.org/1999/xhtml">
      <span id="project">Project</span>
      <span id="project-name">Very Long Project Name</span>
    </div>
  </foreignObject>
</svg>

[nijel]

It used to be there, but was removed years ago in 4169cf3, because of #1511

[github-actions]

This issue has been put aside. It is currently unclear if it will ever be implemented as it seems to cover too narrow of a use case or doesn't seem to fit into Weblate.

Please try to clarify the use case or consider proposing something more generic to make it useful to more users.

[SethFalco]

If you're not certain if you'd like to include this, I can make a PR to badges/shields instead? (shields.io)

I'm already looking at the API endpoints, and can make a couple of badges for total users, total projects, translation status, etc.

That would also resolve the problem this request was looking to solve, as shields.io allows both SVG and PNG badges. Plus I can just use the SVG badge anyway as shields.io is one of the trusted sources for the Visual Studio Code Marketplace.

If this suits you more, you're welcome to close this. I can also drop a comment when the badges are added to shields.io.

Edit: Created a PR in shields.io.

• Add [Weblate] badges badges/shields#6677

[SethFalco]

Merged! \(^-^)/

SVG

https://img.shields.io/weblate/progress/weblate?server=https%3A%2F%2Fhosted.weblate.org

PNG

https://raster.shields.io/weblate/progress/weblate?server=https%3A%2F%2Fhosted.weblate.org