Skip to content

Commit 5d0d95f

Browse files
committed
feat: new website for htmlhint.com (#395)
* docs: new website for docs * fixes
1 parent 30b0af2 commit 5d0d95f

File tree

204 files changed

+21363
-1
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

204 files changed

+21363
-1
lines changed

.gitignore

+4
Original file line numberDiff line numberDiff line change
@@ -62,3 +62,7 @@ yarn.lock
6262

6363
test/unit/coverage
6464
test/e2e/reports
65+
66+
/website/node_modules
67+
/website/build
68+
/website/.docusaurus

.prettierignore

+5
Original file line numberDiff line numberDiff line change
@@ -17,3 +17,8 @@ test/html
1717

1818
# Ignore formatting of ***x*** to **_x_**
1919
.github/PULL_REQUEST_TEMPLATE.md
20+
21+
/website/playground
22+
/website/.docusaurus
23+
/website/plugins
24+
/website/static

docs/toc.md

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
# Docs
2+
3+
- User guide
4+
- [Getting started](user-guide/getting-started.md)
5+
- [Configuration](user-guide/configuration.md)
6+
- Rules
7+
- [About](user-guide/rules/about.md)
8+
- [List](user-guide/list-rules.md)
9+
- Usage
10+
- [CLI](user-guide/usage/cli.md)
11+
- [Options](user-guide/usage/options.md)
12+
- Integrations
13+
- [Editor](user-guide/integrations/editor.md)
14+
- [Task runner](user-guide/integrations/task-runner.md)
15+
- [Other](user-guide/integrations/other.md)

docs/user-guide/configuration.md

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
---
2+
id: configuration
3+
title: Configuration
4+
---
5+
6+
Search `.htmlhintrc` file in current directory and all parent directories:
7+
8+
```sh
9+
$ htmlhint
10+
$ htmlhint test.html
11+
```
12+
13+
Custom config file:
14+
15+
```sh
16+
$ htmlhint --config htmlhint.conf test.html
17+
```
18+
19+
Custom rules:
20+
21+
```sh
22+
$ htmlhint --rules tag-pair,id-class-value=underline index.html
23+
```
24+
25+
Inline rules in `test.html`:
26+
27+
<!-- prettier-ignore -->
28+
```html
29+
<!--htmlhint tag-pair,id-class-value:underline -->
30+
<html>
31+
<head>
32+
...
33+
```

docs/user-guide/getting-started.mdx

+49
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
---
2+
id: getting-started
3+
title: Getting Started
4+
---
5+
6+
import Tabs from '@theme/Tabs'
7+
import TabItem from '@theme/TabItem'
8+
9+
1\. Use npm to install HTMLHint:
10+
11+
<Tabs
12+
defaultValue="npm"
13+
values={[
14+
{ label: 'npm', value: 'npm', },
15+
{ label: 'yarn', value: 'yarn', },
16+
]
17+
}>
18+
19+
<TabItem value="npm">
20+
21+
```shell
22+
npm install --save-dev htmlhint
23+
```
24+
25+
</TabItem>
26+
27+
<TabItem value="yarn">
28+
29+
```shell
30+
yarn add --dev htmlhint
31+
```
32+
33+
</TabItem>
34+
35+
</Tabs>
36+
37+
2\. Create a `.htmlhintrc` configuration file in the root of your project:
38+
39+
```shell
40+
{
41+
"attr-value-not-empty": false
42+
}
43+
```
44+
45+
3\. Run HTMLHint on, for example, all the CSS files in your project:
46+
47+
```shell
48+
npx htmlhint "**/*.html"
49+
```
+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
---
2+
id: editor
3+
title: Editor integrations
4+
---
5+
6+
Editor integrations built and maintained by the HTMLHint organization and some by the community.
7+
8+
- [atom-htmlhint](https://github.com/htmlhint/atom-htmlhint) - Atom plugin for HTMLHint.
9+
- [brackets-htmlhint](https://github.com/htmlhint/brackets-htmlhint) - Brackets wrapper for HTMLHint.
10+
- [SublimeLinter-contrib-htmlhint](https://github.com/htmlhint/SublimeLinter-contrib-htmlhint) - Sublime Text plugin for HTMLHint.
11+
- [vscode-htmlhint](https://marketplace.visualstudio.com/items?itemName=mkaufman.HTMLHint) - VS Code extension for HTMLHint.

docs/user-guide/integrations/other.md

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
id: other
3+
title: Other integrations
4+
---
5+
6+
Other integrations built and maintained by the HTMLHint organization and some by the community.
7+
8+
- [chai-htmlhint](https://github.com/htmlhint/chai-htmlhint) - Extends Chai with assertions for HTMLHint.
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
---
2+
id: task-runner
3+
title: Task runners
4+
---
5+
6+
Task runner integrations built and maintained by HTMLHint organization and the community.
7+
8+
- [grunt-htmlhint-inline](https://github.com/htmlhint/grunt-htmlhint-inline) - Grunt plugin for linting inline html.
9+
- [grunt-htmlhint](https://github.com/htmlhint/grunt-htmlhint) - Grunt plugin for HTMLHint.
10+
- [gulp-htmlhint-inline](https://github.com/htmlhint/gulp-htmlhint-inline) - Gulp plugin for linting inline html.
11+
- [htmlhint-loader](https://github.com/htmlhint/htmlhint-loader) - webpack loader for HTMLHint.

docs/user-guide/list-rules.md

+50
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
---
2+
id: list-rules
3+
title: List of rules
4+
---
5+
6+
## Possible errors
7+
8+
### Doctype and Head
9+
10+
- [`doctype-first`](/docs/user-guide/rules/doctype-first): Doctype must be declared first.
11+
- [`doctype-html5`](/docs/user-guide/rules/doctype-html5): Invalid doctype.
12+
- [`head-script-disabled`](/docs/user-guide/rules/head-script-disabled): The `<script>` tag cannot be used in a tag.
13+
- [`style-disabled`](/docs/user-guide/rules/style-disabled): `<style>` tags cannot be used.
14+
- [title-require](/docs/user-guide/rules/title-require): `<title>` must be present in tag.
15+
16+
### Attributes
17+
18+
- [`attr-lowercase`](/docs/user-guide/rules/attr-lowercase): All attribute names must be in lowercase.
19+
- [`attr-no-duplication`](/docs/user-guide/rules/attr-no-duplication): Elements cannot have duplicate attributes.
20+
- [`attr-no-unnecessary-whitespace`](/docs/user-guide/rules/attr-no-unnecessary-whitespace.md): No spaces between attribute names and values.
21+
- [`attr-unsafe-chars`](/docs/user-guide/rules/attr-unsafe-chars): Attribute values cannot contain unsafe chars.
22+
- [`attr-value-double-quotes`](/docs/user-guide/rules/attr-value-double-quotes): Attribute values must be in double quotes.
23+
- [`attr-value-not-empty`](/docs/user-guide/rules/attr-not-empty): All attributes must have values.
24+
- [`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.
25+
26+
### Tags
27+
28+
- [`tags-check`](/docs/user-guide/rules/tags-check.md): Allowing specify rules for any tag and validate that
29+
- [`tag-pair`](/docs/user-guide/rules/tag-pair): Tag must be paired.
30+
- [`tag-self-close`](/docs/user-guide/rules/tag-self-close): Empty tags must be self closed.
31+
- [`tagname-lowercase`](/docs/user-guide/rules/tagname-lowercase): All html element names must be in lowercase.
32+
- [`empty-tag-not-self-closed`](/docs/user-guide/rules/empty-tag-not-self-closed): The empty tag should not be closed by self.
33+
- [`src-not-empty`](/docs/user-guide/rules/src-not-empty): The src attribute of an img(script,link) must have a value.
34+
- [`href-abs-or-rel`](/docs/user-guide/rules/href-abs-or-rel): An href attribute must be either absolute or relative.
35+
36+
### Id
37+
38+
- [`id-class-ad-disabled`](/docs/user-guide/rules/id-class-ad-disabled): The id and class attributes cannot use the ad keyword, it will be blocked by adblock software.
39+
- [`id-class-value`](/docs/user-guide/rules/id-class-value): The id and class attribute values must meet the specified rules.
40+
- [`id-unique`](/docs/user-guide/rules/id-unique): The value of id attributes must be unique.
41+
42+
### Inline
43+
44+
- [`inline-script-disabled`](/docs/user-guide/rules/inline-script-disabled): Inline script cannot be use.
45+
- [`inline-style-disabled`](/docs/user-guide/rules/inline-style-disabled): Inline style cannot be use.
46+
47+
### Formatting
48+
49+
- [`space-tab-mixed-disabled`](/docs/user-guide/rules/space-tab-mixed-disabled): Do not mix tabs and spaces for indentation.
50+
- [`spec-char-escape`](/docs/user-guide/rules/spec-char-escape): Special characters must be escaped.

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

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
---
2+
id: alt-require
3+
title: alt-require
4+
keywords:
5+
- alt
6+
- image
7+
- accessiblity
8+
---
9+
10+
Alt of img must be present and alt of area[href] and input[type=image] must be set value.
11+
12+
Level: warning
13+
14+
## Config value
15+
16+
1. true: enable rule
17+
2. false: disable rule
18+
19+
The following pattern are **not** considered violations:
20+
21+
<!-- prettier-ignore -->
22+
```html
23+
<img src="test.png" alt="test" />
24+
<input type="image" alt="test" />
25+
<area shape="circle" coords="180,139,14" href="test.html" alt="test" />
26+
```
27+
28+
The following pattern is considered violation:
29+
30+
<!-- prettier-ignore -->
31+
```html
32+
<img src="test.png" />
33+
<input type="image" />
34+
<area shape="circle" coords="180,139,14" href="test.html" />
35+
```
+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
---
2+
id: attr-lowercase
3+
title: attr-lowercase
4+
---
5+
6+
Attribute name must be lowercase.
7+
8+
Level: `error`
9+
10+
## Config value
11+
12+
1. true: enable rule
13+
2. false: disable rule
14+
3. ['viewBox', 'test']: Ignore some attr name
15+
16+
The following pattern are **not** considered violations:
17+
18+
<!-- prettier-ignore -->
19+
```html
20+
<img src="test.png" alt="test" />
21+
```
22+
23+
The following pattern is considered violation:
24+
25+
<!-- prettier-ignore -->
26+
```html
27+
<img src="test.png" alt="test" />
28+
```
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
---
2+
id: attr-no-duplication
3+
title: attr-no-duplication
4+
---
5+
6+
The same attribute can't be specified twice.
7+
8+
Level: `error`
9+
10+
## Config value
11+
12+
1. true: enable rule
13+
2. false: disable rule
14+
15+
The following pattern are **not** considered violations:
16+
17+
<!-- prettier-ignore -->
18+
```html
19+
<img src="a.png" />
20+
```
21+
22+
The following pattern is considered violation:
23+
24+
<!-- prettier-ignore -->
25+
```html
26+
<img src="a.png" src="b.png" />
27+
```
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
---
2+
id: attr-no-unnecessary-whitespace
3+
title: attr-no-unnecessary-whitespace
4+
---
5+
6+
No spaces between attribute names and values.
7+
8+
Level: `error`
9+
10+
## Config value
11+
12+
1. true: enable rule
13+
2. false: disable rule
14+
15+
The following pattern are **not** considered violations:
16+
17+
<!-- prettier-ignore -->
18+
```html
19+
<div title="a"></div>
20+
```
21+
22+
The following pattern is considered violation:
23+
24+
<!-- prettier-ignore -->
25+
```html
26+
<div title = "a"></div>
27+
<div title= "a"></div>
28+
<div title ="a"></div>
29+
```
+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
---
2+
id: attr-unsafe-chars
3+
title: attr-unsafe-chars
4+
---
5+
6+
Attribute value cannot use unsafe chars.
7+
8+
regexp: `/[\u0000-\u0009\u000b\u000c\u000e-\u001f\u007f-\u009f\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/`
9+
10+
Level: `warning`
11+
12+
## Config value
13+
14+
1. true: enable rule
15+
2. false: disable rule
16+
17+
The following pattern are **not** considered violations:
18+
19+
<!-- prettier-ignore -->
20+
```html
21+
<li>
22+
<a href="https://vimeo.com/album/1951235/video/56931059">Sud Web 2012</a>
23+
</li>
24+
```
25+
26+
The following pattern is considered violation:
27+
28+
<!-- prettier-ignore -->
29+
```html
30+
<li>
31+
<a href="https://vimeo.com/album/1951235/video/56931059‎\u0009‎"
32+
>Sud Web 2012</a
33+
>
34+
</li>
35+
```
36+
37+
:::tip
38+
The unsafe chars is in the tail of the href attribute.
39+
:::
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
---
2+
id: attr-value-double-quotes
3+
title: attr-value-double-quotes
4+
---
5+
6+
Attribute value must closed by double quotes.
7+
8+
Level: `error`
9+
10+
## Config value
11+
12+
1. true: enable rule
13+
2. false: disable rule
14+
15+
The following pattern are **not** considered violations:
16+
17+
<!-- prettier-ignore -->
18+
```html
19+
<a href="" title="abc"></a>
20+
```
21+
22+
The following pattern is considered violation:
23+
24+
<!-- prettier-ignore -->
25+
```html
26+
<a href="" title="abc"></a>
27+
```

0 commit comments

Comments
 (0)