feat: new website for htmlhint.com (#395)

* docs: new website for docs * fixes
htmlhint · May 18, 2020 · 5d0d95f · 5d0d95f
1 parent 30b0af2
commit 5d0d95f
Show file tree

Hide file tree

Showing 204 changed files with 21,363 additions and 1 deletion.
diff --git a/.gitignore b/.gitignore
@@ -62,3 +62,7 @@ yarn.lock
 
 test/unit/coverage
 test/e2e/reports
+
+/website/node_modules
+/website/build
+/website/.docusaurus
diff --git a/.prettierignore b/.prettierignore
@@ -17,3 +17,8 @@ test/html
 
 # Ignore formatting of ***x*** to **_x_**
 .github/PULL_REQUEST_TEMPLATE.md
+
+/website/playground
+/website/.docusaurus
+/website/plugins
+/website/static
diff --git a/docs/toc.md b/docs/toc.md
@@ -0,0 +1,15 @@
+# Docs
+
+- User guide
+  - [Getting started](user-guide/getting-started.md)
+  - [Configuration](user-guide/configuration.md)
+  - Rules
+    - [About](user-guide/rules/about.md)
+    - [List](user-guide/list-rules.md)
+  - Usage
+    - [CLI](user-guide/usage/cli.md)
+    - [Options](user-guide/usage/options.md)
+  - Integrations
+    - [Editor](user-guide/integrations/editor.md)
+    - [Task runner](user-guide/integrations/task-runner.md)
+    - [Other](user-guide/integrations/other.md)
diff --git a/docs/user-guide/configuration.md b/docs/user-guide/configuration.md
@@ -0,0 +1,33 @@
+---
+id: configuration
+title: Configuration
+---
+
+Search `.htmlhintrc` file in current directory and all parent directories:
+
+```sh
+$ htmlhint
+$ htmlhint test.html
+```
+
+Custom config file:
+
+```sh
+$ htmlhint --config htmlhint.conf test.html
+```
+
+Custom rules:
+
+```sh
+$ htmlhint --rules tag-pair,id-class-value=underline index.html
+```
+
+Inline rules in `test.html`:
+
+<!-- prettier-ignore -->
+```html
+<!--htmlhint tag-pair,id-class-value:underline -->
+<html>
+<head>
+...
+```
diff --git a/docs/user-guide/getting-started.mdx b/docs/user-guide/getting-started.mdx
@@ -0,0 +1,49 @@
+---
+id: getting-started
+title: Getting Started
+---
+
+import Tabs from '@theme/Tabs'
+import TabItem from '@theme/TabItem'
+
+1\. Use npm to install HTMLHint:
+
+<Tabs
+  defaultValue="npm"
+  values={[
+    { label: 'npm', value: 'npm', },
+    { label: 'yarn', value: 'yarn', },
+  ]
+}>
+
+<TabItem value="npm">
+
+```shell
+npm install --save-dev htmlhint
+```
+
+</TabItem>
+
+<TabItem value="yarn">
+
+```shell
+yarn add --dev htmlhint
+```
+
+</TabItem>
+
+</Tabs>
+
+2\. Create a `.htmlhintrc` configuration file in the root of your project:
+
+```shell
+{
+  "attr-value-not-empty": false
+}
+```
+
+3\. Run HTMLHint on, for example, all the CSS files in your project:
+
+```shell
+npx htmlhint "**/*.html"
+```
diff --git a/docs/user-guide/integrations/editor.md b/docs/user-guide/integrations/editor.md
@@ -0,0 +1,11 @@
+---
+id: editor
+title: Editor integrations
+---
+
+Editor integrations built and maintained by the HTMLHint organization and some by the community.
+
+- [atom-htmlhint](https://github.com/htmlhint/atom-htmlhint) - Atom plugin for HTMLHint.
+- [brackets-htmlhint](https://github.com/htmlhint/brackets-htmlhint) - Brackets wrapper for HTMLHint.
+- [SublimeLinter-contrib-htmlhint](https://github.com/htmlhint/SublimeLinter-contrib-htmlhint) - Sublime Text plugin for HTMLHint.
+- [vscode-htmlhint](https://marketplace.visualstudio.com/items?itemName=mkaufman.HTMLHint) - VS Code extension for HTMLHint.
diff --git a/docs/user-guide/integrations/other.md b/docs/user-guide/integrations/other.md
@@ -0,0 +1,8 @@
+---
+id: other
+title: Other integrations
+---
+
+Other integrations built and maintained by the HTMLHint organization and some by the community.
+
+- [chai-htmlhint](https://github.com/htmlhint/chai-htmlhint) - Extends Chai with assertions for HTMLHint.
diff --git a/docs/user-guide/integrations/task-runner.md b/docs/user-guide/integrations/task-runner.md
@@ -0,0 +1,11 @@
+---
+id: task-runner
+title: Task runners
+---
+
+Task runner integrations built and maintained by HTMLHint organization and the community.
+
+- [grunt-htmlhint-inline](https://github.com/htmlhint/grunt-htmlhint-inline) - Grunt plugin for linting inline html.
+- [grunt-htmlhint](https://github.com/htmlhint/grunt-htmlhint) - Grunt plugin for HTMLHint.
+- [gulp-htmlhint-inline](https://github.com/htmlhint/gulp-htmlhint-inline) - Gulp plugin for linting inline html.
+- [htmlhint-loader](https://github.com/htmlhint/htmlhint-loader) - webpack loader for HTMLHint.
diff --git a/docs/user-guide/list-rules.md b/docs/user-guide/list-rules.md
@@ -0,0 +1,50 @@
+---
+id: list-rules
+title: List of rules
+---
+
+## Possible errors
+
+### Doctype and Head
+
+- [`doctype-first`](/docs/user-guide/rules/doctype-first): Doctype must be declared first.
+- [`doctype-html5`](/docs/user-guide/rules/doctype-html5): Invalid doctype.
+- [`head-script-disabled`](/docs/user-guide/rules/head-script-disabled): The `<script>` tag cannot be used in a tag.
+- [`style-disabled`](/docs/user-guide/rules/style-disabled): `<style>` tags cannot be used.
+- [title-require](/docs/user-guide/rules/title-require): `<title>` must be present in tag.
+
+### Attributes
+
+- [`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-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.
+- [`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
+- [`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.
+
+### Id
+
+- [`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.
+- [`id-class-value`](/docs/user-guide/rules/id-class-value): The id and class attribute values must meet the specified rules.
+- [`id-unique`](/docs/user-guide/rules/id-unique): The value of id attributes must be unique.
+
+### Inline
+
+- [`inline-script-disabled`](/docs/user-guide/rules/inline-script-disabled): Inline script cannot be use.
+- [`inline-style-disabled`](/docs/user-guide/rules/inline-style-disabled): Inline style cannot be use.
+
+### Formatting
+
+- [`space-tab-mixed-disabled`](/docs/user-guide/rules/space-tab-mixed-disabled): Do not mix tabs and spaces for indentation.
+- [`spec-char-escape`](/docs/user-guide/rules/spec-char-escape): Special characters must be escaped.
diff --git a/docs/user-guide/rules/alt-require.md b/docs/user-guide/rules/alt-require.md
@@ -0,0 +1,35 @@
+---
+id: alt-require
+title: alt-require
+keywords:
+  - alt
+  - image
+  - accessiblity
+---
+
+Alt of img must be present and alt of area[href] and input[type=image] must be set value.
+
+Level: warning
+
+## Config value
+
+1. true: enable rule
+2. false: disable rule
+
+The following pattern are **not** considered violations:
+
+<!-- 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:
+
+<!-- prettier-ignore -->
+```html
+<img src="test.png" />
+<input type="image" />
+<area shape="circle" coords="180,139,14" href="test.html" />
+```
diff --git a/docs/user-guide/rules/attr-lowercase.md b/docs/user-guide/rules/attr-lowercase.md
@@ -0,0 +1,28 @@
+---
+id: attr-lowercase
+title: attr-lowercase
+---
+
+Attribute name must be lowercase.
+
+Level: `error`
+
+## Config value
+
+1. true: enable rule
+2. false: disable rule
+3. ['viewBox', 'test']: Ignore some attr name
+
+The following pattern are **not** considered violations:
+
+<!-- prettier-ignore -->
+```html
+<img src="test.png" alt="test" />
+```
+
+The following pattern is considered violation:
+
+<!-- prettier-ignore -->
+```html
+<img src="test.png" alt="test" />
+```
diff --git a/docs/user-guide/rules/attr-no-duplication.md b/docs/user-guide/rules/attr-no-duplication.md
@@ -0,0 +1,27 @@
+---
+id: attr-no-duplication
+title: attr-no-duplication
+---
+
+The same attribute can't be specified twice.
+
+Level: `error`
+
+## Config value
+
+1. true: enable rule
+2. false: disable rule
+
+The following pattern are **not** considered violations:
+
+<!-- prettier-ignore -->
+```html
+<img src="a.png" />
+```
+
+The following pattern is considered violation:
+
+<!-- prettier-ignore -->
+```html
+<img src="a.png" src="b.png" />
+```
diff --git a/docs/user-guide/rules/attr-no-unnecessary-whitespace.md b/docs/user-guide/rules/attr-no-unnecessary-whitespace.md
@@ -0,0 +1,29 @@
+---
+id: attr-no-unnecessary-whitespace
+title: attr-no-unnecessary-whitespace
+---
+
+No spaces between attribute names and values.
+
+Level: `error`
+
+## Config value
+
+1. true: enable rule
+2. false: disable rule
+
+The following pattern are **not** considered violations:
+
+<!-- prettier-ignore -->
+```html
+<div title="a"></div>
+```
+
+The following pattern is considered violation:
+
+<!-- prettier-ignore -->
+```html
+<div title = "a"></div>
+<div title= "a"></div>
+<div title ="a"></div>
+```
diff --git a/docs/user-guide/rules/attr-unsafe-chars.md b/docs/user-guide/rules/attr-unsafe-chars.md
@@ -0,0 +1,39 @@
+---
+id: attr-unsafe-chars
+title: attr-unsafe-chars
+---
+
+Attribute value cannot use unsafe chars.
+
+regexp: `/[\u0000-\u0009\u000b\u000c\u000e-\u001f\u007f-\u009f\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/`
+
+Level: `warning`
+
+## Config value
+
+1. true: enable rule
+2. false: disable rule
+
+The following pattern are **not** considered violations:
+
+<!-- prettier-ignore -->
+```html
+<li>
+  <a href="https://vimeo.com/album/1951235/video/56931059">Sud Web 2012</a>
+</li>
+```
+
+The following pattern is considered violation:
+
+<!-- prettier-ignore -->
+```html
+<li>
+  <a href="https://vimeo.com/album/1951235/video/56931059‎\u0009‎"
+    >Sud Web 2012</a
+  >
+</li>
+```
+
+:::tip
+The unsafe chars is in the tail of the href attribute.
+:::
diff --git a/docs/user-guide/rules/attr-value-double-quotes.md b/docs/user-guide/rules/attr-value-double-quotes.md
@@ -0,0 +1,27 @@
+---
+id: attr-value-double-quotes
+title: attr-value-double-quotes
+---
+
+Attribute value must closed by double quotes.
+
+Level: `error`
+
+## Config value
+
+1. true: enable rule
+2. false: disable rule
+
+The following pattern are **not** considered violations:
+
+<!-- prettier-ignore -->
+```html
+<a href="" title="abc"></a>
+```
+
+The following pattern is considered violation:
+
+<!-- prettier-ignore -->
+```html
+<a href="" title="abc"></a>
+```