Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

docs: redesign website #165

Merged
merged 1 commit into from
Dec 4, 2023
Merged

docs: redesign website #165

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ packages/website/dist
next-env.d.ts
packages/web-linter/out
packages/website/out
packages/website/src/docs/rules/**/*.html
packages/website/src/docs/**/*.html
packages/website/src/out/**/*.html
packages/**/dist
*.tsbuildinfo
Expand Down
25 changes: 11 additions & 14 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
<h1 align="center"> HTML ESLint </h1>

<p align="center">
<a href="https://yeonjuan.github.io/html-eslint/">
<img src="packages/website/public/favicon.png" alt="Logo" width="90" height="90">
<a href="https://html-eslint.org">
<img src="packages/website/src/assets/logo.png" alt="Logo" width="90" height="90">
</a>
<p align="center">
Monorepo for ESLint plugin which supports linting HTML(HyperText Markup Language) with ESLint.
<br/>
<br/>
<a href="https://yeonjuan.github.io/html-eslint/playground">View Demo</a>
<a href="https://html-eslint.org/playground">View Demo</a>
·
<a href="https://yeonjuan.github.io/html-eslint/docs/getting-started">Getting Started</a>
<a href="https://html-eslint.org/docs/getting-started">Getting Started</a>
·
<a href="https://yeonjuan.github.io/html-eslint/docs/all-rules">All Rules</a>
<a href="https://html-eslint.org/docs/rules">All Rules</a>
</p>

</p>
Expand All @@ -29,15 +29,12 @@

## Table of Contents

1. [Getting Started](https://yeonjuan.github.io/html-eslint/docs/getting-started)
- [Installation](https://yeonjuan.github.io/html-eslint/docs/getting-started#installation)
- [Configuration](https://yeonjuan.github.io/html-eslint/docs/getting-started#configuration)
- [Editor Configuration](https://yeonjuan.github.io/html-eslint/docs/getting-started#editor-configuration)
- [VSCode](https://yeonjuan.github.io/html-eslint/docs/getting-started#vscode)
1. [Recommended Configs](https://yeonjuan.github.io/html-eslint/docs/getting-started#recommended-configs)
1. [Rules](https://yeonjuan.github.io/html-eslint/docs/all-rules)
1. [CLI](https://yeonjuan.github.io/html-eslint/docs/cli)
1. [Playground](https://yeonjuan.github.io/html-eslint/playground)
1. [Getting Started](https://html-eslint.org/docs/getting-started)
- [Installation](https://html-eslint.org/docs/getting-started#installation)
- [Configuration](https://html-eslint.org/docs/getting-started#configuration)
- [Editor Configuration](https://html-eslint.org/docs/getting-started#editor-configuration)
1. [Rules](https://html-eslint.org/docs/rules)
1. [Playground](https://html-eslint.org/playground)
1. [License](#License)

## License
Expand Down
10 changes: 4 additions & 6 deletions docs/getting-started.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,13 @@

- npm

```console
```console,Terminal
npm install --save-dev eslint @html-eslint/parser @html-eslint/eslint-plugin
```

- yarn

```console
```console,Terminal
yarn add -D eslint @html-eslint/parser @html-eslint/eslint-plugin
```

Expand All @@ -24,7 +24,7 @@ yarn add -D eslint @html-eslint/parser @html-eslint/eslint-plugin
Populate it with the following on your `.eslintrc.js`. If it does not exist create a `.eslintrc.js` config file in the root of your project.
We can apply [HTML-ESLint plugin rules](rules) to only HTML files(`*.html`) by using `overrides` in `.eslintrc.js`. (see [ESLint Configuration](https://eslint.org/docs/user-guide/configuring#configuration-based-on-glob-patterns))

```js
```js,.eslintrc.js
module.exports = {
//...
plugins: ["@html-eslint"],
Expand All @@ -44,9 +44,7 @@ module.exports = {

To get [vscode-eslint](https://github.com/microsoft/vscode-eslint) support, we need to add the following in vscode settings.

- `.vscode/settings.json`:

```json
```json,.vscode/settings.json
{
"eslint.enable": true,
"eslint.validate": [
Expand Down
115 changes: 45 additions & 70 deletions docs/rules.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,82 +7,57 @@

## Best Practice

- [@html-eslint/no-duplicate-attrs](rules/no-duplicate-attrs) (⭐): Disallow to use duplicate attributes

- [@html-eslint/no-duplicate-id](rules/no-duplicate-id) (⭐): Disallow to use duplicate id

- [@html-eslint/no-inline-styles](rules/no-inline-styles) : Disallow using inline style

- [@html-eslint/no-obsolete-tags](rules/no-obsolete-tags) (⭐): Disallow to use obsolete elements in HTML5

- [@html-eslint/no-restricted-attr-values](rules/no-restricted-attr-values) : Disallow specified attributes

- [@html-eslint/no-restricted-attrs](rules/no-restricted-attrs) : Disallow specified attributes

- [@html-eslint/no-script-style-type](rules/no-script-style-type) (🔧): Enforce to omit type attributes for style sheets and scripts

- [@html-eslint/no-target-blank](rules/no-target-blank) : Disallow usage of unsafe `target='_blank'`

- [@html-eslint/require-attrs](rules/require-attrs) : Require specified attributes

- [@html-eslint/require-button-type](rules/require-button-type) : Require use of button element with a valid type attribute.

- [@html-eslint/require-closing-tags](rules/require-closing-tags) (⭐🔧): Require closing tags.

- [@html-eslint/require-doctype](rules/require-doctype) (⭐🔧): Require `<!DOCTYPE HTML>` in html,

- [@html-eslint/require-li-container](rules/require-li-container) (⭐): Enforce `<li>` to be in `<ul>`, `<ol>` or `<menu>`.

- [@html-eslint/require-meta-charset](rules/require-meta-charset) : Enforce to use `<meta charset="...">` in `<head>`
| Rule | Description | |
| ------------------------------------------------------------ | ------------------------------------------------------------ | ---- |
| [no-duplicate-attrs](rules/no-duplicate-attrs) | Disallow to use duplicate attributes | ⭐ |
| [no-duplicate-id](rules/no-duplicate-id) | Disallow to use duplicate id | ⭐ |
| [no-inline-styles](rules/no-inline-styles) | Disallow using inline style | |
| [no-obsolete-tags](rules/no-obsolete-tags) | Disallow to use obsolete elements in HTML5 | ⭐ |
| [no-restricted-attr-values](rules/no-restricted-attr-values) | Disallow specified attributes | |
| [no-restricted-attrs](rules/no-restricted-attrs) | Disallow specified attributes | |
| [no-script-style-type](rules/no-script-style-type) | Enforce to omit type attributes for style sheets and scripts | 🔧 |
| [no-target-blank](rules/no-target-blank) | Disallow usage of unsafe `target='_blank'` | |
| [require-attrs](rules/require-attrs) | Require specified attributes | |
| [require-button-type](rules/require-button-type) | Require use of button element with a valid type attribute. | |
| [require-closing-tags](rules/require-closing-tags) | Require closing tags. | ⭐🔧 |
| [require-doctype](rules/require-doctype) | Require `<!DOCTYPE HTML>` in html, | ⭐🔧 |
| [require-li-container](rules/require-li-container) | Enforce `<li>` to be in `<ul>`, `<ol>` or `<menu>`. | ⭐ |
| [require-meta-charset](rules/require-meta-charset) | Enforce to use `<meta charset="...">` in `<head>` | |

## SEO

- [@html-eslint/no-multiple-h1](rules/no-multiple-h1) (⭐): Disallow multiple `<h1></h1>`.

- [@html-eslint/require-lang](rules/require-lang) (⭐): Require `lang` attribute at `<html>` tag

- [@html-eslint/require-meta-description](rules/require-meta-description) : Require use of `<meta name="description">` in `<head>`

- [@html-eslint/require-open-graph-protocol](rules/require-open-graph-protocol) : Enforce to use `<meta name="viewport">` in `<head>`

- [@html-eslint/require-title](rules/require-title) (⭐): Require `<title><title/>` in the `<head><head/>`
| Rule | Description | |
| ---------------------------------------------------------------- | ------------------------------------------------------ | --- |
| [no-multiple-h1](rules/no-multiple-h1) | Disallow multiple `<h1></h1>`. | ⭐ |
| [require-lang](rules/require-lang) | Require `lang` attribute at `<html>` tag | ⭐ |
| [require-meta-description](rules/require-meta-description) | Require use of `<meta name="description">` in `<head>` | |
| [require-open-graph-protocol](rules/require-open-graph-protocol) | Enforce to use `<meta name="viewport">` in `<head>` | |
| [require-title](rules/require-title) | Require `<title><title/>` in the `<head><head/>` | ⭐ |

## Accessibility

- [@html-eslint/no-abstract-roles](rules/no-abstract-roles) : Disallow to use of abstract roles

- [@html-eslint/no-accesskey-attrs](rules/no-accesskey-attrs) : Disallow to use of accesskey attribute

- [@html-eslint/no-aria-hidden-body](rules/no-aria-hidden-body) : Disallow to use aria-hidden attributes on the `body` element.

- [@html-eslint/no-non-scalable-viewport](rules/no-non-scalable-viewport) : Disallow use of `user-scalable=no` in `<meta name="viewport">`.

- [@html-eslint/no-positive-tabindex](rules/no-positive-tabindex) : Disallow use of positive `tabindex`.

- [@html-eslint/no-skip-heading-levels](rules/no-skip-heading-levels) : Disallow skipping heading levels

- [@html-eslint/require-frame-title](rules/require-frame-title) : Require `title` in `<frame>`, `<iframe>`

- [@html-eslint/require-img-alt](rules/require-img-alt) (⭐): Require `alt` attribute at `<img>` tag

- [@html-eslint/require-meta-viewport](rules/require-meta-viewport) : Enforce to use `<meta name="viewport">` in `<head>`
| Rule | Description | |
| ---------------------------------------------------------- | --------------------------------------------------------------- | --- |
| [no-abstract-roles](rules/no-abstract-roles) | Disallow to use of abstract roles | |
| [no-accesskey-attrs](rules/no-accesskey-attrs) | Disallow to use of accesskey attribute | |
| [no-aria-hidden-body](rules/no-aria-hidden-body) | Disallow to use aria-hidden attributes on the `body` element. | |
| [no-non-scalable-viewport](rules/no-non-scalable-viewport) | Disallow use of `user-scalable=no` in `<meta name="viewport">`. | |
| [no-positive-tabindex](rules/no-positive-tabindex) | Disallow use of positive `tabindex`. | |
| [no-skip-heading-levels](rules/no-skip-heading-levels) | Disallow skipping heading levels | |
| [require-frame-title](rules/require-frame-title) | Require `title` in `<frame>`, `<iframe>` | |
| [require-img-alt](rules/require-img-alt) | Require `alt` attribute at `<img>` tag | ⭐ |
| [require-meta-viewport](rules/require-meta-viewport) | Enforce to use `<meta name="viewport">` in `<head>` | |

## Style

- [@html-eslint/element-newline](rules/element-newline) (⭐🔧): Enforce newline between elements.

- [@html-eslint/id-naming-convention](rules/id-naming-convention) : Enforce consistent naming id attributes

- [@html-eslint/indent](rules/indent) (⭐🔧): Enforce consistent indentation

- [@html-eslint/lowercase](rules/lowercase) (🔧): Enforce to use lowercase for tag and attribute names.

- [@html-eslint/no-extra-spacing-attrs](rules/no-extra-spacing-attrs) (⭐🔧): Disallow an extra spacing around attributes

- [@html-eslint/no-multiple-empty-lines](rules/no-multiple-empty-lines) (🔧): Disallow multiple empty lines

- [@html-eslint/no-trailing-spaces](rules/no-trailing-spaces) (🔧): Disallow trailing whitespace at the end of lines

- [@html-eslint/quotes](rules/quotes) (⭐🔧): Enforce consistent quoting attributes with double(") or single(')

- [@html-eslint/sort-attrs](rules/sort-attrs) (🔧): Enforce attributes alphabetical sorting
| Rule | Description | |
| -------------------------------------------------------- | ----------------------------------------------------------------- | ---- |
| [element-newline](rules/element-newline) | Enforce newline between elements. | ⭐🔧 |
| [id-naming-convention](rules/id-naming-convention) | Enforce consistent naming id attributes | |
| [indent](rules/indent) | Enforce consistent indentation | ⭐🔧 |
| [lowercase](rules/lowercase) | Enforce to use lowercase for tag and attribute names. | 🔧 |
| [no-extra-spacing-attrs](rules/no-extra-spacing-attrs) | Disallow an extra spacing around attributes | ⭐🔧 |
| [no-multiple-empty-lines](rules/no-multiple-empty-lines) | Disallow multiple empty lines | 🔧 |
| [no-trailing-spaces](rules/no-trailing-spaces) | Disallow trailing whitespace at the end of lines | 🔧 |
| [quotes](rules/quotes) | Enforce consistent quoting attributes with double(") or single(') | ⭐🔧 |
| [sort-attrs](rules/sort-attrs) | Enforce attributes alphabetical sorting | 🔧 |
4 changes: 2 additions & 2 deletions docs/rules/element-newline.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,15 +17,15 @@ module.exports = {
Examples of **incorrect** code for this rule:

<!-- prettier-ignore -->
```html
```html,incorrect
<html>
<head><title>newline</title></head>
</html>
```

Examples of **correct** code for this rule:

```html
```html,correct
<html>
<head>
<title>newline</title>
Expand Down
16 changes: 8 additions & 8 deletions docs/rules/id-naming-convention.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,55 +27,55 @@ This rule supports 4 naming cases. `camelCase`, `snake_case`, `PascalCase`, `keb

Examples of **incorrect** code for this rule with the default `"snake_case"` option:

```html
```html,incorrect
<div id="Foo"></div>
```

Examples of **correct** code for this rule with the default `"snake_case"` option:

```html
```html,correct
<div id="foo_bar"></div>
```

#### "camelCase"

Examples of **incorrect** code for this rule with the `"camelCase"` option:

```html
```html,incorrect
<div id="foo_bar"></div>
```

Examples of **correct** code for this rule with the `"camelCase"` option:

```html
```html,correct
<div id="fooBar"></div>
```

#### "PascalCase"

Examples of **incorrect** code for this rule with the `"PascalCase"` option:

```html
```html,incorrect
<div id="foo_bar"></div>
```

Examples of **correct** code for this rule with the `"PascalCase"` option:

```html
```html,correct
<div id="FooBar"></div>
```

### "kebab-case"

Examples of **incorrect** code for this rule with the `"kebab-case"` option:

```html
```html,incorrect
<div id="foo_bar"></div>
```

Examples of **correct** code for this rule with the `"kebab-case"` option:

```html
```html,correct
<div id="foo-bar"></div>
```

Expand Down
12 changes: 6 additions & 6 deletions docs/rules/indent.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,15 +29,15 @@ This rule has two options.

Examples of **incorrect** code for this rule:

```html
```html,incorrect
<html>
<body></body>
</html>
```

Examples of **correct** code for this rule:

```html
```html,correct
<html>
<body></body>
</html>
Expand All @@ -56,15 +56,15 @@ If the option is number it means the number of spaces for indentation.
Examples of **incorrect** code for this rule with the `"2"` option:

<!-- prettier-ignore -->
```html
```html,incorrect
<html>
<body></body>
</html>
```

Examples of **correct** code for this rule with the `"2"` option:

```html
```html,correct
<html>
<body></body>
</html>
Expand All @@ -83,15 +83,15 @@ If the option is `"tab"` it means using `tab` for indentation.
Examples of **incorrect** code for this rule:

<!-- prettier-ignore -->
```html
```html,incorrect
<html>
<body></body>
</html>
```

Examples of **correct** code for this rule:

```html
```html,correct
<html>
<body></body>
</html>
Expand Down
Loading
Loading