docs: upgrade docus (#762)

Co-authored-by: Daniel Roe <daniel@roe.dev>

Author: NyllRE

.gitignore

@@ -8,3 +8,4 @@ node_modules
 .DS_Store
 coverage
 dist
+.data

docs/app.config.ts

@@ -1,24 +1,35 @@
 export default defineAppConfig({
-  docus: {
+  header: {
     title: '@nuxtjs/html-validator',
-    url: 'https://html-validator.nuxtjs.org',
-    description: 'The best place to start your documentation.',
-    socials: {
-      github: 'nuxt-modules/html-validator',
+    logo: {
+      light: '/logo-light.svg',
+      dark: '/logo-dark.svg',
+      alt: 'HTML Validator Logo',
     },
+  },
+  socials: {
+    github: 'https://github.com/nuxt-modules/html-validator',
+  },
+  seo: {
+    url: 'https://html-validator.nuxtjs.org',
+    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.',
     image: 'https://html-validator.nuxtjs.org/preview.png',
-    aside: {
-      level: 0,
-      exclude: [],
-    },
-    header: {
-      logo: true,
+  },
+  ui: {
+    colors: {
+      primary: 'green',
     },
-    footer: {
-      iconLinks: [
+  },
+  toc: {
+    bottom: {
+      title: 'Community',
+      links: [
         {
-          href: 'https://nuxt.com',
-          icon: 'simple-icons:nuxtdotjs',
+          icon: 'i-lucide-book-open',
+          label: 'Nuxt docs',
+          to: 'https://nuxt.com',
+          target: '_blank',
         },
       ],
     },

docs/components/Logo.vue

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

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

@@ -1,93 +1,107 @@
 ---
 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.'
+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
-
 ---
 
-<img src="/preview.png" class="light-img" />
-<img src="/preview-dark.png" class="dark-img" />
+::u-container
+
+![Light preview](/preview.png){class="block dark:hidden w-full rounded-xl shadow"}
+![Dark preview](/preview-dark.png){class="hidden dark:block w-full rounded-xl shadow"}
+
+Validate your SSR/SSG HTML automatically to catch hydration and accessibility issues before they ship.
 
 ## Key features
 
-::list
- - Zero-configuration required
- - Helps reduce hydration errors
- - Detects common accessibility mistakes
-::
+- 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
-```bash
+
+```bash [Terminal]
 npx nuxi@latest module add html-validator
 ```
 
-### nuxt.config.js
-
-::code-group
- ```js [Nuxt 3]
-  defineNuxtConfig({
-    modules: ['@nuxtjs/html-validator']
-  })
-  ```
- ```js {}[Nuxt 2.9+]
-  export default {
-    buildModules: ['@nuxtjs/html-validator']
-  }
-  ```
- ```js [Nuxt < 2.9">
-  export default {
-    // Install @nuxtjs/html-validator as dependency instead of devDependency
-    modules: ['@nuxtjs/html-validator']
-  }
-  ```
+### Configure Nuxt
+
+::tabs
+:::tabs-item{label="Nuxt 3"}
+
+```js
+defineNuxtConfig({
+  modules: ["@nuxtjs/html-validator"],
+});
+```
+
+:::
+:::tabs-item{label="Nuxt 2.9+"}
+
+```js
+export default {
+  buildModules: ["@nuxtjs/html-validator"],
+};
+```
+
+:::
+:::tabs-item{label="Nuxt < 2.9"}
+
+```js
+export default {
+  // Install @nuxtjs/html-validator as a dependency instead of devDependency
+  modules: ["@nuxtjs/html-validator"],
+};
+```
+
+:::
 ::
 
-::alert{type="info"}
-`html-validator` won't be added to your production bundle - it's just used in development and at build/generate time.
+::note
+`html-validator` won't be added to your production bundle — it's only used in development and at build/generate time.
 ::
 
-### Configuration (optional)
+## Configuration
 
-`@nuxtjs/html-validator` takes four options.
+`@nuxtjs/html-validator` exposes four options:
 
 - `usePrettier` enables prettier printing of your source code to show errors in-context.
 
-  ::alert
+  ::tip
   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.
+  ::note
+  Use this 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
+  ::tip
   Useful in continuous integration.
   ::
 
-- `options` allows you to pass in `html-validate` options that will be merged with the default configuration
+- `options` allows you to pass in `html-validate` options that will be merged with the default configuration.
 
-  ::alert{type="info"}
+  ::note
   You can find more about configuring `html-validate` [here](https://html-validate.org/rules/index.html).
   ::
 
 **Defaults**
 
-```js{}[nuxt.config.js]
+```js [nuxt.config.ts]
 {
   htmlValidator: {
     usePrettier: false,
     logLevel: 'verbose',
     failOnError: false,
     /** A list of routes to ignore (that is, not check validity for). */
-    ignore: [/\.(xml|rss|json)$/],
+    ignore: [/\\.(xml|rss|json)$/],
     options: {
       extends: [
         'html-validate:document',
@@ -115,3 +129,5 @@ npx nuxi@latest module add html-validator
 **You're good to go!**
 
 Every time you hard-refresh (server-render) a page in Nuxt, you will see any HTML validation issues printed in your server console.
+
+::

docs/nuxt.config.ts

@@ -1,4 +1,4 @@
 export default defineNuxtConfig({
-  extends: '@nuxt-themes/docus',
+  extends: ['docus'],
   compatibilityDate: '2024-08-19',
 })

docs/package.json

@@ -3,15 +3,14 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "nuxi dev",
-    "build": "nuxi build",
+    "dev": "nuxt dev",
+    "build": "nuxt build",
     "generate": "nuxi generate",
     "preview": "nuxi preview",
     "lint": "eslint ."
   },
   "dependencies": {
-    "@nuxt-themes/docus": "1.15.1",
-    "nuxt": "4.3.1",
-    "pinceau": "^0.20.1"
+    "docus": "^5.4.4",
+    "nuxt": "4.3.1"
   }
 }

docs/tokens.config.ts

@@ -72,7 +72,7 @@
     ]
   },
   "resolutions": {
-    "@nuxt/content": "2.13.4",
+    "@nuxt/content": "^3.11.0",
     "@nuxt/kit": "^4.0.0",
     "@nuxtjs/html-validator": "link:./"
   },