chore: upgrade docus, migrate to pnpm and use bumpp

Author: danielroe

.github/workflows/ci.yml

@@ -18,31 +18,25 @@ jobs:
         node: [14]
 
     steps:
+
+      - uses: actions/checkout@v3
+      - run: corepack enable
       - uses: actions/setup-node@v3
         with:
           node-version: ${{ matrix.node }}
+          cache: "pnpm"
 
-      - name: checkout
-        uses: actions/checkout@v3
-
-      - name: cache node_modules
-        uses: actions/cache@v3
-        with:
-          path: node_modules
-          key: ${{ matrix.os }}-node-v${{ matrix.node }}-deps-${{ hashFiles(format('{0}{1}', github.workspace, '/yarn.lock')) }}
-
-      - name: Install dependencies
-        if: steps.cache.outputs.cache-hit != 'true'
-        run: yarn
+      - name: 📦 Install dependencies
+        run: pnpm install
 
-      - name: Prepare environment
-        run: yarn dev:prepare
+      - name: 🚧 Set up project
+        run: pnpm dev:prepare
 
-      - name: Lint
-        run: yarn lint:all
+      - name: 🔠 Lint project
+        run: pnpm run lint:all
 
       - name: Test
-        run: yarn test
+        run: pnpm test
 
       - name: Coverage
         uses: codecov/codecov-action@v3

.husky/pre-commit

@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-yarn lint-staged
+pnpm lint-staged

.npmrc

@@ -0,0 +1 @@
+shamefully-hoist=true

docs/.eslintignore

@@ -0,0 +1,4 @@
+dist
+node_modules
+.output
+.nuxt

docs/.eslintrc.cjs

@@ -0,0 +1,8 @@
+module.exports = {
+  root: true,
+  extends: '@nuxt/eslint-config',
+  rules: {
+    'vue/max-attributes-per-line': 'off',
+    'vue/multi-word-component-names': 'off'
+  }
+}

docs/.gitignore

@@ -1 +1,12 @@
-static/sw.js
+node_modules
+*.iml
+.idea
+*.log*
+.nuxt
+.vscode
+.DS_Store
+coverage
+dist
+sw.*
+.env
+.output

docs/.npmrc

@@ -0,0 +1,2 @@
+shamefully-hoist=true
+strict-peer-dependencies=false

docs/app.config.ts

@@ -0,0 +1,26 @@
+export default defineAppConfig({
+  docus: {
+    title: '@nuxtjs/html-validator',
+    url: 'https://html-validator.nuxtjs.org',
+    description: 'The best place to start your documentation.',
+    socials: {
+      github: 'nuxt-modules/html-validator',
+    },
+    image: 'https://html-validator.nuxtjs.org/preview.png',
+    aside: {
+      level: 0,
+      exclude: []
+    },
+    header: {
+      logo: true
+    },
+    footer: {
+      iconLinks: [
+        {
+          href: 'https://nuxt.com',
+          icon: 'simple-icons:nuxtdotjs'
+        }
+      ]
+    }
+  }
+})

docs/components/Logo.vue

@@ -0,0 +1,15 @@
+<template>
+  <img class="dark-img" src="/logo-dark.svg">
+  <img class="light-img" src="/logo-light.svg">
+</template>
+
+<style lang="ts">
+css({
+  '.light .dark-img': {
+    display: 'none',
+  },
+  '.dark .light-img': {
+    display: 'none',
+  },
+})
+</style>

docs/content/en/index.md renamed to docs/content/0.index.md

@@ -2,10 +2,6 @@
 title: Introduction
 description: 'Automatically validate Nuxt server-rendered HTML (SSR and SSG) to detect common issues with HTML that can lead to hydration errors, as well as improve accessibility and best practice.'
 category: Getting started
-items:
- - Zero-configuration required
- - Helps reduce hydration errors
- - Detects common accessibility mistakes
 
 ---
 
@@ -14,76 +10,82 @@ items:
 
 ## Key features
 
-<list :items="items"></list>
+::list
+ - Zero-configuration required
+ - Helps reduce hydration errors
+ - Detects common accessibility mistakes
+::
 
 This module configures [`html-validate`](https://html-validate.org/) to automatically validate Nuxt server-rendered HTML (SSR and SSG) to detect common issues with HTML that can lead to hydration errors, as well as improve accessibility and best practice.
 
 ## Quick start
 
 ### Install
 
-<code-group>
-  <code-block label="Yarn" active>
-
-  ```bash
+::code-group
+ ```bash [pnpm]
+  pnpm i -D @nuxtjs/html-validator
+  ```
+ ```bash [Yarn]
   yarn add @nuxtjs/html-validator --dev
   ```
-
-  </code-block>
-  <code-block label="NPM">
-
-  ```bash
+ ```bash [npm]
   npm install @nuxtjs/html-validator --save-dev
   ```
-
-  </code-block>
-</code-group>
+::
 
 ### nuxt.config.js
 
-<code-group>
-  <code-block label="Nuxt 2.9+" active>
-
-  ```js{}[nuxt.config.js]
-  {
+::code-group
+ ```js [Nuxt 3]
+  defineNuxtConfig({
+    modules: ['@nuxtjs/html-validator']
+  })
+  ```
+ ```js {}[Nuxt 2.9+]
+  export default {
     buildModules: ['@nuxtjs/html-validator']
   }
   ```
-
-  </code-block>
-  <code-block label="Nuxt < 2.9">
-
-  ```js{}[nuxt.config.js]
-  {
+ ```js [Nuxt < 2.9">
+  export default {
     // Install @nuxtjs/html-validator as dependency instead of devDependency
     modules: ['@nuxtjs/html-validator']
   }
   ```
+::
 
-  </code-block>
-</code-group>
-
-<alert type="info">`html-validator` won't be added to your production bundle - it's just used in development and at build/generate time.</alert>
+::alert{type="info"}
+`html-validator` won't be added to your production bundle - it's just used in development and at build/generate time.
+::
 
 ### Configuration (optional)
 
 `@nuxtjs/html-validator` takes four options.
 
 - `usePrettier` enables prettier printing of your source code to show errors in-context.
 
-  <alert>Consider not enabling this if you are using TailwindCSS, as prettier will struggle to cope with parsing the size of your HTML in development mode.</alert>
+  ::alert
+  Consider not enabling this if you are using TailwindCSS, as prettier will struggle to cope with parsing the size of your HTML in development mode.
+  ::
 
 - `logLevel` sets the verbosity to one of `verbose`, `warning` or `error`. It defaults to `verbose` in dev, and `warning` when generating.
 
-  <alert>You can use this configuration option to turn off console logging for the `No HTML validation errors found for ...` message.</alert>
+  ::alert
+  You can use this configuration option to turn off console logging for the `No HTML validation errors found for ...` message.
+  ::
 
 - `failOnError` will throw an error after running `nuxt generate` if there are any validation errors with the generated pages.
 
-  <alert>Useful in continuous integration.</alert>
+  ::alert
+  Useful in continuous integration.
+  ::
 
 - `options` allows you to pass in `html-validate` options that will be merged with the default configuration
 
-  <alert type="info">You can find more about configuring `html-validate` [here](https://html-validate.org/rules/index.html).</alert>
+  ::alert{type="info"}
+  You can find more about configuring `html-validate` [here](https://html-validate.org/rules/index.html).
+  ::
 
 **Defaults**