Vite 5 and updated all packages with eslint flat config

.vscode/extensions.json

@@ -0,0 +1,8 @@
+{
+  "recommendations": [
+    "Vue.volar",
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode",
+    "antfu.unocss"
+  ]
+}

.vscode/settings.json

@@ -1,4 +1,51 @@
 {
+  // As per https://github.com/antfu/eslint-config#vs-code-support-auto-fix-on-save
+  "prettier.enable": false,
+  "editor.formatOnSave": false,
+
+  // Auto fix
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit",
+    "source.organizeImports": "never"
+  },
+
+  // Silent the stylistic rules in you IDE, but still auto fix them
+  "eslint.rules.customizations": [
+    { "rule": "style/*", "severity": "off", "fixable": true },
+    { "rule": "format/*", "severity": "off", "fixable": true },
+    { "rule": "*-indent", "severity": "off", "fixable": true },
+    { "rule": "*-spacing", "severity": "off", "fixable": true },
+    { "rule": "*-spaces", "severity": "off", "fixable": true },
+    { "rule": "*-order", "severity": "off", "fixable": true },
+    { "rule": "*-dangle", "severity": "off", "fixable": true },
+    { "rule": "*-newline", "severity": "off", "fixable": true },
+    { "rule": "*quotes", "severity": "off", "fixable": true },
+    { "rule": "*semi", "severity": "off", "fixable": true }
+  ],
+
+  // Enable eslint for all supported languages
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact",
+    "vue",
+    "html",
+    "markdown",
+    "json",
+    "jsonc",
+    "yaml",
+    "toml",
+    "xml",
+    "gql",
+    "graphql",
+    "astro",
+    "css",
+    "less",
+    "scss",
+    "pcss",
+    "postcss"
+  ],
   "typescript.tsdk": "node_modules/typescript/lib",
   "files.exclude": {
     "**/dist": true
@@ -9,4 +56,4 @@
   "search.exclude": {
     "**/dist": true
   }
-}
+}

README.md

@@ -83,7 +83,7 @@ Visit the [documentation website][docs] to check out the [guides][guide] and sea
 - [Vite] and [Vue]: for enabling an amazing development experience
 - [Astro](https://astro.build): for sharing a novel way to define islands
 - [MDX]: provides amazing flexibility when processing Markdown
-- [vue-router], [@vueuse/head], and [vite-plugin-pages]: the backbone of this library
+- [vue-router], [@unhead/vue], and [vite-plugin-pages]: the backbone of this library
 - [unplugin-vue-components]: allows you to avoid the boilerplate
 - [VitePress] and [vite-ssg]: for their different ideas on SSR
 
@@ -96,5 +96,5 @@ Visit the [documentation website][docs] to check out the [guides][guide] and sea
 [VitePress]: https://vitepress.vuejs.org/
 [vite-ssg]: https://github.com/antfu/vite-ssg
 [vue-router]: https://next.router.vuejs.org/
-[@vueuse/head]: https://github.com/vueuse/head
+[@unhead/vue]: https://github.com/unjs/unhead
 

docs/.gitignore

@@ -1,5 +1,6 @@
 node_modules
 dist
+.iles-ssg-temp
 .vitepress/metadata.json
 cypress/videos
 cypress/screenshots

docs/README.md

@@ -30,4 +30,4 @@ This is the source code of the [documentation website for îles][docs].
 
 It's built using [îles].
 
-[__Live Website__][docs]
+[**Live Website**][docs]

docs/cypress/e2e/dark-mode.cypress.cy.js

@@ -1,18 +1,20 @@
-import { visitHome, navigateTo, goBackHome, assertPage } from './helpers'
+import { describe, expect, it } from 'vitest'
+import { cy } from 'cypress'
+import { assertPage, goBackHome, navigateTo, visitHome } from './helpers'
 
 describe('Dark Mode', () => {
   const toggleTheme = () => {
     cy.get(`[aria-label="Toggle theme"]`).click()
   }
 
-  const assertTheme = (theme) =>
+  const assertTheme = theme =>
     cy.get('html').then(html =>
       expect(html.hasClass('dark')).to.equal(theme === 'dark'))
 
   it('can toggle on and off', () => {
     visitHome()
-    cy.get('html').then(html => {
-      if (html.hasClass('dark')) toggleTheme()
+    cy.get('html').then((html) => {
+      if (html.hasClass('dark')) { toggleTheme() }
       assertTheme('light')
     })
 

docs/cypress/e2e/docsearch.cypress.cy.js

@@ -1,4 +1,6 @@
-import { visitHome, navigateTo, goBackHome, assertPage } from './helpers'
+import { describe, it } from 'vitest'
+import { cy } from 'cypress'
+import { assertPage, goBackHome, navigateTo, visitHome } from './helpers'
 
 describe('DocSearch', () => {
   const openSearchModal = () => {
@@ -15,7 +17,7 @@ describe('DocSearch', () => {
   const searchModal = () =>
     cy.get('.DocSearch-Modal')
 
-  const closeSearchModal = () =>{
+  const closeSearchModal = () => {
     cy.get('body').type('{esc}')
     searchModal().should('not.exist')
   }

docs/cypress/e2e/helpers.js

@@ -1,6 +1,8 @@
+import { cy } from 'cypress'
+
 export const assertPage = ({ title, content }) => {
   cy.get('h1').should('contain', title)
-  if (content) cy.get('p').should('contain', content)
+  if (content) { cy.get('p').should('contain', content) }
 }
 
 export const navigateTo = (title) => {

docs/cypress/e2e/home.cypress.cy.js

@@ -1,4 +1,6 @@
-import { visitHome, navigateTo, assertPage, goBackHome } from './helpers'
+import { describe, it } from 'vitest'
+import { cy } from 'cypress'
+import { assertPage, goBackHome, navigateTo, visitHome } from './helpers'
 
 describe('The Home Page', () => {
   it('successfully loads', () => {

docs/cypress/e2e/sidebar.cypress.cy.js

@@ -1,4 +1,6 @@
-import { visit, navigateTo, goBackHome, assertPage, waitForHydration } from './helpers'
+import { describe, it, test } from 'vitest'
+import { cy } from 'cypress'
+import { assertPage, visit, visitHome, waitForHydration } from './helpers'
 
 describe('Sidebar Toggle', () => {
   const sidebar = () =>