Show HN: Supershields.io – smart, Lua-powered SVG status badges (opens in new tab)

Ooh, you have a designer I see, neat!

Also, the API looks nice. Lots of image manipulation functionality. I've been thinking that the next step for Supershields would be some kind of lower level SVG creation API that lets people build their own SVGs from the ground up. This would also give them the ability to do more advanced stuff with images like your API can do (flipping and skewing etc.)

Hey, any interest in licensing a copy? I'm needing something exactly like this but at request volumes in the 100M/day range.

Hey just a heads-up that the site is all messed up for me on iOS Safari: everything is huge, big horizontal scrollbar. Very hard to use.

Can I use supershields for an internal company metric to be displayed on a GitHub enterprise instance? I've tried using shields.io in the past for this and the API endpoint typically must be publicly accessible to make a metric button out of it.

You can put external links into e.g. your Github README.md to display badges but yes, Github seem to have some silly policy of not allowing people to inject executable Javascript into their website so you can't embed things using <object> tags, or similar. You have to use <img> which means no JS included in the badge SVG will be executed => no automatic updates.

Github does proxy SVGs, but it doesn't rasterize them.

If you're interested in embedding something like this on GitHub then you might want to check out Repography [1]. There are only a few styles of dashboards at the moment but I'm working on others.

[1] https://repography.com/

Yep

Here’s an example of SVG animation https://github.com/sindresorhus/css-in-readme-like-wat

Also see https://badgen.net which is another alternative to the original post.

You can't really use the service on a small screen, but I hear you. I have to provide at least a logged-out view that is mobile friendly.

Removing the html.unescape() seems to work

Yeah, the issue is (disclaimer: I might have missed something vital here) that it is very hard to know exactly how wide text is when rendered inside the SVG. Some characters take less space than others and the safest way to determine the width of a string when it is rendered is to actually render it. This, of course, is hard to do on the server side. I'm not sure what shields.io does (I'll take a new look at it though) but given that their badges contain more predictable text strings (at least on the left-hand-side it tends to be static text) it is easier there to adjust the size of the SVG manually whe you create a new badge. Supershields badges, on the other hand, can contain very different text strings and there is no way to know what the text will be before you execute the Lua script.

Hmm, a bit rambling response, this one. I hope you get what I mean (and that I'm not completely clueless - have to look at the shields.io code again!)

If you load http://example.com and the HTML there includes an image tag that says '<img src="http://othersite.com/image.jpg">' it means your browser will connect to othersite.com and ask that site for the image. It will not ask example.com.

I write a little about it in the blog post: https://supershields.io/blog/1

TL;DR is that most Lua engines seem to offer pretty weak support for sandboxing, unfortunately. Gopher-lua, that Supershields is using, makes it hard to adopt a whitelist-approach where you disable more or less everything and then enable just the functionality you want. Blacklisting (where you specify everything you want to disable) is fairly simple though, but not as secure of course.

For Supershields I have used a combination of blacklisting and running the scripts on serverless instances (AWS Lambda), which limits the impact of a breach.

Thanks :) To be honest, I'm not sure there is a viable business here. I think perhaps making it more niched, like going for financial badges only and providing lots of templates for those types of badges, may be smarter. But it's also more boring so I don't plan on doing that. at the moment, I'll be happy if people just use the service.

I'm generally using Visual Studio Code for all my development. Really like it.

I chose https://github.com/yuin/gopher-lua as the Lua engine because it is Golang-based, while the Nginx Lua VM is C, unless I'm mistaken. Using gopher-lua is just easier when I'm working in a Golang project. I only have to work in a single language and dev environment for all the backend work. Makes both development and testing easier.

Moonscript I might have heard of, but I have no experience with it. I did not consider it here, and I would rarely consider any niche scripting language for a solution I want others to use. It just introduces an unnecessary barrier to adoption.

It is small, fast, easy to use and easy to embed.