docs: redesign website (#165)

.gitignore

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

README.md

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

docs/getting-started.md

@@ -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
 ```
 
@@ -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"],
@@ -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": [

docs/rules.md

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

docs/rules/element-newline.md

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

docs/rules/id-naming-convention.md

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

docs/rules/indent.md

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