From bdd7f3f42f9e3f4f1d9b3e6f24be362e32085396 Mon Sep 17 00:00:00 2001
From: Yosuke Ota <otameshiyo23@gmail.com>
Date: Sun, 24 Sep 2023 15:51:53 +0900
Subject: [PATCH] chore: use vitepress (#154)

* chore: use vitepress

* fix

* fix
---
 .eslintignore                                 |   3 +
 .eslintrc.js                                  |   9 +-
 .github/workflows/GHPages.yml                 |   2 +-
 .gitignore                                    |   2 +
 docs/.vitepress/build-system/build.ts         |  67 ++++++++
 docs/.vitepress/build-system/src/events.mjs   |   3 +
 .../build-system/src/vue-eslint-parser.mjs    |   3 +
 docs/.vitepress/config.mts                    | 144 ++++++++++++++++++
 docs/.vitepress/shim/module.mjs               |   6 +
 .../styles => .vitepress}/stylelint.config.js |   5 +-
 .../components/EslintPluginEditor.vue         |  76 +++++----
 .../theme}/components/components/PgEditor.vue |   7 +-
 .../components/components/RulesSettings.vue   |   1 +
 .../theme}/components/components/SnsBar.vue   |   2 +-
 .../theme/components/eslint-code-block.vue    | 100 ++++++++++++
 .../theme}/components/playground-block.vue    |  10 +-
 .../theme}/components/rules/index.js          |  22 ++-
 .../theme}/components/state/deserialize.js    |  38 +++--
 .../theme/components/state/index.js           |   2 +
 .../theme}/components/state/serialize.js      |   2 -
 docs/.vitepress/theme/index.ts                |  26 ++++
 docs/.vitepress/theme/style.css               |  14 ++
 docs/.vitepress/vite-plugin.mjs               |  66 ++++++++
 docs/.vuepress/.eslintrc.js                   |   6 -
 .../components/languages/toml/toml.js         | 138 -----------------
 docs/.vuepress/components/demo/.eslintrc.js   |   5 -
 .../components/eslint-code-block.vue          |  71 ---------
 docs/.vuepress/components/state/index.js      |   4 -
 docs/.vuepress/components/stylelint.config.js |   8 -
 docs/.vuepress/config.js                      | 106 -------------
 docs/.vuepress/enhanceApp.js                  |  21 ---
 .../shim/eslint-visitor-keys/index.js         |   6 -
 docs/.vuepress/shim/eslint/index.js           |   7 -
 docs/.vuepress/shim/module.js                 |   3 -
 docs/.vuepress/styles/index.styl              |  66 --------
 docs/{README.md => index.md}                  |   6 +-
 docs/playground/{README.md => index.md}       |   0
 docs/{.vuepress => }/public/logo.png          | Bin
 docs/{.vuepress => }/public/logo.svg          |   0
 docs/rules/{README.md => index.md}            |   0
 docs/user-guide/{README.md => index.md}       |   2 +-
 package.json                                  |  17 ++-
 tools/update-docs-rules-index.ts              |   2 +-
 tools/update-readme.ts                        |  14 +-
 tsconfig.build.json                           |   2 +-
 tsconfig.json                                 |   3 +-
 46 files changed, 559 insertions(+), 538 deletions(-)
 create mode 100644 docs/.vitepress/build-system/build.ts
 create mode 100644 docs/.vitepress/build-system/src/events.mjs
 create mode 100644 docs/.vitepress/build-system/src/vue-eslint-parser.mjs
 create mode 100644 docs/.vitepress/config.mts
 create mode 100644 docs/.vitepress/shim/module.mjs
 rename docs/{.vuepress/styles => .vitepress}/stylelint.config.js (59%)
 rename docs/{.vuepress => .vitepress/theme}/components/components/EslintPluginEditor.vue (64%)
 rename docs/{.vuepress => .vitepress/theme}/components/components/PgEditor.vue (78%)
 rename docs/{.vuepress => .vitepress/theme}/components/components/RulesSettings.vue (99%)
 rename docs/{.vuepress => .vitepress/theme}/components/components/SnsBar.vue (98%)
 create mode 100644 docs/.vitepress/theme/components/eslint-code-block.vue
 rename docs/{.vuepress => .vitepress/theme}/components/playground-block.vue (96%)
 rename docs/{.vuepress => .vitepress/theme}/components/rules/index.js (82%)
 rename docs/{.vuepress => .vitepress/theme}/components/state/deserialize.js (52%)
 create mode 100644 docs/.vitepress/theme/components/state/index.js
 rename docs/{.vuepress => .vitepress/theme}/components/state/serialize.js (90%)
 create mode 100644 docs/.vitepress/theme/index.ts
 create mode 100644 docs/.vitepress/theme/style.css
 create mode 100644 docs/.vitepress/vite-plugin.mjs
 delete mode 100644 docs/.vuepress/.eslintrc.js
 delete mode 100644 docs/.vuepress/components/components/languages/toml/toml.js
 delete mode 100644 docs/.vuepress/components/demo/.eslintrc.js
 delete mode 100644 docs/.vuepress/components/eslint-code-block.vue
 delete mode 100644 docs/.vuepress/components/state/index.js
 delete mode 100644 docs/.vuepress/components/stylelint.config.js
 delete mode 100644 docs/.vuepress/config.js
 delete mode 100644 docs/.vuepress/enhanceApp.js
 delete mode 100644 docs/.vuepress/shim/eslint-visitor-keys/index.js
 delete mode 100644 docs/.vuepress/shim/eslint/index.js
 delete mode 100644 docs/.vuepress/shim/module.js
 delete mode 100644 docs/.vuepress/styles/index.styl
 rename docs/{README.md => index.md} (92%)
 rename docs/playground/{README.md => index.md} (100%)
 rename docs/{.vuepress => }/public/logo.png (100%)
 rename docs/{.vuepress => }/public/logo.svg (100%)
 rename docs/rules/{README.md => index.md} (100%)
 rename docs/user-guide/{README.md => index.md} (97%)

diff --git a/.eslintignore b/.eslintignore
index 47e84b89..719a375a 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -8,7 +8,10 @@
 /dist
 /docs/.vuepress/dist
 /docs/.vuepress/components/demo/demo-code.js
+/docs/.vitepress/cache
+/docs/.vitepress/build-system/shim
 /lib
 !/.github
 !/.vscode
 !/docs/.vuepress
+!/docs/.vitepress
diff --git a/.eslintrc.js b/.eslintrc.js
index b327dc08..a462b20c 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -13,7 +13,7 @@ module.exports = {
     "plugin:@ota-meshi/+node",
     "plugin:@ota-meshi/+typescript",
     "plugin:@ota-meshi/+eslint-plugin",
-    "plugin:@ota-meshi/+vue2",
+    "plugin:@ota-meshi/+vue3",
     "plugin:@ota-meshi/+json",
     "plugin:@ota-meshi/+yaml",
     "plugin:@ota-meshi/+md",
@@ -33,7 +33,7 @@ module.exports = {
   },
   overrides: [
     {
-      files: ["*.ts"],
+      files: ["*.ts", "*.mts"],
       parser: "@typescript-eslint/parser",
       parserOptions: {
         sourceType: "module",
@@ -103,16 +103,17 @@ module.exports = {
       },
     },
     {
-      files: ["docs/.vuepress/**"],
+      files: ["docs/.vitepress/**"],
       parserOptions: {
         sourceType: "module",
-        ecmaVersion: 2020,
+        ecmaVersion: "latest",
       },
       globals: {
         window: true,
       },
       rules: {
         "require-jsdoc": "off",
+        "n/file-extension-in-import": "off",
       },
     },
   ],
diff --git a/.github/workflows/GHPages.yml b/.github/workflows/GHPages.yml
index 81ca5954..01c22d4c 100644
--- a/.github/workflows/GHPages.yml
+++ b/.github/workflows/GHPages.yml
@@ -38,7 +38,7 @@ jobs:
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v2
         with:
-          path: ./docs/.vuepress/dist
+          path: ./docs/.vitepress/dist/eslint-plugin-toml
       - name: Deploy to GitHub Pages
         id: deployment
         uses: actions/deploy-pages@v2
diff --git a/.gitignore b/.gitignore
index 96ff8ca0..b7f632b5 100644
--- a/.gitignore
+++ b/.gitignore
@@ -109,3 +109,5 @@ dist
 # docs
 /docs/assets
 /docs/**/*.html
+/docs/.vitepress/cache
+/docs/.vitepress/build-system/shim
diff --git a/docs/.vitepress/build-system/build.ts b/docs/.vitepress/build-system/build.ts
new file mode 100644
index 00000000..1dfb7b2a
--- /dev/null
+++ b/docs/.vitepress/build-system/build.ts
@@ -0,0 +1,67 @@
+/**
+ * Pre-build cjs packages that cannot be bundled well.
+ */
+import esbuild from "esbuild";
+import path from "path";
+import fs from "fs";
+import { fileURLToPath } from "url";
+
+const dirname = path.dirname(
+  fileURLToPath(
+    // @ts-expect-error -- Cannot change `module` option
+    import.meta.url,
+  ),
+);
+
+build(
+  path.join(dirname, "./src/vue-eslint-parser.mjs"),
+  path.join(dirname, "./shim/vue-eslint-parser.mjs"),
+  ["eslint", "path", "module", "events"],
+);
+build(
+  path.join(dirname, "./src/events.mjs"),
+  path.join(dirname, "./shim/events.mjs"),
+  [],
+);
+
+function build(input: string, out: string, injects: string[] = []) {
+  // eslint-disable-next-line no-console -- ignore
+  console.log(`build@ ${input}`);
+  let code = bundle(input, injects);
+  code = transform(code, injects);
+  fs.mkdirSync(path.dirname(out), { recursive: true });
+  fs.writeFileSync(out, code, "utf8");
+}
+
+function bundle(entryPoint: string, externals: string[]) {
+  const result = esbuild.buildSync({
+    entryPoints: [entryPoint],
+    format: "esm",
+    bundle: true,
+    external: externals,
+    write: false,
+  });
+
+  return `${result.outputFiles[0].text}`;
+}
+
+function transform(code: string, injects: string[]) {
+  const newCode = code.replace(/"[a-z]+" = "[a-z]+";/u, "");
+  return `
+${injects
+  .map(
+    (inject) =>
+      `import $inject_${inject.replace(/-/gu, "_")}$ from '${inject}';`,
+  )
+  .join("\n")}
+const $_injects_$ = {${injects
+    .map((inject) => `${inject.replace(/-/gu, "_")}:$inject_${inject}$`)
+    .join(",\n")}};
+function require(module, ...args) {
+  return $_injects_$[module] || {}
+}
+${newCode}
+
+if (typeof __require !== 'undefined') __require.cache = {};
+`;
+}
diff --git a/docs/.vitepress/build-system/src/events.mjs b/docs/.vitepress/build-system/src/events.mjs
new file mode 100644
index 00000000..e1bd1c56
--- /dev/null
+++ b/docs/.vitepress/build-system/src/events.mjs
@@ -0,0 +1,3 @@
+import all from "events";
+export default all;
+export const EventEmitter = all.EventEmitter;
diff --git a/docs/.vitepress/build-system/src/vue-eslint-parser.mjs b/docs/.vitepress/build-system/src/vue-eslint-parser.mjs
new file mode 100644
index 00000000..44511f6c
--- /dev/null
+++ b/docs/.vitepress/build-system/src/vue-eslint-parser.mjs
@@ -0,0 +1,3 @@
+import all from "vue-eslint-parser";
+export default all;
+export const parseForESLint = all.parseForESLint;
diff --git a/docs/.vitepress/config.mts b/docs/.vitepress/config.mts
new file mode 100644
index 00000000..e613c9d6
--- /dev/null
+++ b/docs/.vitepress/config.mts
@@ -0,0 +1,144 @@
+import type { DefaultTheme, UserConfig } from "vitepress";
+import { defineConfig } from "vitepress";
+import { BUNDLED_LANGUAGES } from "shiki";
+import path from "path";
+import { fileURLToPath } from "url";
+import eslint4b from "vite-plugin-eslint4b";
+import type { RuleModule } from "../../src/types.js";
+import { viteCommonjs } from "./vite-plugin.mjs";
+
+import "./build-system/build.js";
+const dirname = path.dirname(fileURLToPath(import.meta.url));
+
+// Include `json5` as alias for jsonc
+const jsonc = BUNDLED_LANGUAGES.find((lang) => lang.id === "jsonc");
+if (jsonc) jsonc.aliases = [...(jsonc?.aliases ?? []), "json5"];
+
+function ruleToSidebarItem({
+  meta: {
+    docs: { ruleId, ruleName },
+  },
+}: RuleModule): DefaultTheme.SidebarItem {
+  return {
+    text: ruleId,
+    link: `/rules/${ruleName}`,
+  };
+}
+
+export default async (): Promise<UserConfig<DefaultTheme.Config>> => {
+  const a = "../../lib/utils/rules.js";
+  const { rules } = (await import(a)) as { rules: RuleModule[] };
+  return defineConfig({
+    base: "/eslint-plugin-toml/",
+    title: "eslint-plugin-toml",
+    outDir: path.join(dirname, "./dist/eslint-plugin-toml"),
+    description: "ESLint plugin provides linting rules for TOML",
+    head: [
+      [
+        "link",
+        {
+          rel: "icon",
+          href: "/eslint-plugin-toml/logo.svg",
+          type: "image/svg+xml",
+        },
+      ],
+    ],
+
+    vite: {
+      plugins: [viteCommonjs(), eslint4b()],
+      resolve: {
+        alias: {
+          "vue-eslint-parser": path.join(
+            dirname,
+            "./build-system/shim/vue-eslint-parser.mjs",
+          ),
+          module: path.join(dirname, "./shim/module.mjs"),
+          events: path.join(dirname, "./build-system/shim/events.mjs"),
+        },
+      },
+      define: {
+        "process.env.NODE_DEBUG": "false",
+      },
+      optimizeDeps: {
+        // exclude: ["vue-eslint-parser"],
+      },
+    },
+
+    lastUpdated: true,
+    themeConfig: {
+      logo: "/logo.svg",
+      search: {
+        provider: "local",
+        options: {
+          detailedView: true,
+        },
+      },
+      editLink: {
+        pattern:
+          "https://github.com/ota-meshi/eslint-plugin-toml/edit/main/docs/:path",
+      },
+      nav: [
+        { text: "Introduction", link: "/" },
+        { text: "User Guide", link: "/user-guide/" },
+        { text: "Rules", link: "/rules/" },
+        { text: "Playground", link: "/playground/" },
+      ],
+      socialLinks: [
+        {
+          icon: "github",
+          link: "https://github.com/ota-meshi/eslint-plugin-toml",
+        },
+      ],
+      sidebar: {
+        "/rules/": [
+          {
+            text: "Rules",
+            items: [{ text: "Available Rules", link: "/rules/" }],
+          },
+          {
+            text: "YAML Rules",
+            collapsed: false,
+            items: rules
+              .filter(
+                (rule) =>
+                  !rule.meta.docs.extensionRule && !rule.meta.deprecated,
+              )
+              .map(ruleToSidebarItem),
+          },
+          {
+            text: "Extension Rules",
+            collapsed: false,
+            items: rules
+              .filter(
+                (rule) => rule.meta.docs.extensionRule && !rule.meta.deprecated,
+              )
+              .map(ruleToSidebarItem),
+          },
+
+          // Rules in no category.
+          ...(rules.some((rule) => rule.meta.deprecated)
+            ? [
+                {
+                  text: "Deprecated",
+                  collapsed: false,
+                  items: rules
+                    .filter((rule) => rule.meta.deprecated)
+                    .map(ruleToSidebarItem),
+                },
+              ]
+            : []),
+        ],
+        "/": [
+          {
+            text: "Guide",
+            items: [
+              { text: "Introduction", link: "/" },
+              { text: "User Guide", link: "/user-guide/" },
+              { text: "Rules", link: "/rules/" },
+            ],
+          },
+        ],
+      },
+    },
+  });
+};
diff --git a/docs/.vitepress/shim/module.mjs b/docs/.vitepress/shim/module.mjs
new file mode 100644
index 00000000..10d342ed
--- /dev/null
+++ b/docs/.vitepress/shim/module.mjs
@@ -0,0 +1,6 @@
+export function createRequire() {
+  // noop
+}
+export default {
+  createRequire,
+};
diff --git a/docs/.vuepress/styles/stylelint.config.js b/docs/.vitepress/stylelint.config.js
similarity index 59%
rename from docs/.vuepress/styles/stylelint.config.js
rename to docs/.vitepress/stylelint.config.js
index 5ce9547e..febf7a2f 100644
--- a/docs/.vuepress/styles/stylelint.config.js
+++ b/docs/.vitepress/stylelint.config.js
@@ -1,8 +1,11 @@
 module.exports = {
-  extends: ["stylelint-config-standard", "stylelint-stylus/standard"],
+  extends: ["stylelint-config-standard-vue"],
   rules: {
     "no-descending-specificity": null,
     "selector-class-pattern": null,
     "value-keyword-case": null,
+
+    // Conflict with Prettier
+    indentation: null,
   },
 };
diff --git a/docs/.vuepress/components/components/EslintPluginEditor.vue b/docs/.vitepress/theme/components/components/EslintPluginEditor.vue
similarity index 64%
rename from docs/.vuepress/components/components/EslintPluginEditor.vue
rename to docs/.vitepress/theme/components/components/EslintPluginEditor.vue
index 4c1713e2..78df2eb2 100644
--- a/docs/.vuepress/components/components/EslintPluginEditor.vue
+++ b/docs/.vitepress/theme/components/components/EslintPluginEditor.vue
@@ -10,15 +10,16 @@
     :dark="dark"
     :format="format"
     :fix="fix"
-    @input="$emit('input', $event)"
+    @update:code="$emit('update:code', $event)"
     @change="$emit('change', $event)"
   />
 </template>
 
 <script>
-import EslintEditor from "vue-eslint-editor";
-import { Linter } from "eslint/lib/linter";
-import plugin from "../../../..";
+import EslintEditor from "@ota-meshi/site-kit-eslint-editor-vue";
+import { loadMonacoEditor } from "@ota-meshi/site-kit-monaco-editor";
+import { Linter } from "eslint";
+import { rules } from "../../../../../src/utils/rules";
 
 export default {
   name: "EslintPluginEditor",
@@ -56,9 +57,11 @@ export default {
       default: "toml-eslint-parser",
     },
   },
+  emits: ["update:code", "change"],
 
   data() {
     return {
+      espree: null,
       tomlESLintParser: null,
       vueESLintParser: null,
       format: {
@@ -99,8 +102,9 @@ export default {
         rules: this.rules,
         parser: this.parser,
         parserOptions: {
-          sourceType: "script",
-          ecmaVersion: 2021,
+          parser: this.espree,
+          sourceType: "module",
+          ecmaVersion: "latest",
         },
       };
     },
@@ -112,8 +116,8 @@ export default {
       linter.defineParser("toml-eslint-parser", this.tomlESLintParser);
       linter.defineParser("vue-eslint-parser", this.vueESLintParser);
 
-      for (const k of Object.keys(plugin.rules)) {
-        const rule = plugin.rules[k];
+      for (const k of Object.keys(rules)) {
+        const rule = rules[k];
         linter.defineRule(rule.meta.docs.ruleId, rule);
       }
 
@@ -123,50 +127,40 @@ export default {
 
   async mounted() {
     // Load parser asynchronously.
-    const [tomlESLintParser, vueESLintParser] = await Promise.all([
+    const [espree, tomlESLintParser, vueESLintParser] = await Promise.all([
+      import("espree"),
       import("toml-eslint-parser"),
-      import("espree").then(() => import("vue-eslint-parser")),
+      import("vue-eslint-parser"),
     ]);
+    this.espree = espree;
     this.tomlESLintParser = tomlESLintParser;
     this.vueESLintParser = vueESLintParser;
 
-    const editor = this.$refs.editor;
-
-    editor.$watch("monaco", () => {
-      const { monaco } = editor;
-      // monaco.languages.j()
-      monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
-        validate: false,
-      });
-      monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({
-        validate: false,
-      });
-
-      monaco.languages.register({ id: "toml" });
-      monaco.languages.setMonarchTokensProvider(
-        "toml",
-        require("./languages/toml/toml").language,
-      );
+    const monaco = await loadMonacoEditor();
+    monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
+      validate: false,
     });
-    editor.$watch("codeEditor", () => {
-      if (editor.codeEditor) {
-        editor.codeEditor.onDidChangeModelDecorations(() =>
-          this.onDidChangeModelDecorations(editor.codeEditor),
-        );
-      }
+    monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({
+      validate: false,
     });
-    editor.$watch("fixedCodeEditor", () => {
-      if (editor.fixedCodeEditor) {
-        editor.fixedCodeEditor.onDidChangeModelDecorations(() =>
-          this.onDidChangeModelDecorations(editor.fixedCodeEditor),
-        );
-      }
+    monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
+      validate: false,
     });
+
+    const editorVue = this.$refs.editor.$refs.monacoEditorRef;
+    for (const editor of [
+      editorVue.getLeftEditor(),
+      editorVue.getRightEditor(),
+    ]) {
+      editor?.onDidChangeModelDecorations(() =>
+        this.onDidChangeModelDecorations(editor),
+      );
+    }
   },
 
   methods: {
-    onDidChangeModelDecorations(editor) {
-      const { monaco } = this.$refs.editor;
+    async onDidChangeModelDecorations(editor) {
+      const monaco = await loadMonacoEditor();
       const model = editor.getModel();
       monaco.editor.setModelMarkers(model, "toml", []);
     },
diff --git a/docs/.vuepress/components/components/PgEditor.vue b/docs/.vitepress/theme/components/components/PgEditor.vue
similarity index 78%
rename from docs/.vuepress/components/components/PgEditor.vue
rename to docs/.vitepress/theme/components/components/PgEditor.vue
index f3aff349..6b8da771 100644
--- a/docs/.vuepress/components/components/PgEditor.vue
+++ b/docs/.vitepress/theme/components/components/PgEditor.vue
@@ -1,11 +1,11 @@
 <template>
   <eslint-plugin-editor
     ref="editor"
-    :code="value"
+    :code="modelValue"
     :rules="rules"
     fix
     dark
-    @input="$emit('input', $event)"
+    @update:code="$emit('update:modelValue', $event)"
     @change="$emit('change', $event)"
   />
 </template>
@@ -17,7 +17,7 @@ export default {
   name: "PgEditor",
   components: { EslintPluginEditor },
   props: {
-    value: {
+    modelValue: {
       type: String,
       default: "",
     },
@@ -30,5 +30,6 @@ export default {
       default: () => [],
     },
   },
+  emits: ["change", "update:modelValue"],
 };
 </script>
diff --git a/docs/.vuepress/components/components/RulesSettings.vue b/docs/.vitepress/theme/components/components/RulesSettings.vue
similarity index 99%
rename from docs/.vuepress/components/components/RulesSettings.vue
rename to docs/.vitepress/theme/components/components/RulesSettings.vue
index c7f87f57..9a1c44e1 100644
--- a/docs/.vuepress/components/components/RulesSettings.vue
+++ b/docs/.vitepress/theme/components/components/RulesSettings.vue
@@ -129,6 +129,7 @@ export default {
       required: true,
     },
   },
+  emits: ["update:rules"],
   data() {
     return {
       categoryState: Object.fromEntries(
diff --git a/docs/.vuepress/components/components/SnsBar.vue b/docs/.vitepress/theme/components/components/SnsBar.vue
similarity index 98%
rename from docs/.vuepress/components/components/SnsBar.vue
rename to docs/.vitepress/theme/components/components/SnsBar.vue
index b906bfbe..0e78a897 100644
--- a/docs/.vuepress/components/components/SnsBar.vue
+++ b/docs/.vitepress/theme/components/components/SnsBar.vue
@@ -90,7 +90,7 @@ export default {
   align-items: flex-start;
 }
 
-.sns-bar >>> .sns > * {
+.sns-bar :deep(.sns > *) {
   vertical-align: top !important;
   margin-left: 4px;
   height: 23px !important;
diff --git a/docs/.vitepress/theme/components/eslint-code-block.vue b/docs/.vitepress/theme/components/eslint-code-block.vue
new file mode 100644
index 00000000..dc314900
--- /dev/null
+++ b/docs/.vitepress/theme/components/eslint-code-block.vue
@@ -0,0 +1,100 @@
+<template>
+  <div class="eslint-code-block-root">
+    <eslint-plugin-editor
+      v-show="height"
+      ref="editor"
+      v-model:code="code"
+      :style="{ height }"
+      :rules="rules"
+      dark
+      :fix="fix"
+      :language="language"
+      :file-name="fileName"
+      :parser="parser"
+    />
+    <template v-if="!height">
+      <slot></slot>
+    </template>
+  </div>
+</template>
+
+<script>
+import EslintPluginEditor from "./components/EslintPluginEditor.vue";
+
+export default {
+  name: "ESLintCodeBlock",
+  components: { EslintPluginEditor },
+  props: {
+    fix: {
+      type: Boolean,
+    },
+    rules: {
+      type: Object,
+      default() {
+        return {};
+      },
+    },
+    language: {
+      type: String,
+      default: undefined,
+    },
+    fileName: {
+      type: String,
+      default: undefined,
+    },
+    parser: {
+      type: String,
+      default: undefined,
+    },
+  },
+  data() {
+    return {
+      code: "",
+      height: "100px",
+    };
+  },
+  mounted() {
+    this.code = `${computeCodeFromSlot(
+      findCode(this.$slots.default?.()),
+    ).trim()}\n`;
+    const lines = this.code.split("\n").length;
+    this.height = `${Math.max(120, 20 * (1 + lines))}px`;
+  },
+};
+
+/**
+ * Find VNode of <code> tag
+ */
+function findCode(n) {
+  const nodes = Array.isArray(n) ? n : [n];
+  for (const node of nodes) {
+    if (!node) {
+      continue;
+    }
+    if (node.type === "code") {
+      return node;
+    }
+    const c = findCode(node.children);
+    if (c) {
+      return c;
+    }
+  }
+  return null;
+}
+
+/**
+ * Extract text
+ */
+function computeCodeFromSlot(n) {
+  if (!n) {
+    return "";
+  }
+  const nodes = Array.isArray(n) ? n : [n];
+  // debugger
+  return nodes
+    .map((node) =>
+      typeof node === "string" ? node : computeCodeFromSlot(node.children),
+    )
+    .join("");
+}
+</script>
diff --git a/docs/.vuepress/components/playground-block.vue b/docs/.vitepress/theme/components/playground-block.vue
similarity index 96%
rename from docs/.vuepress/components/playground-block.vue
rename to docs/.vitepress/theme/components/playground-block.vue
index df4ad9f6..549cc8d7 100644
--- a/docs/.vuepress/components/playground-block.vue
+++ b/docs/.vitepress/theme/components/playground-block.vue
@@ -4,8 +4,8 @@
     <div class="main-content">
       <rules-settings
         ref="settings"
+        v-model:rules="rules"
         class="rules-settings"
-        :rules.sync="rules"
       />
       <div class="editor-content">
         <pg-editor
@@ -20,10 +20,10 @@
               v-for="(msg, i) in messages"
               :key="msg.line + ':' + msg.column + ':' + msg.ruleId + '@' + i"
               class="message"
-              :class="getRule(msg.ruleId).classes"
+              :class="getRule(msg.ruleId)?.classes"
             >
               [{{ msg.line }}:{{ msg.column }}]: {{ msg.message }} (<a
-                :href="getRule(msg.ruleId).url"
+                :href="getRule(msg.ruleId)?.url"
                 target="_blank"
               >
                 {{ msg.ruleId }} </a
@@ -166,6 +166,10 @@ function equalsRules(a, b) {
 }
 </script>
 <style scoped>
+.app {
+  height: calc(100vh - 70px);
+}
+
 .main-content {
   display: flex;
   flex-wrap: wrap;
diff --git a/docs/.vuepress/components/rules/index.js b/docs/.vitepress/theme/components/rules/index.js
similarity index 82%
rename from docs/.vuepress/components/rules/index.js
rename to docs/.vitepress/theme/components/rules/index.js
index b8855c26..1471ee55 100644
--- a/docs/.vuepress/components/rules/index.js
+++ b/docs/.vitepress/theme/components/rules/index.js
@@ -1,8 +1,5 @@
-/* eslint n/no-missing-import: 0 -- DEMO */
-// eslint-disable-next-line eslint-comments/disable-enable-pair -- DEMO
-/* eslint-disable n/no-unsupported-features/es-syntax -- DEMO */
-import { Linter } from "eslint/lib/linter";
-import plugin from "../../../../";
+import { Linter } from "eslint";
+import { rules } from "../../../../../src/utils/rules.ts";
 
 const coreRules = Object.fromEntries(new Linter().getRules());
 
@@ -27,18 +24,19 @@ const CATEGORY_CLASSES = {
 
 const allRules = [];
 
-for (const k of Object.keys(plugin.rules)) {
-  const rule = plugin.rules[k];
-  rule.meta.docs.category = "toml";
+for (const k of Object.keys(rules)) {
+  const rule = rules[k];
+  if (rule.meta.deprecated) {
+    continue;
+  }
   allRules.push({
     classes: "eslint-plugin-toml-rule",
     category: "toml",
     ruleId: rule.meta.docs.ruleId,
     url: rule.meta.docs.url,
-    initChecked: CATEGORY_INDEX[rule.meta.docs.category] <= 3,
+    initChecked: CATEGORY_INDEX.toml <= 3,
   });
 }
-
 for (const k of Object.keys(coreRules)) {
   const rule = coreRules[k];
   if (rule.meta.deprecated) {
@@ -60,7 +58,7 @@ allRules.sort((a, b) =>
 export const categories = [];
 
 for (const rule of allRules) {
-  const title = CATEGORY_TITLES[rule.category] || rule.fallbackTitle;
+  const title = CATEGORY_TITLES[rule.category];
   let category = categories.find((c) => c.title === title);
   if (!category) {
     category = {
@@ -102,7 +100,7 @@ export const DEFAULT_RULES_CONFIG = allRules.reduce((c, r) => {
   return c;
 }, {});
 
-export const rules = allRules;
+export { allRules as rules };
 
 export function getRule(ruleId) {
   if (!ruleId) {
diff --git a/docs/.vuepress/components/state/deserialize.js b/docs/.vitepress/theme/components/state/deserialize.js
similarity index 52%
rename from docs/.vuepress/components/state/deserialize.js
rename to docs/.vitepress/theme/components/state/deserialize.js
index 415c0d52..596b4e6a 100644
--- a/docs/.vuepress/components/state/deserialize.js
+++ b/docs/.vitepress/theme/components/state/deserialize.js
@@ -1,5 +1,3 @@
-/* eslint n/no-unsupported-features/es-syntax: off -- not node */
-// eslint-disable-next-line n/no-extraneous-import -- ignore
 import pako from "pako";
 
 /**
@@ -18,13 +16,33 @@ export function deserializeState(serializedString) {
   }
 
   try {
-    const compressedString = window.atob(serializedString);
-    const uint8Arr = pako.inflate(
-      Uint8Array.from(compressedString, (c) => c.charCodeAt(0)),
-    );
-
-    const jsonText = new TextDecoder().decode(uint8Arr);
-    const json = JSON.parse(jsonText);
+    const decodedText = window.atob(serializedString);
+    const json = (() => {
+      let error;
+      for (const fn of [
+        () => {
+          const uint8Arr = pako.inflate(
+            Uint8Array.from(decodedText, (c) => c.charCodeAt(0)),
+          );
+          const jsonText = new TextDecoder().decode(uint8Arr);
+          return JSON.parse(jsonText);
+        },
+        () => {
+          const jsonText = pako.inflate(decodedText, {
+            to: "string",
+          });
+          return JSON.parse(jsonText);
+        },
+        () => JSON.parse(decodedText),
+      ]) {
+        try {
+          return fn();
+        } catch (e) {
+          error = e;
+        }
+      }
+      throw error;
+    })();
 
     if (typeof json === "object" && json != null) {
       if (typeof json.code === "string") {
@@ -38,7 +56,7 @@ export function deserializeState(serializedString) {
       }
     }
   } catch (error) {
-    // eslint-disable-next-line no-console -- demo
+    //eslint-disable-next-line no-console -- demo
     console.error(error);
   }
 
diff --git a/docs/.vitepress/theme/components/state/index.js b/docs/.vitepress/theme/components/state/index.js
new file mode 100644
index 00000000..50d10768
--- /dev/null
+++ b/docs/.vitepress/theme/components/state/index.js
@@ -0,0 +1,2 @@
+export * from "./deserialize.js";
+export * from "./serialize.js";
diff --git a/docs/.vuepress/components/state/serialize.js b/docs/.vitepress/theme/components/state/serialize.js
similarity index 90%
rename from docs/.vuepress/components/state/serialize.js
rename to docs/.vitepress/theme/components/state/serialize.js
index f5c709d5..75c57264 100644
--- a/docs/.vuepress/components/state/serialize.js
+++ b/docs/.vitepress/theme/components/state/serialize.js
@@ -1,5 +1,3 @@
-/* eslint n/no-unsupported-features/es-syntax: off -- not node */
-// eslint-disable-next-line n/no-extraneous-import -- ignore
 import pako from "pako";
 
 /**
diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
new file mode 100644
index 00000000..1c0bd01c
--- /dev/null
+++ b/docs/.vitepress/theme/index.ts
@@ -0,0 +1,26 @@
+if (typeof globalThis !== "undefined") {
+  if (typeof require === "undefined") {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any -- ignore
+    (globalThis as any).require = () => {
+      const e = new Error("require is not defined");
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any -- ignore
+      (e as any).code = "MODULE_NOT_FOUND";
+      throw e;
+    };
+  }
+}
+import type { Theme } from "vitepress";
+import DefaultTheme from "vitepress/theme";
+import ESLintCodeBlock from "./components/eslint-code-block.vue";
+import PlaygroundBlock from "./components/playground-block.vue";
+import "./style.css";
+
+const theme: Theme = {
+  extends: DefaultTheme,
+  enhanceApp(ctx) {
+    DefaultTheme.enhanceApp(ctx);
+    ctx.app.component("eslint-code-block", ESLintCodeBlock);
+    ctx.app.component("playground-block", PlaygroundBlock);
+  },
+};
+export default theme;
diff --git a/docs/.vitepress/theme/style.css b/docs/.vitepress/theme/style.css
new file mode 100644
index 00000000..49a57ac4
--- /dev/null
+++ b/docs/.vitepress/theme/style.css
@@ -0,0 +1,14 @@
+a > img {
+  display: inline-block;
+}
+
+/* Playground */
+.playground :deep(.VPDoc.has-aside .content-container),
+.playground :deep(.VPDoc:not(.has-sidebar) .content),
+.playground :deep(.VPDoc:not(.has-sidebar) .container) {
+  max-width: none;
+}
+
+.playground :deep(.aside) {
+  display: none;
+}
diff --git a/docs/.vitepress/vite-plugin.mjs b/docs/.vitepress/vite-plugin.mjs
new file mode 100644
index 00000000..c2647436
--- /dev/null
+++ b/docs/.vitepress/vite-plugin.mjs
@@ -0,0 +1,66 @@
+import path from "path";
+import { fileURLToPath } from "url";
+import esbuild from "esbuild";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const pluginRoot = path.join(__dirname, "../..");
+const libRoot = path.join(pluginRoot, "src");
+
+export function viteCommonjs() {
+  return {
+    name: "vite-plugin-cjs-to-esm",
+    apply: () => true,
+    transform(code, id) {
+      if (!id.startsWith(libRoot) && !id.includes("vue-eslint-parser")) {
+        return undefined;
+      }
+      const base = transformRequire(code);
+      try {
+        const transformed = esbuild.transformSync(base, {
+          format: "esm",
+        });
+        return transformed.code;
+      } catch (e) {
+        console.error(`Transform error. base code:\n${base}`, e);
+      }
+      return undefined;
+    },
+  };
+}
+
+/**
+ * Transform `require()` to `import`
+ */
+function transformRequire(code) {
+  if (!code.includes("require")) {
+    return code;
+  }
+  const modules = new Map();
+  const replaced = code.replace(
+    /(?<comment>\/\/[^\n\r]*|\/\*[\s\S]*?\*\/)|\brequire\s*\(\s*(?<moduleString>["'].*?["'])\s*\)/gu,
+    (match, comment, moduleString) => {
+      if (comment) {
+        return match;
+      }
+
+      let id = `__${moduleString.replace(/[^\w$]+/gu, "_")}${Math.random()
+        .toString(32)
+        .substring(2)}`;
+      while (code.includes(id) || modules.has(id)) {
+        id += Math.random().toString(32).substring(2);
+      }
+      modules.set(id, moduleString);
+      return id;
+    },
+  );
+
+  return `${[...modules]
+    .map(
+      ([id, moduleString]) => `import * as __temp_${id} from ${moduleString};
+const ${id} = __temp_${id}.default || __temp_${id};
+`,
+    )
+    .join("")};\n${replaced}`;
+}
diff --git a/docs/.vuepress/.eslintrc.js b/docs/.vuepress/.eslintrc.js
deleted file mode 100644
index f6234bc1..00000000
--- a/docs/.vuepress/.eslintrc.js
+++ /dev/null
@@ -1,6 +0,0 @@
-module.exports = {
-  rules: {
-    "eslint-comments/no-unused-disable": "off",
-    "require-jsdoc": "off",
-  },
-};
diff --git a/docs/.vuepress/components/components/languages/toml/toml.js b/docs/.vuepress/components/components/languages/toml/toml.js
deleted file mode 100644
index abd5ed82..00000000
--- a/docs/.vuepress/components/components/languages/toml/toml.js
+++ /dev/null
@@ -1,138 +0,0 @@
-// eslint-disable-next-line n/no-unsupported-features/es-syntax -- build
-export const language = {
-  tokenPostfix: ".toml",
-  brackets: [
-    { token: "delimiter.bracket", open: "{", close: "}" },
-    { token: "delimiter.square", open: "[", close: "]" },
-  ],
-  keywords: ["true", "false", "nan", "+nan", "-nan", "inf", "+inf", "-inf"],
-  numberInteger: /0|[+-]?\d[\d_]*/,
-  numberFloat: /(?:0|[+-]?\d[\d_]*)(?:\.\d+)?(?:e[+-]?[1-9]\d*)?/,
-  numberOctal: /0o[0-7][0-7_]*/,
-  numberHex: /0x[\dA-Fa-f][\dA-F_a-f]*/,
-  numberBinary: /0b[01][01_]*/,
-  numberDate:
-    /\d{4}-\d{2}-\d{2}([ Tt]\d{2}:\d{2}:\d{2}(\.\d+)?(( ?[+-]\d{1,2}(:\d{2})?)|Z)?)?/,
-  escapes: /\\["\\bfnrt]/,
-  tokenizer: {
-    root: [
-      { include: "@whitespace" },
-      { include: "@comment" },
-      { include: "@inlineCollections" },
-      // Key=Value pair
-      [
-        // eslint-disable-next-line regexp/no-super-linear-backtracking -- ignore
-        /(".*?"|'.*?'|.*?)([\t ]*)(=)(\s+|$)/,
-        ["type", "white", "operators", "white"],
-      ],
-      { include: "@numbers" },
-      { include: "@scalars" },
-      // String nodes
-      [
-        /\S+$/,
-        {
-          cases: {
-            "@keywords": "keyword",
-            "@default": "string",
-          },
-        },
-      ],
-    ],
-    // Inline Table
-    object: [
-      { include: "@whitespace" },
-      { include: "@comment" },
-      // termination
-      [/\}/, "@brackets", "@pop"],
-      // delimiter
-      [/,/, "delimiter.comma"],
-      // Key=Value delimiter
-      [/[=]/, "operators"],
-      // Key=Value key
-      [/(?:".*?"|'.*?'|[^,[{]+?)(?=[=])/u, "type"],
-      // Values
-      { include: "@inlineCollections" },
-      { include: "@scalars" },
-      { include: "@numbers" },
-      // Other value (keyword or string)
-      [
-        /[^\s,}]+/u,
-        {
-          cases: {
-            "@keywords": "keyword",
-            "@default": "string",
-          },
-        },
-      ],
-    ],
-    // Array or Table
-    array: [
-      { include: "@whitespace" },
-      { include: "@comment" },
-      // termination
-      [/\]/, "@brackets", "@pop"],
-      // delimiter
-      [/,/, "delimiter.comma"],
-      // Table delimiter
-      [/\./, "delimiter.comma"],
-      // Values
-      { include: "@inlineCollections" },
-      { include: "@scalars" },
-      { include: "@numbers" },
-      // Other value (keyword or string)
-      [
-        /[^\s,.\]]+/,
-        {
-          cases: {
-            "@keywords": "keyword",
-            "@default": "string",
-          },
-        },
-      ],
-    ],
-    whitespace: [[/[\t\n\r ]+/, "white"]],
-    // Only line comments
-    comment: [[/#.*$/, "comment"]],
-    // Start collections
-    inlineCollections: [
-      [/\[/, "@brackets", "@array"],
-      [/\{/, "@brackets", "@object"],
-    ],
-    // Start Scalars (quoted strings)
-    scalars: [
-      [/"([^"\\]|\\.)*$/, "string.invalid"],
-      [/'([^'\\]|\\.)*$/, "string.invalid"],
-      [/'''[^']*'''/, "string"],
-      [/'[^']*'/, "string"],
-      [/"""/, "string", "@mlDoubleQuotedString"],
-      [/"/, "string", "@doubleQuotedString"],
-    ],
-    mlDoubleQuotedString: [
-      [/[^"\\]+/, "string"],
-      [/@escapes/, "string.escape"],
-      [/\\./, "string.escape.invalid"],
-      [/"""/, "string", "@pop"],
-    ],
-    doubleQuotedString: [
-      [/[^"\\]+/, "string"],
-      [/@escapes/, "string.escape"],
-      [/\\./, "string.escape.invalid"],
-      [/"/, "string", "@pop"],
-    ],
-    // Numbers
-    numbers: [
-      [/@numberInteger(?=[\t ]*[#,\]}])/u, "number"],
-      [/@numberFloat(?=[\t ]*[#,\]}])/u, "number.float"],
-      [/@numberOctal(?=[\t ]*[#,\]}])/u, "number.octal"],
-      [/@numberBinary(?=[\t ]*[#,\]}])/u, "number.binary"],
-      [/@numberHex(?=[\t ]*[#,\]}])/u, "number.hex"],
-      [/@numberDate(?=[\t ]*[#,\]}])/u, "number.date"],
-      [/@numberInteger(?![\t ]*\S)/, "number"],
-      [/@numberFloat(?![\t ]*\S)/, "number.float"],
-      [/@numberBinary(?![\t ]*\S)/u, "number.binary"],
-      [/@numberOctal(?![\t ]*\S)/, "number.octal"],
-      [/@numberHex(?![\t ]*\S)/, "number.hex"],
-      [/@numberDate(?![\t ]*\S)/, "number.date"],
-    ],
-  },
-};
diff --git a/docs/.vuepress/components/demo/.eslintrc.js b/docs/.vuepress/components/demo/.eslintrc.js
deleted file mode 100644
index ff413f8b..00000000
--- a/docs/.vuepress/components/demo/.eslintrc.js
+++ /dev/null
@@ -1,5 +0,0 @@
-module.exports = {
-    rules: {
-        "prettier/prettier": "off",
-    },
-}
diff --git a/docs/.vuepress/components/eslint-code-block.vue b/docs/.vuepress/components/eslint-code-block.vue
deleted file mode 100644
index cab7c72b..00000000
--- a/docs/.vuepress/components/eslint-code-block.vue
+++ /dev/null
@@ -1,71 +0,0 @@
-<template>
-  <eslint-plugin-editor
-    ref="editor"
-    v-model="code"
-    :style="{ height }"
-    :rules="rules"
-    dark
-    :fix="fix"
-    :language="language"
-    :file-name="fileName"
-    :parser="parser"
-  />
-</template>
-
-<script>
-import EslintPluginEditor from "./components/EslintPluginEditor.vue";
-
-export default {
-  name: "ESLintCodeBlock",
-  components: { EslintPluginEditor },
-  props: {
-    fix: {
-      type: Boolean,
-    },
-    rules: {
-      type: Object,
-      default() {
-        return {};
-      },
-    },
-    language: {
-      type: String,
-      default: undefined,
-    },
-    fileName: {
-      type: String,
-      default: undefined,
-    },
-    parser: {
-      type: String,
-      default: undefined,
-    },
-  },
-  data() {
-    return {
-      code: "",
-      height: "",
-    };
-  },
-  mounted() {
-    this.code = `${this.computeCodeFromSlot(this.$slots.default).trim()}\n`;
-    const lines = this.code.split("\n").length;
-    this.height = `${Math.max(120, 20 * (1 + lines))}px`;
-  },
-
-  methods: {
-    /**
-     * @param {VNode[]} nodes
-     * @returns {string}
-     */
-    computeCodeFromSlot(nodes) {
-      if (!Array.isArray(nodes)) {
-        return "";
-      }
-      return nodes
-        .map((node) => node.text || this.computeCodeFromSlot(node.children))
-        .join("");
-    },
-  },
-};
-</script>
diff --git a/docs/.vuepress/components/state/index.js b/docs/.vuepress/components/state/index.js
deleted file mode 100644
index f259f760..00000000
--- a/docs/.vuepress/components/state/index.js
+++ /dev/null
@@ -1,4 +0,0 @@
-// eslint-disable-next-line n/no-unsupported-features/es-syntax -- DEMO
-export * from "./deserialize.js";
-// eslint-disable-next-line n/no-unsupported-features/es-syntax -- DEMO
-export * from "./serialize.js";
diff --git a/docs/.vuepress/components/stylelint.config.js b/docs/.vuepress/components/stylelint.config.js
deleted file mode 100644
index 8bc54f8d..00000000
--- a/docs/.vuepress/components/stylelint.config.js
+++ /dev/null
@@ -1,8 +0,0 @@
-module.exports = {
-  extends: ["stylelint-config-standard", "stylelint-config-recommended-vue"],
-  rules: {
-    "no-descending-specificity": null,
-    indentation: null,
-    "selector-class-pattern": null,
-  },
-};
diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
deleted file mode 100644
index ab0e4ab6..00000000
--- a/docs/.vuepress/config.js
+++ /dev/null
@@ -1,106 +0,0 @@
-const path = require("path");
-// eslint-disable-next-line n/no-missing-require -- no build
-const { rules } = require("../../lib/utils/rules");
-
-function ruleToLink({
-  meta: {
-    docs: { ruleId, ruleName },
-  },
-}) {
-  return [`/rules/${ruleName}`, ruleId];
-}
-
-module.exports = {
-  base: "/eslint-plugin-toml/",
-  title: "eslint-plugin-toml",
-  description: "ESLint plugin provides linting rules for TOML",
-  serviceWorker: true,
-  evergreen: true,
-  configureWebpack(_config, _isServer) {
-    return {
-      resolve: {
-        alias: {
-          module: require.resolve("./shim/module"),
-          eslint$: path.resolve(__dirname, "./shim/eslint"),
-          "eslint-visitor-keys$": path.resolve(
-            __dirname,
-            "./shim/eslint-visitor-keys",
-          ),
-          esquery: path.resolve(
-            __dirname,
-            "../../node_modules/esquery/dist/esquery.min.js",
-          ),
-          "@eslint/eslintrc/universal": path.resolve(
-            __dirname,
-            "../../node_modules/@eslint/eslintrc/dist/eslintrc-universal.cjs",
-          ),
-        },
-      },
-    };
-  },
-
-  head: [["link", { rel: "icon", type: "image/png", href: "/logo.png" }]],
-  themeConfig: {
-    logo: "/logo.svg",
-    repo: "ota-meshi/eslint-plugin-toml",
-    docsRepo: "ota-meshi/eslint-plugin-toml",
-    docsDir: "docs",
-    docsBranch: "main",
-    editLinks: true,
-    lastUpdated: true,
-    serviceWorker: {
-      updatePopup: true,
-    },
-
-    nav: [
-      { text: "Introduction", link: "/" },
-      { text: "User Guide", link: "/user-guide/" },
-      { text: "Rules", link: "/rules/" },
-      { text: "Playground", link: "/playground/" },
-    ],
-
-    sidebar: {
-      "/rules/": [
-        "/rules/",
-        {
-          title: "TOML Rules",
-          collapsable: false,
-          children: rules
-            .filter(
-              (rule) => !rule.meta.docs.extensionRule && !rule.meta.deprecated,
-            )
-            .map(ruleToLink),
-        },
-        ...(rules.some(
-          (rule) => rule.meta.docs.extensionRule && !rule.meta.deprecated,
-        )
-          ? [
-              {
-                title: "Extension Rules",
-                collapsable: false,
-                children: rules
-                  .filter(
-                    (rule) =>
-                      rule.meta.docs.extensionRule && !rule.meta.deprecated,
-                  )
-                  .map(ruleToLink),
-              },
-            ]
-          : []),
-        // Rules in no category.
-        ...(rules.some((rule) => rule.meta.deprecated)
-          ? [
-              {
-                title: "Deprecated",
-                collapsable: false,
-                children: rules
-                  .filter((rule) => rule.meta.deprecated)
-                  .map(ruleToLink),
-              },
-            ]
-          : []),
-      ],
-      "/": ["/", "/user-guide/", "/rules/", "/playground/"],
-    },
-  },
-};
diff --git a/docs/.vuepress/enhanceApp.js b/docs/.vuepress/enhanceApp.js
deleted file mode 100644
index 69a30dba..00000000
--- a/docs/.vuepress/enhanceApp.js
+++ /dev/null
@@ -1,21 +0,0 @@
-// eslint-disable-next-line n/no-unsupported-features/es-syntax -- DEMO
-export default () =>
-  // {
-  //     Vue, // the version of Vue being used in the VuePress app
-  //     options, // the options for the root Vue instance
-  //     router, // the router instance for the app
-  //     siteData, // site metadata
-  // }
-  {
-    if (typeof window !== "undefined") {
-      if (typeof window.global === "undefined") {
-        window.global = {};
-      }
-      if (typeof window.process === "undefined") {
-        window.process = {
-          env: {},
-          cwd: () => undefined,
-        };
-      }
-    }
-  };
diff --git a/docs/.vuepress/shim/eslint-visitor-keys/index.js b/docs/.vuepress/shim/eslint-visitor-keys/index.js
deleted file mode 100644
index d728a8dd..00000000
--- a/docs/.vuepress/shim/eslint-visitor-keys/index.js
+++ /dev/null
@@ -1,6 +0,0 @@
-// eslint-disable-next-line eslint-comments/disable-enable-pair -- DEMO
-/* eslint-disable n/no-unsupported-features/es-syntax -- DEMO */
-import * as all from "../../../../node_modules/eslint-visitor-keys/lib/index.js";
-
-export const { KEYS, getKeys, unionWith } = all;
-export default all;
diff --git a/docs/.vuepress/shim/eslint/index.js b/docs/.vuepress/shim/eslint/index.js
deleted file mode 100644
index e0553e83..00000000
--- a/docs/.vuepress/shim/eslint/index.js
+++ /dev/null
@@ -1,7 +0,0 @@
-// eslint-disable-next-line eslint-comments/disable-enable-pair -- DEMO
-/* eslint-disable n/no-unsupported-features/es-syntax, n/no-missing-import -- DEMO */
-import { Linter } from "eslint/lib/linter";
-class CLIEngine {}
-
-export { Linter, CLIEngine };
-export default { Linter, CLIEngine };
diff --git a/docs/.vuepress/shim/module.js b/docs/.vuepress/shim/module.js
deleted file mode 100644
index 2d359888..00000000
--- a/docs/.vuepress/shim/module.js
+++ /dev/null
@@ -1,3 +0,0 @@
-module.exports = {
-  createRequire: () => () => null,
-};
diff --git a/docs/.vuepress/styles/index.styl b/docs/.vuepress/styles/index.styl
deleted file mode 100644
index 7675feac..00000000
--- a/docs/.vuepress/styles/index.styl
+++ /dev/null
@@ -1,66 +0,0 @@
-@media screen and (min-width 400px) and (max-width 450px)
-  #app .navbar .site-name
-    font-size calc(1.3rem * 0.8)
-
-@media screen and (max-width 400px)
-  #app .navbar
-    .home-link
-      display flex
-      height 100%
-      align-items center
-
-      .site-name
-        font-size calc(1.3rem * 0.8)
-        white-space unset
-        line-height 1em
-
-// rule-details
-.theme-container.rule-details .content__default > h1
-  font-size 1.8rem
-
-  + blockquote
-    margin-top -15px
-    padding 0
-    border 0
-    font-weight 500
-    font-size 1.4rem
-    color currentColor
-
-    ::first-letter
-      text-transform uppercase
-
-    p
-      line-height 1.2
-
-// playground
-.theme-container.playground
-  .content__default:not(.custom)
-    max-width 900px
-    margin 0 auto
-    padding 2rem 2.5rem
-
-  .app
-    height calc(100vh - 70px)
-
-  .sidebar-button
-    display block
-
-  .navbar
-    padding-left 4rem
-
-  .sidebar
-    top 0
-    padding-top 3.6rem
-    transform translateX(-100%)
-    transition transform 0.2s ease
-
-  .page
-    padding-left 0
-
-.theme-container
-  .sidebar
-    transition transform 0.2s ease
-
-.theme-container.playground.sidebar-open
-  .sidebar
-    transform translateX(0)
diff --git a/docs/README.md b/docs/index.md
similarity index 92%
rename from docs/README.md
rename to docs/index.md
index b12169b7..491395df 100644
--- a/docs/README.md
+++ b/docs/index.md
@@ -27,11 +27,11 @@ You can check on the [Online DEMO](./playground/).
 
 ## :book: Usage
 
-See [User Guide](./user-guide/README.md).
+See [User Guide](./user-guide/index.md).
 
 ## :white_check_mark: Rules
 
-See [Available Rules](./rules/README.md).
+See [Available Rules](./rules/index.md).
 
 ## :couple: Related Packages
 
@@ -44,6 +44,6 @@ See [Available Rules](./rules/README.md).
 
 ## :lock: License
 
-See the [LICENSE](LICENSE) file for license rights and limitations (MIT).
+See the [LICENSE](https://github.com/ota-meshi/eslint-plugin-toml/blob/main/LICENSE) file for license rights and limitations (MIT).
 
 [TOML]: https://toml.io/
diff --git a/docs/playground/README.md b/docs/playground/index.md
similarity index 100%
rename from docs/playground/README.md
rename to docs/playground/index.md
diff --git a/docs/.vuepress/public/logo.png b/docs/public/logo.png
similarity index 100%
rename from docs/.vuepress/public/logo.png
rename to docs/public/logo.png
diff --git a/docs/.vuepress/public/logo.svg b/docs/public/logo.svg
similarity index 100%
rename from docs/.vuepress/public/logo.svg
rename to docs/public/logo.svg
diff --git a/docs/rules/README.md b/docs/rules/index.md
similarity index 100%
rename from docs/rules/README.md
rename to docs/rules/index.md
diff --git a/docs/user-guide/README.md b/docs/user-guide/index.md
similarity index 97%
rename from docs/user-guide/README.md
rename to docs/user-guide/index.md
index 20cc1e41..11a68ed3 100644
--- a/docs/user-guide/README.md
+++ b/docs/user-guide/index.md
@@ -56,7 +56,7 @@ For example, the following style rules can also be used in TOML.
 }
 ```
 
-See [the rule list](../rules/README.md) to get the `rules` that this plugin provides.
+See [the rule list](../rules/index.md) to get the `rules` that this plugin provides.
 
 #### Parser Configuration
 
diff --git a/package.json b/package.json
index 95a04ac7..13d69766 100644
--- a/package.json
+++ b/package.json
@@ -25,8 +25,8 @@
     "update": "node --require ts-node/register ./tools/update.ts && npm run eslint-fix",
     "new": "ts-node ./tools/new-rule.ts",
     "predocs:watch": "npm run build:ts",
-    "docs:watch": "vuepress dev --debug docs",
-    "docs:build": "npm run build:ts && vuepress build docs --no-cache",
+    "docs:watch": "vitepress dev docs",
+    "docs:build": "npm run build:ts && vitepress build docs",
     "preversion": "npm test && git add .",
     "version": "env-cmd -e version npm run update && git add .",
     "version:ci": "env-cmd -e version-ci npm run update && changeset version",
@@ -64,6 +64,7 @@
     "@changesets/changelog-github": "^0.4.6",
     "@changesets/cli": "^2.24.2",
     "@ota-meshi/eslint-plugin": "^0.15.0",
+    "@ota-meshi/site-kit-eslint-editor-vue": "^0.1.2",
     "@types/debug": "^4.1.5",
     "@types/eslint": "^8.0.0",
     "@types/eslint-scope": "^3.7.0",
@@ -77,6 +78,7 @@
     "@typescript-eslint/parser": "^6.0.0",
     "cross-env": "^7.0.2",
     "env-cmd": "^10.1.0",
+    "esbuild": "^0.19.3",
     "eslint": "^8.0.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-eslint-comments": "^3.2.0",
@@ -89,22 +91,23 @@
     "eslint-plugin-regexp": "^1.0.0",
     "eslint-plugin-vue": "^9.0.0",
     "eslint-plugin-yml": "^1.0.0",
-    "eslint4b": "^7.3.1",
     "espree": "^9.0.0",
+    "events": "^3.3.0",
     "mocha": "^10.0.0",
     "nyc": "^15.1.0",
+    "pako": "^2.1.0",
     "prettier": "^3.0.0",
-    "raw-loader": "^4.0.1",
     "semver": "^7.3.2",
     "stylelint": "^15",
     "stylelint-config-recommended-vue": "^1.0.0",
     "stylelint-config-standard": "^34.0.0",
+    "stylelint-config-standard-vue": "^1.0.0",
     "stylelint-stylus": "^0.18.0",
     "ts-node": "^10.0.0",
     "typescript": "~5.0.0",
-    "vue-eslint-editor": "^1.1.0",
-    "vue-eslint-parser": "^9.0.0",
-    "vuepress": "^1.5.2"
+    "vite-plugin-eslint4b": "^0.2.1",
+    "vitepress": "^1.0.0-rc.17",
+    "vue-eslint-parser": "^9.0.0"
   },
   "publishConfig": {
     "access": "public"
diff --git a/tools/update-docs-rules-index.ts b/tools/update-docs-rules-index.ts
index 38b0fb1f..224663cb 100644
--- a/tools/update-docs-rules-index.ts
+++ b/tools/update-docs-rules-index.ts
@@ -3,7 +3,7 @@ import fs from "fs";
 import renderRulesTableContent from "./render-rules";
 
 // -----------------------------------------------------------------------------
-const readmeFilePath = path.resolve(__dirname, "../docs/rules/README.md");
+const readmeFilePath = path.resolve(__dirname, "../docs/rules/index.md");
 fs.writeFileSync(
   readmeFilePath,
   `---
diff --git a/tools/update-readme.ts b/tools/update-readme.ts
index a2a435c7..33f18b1e 100644
--- a/tools/update-readme.ts
+++ b/tools/update-readme.ts
@@ -24,7 +24,7 @@ const newReadme = fs
   );
 fs.writeFileSync(readmeFilePath, newReadme, "utf8");
 
-const docsReadmeFilePath = path.resolve(__dirname, "../docs/README.md");
+const docsReadmeFilePath = path.resolve(__dirname, "../docs/index.md");
 
 fs.writeFileSync(
   docsReadmeFilePath,
@@ -32,11 +32,15 @@ fs.writeFileSync(
     .replace("# eslint-plugin-toml\n", "# Introduction\n")
     .replace(
       /<!--RULES_SECTION_START-->[\s\S]*<!--RULES_SECTION_END-->/u,
-      "See [Available Rules](./rules/README.md).",
+      "See [Available Rules](./rules/index.md).",
     )
     .replace(
       /<!--USAGE_SECTION_START-->[\s\S]*<!--USAGE_SECTION_END-->/u,
-      "See [User Guide](./user-guide/README.md).",
+      "See [User Guide](./user-guide/index.md).",
+    )
+    .replace(
+      /\[LICENSE\]\(LICENSE\)/gu,
+      "[LICENSE](https://github.com/ota-meshi/eslint-plugin-toml/blob/main/LICENSE)",
     )
     .replace(/<!--DOCS_IGNORE_START-->[\s\S]*?<!--DOCS_IGNORE_END-->/gu, "")
     .replace(/\(https:\/\/ota-meshi.github.io\/eslint-plugin-toml/gu, "(.")
@@ -46,7 +50,7 @@ fs.writeFileSync(
 
 const docsUserGuideFilePath = path.resolve(
   __dirname,
-  "../docs/user-guide/README.md",
+  "../docs/user-guide/index.md",
 );
 const docsUserGuide = fs.readFileSync(docsUserGuideFilePath, "utf8");
 
@@ -61,7 +65,7 @@ fs.writeFileSync(
     )
     .replace(
       /\(https:\/\/ota-meshi.github.io\/eslint-plugin-toml(.*?)\)/gu,
-      (_s, c: string) => `(..${c.endsWith("/") ? `${c}README.md` : c})`,
+      (_s, c: string) => `(..${c.endsWith("/") ? `${c}index.md` : c})`,
     ),
   "utf8",
 );
diff --git a/tsconfig.build.json b/tsconfig.build.json
index 31b62dbf..b450848c 100644
--- a/tsconfig.build.json
+++ b/tsconfig.build.json
@@ -1,6 +1,6 @@
 {
   "extends": "./tsconfig.json",
-  "exclude": ["tests/**/*", "tools/**/*", "typings/**/*"],
+  "exclude": ["tests/**/*", "tools/**/*", "typings/**/*", "docs/**/*"],
   "compilerOptions": {
     "removeComments": true /* Do not emit comments to output. */
   }
diff --git a/tsconfig.json b/tsconfig.json
index c5a170f7..73fa59d1 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -27,7 +27,8 @@
     "src/**/*",
     "tests/src/**/*",
     "tests/utils/**/*",
-    "tools/**/*"
+    "tools/**/*",
+    "docs/.vitepress/**/*"
     // "typings/**/*"
   ],
   "exclude": ["lib/**/*"]