diff --git a/.github/workflows/docs.yml b/.github/workflows/docs.yml new file mode 100644 index 00000000..20b75ff5 --- /dev/null +++ b/.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 }} diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml index 899842e8..23092e63 100644 --- a/.github/workflows/main.yml +++ b/.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: | diff --git a/.gitignore b/.gitignore index 29efe008..aab752e0 100644 --- a/.gitignore +++ b/.gitignore @@ -3,3 +3,6 @@ /.idea/ /dist/ /node_modules/ +/docs/.vitepress/dist +/docs/.vitepress/cache +yarn-error.log diff --git a/README.md b/README.md index a3660b36..9d96c0cd 100644 --- a/README.md +++ b/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: diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts new file mode 100644 index 00000000..e7938b38 --- /dev/null +++ b/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" + } + } +}); diff --git a/docs/.vitepress/rulesForSidebar.ts b/docs/.vitepress/rulesForSidebar.ts new file mode 100644 index 00000000..ca78e3ef --- /dev/null +++ b/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}` + }; +} diff --git a/docs/aria-role.md b/docs/aria-role.md deleted file mode 100644 index 74d13de7..00000000 --- a/docs/aria-role.md +++ /dev/null @@ -1,43 +0,0 @@ -# aria-role - -Elements with ARIA roles must use a valid, non-abstract ARIA role. - -_References:_ - -1. [WAI-ARIA](https://www.w3.org/TR/wai-aria/#role_definitions) site. -2. [AX_ARIA_01](https://github.com/GoogleChrome/accessibility-developer-tools/wiki/Audit-Rules#ax_aria_01) -3. [DPUB-ARIA roles](https://www.w3.org/TR/dpub-aria-1.0/) - -## Rule details - -This rule takes one optional object argument of type object: - -```json -{ - "rules": { - "vuejs-accessibility/aria-role": ["error", { "ignoreNonDOM": true }] - } -} -``` - -### Succeed - -```vue -
- -
- -
- - - -``` - -### Fail - -```vue -
- -
- -``` diff --git a/docs/iframe-has-title.md b/docs/iframe-has-title.md deleted file mode 100644 index 7140d544..00000000 --- a/docs/iframe-has-title.md +++ /dev/null @@ -1,25 +0,0 @@ -# iframe-has-title - -`