Commit 36bf9ec3 authored by David Sveningsson's avatar David Sveningsson
Browse files

feat(config): add two new config presets `html-validate:standard` and `html-validate:a17y`

refs #90
parent cb29f688
Pipeline #146719770 passed with stages
in 9 minutes and 29 seconds
......@@ -82,7 +82,15 @@ module.exports = new Package("html-validate-docs", [
.config(function (computePathsProcessor, computeIdsProcessor) {
computeIdsProcessor.idTemplates.push({
docTypes: ["content", "frontpage", "rule", "rules", "changelog", "error"],
docTypes: [
"content",
"frontpage",
"rule",
"rules",
"presets",
"changelog",
"error",
],
getId: function (doc) {
const dir = path.dirname(doc.fileInfo.relativePath);
if (dir === ".") {
......@@ -109,7 +117,7 @@ module.exports = new Package("html-validate-docs", [
});
computePathsProcessor.pathTemplates.push({
docTypes: ["content", "frontpage", "rule", "rules"],
docTypes: ["content", "frontpage", "rule", "rules", "presets"],
getPath: function (doc) {
const dirname = path.dirname(doc.fileInfo.relativePath);
const p = path.join(dirname, doc.fileInfo.baseName);
......
const recommended = require("../../../build/config/presets/recommended");
const a17y = require("../../../build/config/presets/a17y");
const document = require("../../../build/config/presets/document");
const recommended = require("../../../build/config/presets/recommended");
const standard = require("../../../build/config/presets/standard");
/* sort order */
const availablePresets = ["recommended", "standard", "a17y", "document"];
/* preset configuration */
const presets = {
a17y,
document,
recommended,
standard,
};
function compareName(a, b) {
if (a.name < b.name) {
......@@ -47,13 +60,18 @@ module.exports = function rulesProcessor(renderDocsProcessor) {
url: doc.outputPath,
category: doc.category,
summary: doc.summary,
recommended: !!recommended.rules[doc.name],
document: !!document.rules[doc.name],
presets: availablePresets.reduce((result, presetName) => {
const config = presets[presetName];
if (config && config.rules) {
result[presetName] = Boolean(config.rules[doc.name]);
}
return result;
}, {}),
}))
.sort(compareName);
/* group rules into categories */
const categories = {};
const categories = { all: rules };
rules.forEach((rule) => {
const category = rule.category || "other";
if (!(category in categories)) {
......@@ -63,5 +81,6 @@ module.exports = function rulesProcessor(renderDocsProcessor) {
});
renderDocsProcessor.extraData.rules = categories;
renderDocsProcessor.extraData.presets = availablePresets;
}
};
......@@ -42,6 +42,7 @@
<li><a href="/usage">Getting started</a></li>
<li><a href="/usage/cli.html">Using CLI</a></li>
<li><a href="/usage/elements.html">Elements</a></li>
<li><a href="/rules/presets.html">Presets</a></li>
<li><a href="/usage/transformers.html">Transfomers</a></li>
<li role="separator" class="divider"></li>
<li><a href="/usage/vscode.html">VS Code</a></li>
......
{% extends "base.template.html" %}
{%- macro ruleTable(rules) %}
<table class="table table-striped preset-table">
<colgroup>
<col class="name">
{% for preset in presets %}
<col class="preset-name">
{% endfor %}
</colgroup>
<thead>
<tr>
<td>Rule</td>
{% for preset in presets %}
<td><code>{{ preset }}</code></td>
{% endfor %}
</tr>
</thead>
<tbody>
{% for rule in rules %}
<tr>
<td><a href="/{{ rule.url }}">{{ rule.name }}</a></td>
{% for preset in presets %}
<td>
{% if rule.presets[preset] %}
<span class="fa fa-check"></span>
{% endif %}
</td>
{% endfor %}
</tr>
{% endfor %}
</tbody>
</table>
{% endmacro -%}
{% block content %}
{{ doc.description | marked }}
{{ ruleTable(rules['all']) }}
{% endblock %}
......@@ -7,22 +7,22 @@
<col class="name">
<col class="summary">
</colgroup>
{% for rule in rules %}
<tbody>
{% for rule in rules %}
<tr>
<td>
{% if rule.recommended %}
{% if rule.presets.recommended %}
<span class="fa fa-check"></span>
{% endif %}
{% if rule.document %}
{% if rule.presets.document %}
<span class="fa fa-file-text-o"></span>
{% endif %}
</td>
<td><a href="/{{ rule.url }}">{{ rule.name }}</a></td>
<td>{{ rule.summary | escape }}</td>
</tr>
{% endfor %}
</tbody>
{% endfor %}
</table>
{% endmacro -%}
......
......@@ -7,3 +7,5 @@ Rules with <span class="fa fa-check"></span> are enabled by
`html-validate:recommended`.<br>
Rules with <span class="fa fa-file-text-o"></span> are enabled by
`html-validate:document`.
Additional presets can be compared in {@link rules/presets preset comparision}.
---
docType: presets
name: Configuration presets
---
# Configuration presets
HTML-validate comes with a few predefined presets.
Presets can be configured in `.htmlvalidate.json` using:
```json
{
"extends": ["html-validate:PRESET"]
}
```
Multiple presets can be set and will be enabled in the order they appear in `"extends"`.
See {@link usage configuration usage guide} for more details.
## Available presets
### `html-validate:recommended`
This is the default preset and enables most rules including standards validation, WCAG and best practices.
It is a superset of the other presets.
### `html-validate:standard`
Enables rules related to validating according to the WHATWG HTML standard (Living Standard).
Use this preset if you want validation similar to the Nu Html Checker and similar tools.
### `html-validate:a17y`
Enables rules related to accessibility.
Most rules but not all enabled rules relates to WCAG compliance.
On its own it will not validate if the document/template itself is valid but only if accessibility issues can be found.
This preset should be used togeher with `html-validate:standard` to ensure the document structure is valid (a requirement of WCAG) and if possible `html-validate:document` (to ensure references are valid, etc).
### `html-validate:document`
Enables rules requiring a full document to validate, i.e. not a partial template.
Examples include missing doctype and invalid references.
Use this preset together with other presets for full coverage.
This preset is enabled by plugins such as {@link usage/cypress cypress-html-validate} and {@link usage/protractor protractor-html-validate}.
## Comparision
......@@ -31,19 +31,31 @@ Run with:
### `extends`
Configuration can be extended from sharable configuration.
Configuration can be extended from bundled preset or sharable configurations.
```js
```json
{
"extends": [
/* bundled preset */
"html-validate:recommended",
/* npm package */
"my-npm-package",
"./file"
],
/* plugin with custom preset */
"my-plugin:custom",
/* local file */
"./file"
]
}
```
Each package and file must export a valid configuration object. Plugins may also
create [configuration presets](/dev/writing-plugins.html).
A list of bundled presets is available at the {@link rules/presets preset list}.
By default `html-validate:recommended` is used.
When using NPM packages and files each must export a valid configuration object.
Plugins may create [custom configuration presets](/dev/writing-plugins.html) by exposing one or more preset in the plugin declaration.
### `rules`
......
import { ConfigData } from "../config-data";
const config: ConfigData = {
rules: {
"deprecated-rule": "warn",
"empty-heading": "error",
"empty-title": "error",
"meta-refresh": "error",
"no-autoplay": ["error", { include: ["audio", "video"] }],
"no-dup-id": "error",
"no-redundant-role": "error",
"prefer-native-element": "error",
"svg-focusable": "error",
"wcag/h30": "error",
"wcag/h32": "error",
"wcag/h36": "error",
"wcag/h37": "error",
"wcag/h67": "error",
"wcag/h71": "error",
},
};
export = config;
import { ConfigData } from "../config-data";
import recommended from "./recommended";
import a17y from "./a17y";
import document from "./document";
import recommended from "./recommended";
import standard from "./standard";
const presets: Record<string, ConfigData> = {
"html-validate:recommended": recommended,
"html-validate:a17y": a17y,
"html-validate:document": document,
"html-validate:recommended": recommended,
"html-validate:standard": standard,
/* @deprecated aliases */
"htmlvalidate:recommended": recommended,
......
import { ConfigData } from "../config-data";
const config: ConfigData = {
rules: {
"attribute-allowed-values": "error",
"close-attr": "error",
"close-order": "error",
deprecated: "error",
"deprecated-rule": "warn",
"doctype-html": "error",
"element-name": "error",
"element-permitted-content": "error",
"element-permitted-occurrences": "error",
"element-permitted-order": "error",
"element-required-attributes": "error",
"element-required-content": "error",
"no-deprecated-attr": "error",
"no-dup-attr": "error",
"no-dup-id": "error",
"no-raw-characters": ["error", { relaxed: true }],
"script-element": "error",
"unrecognized-char-ref": "error",
"void-content": "error",
},
};
export = config;
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment