feat: renewal website (#163)

* feat: renewal website

* chore: change to use yarn

* docs: generate

* fixup

* ci: update workflow

* ci: update node version

* fix: playground mark texts

.cspell.json

@@ -9,7 +9,7 @@
     "**/coverage/**",
     "**/out/**",
     "**/node_modules/**",
-    "packages/website/.next/**"
+    "packages/website/**"
   ],
   "words": [
     "rehype",

.editorconfig

@@ -0,0 +1,10 @@
+root = true
+
+[*]
+end_of_line = lf
+insert_final_newline = true
+
+[*.{js,json,yml}]
+charset = utf-8
+indent_style = space
+indent_size = 2

.eslintignore

@@ -1 +1,4 @@
-website
+node_modules
+.vscode
+.parce-cache
+out

.gitattributes

@@ -0,0 +1,4 @@
+/.yarn/**            linguist-vendored
+/.yarn/releases/*    binary
+/.yarn/plugins/**/*  binary
+/.pnp.*              binary linguist-generated

.github/workflows/main.yml

@@ -8,26 +8,25 @@ on:
       - "**"
 jobs:
   build:
-    name: Test
+    name: CI
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
-          node-version: 16
-
-      - name: setup
-        run: npm ci
-      - name: build
-        run: npm run build
-      - name: test
-        run: npm run test
-      - name: spell
-        run: npm run spell-check
-      - name: format
-        run: npm run format-check
-      - name: ts
-        run: npm run ts
+          node-version: 18.16.1
+      - name: Install
+        run: yarn install --immutable
+      - name: Build
+        run: yarn build
+      - name: Unit Tests
+        run: yarn test
+      - name: Check Spells
+        run: yarn check:spell
+      - name: Check Format
+        run: yarn check:format
+      - name: Check Types
+        run: yarn check:ts
 
       - name: Code coverage report
         uses: codecov/codecov-action@v2

.gitignore

@@ -1,11 +1,22 @@
 node_modules/
 **/coverage
-packages/website/build
+packages/website/dist
 .next
-website/static/js/playground
 .turbo
 next-env.d.ts
 packages/web-linter/out
+packages/website/out
+packages/website/src/docs/rules/**/*.html
+packages/website/src/out/**/*.html
 packages/**/dist
 *.tsbuildinfo
 packages/parser/types
+.parcel-cache/
+.pnp.*
+.yarn/*
+packages/**/.yarn
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions

.prettierignore

@@ -2,11 +2,13 @@
 **/fixtures
 **/__snapshots__
 lerna.json
-packages/website/build
-packages/website/static
-packages/website/sidebars.json
-packages/website2/.next
-out
+packages/website/out
+packages/website/src/out
+packages/website/**/*.html
+packages/web-linter/out
 .next
 dist
 packages/parser/types
+**/dist
+.yarn/releases
+yarn.lock

.prettierrc

@@ -0,0 +1 @@
+{}

.vscode/settings.json

@@ -0,0 +1,7 @@
+{
+  "eslint.enable": true,
+  "eslint.validate": [
+    "javascript", // ...
+    "html" // Add "html" to enable linting `.html` files.
+  ]
+}

.yarnrc.yml

@@ -0,0 +1,2 @@
+yarnPath: .yarn/releases/yarn-4.0.2.cjs
+nodeLinker: node-modules

docs/disabling-rules.md

@@ -1,8 +1,3 @@
----
-id: disable-rules-with-inline-comments
-title: Disabling Rules
----
-
 # Disabling Rules
 
 ## Disable rules with inline comments.

docs/getting-started.md

@@ -1,19 +1,22 @@
----
-id: getting-started
-title: Getting Started
----
-
 # Getting Started
 
 ## Prerequisite
 
-- Node.js `>=8.10.0`.
-- ESLint `>=6`.
+- Node.js: `^12.22.0 || ^14.17.0 || >=16.0.0`.
+- ESLint: `>=6`.
 
 ## Installation
 
+- npm
+
+```console
+npm install --save-dev eslint @html-eslint/parser @html-eslint/eslint-plugin
 ```
-$ npm install --save-dev eslint @html-eslint/parser @html-eslint/eslint-plugin
+
+- yarn
+
+```console
+yarn add -D eslint @html-eslint/parser @html-eslint/eslint-plugin
 ```
 
 ## Configuration
@@ -52,7 +55,3 @@ To get [vscode-eslint](https://github.com/microsoft/vscode-eslint) support, we n
   ]
 }
 ```
-
-## Recommended Configs
-
-This plugin provides `plugin:@html-eslint/recommended`. The recommended configuration contains the rules marked ⭐ in the [all rules](./rules).

docs/rules.md

@@ -1,61 +1,88 @@
----
-id: rules
-title: Rules
----
+<!-- This file is generated by 'yarn docs' command. Don't edit this -->
 
 # Rules
 
-- 🔧 - Meaning the rule can fix problems automatically by running eslint `--fix` options.
-- ⭐ - Meaning the rule is recommended.
-
-### Best Practice
-
-| rule                                                            | description                                                |      |
-| :-------------------------------------------------------------- | :--------------------------------------------------------- | :--- |
-| [@html-eslint/require-doctype](rules/require-doctype)           | Require `<!DOCTYPE HTML>` in html,                         | ⭐🔧 |
-| [@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/require-li-container](rules/require-li-container) | Enforce `<li>` to be in `<ul>`, `<ol>` or `<menu>`.        | ⭐   |
-| [@html-eslint/no-obsolete-tags](rules/no-obsolete-tags)         | Disallow to use obsolete elements in HTML5                 | ⭐   |
-| [@html-eslint/require-closing-tags](rules/require-closing-tags) | Require closing tags.                                      | ⭐🔧 |
-| [@html-eslint/require-meta-charset](rules/require-meta-charset) | Enforce to use `<meta charset="...">` in `<head>`          |      |
-| [@html-eslint/no-target-blank](rules/no-target-blank)           | Disallow usage of unsafe `target='_blank'`                 |      |
-| [@html-eslint/no-duplicate-attrs](rules/no-duplicate-attrs)     | Disallow to use duplicate attributes                       | ⭐   |
-| [@html-eslint/require-button-type](rules/require-button-type)   | Require use of button element with a valid type attribute. |      |
-| [@html-eslint/no-restricted-attrs](rules/no-restricted-attrs)   | Disallow specified attributes                              |      |
-| [@html-eslint/require-attrs](rules/require-attrs)               | Enforce to use of specified attributes                     |      |
-
-### SEO
-
-| rule                                                                    | description                                            |     |
-| :---------------------------------------------------------------------- | :----------------------------------------------------- | :-- |
-| [@html-eslint/require-lang](rules/require-lang)                         | Require `lang` attribute at `<html>` tag               | ⭐  |
-| [@html-eslint/require-title](rules/require-title)                       | Require `<title><title/>` in the `<head><head/>`       | ⭐  |
-| [@html-eslint/no-multiple-h1](rules/no-multiple-h1)                     | Disallow multiple `<h1></h1>`.                         | ⭐  |
-| [@html-eslint/require-meta-description](rules/require-meta-description) | Require use of `<meta name="description">` in `<head>` |     |
-
-### Accessibility
-
-| rule                                                                    | description                                                     |     |
-| :---------------------------------------------------------------------- | :-------------------------------------------------------------- | :-- |
-| [@html-eslint/require-img-alt](rules/require-img-alt)                   | Require `alt` attribute at `<img>` tag                          | ⭐  |
-| [@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/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/require-meta-viewport](rules/require-meta-viewport)       | Enforce to use `<meta name="viewport">` in `<head>`             |     |
-| [@html-eslint/no-abstract-roles](rules/no-abstract-roles)               | Disallow to use of abstract roles                               |     |
-| [@html-eslint/no-aria-hidden-body](rules/no-aria-hidden-body)           | Disallow to use aria-hidden attributes on the `body` element.   |     |
-| [@html-eslint/no-accesskey-attrs](rules/no-accesskey-attrs)             | Disallow to use of accesskey attribute                          |     |
-
-### Styles
-
-| rule                                                                  | description                                                       |      |
-| :-------------------------------------------------------------------- | :---------------------------------------------------------------- | :--- |
-| [@html-eslint/no-extra-spacing-attrs](rules/no-extra-spacing-attrs)   | Disallow an extra spacing around attributes                       | ⭐🔧 |
-| [@html-eslint/element-newline](rules/element-newline)                 | Enforce newline between elements.                                 | ⭐🔧 |
-| [@html-eslint/indent](rules/indent)                                   | Enforce consistent indentation                                    | ⭐🔧 |
-| [@html-eslint/quotes](rules/quotes)                                   | Enforce consistent quoting attributes with double(") or single(') | ⭐🔧 |
-| [@html-eslint/id-naming-convention](rules/id-naming-convention)       | Enforce consistent naming id 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                  | 🔧   |
+- 🔧: Meaning the rule can fix problems automatically by running eslint `--fix` options.
+- ⭐: Meaning the rule is recommended.
+
+## 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>`
+
+## 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/>`
+
+## 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>`
+
+## 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

docs/rules/element-newline.md

@@ -1,15 +1,10 @@
----
-id: element-newline
-title: "element-newline"
----
+# @html-eslint/element-newline
 
-# element-newline
-
-Enforce newline between elements
+Enforce newline between elements.
 
 ## How to use
 
-.eslintrc.js
+- .eslintrc.js
 
 ```js
 module.exports = {
@@ -25,16 +20,13 @@ This rule enforces newline between elements.
 
 Examples of **incorrect** code for this rule:
 
-<!-- prettier-ignore-start -->
-
+<!-- prettier-ignore -->
 ```html
 <html>
   <head><title>newline</title></head>
 </html>
 ```
 
-<!-- prettier-ignore-end -->
-
 Examples of **correct** code for this rule:
 
 ```html
@@ -53,8 +45,7 @@ This rule has an object option.
 
 Examples of **correct** code for the `{ "skip": ["pre", "code"] }` option:
 
-<!-- prettier-ignore-start -->
-
+<!-- prettier-ignore -->
 ```html
 <pre>
     <div></div><div></div>
@@ -64,5 +55,3 @@ Examples of **correct** code for the `{ "skip": ["pre", "code"] }` option:
   <span></span><div></div>
 </code>
 ```
-
-<!-- prettier-ignore-end -->

docs/rules/id-naming-convention.md

@@ -1,11 +1,6 @@
----
-id: id-naming-convention
-title: "id-naming-convention"
----
+# @html-eslint/id-naming-convention
 
-# id-naming-convention
-
-Enforce naming conventions for id attributes.
+- Enforce naming conventions for id attributes.
 
 ## How to use