Show HN: Supershields.io – smart, Lua-powered SVG status badges

by rlonn • 4 years ago

97 54 4 years ago

rlonn24• 4 years ago

Hi, I built supershields.io as an alternative to shields.io.

If you're interested in reading about the somewhat unorthodox product development process, I've written a blog article about it here: https://supershields.io/blog/1

vosper• 4 years ago

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.

rlonn24• 4 years ago

Yeah, the service itself is kinda hard to use on a tiny screen so I haven't put a lot of effort into providing a good mobile user experience. I guess it would be useful to have a mobile-friendly version for people just checking out the service though.

DarkContinent• 4 years ago

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.

rlonn24• 4 years ago

There is a supershields Github app that you can install and then give access to one or more private Github repos. Then when you create Github badges on supershields.io you'll get the option to connect them with your private repo.

The app is here: https://github.com/marketplace/supershields

Not sure how Github enterprise works though. Can you use regular Github apps with your enterprise installation?

majkinetor• 4 years ago

You implemented all the missing stuff with badges and its awesome.

I wouldn't ever pay for stuff like this tho, but I hope that is just me.

rlonn24• 4 years ago

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.

motyar4• 4 years ago

Great idea, Working on something for PNGs only.

but only for static data passed into query parameters.

https://bruzu.com

rlonn24• 4 years ago

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.)

motyar4• 4 years ago

Thanks for trying.

Yes, I thing they should add a design editor too.

nickphx• 4 years ago

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

motyar4• 4 years ago

Yes, lets talk DM on twitter @motyar

motyar4• 4 years ago

Hi Nick, I also sent you an email please check

captn3m0• 4 years ago

Does GitHub let you embed and keep these as smart? (SVG auto-updates for eg?) My understanding was that Github proxies all SVGs and renders them as PNG/JPG at their end.

rlonn24• 4 years ago

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.

toomanydoubts• 4 years ago

Is it really a silly policy? I like that a lot.

arraypad• 4 years ago

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/

styfle• 4 years ago

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.

bebna• 4 years ago

Hi cool project. Congrats on finishing.

Some questions about lua:

- What dev environment do u prefer? When I looked last time I didn't really see a dedicated IDE for lua, mostly just plugins for vim/emacs.

- Did you consider lua in nginx? (Or what are you thoughts on it).

- Did you consider moonscript? (Or what are you thoughts on it)

rlonn24• 4 years ago

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.

oefrha3• 4 years ago

IMO the horizontal margins around text are way too wide, which makes the badges look ugly (subjective) and space-inefficient when placed in a row (objective). Faithfully copying the shields.io style would be a lot better. Their layout appears to be

  6px LHS 4px | 4px RHS 6px

rlonn24• 4 years ago

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!)

oefrha3• 4 years ago

I took a look. The rendering code of shields.io is here: https://github.com/badges/shields/blob/779c1ffaadfcd53ac20b5... text width is computed in preferredWidthOf, which computes the width of the text in 11px Verdana, either normal or bold: https://github.com/badges/shields/blob/779c1ffaadfcd53ac20b5... The anafanafo dependency is doing all the heavy lifting: https://www.npmjs.com/package/anafanafo

vlaaad3• 4 years ago

Nice, I wanted something like that to create badges for git deps in Clojure. Here is my attempt to do it using Supershields:

https://supershields.io/d1a18b018347defeec7b

Two questions:

1. text doesn't fit, how to fix that?

2. quote characters — «"» — get escaped as «"», how to avoid that?

rlonn24• 4 years ago

Removing the html.unescape() seems to work

vlaaad3• 4 years ago

No it doesn't. The badge in the Test Script pane always shows correct quotes, but the publicly available one escapes the quotes. I added html.unescape thinking it will fix the issue, but it didn't. Now I removed unescape again, and it's still broken.

npigrounet• 4 years ago

Why Lua?

rlonn24• 4 years ago

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

HatchedLake7212• 4 years ago

Any reason why the website is not mobile friendly?

Unless some css didn’t load up, I’ve got a huge horizontal bar.

rlonn24• 4 years ago

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.

rjvs• 4 years ago

Why can't it be used on a small screen? Also, many phones don't really have small screens...

andrenotgiant2• 4 years ago

Something I've always wondered about these shields... How do you ensure the platforms where users embed them don't cache the images in their CDNs?

Is it just a matter of setting headers?

rlonn24• 4 years ago

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.

andrenotgiant2• 4 years ago

I'm asking about what happens when, for example, you embed a dynamic SVG badge in your GitHub readme.

Doesn't GitHub cache every image in their own CDN for security and control purposes?

cdelsolar• 4 years ago

How'd you sandbox Lua?

rlonn24• 4 years ago

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.

DenseComet• 4 years ago

Looking at this docs page[1], it doesn't look like the execution environment gets reset completely between each request. Do you partition free/paying users or public/private repos? It seems like an attacker could gain a foothold for longer than just their request with malicious code.

[1] https://docs.aws.amazon.com/lambda/latest/dg/runtimes-contex...

Show HN: Supershields.io – smart, Lua-powered SVG status badges

Related Stories