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

refs #90

docs/dgeni/index.js

@@ -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);

docs/dgeni/processors/rules.js

-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;
 	}
 };

docs/dgeni/templates/base.template.html

@@ -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>

docs/dgeni/templates/presets.template.html

+{% 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 %}

docs/dgeni/templates/rules.template.html

@@ -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 -%}
 

docs/rules/index.md

@@ -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}.

docs/rules/presets.md

+---
+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

docs/usage/index.md

@@ -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`
 

src/config/presets/a17y.ts

+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;

src/config/presets/index.ts

 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,

src/config/presets/standard.ts

+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;