Shields: Request: W3C Markup Validation Service

[jelle619]

:clipboard: Description

• Which service is this badge for e.g: GitHub, Travis CI

The W3C Markup Validation Service

• What sort of information should this badge show?

Whether a page is validated (the validator does not return any errors or warnings), has warnings and/or errors.

Examples:

:link: Data

• Is there a public API?
  Please read down below.
• Does the API requires an API key?
  It's free to use for everyone.
• Link to the API documentation.
  Some documentation can be found here. Please read below for more information.

The W3C Validator can be found here. A link to its documentation is mentioned above.
One particular page that might be of interest is this one. Under "extras", a bookmark outputting the results in JSON can be found. Its JavaScript code is as follows:

(function(){function%20c(a,b){var%20c=document.createElement("textarea");c.name=a;c.value=b;d.appendChild(c)}var%20e=function(a){for(var%20b="",a=a.firstChild;a;){switch(a.nodeType){case%20Node.ELEMENT_NODE:b+=a.outerHTML;break;case%20Node.TEXT_NODE:b+=a.nodeValue;break;case%20Node.CDATA_SECTION_NODE:b+="<![CDATA["+a.nodeValue+"]]\>";break;case%20Node.COMMENT_NODE:b+="<\!--"+a.nodeValue+"--\>";break;case%20Node.DOCUMENT_TYPE_NODE:b+="<!DOCTYPE%20"+a.name+">\n"}a=a.nextSibling}return%20b}(document),d=document.createElement("form");d.method="POST";d.action="https://validator.w3.org/nu/";d.enctype="multipart/form-data";d.target="_blank";d.acceptCharset="utf-8";c("showsource","yes");c("out","json");c("content",e);document.body.appendChild(d);d.submit()})();

This could potentially serve as the "API" that is needed to make this work with Shields.io.

:microphone: Motivation

It's especially useful for people who need to show that their code is valid and does not contain any errors. Though W3C's validation is not as comprehensive as other code checker services, it's incredibly simple to use, only requiring a URL. This validator has been made with W3C's blessing. With the World Wide Web Consortium being behind it, this validation service definitely has some ground.

W3C does already have buttons available to be embedded on pages when they have been validated, but there are serious disadvantages.

1. The button W3C provides is completely static and says the page is validated even though this may no longer be the case. As the web changes, so do standards and so will this checker. Things that might not be seen as an error today might be in the future. It's important for the button to reflect this.
2. The W3C button doesn't fit in with the many modern web designs of today.
3. There doesn't seem to be a button for HTML5 validated web pages (according to this page), even though the validator supports it.

Thank you for taking this into consideration.

[calebcartwright]

hi @jelle619 - is the API info at the below doc links related? If so, then at least at first glance those seem like they'd be pretty straightforward to integrate with from Shields

https://github.com/validator/validator/wiki/Service-%C2%BB-Input-%C2%BB-GET
https://validator.w3.org/docs/api.html

[jelle619]

That seems to be it! @calebcartwright

[seetdev]

If they are not takers, I would like to attempt creating my first badge service with this.

[seetdev]

Looking at the API provided, this is what I envision for the badge implementation

1. One badge per HTML page
2. For SPAs it will be one badge per route since the code that includes the badge should be sending the request per route.

May I know if this is in the correct direction?

[calebcartwright]

Hi @seetd, thanks for looking into this one! I'm not entirely sure I understand your proposal, but here's some additional info that may be helpful.

First, I'd suggest reading through our Tutorial on how to create service badges if you haven't read it yet. You may also want to review parts of our Contributing doc (probably this section and the ones below).

I've not read through the API docs in detail, but my guess is that you'll want to build out the W3 service by extending our BaseJsonService, and it will probably take one parameter (the target URL to validate), which the service will pass as the param to the Markup Validation Service.

I believe our service class will need to make an API call like:

https://validator.nu/?doc={desired-url}&out=json
Or
https://validator.w3.org/nu/?doc={desired-url}&out=json

I'm not really sure what the difference is between those two (maybe they have different versions?) as they are returning different results.

For example:
https://validator.nu/?doc=https://github.com&out=json
https://validator.w3.org/nu/?doc=https://github.com&out=json

And then inspecting the results

[calebcartwright]

Also, we should use a query parameter in the badge route definition (vs a route parameter) to accept the target url from users.

To do that, you'll need to define a queryParamSchema (in addition to the schema for the json response). The MavenMetadata service may be a helpful reference. In particular:

https://github.com/badges/shields/blob/b7235981c6769b81790783f6effa17b8acb04482/services/maven-metadata/maven-metadata.service.js#L8-L10

and

https://github.com/badges/shields/blob/b7235981c6769b81790783f6effa17b8acb04482/services/maven-metadata/maven-metadata.service.js#L32-L38

[seetdev]

Thanks. I was working with TwitterUrl it looks like I am on the right track. Once I get something workable I will put in a PR for a quick look.

[chris48s]

These are now shipped :tada:

https://img.shields.io/w3c-validation/default?targetUrl=https%3A%2F%2Fvalidator.nu%2F

https://img.shields.io/w3c-validation/default?targetUrl=http%3A%2F%2Fshields.io

[paulmelnikow]

This is being rolled back, most likely due to something unrelated (see https://github.com/badges/shields/issues/4223#issuecomment-545127052). Really sorry for that, and hope we can get it re-deployed again soon. Thank you so, so much for your work on this, Caleb and Darren!