Show HN: SpaceBadgers – Free and Libre SVG Badges | Hacker News Reader

Show HN: SpaceBadgers – Free and Libre SVG Badges

badgers.space

199 pointssplittydev49 comments

Greetings, Hacker News community!

I am thrilled to present SpaceBadgers, a new free and open-source SVG badge generator I've been working on. It's located at badgers.space.

SpaceBadgers is born out of the desire to offer more flexibility and customization for project badges, often used in open-source projects.

It's fully open source, provided under the permissive MIT license, and will always be provided for free. The core badge worker is written in Rust, and so is the library behind it, which you can also find on crates.io under the name spacebadgers.

I am excited to receive your feedback and suggestions. Check it out and let me know what you think in the comments. Contributions are also welcomed and appreciated. You can find the source code here: https://github.com/splittydev/spacebadgers.

Open articleView on HN

Wasn't expecting the "why" section to be at the bottom, since that's where I'm used to seeing license and contribution info. Might be worth linking to that at the top of your readme so folks don't miss it. I was specifically looking for why shields.io wasn't good enough, and found my answer there.

You're right, I should've moved that up a bit. Shields.io definitely has its merits, they've got a huge collection of supported badges. Badgen.net was created because shields.io was significantly slowing down over time, and solved that by serving SVG over the edge, and it's what I've been using for the past few years. But badgen has lots of broken badges nowadays, and it doesn't seem to be properly maintained. So I decided to roll my own, using a Rust library and Cloudflare workers. In the end, there are still good reasons to use shields.io or badgen.net, depending on the specific use-case. I've just become frustrated with broken badges, especially since we're using them on our company website, and it really doesn't make a good impression to have broken images everywhere

> So I decided to roll my own, using a Rust library and Cloudflare workers.

What is Cloudflare workers Rust support is like? I'd be a a complete Rust noob and looking for a dev environment with some code completion. Is that feasible today? Could you share your dev environment?

The documentation from Cloudflare isn't too great, but you can look at the badgers-worker code for inspiration. I personally use VS Code, with the rust-analyzer extension. I use Rust a lot, and I'm very satisfied with the code completion quality that rust-analyzer provides. Cloudflare's wrangler tool provides easy local debugging for workers, but its live-reload doesn't work too well, so you have to frequently restart.

Adding to that, Rust really isn't such a fringe language anymore. It's used in production all over the world, at huge companies such as Google, Meta, Microsoft, Netflix, etc. and it powers like 75% of the large crypto companies. The dev tools are high-quality, and there are lots of learning resources available. The language itself is mature too, and very stable.

This is really encouraging! I'm keen to experiment with Cloudflare and Rust. Thank you for sharing.

i would put the Why on the website too, not just the readme. i was wondering Why until i scrolled down here and realized its on the github.

Awesome! I love that it "just works"; I might engage with the CLI for meaningful integrations later, but right off the bat I can create custom SVGs thanks to dynamic URL params:

https://badgers.space/badge/mylabel/statuscode/green

Thank you for the positive feedback!

This is great, thank you! Any chance you'd consider making binaries available for download? I wanted to try out the CLI but I haven't used rust before, and I got as far as installing `cargo` via `rustup` but I can't figure out how to download and build the cli.

The badges look great and I love that this is available as both a web service (easy to link to) and as a CLI tool (no risk of depending on your web service).

I'm planning to release the CLI binaries in the future, but for now the CLI isn't all that great. It's still lacking some features that are already implemented in the library and web-service, and I need to update the command-line interface to support them properly.

I managed to fork the repository, set up rust and vscode, and run the CLI. Very cool stuff! I am not a Rust developer, though, so this is a pretty big barrier to entry for me to use the library. If you'd like to make it easier for people to run the code themselves, here's my recommendations:

- Add clear instructions for building/running the code, assuming the developer is already familiar with Cargo. (clone the repo, cd into it, run 'cargo run -- --label Foo --status Bar --color green` like you mentioned in your other comment)

- Add a github action workflow that builds+uploads the binaries as a Github Release, maybe using something like https://github.com/taiki-e/upload-rust-binary-action (I haven't used this but found it with some googling and it looks reasonable)

No need to do either of these things, just my recommendation. Thanks again for releasing such a cool project, very nice work, and best of luck!

Thanks for the ideas!

My current plan is to just release the cli on crates.io, in addition to the library. Then you could just do `cargo install spacebadgers-cli` and be done with it, no need to fork the repo.

The cli has a pretty good help section, so it should be pretty self-explanatory. If you just run it without arguments, it'll tell you all there is to it.

I'm still figuring out a few things about argument handling and additional options, so for now I haven't been releasing the cli yet (it's still too unstable in terms of consistency between updates).

Oh btw, building the CLI is super easy. If you've already installed Rust using rustup, you can just clone the repository and run `cargo run`. Since the CLI is the only tool that's actually marked as a binary, cargo will automatically build and run that one.

You can then pass parameters like so: `cargo run -- --label Foo --status Bar --color green`

Never really understood the point of these? They started showing up maybe ten years ago, and I must have missed the introductory blog post on them with the rationale.

Guess I can see the utility of having a little stats/props table at the top of a project readme. But the in-line wrapped style and images from an external web service aspects never made sense to me. Why is that popular?

I guess, badges can seem a bit peculiar at first. Showing automatically updating stats (like current version, downloads, build/ci status, etc.) is generally very useful for software projects, and using a badge generation service is an easy and aesthetic way of achieving that.

Personally, I think they also add a pleasant touch of style to a project, since READMEs often have otherwise dry and information-heavy looks. Adding a bit of color never hurt anyone :)

It's easy to hotlink an image into a GitHub readme, and when the build status (etc) of the project changes so does the badge, without updating the readme.

How does the badge site know the build status? Params set in readme urls don’t seem like they’d work for that, if they can’t change.

You rely on the service to generate the badge for you dynamically, eg

https://badgers.space/github/release/tensorflow/tensorflow

https://badgers.space/github/checks/facebook/react

In this case, it just looks it up at Github. shields.io can hit a bunch of different services for status:

https://shields.io/category/build

The params are something that indicate where the badge service should go to get the latest information, not the information itself.

Which is why there is a value in having a badge service rather than just updating badges with a commit hook or something.

It’s not a RENDERME & using badges and many other images makes it harder to actually read content. If you really want them, badges could be added with the specific settings in GitLab for them, and SourceHut you could attach them in the build phase and push the README via REST/GraphQL API, or you could host a separate site for your project, but badges aren’t adding value to the plaintext of a README.

I have no clue what is going on here or how to access anything.

The service generates badge images that can be embedded into Markdown documents (or anywhere else where images work). It's accessed using a REST-like API.

For example, to generate a badge with the CI status for spacebadgers, you can use https://badgers.space/github/checks/splittydev/spacebadgers. This URL returns an SVG image with the current CI status for this project.

@splittydev Your entire comment there could/should be copy-pasted as an intro for your project. My curiosity was piqued when i saw this listed here on HN, but it did not fully hit me when i visited the website, and only partially understood when i visited the github repo...But, if you wish for your project to get visitors to understand at a glance what your project is about, a very brief intro always helps. I hope that does not offend, but i hate when good projects don't get enough love and/or attention due to small (sometimes basic) issues - like missing intros, missing license, etc. Kudos on your project!

I appreciate the feedback, and no offense taken! I mostly look at projects through the "developer lens", so it didn't occur to me that my target group could want additional information. I was under the impression that most people who would want to use badgers.space would already be familiar with shields.io or badgen.net, making this service easy to understand. Your comment makes it clear that there are people interested in the projects without former knowledge of similar projects, so that's definitely an important piece of information for me to consider! I'll work on improving these things over the next few days/weeks :)

A short update for everyone who might see this in the future:

The launch week has been great! We served an insane number (well over 50k) badges with a 0% error rate, and have since added support for NPM, GitHub and crates.io!

And for those of you who've been waiting for icon support: We now have 900+ beautiful icons built-in!

Thanks a lot for all your positive comments and support!

Btw, many more integrations are coming soon :) NPM is already lined up for release, just gotta test it a bit more and make sure everything works as intended

How is this better than https://shields.io/ ?

Honestly, depends on your use-case. Spacebadgers generates minified and brotli-compressed SVG code instead of images, so we can run on the edge with very little performance overhead. Due to the reduced bandwidth, we can also serve badges with much shorter cache-times, so they update more frequently. I suppose if you're happy with shields.io, there's no good reason to switch, but for people who are actively looking for a faster alternative, or want to get some fresh badges for a new project, Spacebadgers is a great alternative.

...or people could just contribute compressed SVG to shields.io

Sure, but I don't see how competing services are harmful in any way. As I said in other comments, if you're happy with shields.io, go ahead and use it. I'm not trying to deter anyone from using service A or service B, especially because I'm not making any money from this. Spacebadgers is just another choice, one that might be better or worse for your specific use-case.

It's better because it's written in Rust /s

Good one :P I really tried not to over-emphasize the usage of Rust in the project. It is indeed quite fast, but mostly because of the focus on minified SVG, edge-computing and WebAssembly.

Very handy tool for sure. I really appreciate the efforts you made on in-line, repo and website documentation.

Very neat! I was looking for something exactly like this for a library I'm building - will try it out

Hi ! Nice ! It lacks available style, RGB colorization, PNG64 logos includable ; and if possible ; i'd love one where I can shove in an url as parameter, to let the thing fetch the result ; But i might be completely dreaming on that last one :p

We actually support the full RGB spectrum.

You can include hex-colors in the URL: https://badgers.space/badge/foo/bar/842a78?label_color=2a847...

We also support embedding icons like so: https://badgers.space/badge/foo/Quintschaf/cyan?icon=https:/...

We don't have a fetch-based endpoint for now where it fetches a result, but we might add that later on.

Please put your email in your profile - or tell me how to contact you offline about a tangential project or email me first initial last name from profile name at proton

You can reach me under hn.nqc37@simplelogin.com

This is fantastic, I really like the idea. Great stuff!!

I’m seeing an error message:

> This Deployment has been disabled. Your connection is working correctly. Vercel is working correctly.

Sorry, what was just for a minute or two. Fixed it pretty much immediately, Vercel decided to terminate my Pro trial account without warning, but it's all sorted out now

Great project!

Nit: Personally would prefer rounded corners.

I'm gonna add that soon :) I wanted to get the flat design right first, but I've already figured out rounded corners using SVG masks, so supporting them properly shouldn't be too hard

Update: Rounded corners are in now!

You can add a cornerRadius query parameter, which can take four possible values: s, m, l, or a number in pixels.

A few examples:

https://badgers.space/badge/look/I'm%20slightly%20rounded?co...

https://badgers.space/badge/look/I'm%20rounded?cornerRadius=...

https://badgers.space/badge/look/I'm%20even%20more%20rounded...

In general, I'd recommend going with s or m. Anything larger than l will look weird, and anything less than s will be barely noticeable.

The actual values are: s: 2px, m: 4px, l: 6px.

On mobile if the browser font is larger the content is off the screen without a way to scroll.

Thanks for bringing this to my attention! Will look into it

These look really nice! Well done

Thank you so much! I spent quite a bit of time crafting the default color scheme "honey", and I'm glad people like it :)

Reply on news.ycombinator.com