docs: documentation for new configuration structure

docs/user-guide/getting-started.mdx

@@ -38,11 +38,11 @@ yarn add --dev htmlhint
 
 ```shell
 {
-  "attr-value-not-empty": false
+  "attr-value-not-empty": "off"
 }
 ```
 
-3\. Run HTMLHint on, for example, all the CSS files in your project:
+3\. Run HTMLHint on, for example, all the HTML files in your project:
 
 ```shell
 npx htmlhint "**/*.html"

docs/user-guide/list-rules.md

@@ -17,19 +17,18 @@ title: List of rules
 
 - [`attr-lowercase`](/docs/user-guide/rules/attr-lowercase): All attribute names must be in lowercase.
 - [`attr-no-duplication`](/docs/user-guide/rules/attr-no-duplication): Elements cannot have duplicate attributes.
-- [`attr-no-unnecessary-whitespace`](/docs/user-guide/rules/attr-no-unnecessary-whitespace.md): No spaces between attribute names and values.
+- [`attr-no-unnecessary-whitespace`](/docs/user-guide/rules/attr-no-unnecessary-whitespace): No spaces between attribute names and values.
 - [`attr-unsafe-chars`](/docs/user-guide/rules/attr-unsafe-chars): Attribute values cannot contain unsafe chars.
 - [`attr-value-double-quotes`](/docs/user-guide/rules/attr-value-double-quotes): Attribute values must be in double quotes.
-- [`attr-value-not-empty`](/docs/user-guide/rules/attr-not-empty): All attributes must have values.
+- [`attr-value-not-empty`](/docs/user-guide/rules/attr-value-not-empty): All attributes must have values.
 - [`alt-require`](/docs/user-guide/rules/alt-require): The alt attribute of an element must be present and alt attribute of area[href] and input[type=image] must have a value.
 
 ### Tags
 
-- [`tags-check`](/docs/user-guide/rules/tags-check.md): Allowing specify rules for any tag and validate that
+- [`tags-check`](/docs/user-guide/rules/tags-check): Allowing specify rules for any tag and validate that
 - [`tag-pair`](/docs/user-guide/rules/tag-pair): Tag must be paired.
 - [`tag-self-close`](/docs/user-guide/rules/tag-self-close): Empty tags must be self closed.
 - [`tagname-lowercase`](/docs/user-guide/rules/tagname-lowercase): All html element names must be in lowercase.
-- [`empty-tag-not-self-closed`](/docs/user-guide/rules/empty-tag-not-self-closed): The empty tag should not be closed by self.
 - [`src-not-empty`](/docs/user-guide/rules/src-not-empty): The src attribute of an img(script,link) must have a value.
 - [`href-abs-or-rel`](/docs/user-guide/rules/href-abs-or-rel): An href attribute must be either absolute or relative.
 

docs/user-guide/rules/alt-require.md

@@ -7,29 +7,53 @@ keywords:
   - accessiblity
 ---
 
-Alt of img must be present and alt of area[href] and input[type=image] must be set value.
+The `alt` attribute of an `<img>` element must be present and `alt` attribute of `area[href]` and `input[type=image]` must have a value.
+
+## Possible Configuration Values
+
+```json
+{
+  "alt-require": "off",
+  "alt-require": "warn",
+  "alt-require": "error",
+  "alt-require": ["off"],
+  "alt-require": ["warn"],
+  "alt-require": ["error"]
+}
+```
 
-Level: warning
+## Default
 
-## Config value
+```json
+{ "alt-require": "off" }
+```
 
-1. true: enable rule
-2. false: disable rule
+---
 
-The following pattern are **not** considered violations:
+## Examples
+
+Examples of **correct** code for this rule:
 
-<!-- prettier-ignore -->
 ```html
 <img src="test.png" alt="test" />
 <input type="image" alt="test" />
 <area shape="circle" coords="180,139,14" href="test.html" alt="test" />
 ```
 
-The following pattern is considered violation:
+Examples of **incorrect** code for this rule:
 
-<!-- prettier-ignore -->
 ```html
 <img src="test.png" />
 <input type="image" />
 <area shape="circle" coords="180,139,14" href="test.html" />
 ```
+
+---
+
+## When Not To Use It
+
+If your project will not use `alt` on images.
+
+## Version
+
+This rule was introduced in HTMLHint `v0.9.1`.

docs/user-guide/rules/attr-lowercase.md

@@ -3,26 +3,55 @@ id: attr-lowercase
 title: attr-lowercase
 ---
 
-Attribute name must be lowercase.
+All attribute names must be in lowercase.
+
+## Possible Configuration Values
+
+```json
+{
+  "attr-lowercase": "off",
+  "attr-lowercase": "warn",
+  "attr-lowercase": "error",
+  "attr-lowercase": ["off"],
+  "attr-lowercase": ["warn", { "exceptions": ["viewBox", "test"] }],
+  "attr-lowercase": ["error", { "exceptions": ["viewBox", "test"] }]
+}
+```
+
+## Default
+
+```json
+{ "attr-lowercase": "error" }
+```
 
-Level: `error`
+## Options
 
-## Config value
+This rule has an object option:
+
+- `"exceptions": ["viewBox", "test"]` ignore attributes `viewBox` and `test`.
+
+---
 
-1. true: enable rule
-2. false: disable rule
-3. ['viewBox', 'test']: Ignore some attr name
+## Examples
 
-The following pattern are **not** considered violations:
+Examples of **correct** code for this rule:
 
-<!-- prettier-ignore -->
 ```html
 <img src="test.png" alt="test" />
 ```
 
-The following pattern is considered violation:
+Examples of **incorrect** code for this rule:
 
-<!-- prettier-ignore -->
 ```html
 <img src="test.png" alt="test" />
 ```
+
+---
+
+## When Not To Use It
+
+If your project will use `camelCase` attributes.
+
+## Version
+
+This rule was introduced in HTMLHint `v0.9.1`.

docs/user-guide/rules/attr-no-duplication.md

@@ -3,25 +3,49 @@ id: attr-no-duplication
 title: attr-no-duplication
 ---
 
-The same attribute can't be specified twice.
+Elements cannot have duplicate attributes.
+
+## Possible Configuration Values
+
+```json
+{
+  "attr-no-duplication": "off",
+  "attr-no-duplication": "warn",
+  "attr-no-duplication": "error",
+  "attr-no-duplication": ["off"],
+  "attr-no-duplication": ["warn"],
+  "attr-no-duplication": ["error"]
+}
+```
 
-Level: `error`
+## Default
 
-## Config value
+```json
+{ "attr-no-duplication": "error" }
+```
 
-1. true: enable rule
-2. false: disable rule
+---
 
-The following pattern are **not** considered violations:
+## Examples
+
+Examples of **correct** code for this rule:
 
-<!-- prettier-ignore -->
 ```html
 <img src="a.png" />
 ```
 
-The following pattern is considered violation:
+Examples of **incorrect** code for this rule:
 
-<!-- prettier-ignore -->
 ```html
 <img src="a.png" src="b.png" />
 ```
+
+---
+
+## When Not To Use It
+
+You always want to use this rule.
+
+## Version
+
+This rule was introduced in HTMLHint `v0.9.6`.

docs/user-guide/rules/attr-no-unnecessary-whitespace.md

@@ -5,25 +5,56 @@ title: attr-no-unnecessary-whitespace
 
 No spaces between attribute names and values.
 
-Level: `error`
+## Possible Configuration Values
+
+```json
+{
+  "attr-no-unnecessary-whitespace": "off",
+  "attr-no-unnecessary-whitespace": "warn",
+  "attr-no-unnecessary-whitespace": "error",
+  "attr-no-unnecessary-whitespace": ["off"],
+  "attr-no-unnecessary-whitespace": ["warn", { "exceptions": ["test"] }],
+  "attr-no-unnecessary-whitespace": ["error", { "exceptions": ["test"] }]
+}
+```
+
+## Default
 
-## Config value
+```json
+{ "attr-no-unnecessary-whitespace": "error" }
+```
 
-1. true: enable rule
-2. false: disable rule
+## Options
 
-The following pattern are **not** considered violations:
+This rule has an object option:
+
+- `"exceptions": ['test']` ignore some attribute names.
+
+---
+
+## Examples
+
+Examples of **correct** code for this rule:
 
-<!-- prettier-ignore -->
 ```html
 <div title="a"></div>
 ```
 
-The following pattern is considered violation:
+Examples of **incorrect** code for this rule:
 
 <!-- prettier-ignore -->
 ```html
 <div title = "a"></div>
 <div title= "a"></div>
 <div title ="a"></div>
 ```
+
+---
+
+## When Not To Use It
+
+If your project will use spaces between attribute names and values.
+
+## Version
+
+This rule was introduced in HTMLHint `v0.13.0`.

docs/user-guide/rules/attr-sorted.md

@@ -0,0 +1,51 @@
+---
+id: attr-sorted
+title: attr-sorted
+---
+
+Attribute tags must be in proper order.
+
+## Possible Configuration Values
+
+```json
+{
+  "attr-sorted": "off",
+  "attr-sorted": "warn",
+  "attr-sorted": "error",
+  "attr-sorted": ["off"],
+  "attr-sorted": ["warn"],
+  "attr-sorted": ["error"]
+}
+```
+
+## Default
+
+```json
+{ "attr-sorted": "off" }
+```
+
+---
+
+## Examples
+
+Examples of **correct** code for this rule:
+
+```html
+<img alt="test" src="test.png" />
+```
+
+Examples of **incorrect** code for this rule:
+
+```html
+<img src="test.png" alt="test" />
+```
+
+---
+
+## When Not To Use It
+
+If your project will use attributes in an unsorted order.
+
+## Version
+
+This rule was introduced in HTMLHint `v0.11.0`.