docs: create vitepress site

.github/workflows/docs.yml

@@ -0,0 +1,35 @@
+name: Docs
+
+on:
+  workflow_dispatch: {}
+  push:
+    branches:
+      - main
+
+jobs:
+  docs:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: yarn
+
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+
+      - name: Build docs
+        run: npm run docs:build
+
+      # https://github.com/crazy-max/ghaction-github-pages
+      - name: Deploy to GitHub Pages
+        uses: crazy-max/ghaction-github-pages@v3
+        with:
+          target_branch: gh-pages
+          build_dir: docs/.vitepress/dist
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/main.yml

@@ -14,7 +14,7 @@ jobs:
       - uses: actions/checkout@master
       - uses: actions/setup-node@v3
         with:
-          node-version: 14.x
+          node-version: 18
           cache: yarn
       - name: Lint and test
         run: |

.gitignore

@@ -3,3 +3,6 @@
 /.idea/
 /dist/
 /node_modules/
+/docs/.vitepress/dist
+/docs/.vitepress/cache
+yarn-error.log

README.md

@@ -5,53 +5,15 @@
 
 An `eslint` plugin for checking accessibility rules from within `.vue` files.
 
-## Installation
+## 📚 Documentation
 
-If you're using `yarn`:
+Please refer to the [official website](https://vue-a11y.github.io/eslint-plugin-vuejs-accessibility/).
 
-```bash
-yarn add --dev eslint-plugin-vuejs-accessibility
-```
-
-or if you're using `npm`:
-
-```bash
-npm install --save-dev eslint-plugin-vuejs-accessibility
-```
-
-## Usage
-
-Add `vuejs-accessibility` to the plugins section of your `eslint` configuration. You can omit the `eslint-plugin-` prefix:
-
-```json
-{
-  "plugins": ["vuejs-accessibility"]
-}
-```
-
-Then configure the rules you want to use under the rules section.
-
-```json
-{
-  "rules": {
-    "vuejs-accessibility/rule-name": "error"
-  }
-}
-```
-
-You can also enable all the recommended rules at once. Add `plugin:vuejs-accessibility/recommended` in extends:
-
-```json
-{
-  "extends": ["plugin:vuejs-accessibility/recommended"]
-}
-```
-
-## Development
+## 💻 Development
 
 Ensure you have `node` and `yarn` installed on your system. Then run `yarn` in the root of the repository to install the dependencies.
 
-### Adding a new rule
+### 🔧 Adding a new rule
 
 To add a new rule, you need to take the following steps:
 
@@ -60,15 +22,15 @@ To add a new rule, you need to take the following steps:
 - Add the corresponding test in `src/rules/__tests__`.
 - Add the corresponding documentation in `docs/rules`.
 
-## Contributing
+## 👨‍💻 Contributing
 
 Bug reports and pull requests are welcome on GitHub at https://github.com/vue-a11y/eslint-plugin-vuejs-accessibility.
 
-## License
+## 📄 License
 
 The code is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
 
-## Credit
+## 🏆 Credit
 
 The work for this plugin was largely based on previous work done on [eslint-plugin-vue-a11y](https://github.com/maranran/eslint-plugin-vue-a11y), as well as various other tools, including:
 

docs/.vitepress/config.ts

@@ -0,0 +1,54 @@
+import { defineConfig } from "vitepress";
+import { rules } from "./rulesForSidebar";
+import { description, version } from "../../package.json";
+
+// https://vitepress.dev/reference/site-config
+export default defineConfig({
+  title: "eslint-plugin-vuejs-a11y",
+  base: "/eslint-plugin-vuejs-accessibility/",
+  description,
+  themeConfig: {
+    // https://vitepress.dev/reference/default-theme-config
+    nav: [
+      {
+        text: version,
+        items: [
+          {
+            text: "Changelog",
+            link: "https://github.com/vue-a11y/eslint-plugin-vuejs-accessibility/blob/main/CHANGELOG.md"
+          }
+        ]
+      }
+    ],
+
+    sidebar: [
+      {
+        text: "Introduction",
+        items: [
+          { text: "Getting Started", link: "/" },
+          { text: "Rule Overview", link: "/rule-overview/index" }
+        ]
+      },
+      {
+        text: "Rules",
+        items: rules
+      }
+    ],
+
+    editLink: {
+      pattern:
+        "https://github.com/vue-a11y/eslint-plugin-vuejs-accessibility/edit/master/docs/:path"
+    },
+
+    socialLinks: [
+      {
+        icon: "github",
+        link: "https://github.com/vue-a11y/eslint-plugin-vuejs-accessibility"
+      }
+    ],
+
+    search: {
+      provider: "local"
+    }
+  }
+});

docs/.vitepress/rulesForSidebar.ts

@@ -0,0 +1,34 @@
+import { join, parse } from "node:path";
+import { Dirent, readdirSync } from "node:fs";
+
+export const rules = getRulesForSideBar();
+
+function getRulesForSideBar() {
+  const rulesDirectory = join(__dirname, "../", "rules");
+  return readdirSync(rulesDirectory, { withFileTypes: true })
+    .filter(isFile)
+    .filter(isMarkdown)
+    .map(fileNameWithoutExtension)
+    .map(ruleToSidebarItem);
+}
+
+function isFile(dirent: Dirent) {
+  return !dirent.isDirectory();
+}
+
+function isMarkdown(dirent: Dirent) {
+  return dirent.name.endsWith(".md");
+}
+
+function fileNameWithoutExtension(file: Dirent) {
+  const parsedFileName = parse(file.name);
+  const nameWithoutExtension = parsedFileName.name;
+  return nameWithoutExtension;
+}
+
+function ruleToSidebarItem(ruleName: string) {
+  return {
+    text: ruleName,
+    link: `/rules/${ruleName}`
+  };
+}

docs/index.md

@@ -0,0 +1,49 @@
+# Getting Started
+
+An `eslint` plugin for checking accessibility rules from within `.vue` files.
+
+## 💿 Installation
+
+::: code-group
+
+```bash [yarn]
+yarn add --dev eslint-plugin-vuejs-accessibility
+```
+
+```bash [npm]
+npm install --save-dev eslint-plugin-vuejs-accessibility
+```
+
+```bash [pnpm]
+pnpm add -D eslint-plugin-vuejs-accessibility
+```
+
+:::
+
+## 📖 Usage
+
+Add `vuejs-accessibility` to the plugins section of your `eslint` configuration. You can omit the `eslint-plugin-` prefix:
+
+```json
+{
+  "plugins": ["vuejs-accessibility"]
+}
+```
+
+Then configure the rules you want to use under the rules section.
+
+```json
+{
+  "rules": {
+    "vuejs-accessibility/rule-name": "error"
+  }
+}
+```
+
+You can also enable all the recommended rules at once. Add `plugin:vuejs-accessibility/recommended` in extends:
+
+```json
+{
+  "extends": ["plugin:vuejs-accessibility/recommended"]
+}
+```

docs/rule-overview/RuleTable.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { data as rules } from "./rule-overview.data";
+</script>
+
+<template>
+  <div class="rule-table-container">
+    <div>✅ - Recommended</div>
+
+    <table>
+      <tr>
+        <th>Rule</th>
+        <th></th>
+      </tr>
+
+      <tr v-for="{ name, link, recommended } of rules">
+        <td>
+          <a :href="link">{{ name }}</a>
+        </td>
+
+        <td v-if="recommended">✅</td>
+        <td v-else></td>
+      </tr>
+    </table>
+  </div>
+</template>
+
+<style scoped>
+.rule-table-container {
+  margin-top: 24px;
+}
+
+table {
+  width: 100%;
+  display: table;
+}
+
+td:last-of-type {
+  width: 50px;
+}
+</style>

docs/rule-overview/index.md

@@ -0,0 +1,16 @@
+---
+prev:
+  text: Getting Started
+  link: /
+next:
+  text: alt-text
+  link: /rules/alt-text
+---
+
+<script setup lang="ts">
+import RuleTable from './RuleTable.vue'
+</script>
+
+# Rule Overview
+
+<RuleTable />