Add MDN link badge

[bendtherules]

📋 Description

MDN Doc link

🔗 Data

Given a link like https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API, just fetching the title of the html page should be enough. Because it is server-rendered, we can just fetch and parse the html.

Even making the title mandatory for the user is OK - they can just pass both title and url.

🎤 Motivation

A lot of tutorials and docs already link back to MDN for the full reference. But these are always embedded as plain links. Having a simple MDN doc badge will be helpful and make things more visual for the reader.

It can look something like this -

The configuration for that is -
https://img.shields.io/badge/MDN-${title}-c2e8f9?logo=MDN%20Web%20Docs&style=flat-square

[PyvesB]

Hello @bendtherules! 👋🏻

You can simply add a link query parameter at the end of the badge, for example:

https://img.shields.io/badge/MDN-insertBefore-c2e8f9?logo=MDN%20Web%20Docs&style=flat-square&link=https://developer.mozilla.org/docs/Web/API/Node/insertBefore

[bendtherules]

Ahh, thanks. That'll be helpful.

But my main request was to add mdn badge type so that it's easier for everyone to use. Just pass the link and that's it - no explicit color, text, nothing.

[PyvesB]

We have quite a strict policy again website scrapping, so we wouldn't fetch and parse the HTML as you suggested to get the title. Users would have to fill out the text themselves in addition to the link. Apart from our social badges, we don't include logos by default, users would need to add that themselves as well. The only thing a specific MDN-specific badge could bring would be the light blue color. I honestly don't see much value in that, users may even get confused thinking that the badge does something special, whereas in reality it's all static information provided by the user. 😉

[paulmelnikow]

You could make your own app / domain which accepts the short URL and issues temporary redirects to the Shields badge URL. Or else fetch the badges and serve them statically.

[calebcartwright]

I concur that the ask here can be met with our static badge.

One of the features our service provides is the ability to produce static badges and allow users to customize them with whatever values/style/etc. they want. However, we don't provide specific static badge instances nor utilities that provide pre-canned sets of customized static badges.

There's a nearly limitless set of customization combinations and if we were to provide a shorthand endpoint for one customized static badge that would inevitably open the proverbial flood gates. We'd then end up having to provide shorthand endpoints for everything or curating what makes the cut. I don't want Shields.io to be in that business, nor do I think we'd even have the bandwidth to attempt it.

[bendtherules]

Thanks everyone for considering 👍

I understand now, that built-in shield types are more appropriate for dynamic content offered by some api - and these usecases should be kept in the userland.

Last question - how to customize font color for left and right using the query params?

[calebcartwright]

how to customize font color for left and right using the query params?

More details in #504, but tl;dr: the badges will have a white or black font depending on the background color. Customization of the font color is one of the few things we don't support.

There was renewed discussion on this recently, and the switch to a contrast driven font color was actually a bug fix (previously the font was always white even if the badge background was white!). The decision to stick with a contrast drive white/black was based on our core goal of providing legible and consistent badges that will look "good" regardless of the chosen background color, even though that meant this attribute of the badges wouldn't be fully user-controllable.

[bendtherules]

Thanks, got it