Shields: Netlify status badge

[AnandChowdhary]

:clipboard: Description

The popular CDN and static site host Netlify has added support for badges with build information (e.g.,
"success", "building" or "failed").

Badges can be added like: "netlify | success", just like the current "build | passing".

Details: https://www.netlify.com/docs/continuous-deployment/#status-badges

Example:

:link: Data

A general API is available at https://www.netlify.com/docs/api/. This issue will be updated once the documentation for the particular build status API are published too.

:microphone: Motivation

Lots of websites are now using Netlify as opposed to GitHub Pages. According to their website, over 400,000 "developers trust Netlify", probably since it's free and has a great toolkit (e.g., Netlify CMS).

Since they have badges available now, they should be added to Shields.io too!

[PyvesB]

Hello @AnandChowdhary,

Thank you for your suggestion! Would you like to contribute to the project and have a go at implementing this new badge? We've got a nice tutorial to help you get started. 😉

Cheers,

Pyves

[ghost]

Watching. I happened upon this issue as I was checking to see if anyone had built Shield.io-styled badges to replace the default Netlify ones:

I need my badges to be consistently-styled! 🤓

[AnandChowdhary]

I will be happy to build this service badge, please feel free to assign this issue to me.

I have gotten in touch with Netlify Support and they will get back to me soon about the API endpoints for this:

I'm not sure but I have asked the developer who created the badges to help us out here. Since she works in the EU and their workday is over I expect i'll only hear back from her tomorrow and be able to relay to you then :)

[AnandChowdhary]

Chris from Netlify has gotten back to me:

[Getting the build status via API] is not currently possible. I've filed a feature request for you, but we do not currently have plans to implement it.

It seems like we have to be more patient. I will re-open this issue when Netlify has updated their API.

[PyvesB]

Oh, that's disappointing. Thanks for following up with them!

[AnandChowdhary]

Since Netlify has not provided an API for this, I have made an unofficial wrapper around their badges and hosted it on Oswald Labs Platform. The source code is available here.

The wrapper checks the color of the Netlify badge and returns JSON in the Sheids.io schema. This means that we can use Shields.io's Endpoint (beta) to generate these badges for now:

Live example:

Schema endpoint: https://developer.oswaldlabs.com/netlify-status/e6d5a4e0-dee1-4261-833e-2f47f509c68f

https://img.shields.io/endpoint.svg?url=https%3A%2F%2Fdeveloper.oswaldlabs.com%2Fnetlify-status%2Fe6d5a4e0-dee1-4261-833e-2f47f509c68f

Usage:

In your Netlify app, under General –> Status badges, you get a URL like this:

[![Netlify Status](https://api.netlify.com/api/v1/badges/e6d5a4e0-dee1-4261-833e-2f47f509c68f/deploy-status)](https://app.netlify.com/sites/gitwriter/deploys)

From the above URL, your "key" is e6d5a4e0-dee1-4261-833e-2f47f509c68f. Replace {{YOUR_KEY}} with your key below:

https://img.shields.io/endpoint.svg?url=https%3A%2F%2Fdeveloper.oswaldlabs.com%2Fnetlify-status%2F{{YOUR_KEY}}

Important note:

Since this is not using an official API, this will fail if Netlify updates their badge colors. I will try my best to keep this updated and Oswald Labs will continue to run this service until we have an alternative.

[PyvesB]

Neat! By the way, if they have their own badges in SVG format, we also have some functionality to do scrapping. We have a few badges that are based on this BaseSvgScrapingService class. 😉

[calebcartwright]

If anyone's interested in implementing this, I've included some of our other badges that are using the BaseSvgScrapingService @PyvesB noted for reference:

• Travis CI
• Azure DevOps Build and Release
• Codeacy
• Codeship
• Gitlab Pipeline

[AnandChowdhary]

I’ve made a draft pull request which finds the closest color to red/orange/green by parsing the Netlify SVG (since their badge has no text, only paths)

[Hongbo-Miao]

@AnandChowdhary thank you so much for providing this! Right now seems ?style=flat-square does not work on this following method.

Usage:

In your Netlify app, under General –> Status badges, you get a URL like this:

[![Netlify Status](https://api.netlify.com/api/v1/badges/e6d5a4e0-dee1-4261-833e-2f47f509c68f/deploy-status)](https://app.netlify.com/sites/gitwriter/deploys)

From the above URL, your "key" is e6d5a4e0-dee1-4261-833e-2f47f509c68f. Replace {{YOUR_KEY}} with your key below:

https://img.shields.io/endpoint.svg?url=https%3A%2F%2Fdeveloper.oswaldlabs.com%2Fnetlify-status%2F{{YOUR_KEY}}

[AnandChowdhary]

Hi @Hongbo-Miao, you're right, this is just a small wrapper to make things work temporarily. I'm going to try and add Netlify to Shields itself (new PR #3953) and hopefully not need this endpoint anymore.

[AnandChowdhary]

3953 is merged! We now have official support for Netlify!

Since Netlify has not provided an API for this, I have made an unofficial wrapper around their badges and hosted it on Oswald Labs Platform. The source code is available here.

Oswald Labs Platform will continue to serve this wrapper endpoint this month as is, so no READMEs will break. In October 2019, I'll update the badge to show an upgrade notice, so people using it who're not in this issue will know:

or

On January 1, 2020, we'll deprecate this endpoint and READMEs will break if they still haven't upgraded to the official Shields endpoint. Sounds fair?