:wheelchair: Add ESLint a11y rules and another bunch of fixes

app/components/CookieMonster.vue

@@ -20,15 +20,15 @@
                     <p class="pt-2">You can read more on how I use cookies on <a href="/cookies">this page</a>.</p>
                 </div>
                 <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
-                    <button class="btn btn-success" @click="acceptMyChoice" role="button">Accept my choice</button>
-                    <button class="btn btn-info btn-outline" @click="acceptAll" role="button">Accept all cookies</button>
-                    <button class="btn btn-error text-white" @click="rejectAll" role="button">Reject all cookies</button>
+                    <button class="btn btn-success" @click="acceptMyChoice">Accept my choice</button>
+                    <button class="btn btn-info btn-outline" @click="acceptAll">Accept all cookies</button>
+                    <button class="btn btn-error text-white" @click="rejectAll">Reject all cookies</button>
                 </div>
             </div>
         </div>
-        <div v-else class="fixed max-w-0 bottom-2 sm:right-16 right-11 cursor-pointer" @click="isOpen = true">
+        <button v-else class="fixed max-w-0 bottom-2 sm:right-16 right-11 cursor-pointer" @click="isOpen = true">
             <ClientOnly><fa-icon icon="fa-solid fa-cookie-bite" class="sm:text-6xl text-4xl text-sky-500" /></ClientOnly>
-        </div>
+        </button>
     </aside>
 </template>
 

app/components/Cubetti.vue

@@ -39,7 +39,7 @@
         MathUtils,
         LinearToneMapping,
     } from 'three';
-    import { animate, stagger, type AnimationParams } from 'animejs';
+    import { animate, stagger } from 'animejs';
 
     const scene = new Scene()
     const camera = new PerspectiveCamera(80, 1, 0.1, 1000)
@@ -103,7 +103,8 @@
     function playRandomAnimation() {
         setTimeout(() => {
             const n = MathUtils.randInt(0, cubettiAnims.length-1)
-            const a = cubettiAnims[n] as any
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const a = cubettiAnims[n] as any;
             animate(a.targets, a.params)
         }, MathUtils.randInt(1000, 8000))
     }

app/components/Footer.vue

@@ -1,9 +1,9 @@
 <template>
-    <footer role="contentinfo" class="container mx-auto max-w-screen-lg sm:px-6 px-2">
+    <footer class="container mx-auto max-w-screen-lg sm:px-6 px-2">
         <div class="text-white grid grid-cols-3 py-6">
             <div class="col-start-1 col-span-3 sm:col-span-1">
                 <p><a href="/colophon"><client-only><fa-icon icon="fa-regular fa-circle-question" class="pr-2" /></client-only>About this site…</a></p>
-                <p class="hidden"><a rel="me" href="https://livellosegreto.it/@morpheu5">&nbsp;</a></p>
+                <p class="hidden"><a rel="me" href="https://livellosegreto.it/@morpheu5">Me on Mastodon</a></p>
             </div>
             <div class="col-start-1 col-span-2 sm:col-start-2 sm:col-span-2">
                 <p class="mt-2 sm:mt-0 sm:text-right"><client-only><fa-icon icon="fa-regular fa-copyright" class="pr-2" /></client-only>Unless otherwise specified, the content of this site is licensed as <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a>.</p>

app/components/TopBanner.vue

@@ -1,5 +1,5 @@
 <template>
-    <header :class="`top_banner print:hidden page ${pageClasses.join(' ')}`" role="banner">
+    <header :class="`top_banner print:hidden page ${pageClasses.join(' ')}`">
         <div class="container mx-auto max-w-screen-xl z-10">
             <a href="/">
                 <ClientOnly>

app/error.vue

@@ -1,38 +1,36 @@
 <template>
-    <div>
-        <TopBanner>
-            <template #headline><slot name="headline">{{ error.statusCode }}</slot></template>
-            <template #tagline><slot name="tagline">means I f*cked up…</slot></template>
-        </TopBanner>
-        <div id="content_box" :class="`flex flex-col bg-white pt-12 sm:pt-24`">
-            <ClientOnly><CookieMonster /></ClientOnly>
-            <MainMenu />
-
-            <main class="container mx-auto max-w-screen-lg sm:px-12 px-2 prose">
-                <article class="body grid grid-cols-1 gap-x-12 gap-y-0">
-                    <h3 class="text-5xl text-center -mt-6 sm:-mt-16">
-                        Sorry, I messed up.
-                    </h3>
-
-                    <p class="pt-12 py-6">Please copy the following error report and <a href="/contact" class="text-sky-500 underline">get in touch</a>.</p>
-
-                    <div>
-                        <span @click="copyToClipboard" class="btn btn-info btn-outline float-right">Copy to clipboard</span>
-                        <div id="errorReport">    
-                            <p>Error code: {{ error.statusCode }}</p>
-                            <p>Message: {{ error.message }}</p>
-                            <p>URL: {{ error.url }}</p>
-                            <p v-if="error.data">Additional data: {{ error.data }}</p>
-                            <div v-html="error.description" />
-                        </div>
+    <TopBanner>
+        <template #headline><slot name="headline">{{ error.statusCode }}</slot></template>
+        <template #tagline><slot name="tagline">means I f*cked up…</slot></template>
+    </TopBanner>
+    <div id="content_box" :class="`flex flex-col bg-white pt-12 sm:pt-24`">
+        <ClientOnly><CookieMonster /></ClientOnly>
+        <MainMenu />
+
+        <main class="container mx-auto max-w-screen-lg sm:px-12 px-2 prose">
+            <article class="body grid grid-cols-1 gap-x-12 gap-y-0">
+                <h3 class="text-5xl text-center -mt-6 sm:-mt-16">
+                    Sorry, I messed up.
+                </h3>
+
+                <p class="pt-12 py-6">Please copy the following error report and <a href="/contact" class="text-sky-500 underline">get in touch</a>.</p>
+
+                <div>
+                    <button @click="copyToClipboard" class="btn btn-info btn-outline float-right">Copy to clipboard</button>
+                    <div id="errorReport">    
+                        <p>Error code: {{ error.statusCode }}</p>
+                        <p>Message: {{ error.message }}</p>
+                        <p>URL: {{ error.url }}</p>
+                        <p v-if="error.data">Additional data: {{ error.data }}</p>
+                        <div v-html="error.description" />
                     </div>
+                </div>
 
-                    <p>&nbsp;</p><p>&nbsp;</p>
-                </article>
-            </main>
-        </div>
-        <Footer />
+                <p>&nbsp;</p><p>&nbsp;</p>
+            </article>
+        </main>
     </div>
+    <Footer />
 </template>
 
 <style lang="pcss">
@@ -43,19 +41,20 @@ article.body h2 {
 }
 </style>
 
-<script setup>
+<script lang="ts" setup>
+// eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
 const props = defineProps({
     error: Object
 })
 
 const copyToClipboard = () => {
-    navigator.permissions.query({ name: 'clipboard-write' }).then(result => {
-        if (result.state === 'granted' || result.state === 'prompt') {
-            const element = document.getElementById('errorReport');
-            navigator.clipboard.writeText(element.innerText).then(() => {
-                alert("Error report copied. Head over to the contact section and get in touch!");
-            });
-        }
-    });
+    const element = document.getElementById('errorReport');
+    if (navigator.clipboard && element) {
+        navigator.clipboard.writeText(element.innerText).then(() => {
+            alert("Error report copied. Head over to the contact section and get in touch!");
+        });
+    } else {
+        alert("Clipboard API not available.");
+    }
 }
 </script>

app/pages/404.vue

@@ -11,7 +11,7 @@
     </main>
 </NuxtLayout></template>
 
-<script setup>
+<script lang="ts" setup>
 definePageMeta({
     layout: false
 });

app/pages/colophon.vue

@@ -2,7 +2,7 @@
     <template #headline>{{ headline }}</template>
     <template #tagline>{{ tagline }}</template>
 
-    <main class="container mx-auto max-w-screen-lg sm:px-12 px-2 prose" role="main" aria-label="Colophon">
+    <main class="container mx-auto max-w-screen-lg sm:px-12 px-2 prose" aria-label="Colophon">
         <article class="body grid sm:grid-cols-2 grid-cols-1 gap-x-12 gap-y-0">
             <h2>Colophon</h2>
             <section class="col-span-1 sm:col-span-2">

app/pages/contact.vue

@@ -2,30 +2,30 @@
     <template #headline>{{ headline }}</template>
     <template #tagline>{{ tagline }}</template>
 
-    <main class="container mx-auto max-w-screen-lg sm:px-12 px-2 mb-12 prose" role="main" aria-label="Contact information">
+    <main class="container mx-auto max-w-screen-lg sm:px-12 px-2 mb-12 prose" aria-label="Contact information">
         <article class="body grid sm:grid-cols-2 grid-cols-1 gap-x-12 gap-y-0">
             <section class="links">
                 <p>You can find me on these web sites…</p>
                 <div class="text-center ml-2">
-                    <a rel="me" href="https://blog.morpheu5.net"><client-only><fa-icon icon="fa-solid fa-blog" alt="MorphLog" style="color: black" aria-hidden="true" /></client-only></a>
-                    <a rel="me" href="https://orcid.org/0000-0001-8665-6147"><client-only><fa-icon icon="fa-brands fa-orcid" alt="ORCID" style="color: #a6cf39" aria-hidden="true" /></client-only></a>
-                    <a rel="me" href="https://www.linkedin.com/in/andreafranceschini"><client-only><fa-icon icon="fa-brands fa-linkedin" alt="LinkedIn" style="color: #0077b5" aria-hidden="true" /></client-only></a>
-                    <a rel="me" href="https://github.com/Morpheu5"><client-only><fa-icon icon="fa-brands fa-github" alt="GitHub" style="color: black" aria-hidden="true" /></client-only></a>
+                    <a rel="me" href="https://blog.morpheu5.net"><client-only><fa-icon icon="fa-solid fa-blog" alt="MorphLog" style="color: black" aria-hidden="true" /></client-only><span class="hidden">MorphLog</span></a>
+                    <a rel="me" href="https://orcid.org/0000-0001-8665-6147"><client-only><fa-icon icon="fa-brands fa-orcid" alt="ORCID" style="color: #a6cf39" aria-hidden="true" /></client-only><span class="hidden">ORCID</span></a>
+                    <a rel="me" href="https://www.linkedin.com/in/andreafranceschini"><client-only><fa-icon icon="fa-brands fa-linkedin" alt="LinkedIn" style="color: #0077b5" aria-hidden="true" /></client-only><span class="hidden">LinkedIn</span></a>
+                    <a rel="me" href="https://github.com/Morpheu5"><client-only><fa-icon icon="fa-brands fa-github" alt="GitHub" style="color: black" aria-hidden="true" /></client-only><span class="hidden">GitHub</span></a>
                 </div>
                 <div class="mt-4 text-center">
-                    <a rel="me" href="https://apps.apple.com/it/developer/andrea-franceschini/id454062630"><client-only><fa-icon icon="fa-brands fa-app-store-ios" alt="App Store" style="color: #2296f3" aria-hidden="true" /></client-only></a>
-                    <a rel="me" href="http://play.google.com/store/apps/developer?id=Andrea+Franceschini&amp;hl=it_IT"><client-only><fa-icon icon="fa-brands fa-google-play" alt="Google Play" style="color: #3BCCFF" aria-hidden="true" /></client-only></a>
-                    <a rel="me" href="https://twitter.com/morpheu5"><client-only><fa-icon icon="fa-brands fa-twitter" alt="Twitter" style="color: #55acee" aria-hidden="true" /></client-only></a>
-                    <a rel="me" href="https://livellosegreto.it/@morpheu5"><client-only><fa-icon icon="fa-brands fa-mastodon" alt="Mastodon" style="color: #6364FF" aria-hidden="true" /></client-only></a>
+                    <a rel="me" href="https://apps.apple.com/it/developer/andrea-franceschini/id454062630"><client-only><fa-icon icon="fa-brands fa-app-store-ios" alt="App Store" style="color: #2296f3" aria-hidden="true" /></client-only><span class="hidden">Apple App Store</span></a>
+                    <a rel="me" href="http://play.google.com/store/apps/developer?id=Andrea+Franceschini&amp;hl=it_IT"><client-only><fa-icon icon="fa-brands fa-google-play" alt="Google Play" style="color: #3BCCFF" aria-hidden="true" /></client-only><span class="hidden">Google Play Store</span></a>
+                    <a rel="me" href="https://twitter.com/morpheu5"><client-only><fa-icon icon="fa-brands fa-twitter" alt="Twitter" style="color: #55acee" aria-hidden="true" /></client-only><span class="hidden">Twitter</span></a>
+                    <a rel="me" href="https://livellosegreto.it/@morpheu5"><client-only><fa-icon icon="fa-brands fa-mastodon" alt="Mastodon" style="color: #6364FF" aria-hidden="true" /></client-only><span class="hidden">Mastodon</span></a>
                 </div>
                 <div class="mt-4 text-center">
-                    <a rel="me" href="https://instagram.com/ilmoppe"><client-only><fa-icon icon="fa-brands fa-instagram" alt="Instagram" style="color: #E1306C" aria-hidden="true" /></client-only></a>
-                    <a rel="me" href="https://www.flickr.com/photos/morpheu5"><client-only><fa-icon icon="fa-brands fa-flickr" alt="Flickr" style="color: #0062DD" aria-hidden="true" /></client-only></a>
-                    <a rel="me" href="https://soundcloud.com/ilmoppe"><client-only><fa-icon icon="fa-brands fa-soundcloud" alt="SoundClound" style="color: #FE5000" aria-hidden="true" /></client-only></a>
+                    <a rel="me" href="https://instagram.com/ilmoppe"><client-only><fa-icon icon="fa-brands fa-instagram" alt="Instagram" style="color: #E1306C" aria-hidden="true" /></client-only><span class="hidden">Instagram</span></a>
+                    <a rel="me" href="https://www.flickr.com/photos/morpheu5"><client-only><fa-icon icon="fa-brands fa-flickr" alt="Flickr" style="color: #0062DD" aria-hidden="true" /></client-only><span class="hidden">Flickr</span></a>
+                    <a rel="me" href="https://soundcloud.com/ilmoppe"><client-only><fa-icon icon="fa-brands fa-soundcloud" alt="SoundClound" style="color: #FE5000" aria-hidden="true" /></client-only><span class="hidden">SoundCloud</span></a>
                 </div>
                 <div class="mt-4 text-center">
-                    <a rel="me" href="https://www.youtube.com/user/therealmorpheu5"><client-only><fa-icon icon="fa-brands fa-youtube" alt="YouTube" style="color: #FF0000" aria-hidden="true" /></client-only></a>
-                    <a rel="me" href="https://deviantart.com/morpheu5"><client-only><fa-icon icon="fa-brands fa-deviantart" alt="DeviantArt" style="color: #4DC47D" aria-hidden="true" /></client-only></a>
+                    <a rel="me" href="https://www.youtube.com/user/therealmorpheu5"><client-only><fa-icon icon="fa-brands fa-youtube" alt="YouTube" style="color: #FF0000" aria-hidden="true" /></client-only><span class="hidden">YouTube</span></a>
+                    <a rel="me" href="https://deviantart.com/morpheu5"><client-only><fa-icon icon="fa-brands fa-deviantart" alt="DeviantArt" style="color: #4DC47D" aria-hidden="true" /></client-only><span class="hidden">DeviantArt</span></a>
                 </div>
             </section>
             <section class="email">

app/pages/cookies.vue

@@ -2,7 +2,7 @@
     <template #headline>{{ headline }}</template>
     <template #tagline>{{ tagline }}</template>
 
-    <main class="container mx-auto max-w-screen-lg sm:px-12 px-2 prose" role="main" aria-label="Cookie policy">
+    <main class="container mx-auto max-w-screen-lg sm:px-12 px-2 prose" aria-label="Cookie policy">
         <article class="grid sm:grid-cols-2 grid-cols-1 gap-x-12 gap-y-0">
             <section class="col-span-1 sm:col-span-2 pb-8">
                 <p><strong>Cookies are not always bad</strong>. Sometimes they are bad, sometimes they are useful.

app/pages/cv.vue

@@ -2,7 +2,7 @@
     <template #headline>{{ headline }}</template>
     <template #tagline>{{ tagline }}</template>
 
-    <main class="container mx-auto max-w-screen-lg sm:px-12 px-2 prose" role="main" aria-label="Curriculum Vitae of Andrea Franceschini">
+    <main class="container mx-auto max-w-screen-lg sm:px-12 px-2 prose" aria-label="Curriculum Vitae of Andrea Franceschini">
         <article class="body">
             <section id="personal" class="macro">
                 <h2 class="">Personal information</h2>

app/pages/development.vue

@@ -2,7 +2,7 @@
     <template #headline>{{ headline }}</template>
     <template #tagline>{{ tagline }}</template>
 
-    <main class="container mx-auto max-w-screen-lg sm:px-12 px-2 prose" role="main" aria-label="Development">
+    <main class="container mx-auto max-w-screen-lg sm:px-12 px-2 prose" aria-label="Development">
         <article class="body grid sm:grid-cols-2 grid-cols-1 gap-x-12 gap-y-0">
             <section class="full col-start-1 sm:col-span-2">
                 <p>I have been writing code for as long as I can remember &ndash; yes, that must have been around 1990, with my Amiga 500. It has been a long journey, and I learned a thing or two along the way.</p>

app/pages/eumyths.vue

@@ -2,13 +2,13 @@
     <template #headline>{{ headline }}</template>
     <template #tagline>{{ tagline }}</template>
 
-    <main class="container mx-auto max-w-screen-lg sm:px-12 px-2 prose" role="main" aria-label="British EU Myths">
+    <main class="container mx-auto max-w-screen-lg sm:px-12 px-2 prose" aria-label="British EU Myths">
         <article class="body grid grid-cols-1 gap-x-12 gap-y-0">
             <h2>British EU Myths</h2>
             <h3><strong>A <a href="https://en.wikipedia.org/wiki/Internet_bot">bot</a> that <a href="https://en.wikipedia.org/wiki/Debunker">debunks</a> <a href="https://en.wikipedia.org/wiki/Fake_news">fake news</a></strong></h3>
             <p class="text-pink-800 font-bold"><strong>The bot is currently on hiatus.</strong></p>
             <p>
-                <a href="https://twitter.com/eumyths"><img src="/images/eubot.webp" style="width: 150px; height: 150px; float: right; margin: 0 16px" /></a>
+                <a href="https://twitter.com/eumyths"><img src="/images/eubot.webp" alt="EU Bot" style="width: 150px; height: 150px; float: right; margin: 0 16px" /></a>
                 The European Commission <a href="https://blogs.ec.europa.eu/ECintheUK/euromyths-a-z-index/">has archived an astonishing 426 lies</a> that the British press told about the European Union between 1992 and 2017.
                 It is widely accepted that <a href="https://www.theguardian.com/commentisfree/2016/jul/15/brexit-boris-johnson-euromyths-telegraph-brussels">this trend was started by Boris Johnson</a>, a man who has a track record that would make Pinocchio blush, while he was posted as the Daily Telegraph's Brussels correspondent between 1989 and 1994, and was happily followed by pretty much every other newspaper in the United Kingom ever since.
             </p>

app/pages/index.vue

@@ -1,26 +1,30 @@
 <template><NuxtLayout name="default">
-    <main class="container mx-auto max-w-screen-xl md:px-12 sm:px-0 px-0" role="main" aria-label="Home page">
+    <main class="container mx-auto max-w-screen-xl md:px-12 sm:px-0 px-0" aria-label="Home page">
         <h3 class="sm:text-5xl text-3xl text-center -mt-6 sm:-mt-16 font-display">
             I do things.
         </h3>
         <div class="grid sm:grid-cols-2 gap-6 mx-auto sm:py-8 py-6 col">
             <div class="aspect-w-16 aspect-h-9 shadow-lg">
-                <a href="https://edugames.andreafranceschini.org/"><video autoplay loop muted class="rounded">
-                    <source src="/images/gneg.mp4" type="video/mp4" />
-                    Your browser does not support the video tag.
-                </video></a>
+                <a href="https://edugames.andreafranceschini.org/">
+                    <video autoplay loop muted class="rounded">
+                        <source src="/images/gneg.mp4" type="video/mp4" />
+                        Your browser does not support the video tag.
+                    </video>
+                    <caption class="hidden">Title card for project EduGames</caption>
+                </a>
             </div>
             <div class="aspect-w-16 aspect-h-9 shadow-lg">
-                <a href="https://edugames.andreafranceschini.org/cash-or-card" title="Title screen for the game Cash or Card?"><figure>
+                <a href="https://edugames.andreafranceschini.org/cash-or-card"><figure>
                     <picture>
                         <source srcset="/images/cash_or_card-2x.webp" type="image/webp" />
                         <source srcset="/images/cash_or_card.jpg 1x, /images/cash_or_card-2x.jpg 2x" type="image/jpeg" />
                         <img class="rounded" srcset="/images/cash_or_card.jpg" alt="Circular Bells" />
                     </picture>
+                    <caption class="hidden">Title screen for the game "Cash or Card?"</caption>
                 </figure></a>
             </div>
             <!-- <div class="aspect-w-16 aspect-h-9 shadow-lg hidden sm:block">
-                <iframe ref="video" loading="lazy" data-src="https://www.youtube-nocookie.com/embed/AszBiqrvAaU" title="How to make your computer go BOOP" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+                <iframe ref="video" lang="en" loading="lazy" data-src="https://www.youtube-nocookie.com/embed/AszBiqrvAaU" title="How to make your computer go BOOP" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
             </div> -->
         </div>
         <h3 class="sm:text-4xl text-3xl pb-8 text-center">
@@ -146,11 +150,10 @@ useHead({
     ]
 });
 
-const video = ref<HTMLIFrameElement>();
+// const video = ref<HTMLIFrameElement>();
 
-onMounted(() => {
-    // @ts-ignore
-    const src = video.value?.dataset['src'];
-    video.value?.setAttribute('src', src || '');
-});
+// onMounted(() => {
+//     const src = video.value?.dataset['src'];
+//     video.value?.setAttribute('src', src || '');
+// });
 </script>

app/pages/research.vue

@@ -2,7 +2,7 @@
     <template #headline>{{ headline }}</template>
     <template #tagline>{{ tagline }}</template>
 
-    <main class="container mx-auto max-w-screen-lg sm:px-12 px-2 prose" role="main" aria-label="Research">
+    <main class="container mx-auto max-w-screen-lg sm:px-12 px-2 prose" aria-label="Research">
         <article class="body grid sm:grid-cols-2 grid-cols-1 gap-x-12 gap-y-0">
             <h2>Current research</h2>
             <section class="sm:col-start-1">

app/pages/writing.vue

@@ -2,7 +2,7 @@
     <template #headline>{{ headline }}</template>
     <template #tagline>{{ tagline }}</template>
 
-    <main class="container mx-auto max-w-screen-lg sm:px-12 px-2 prose" role="main" aria-label="Writing">
+    <main class="container mx-auto max-w-screen-lg sm:px-12 px-2 prose" aria-label="Writing">
         <article class="body grid sm:grid-cols-2 grid-cols-1 gap-x-12 gap-y-0">
             <section class="full sm:col-span-2">
                 <p>Did you know that researchers spend about half of their professional lives doing academic and technical writing? For example, research students spend at least a third of their studies writing their theses, without counting papers, and bids for grants.</p>

app/plugins/modernizr.client.js

@@ -1,4 +1,4 @@
-export default defineNuxtPlugin(nuxtApp => {
+export default defineNuxtPlugin(_nuxtApp => {
   /*!
   * modernizr v3.6.0
   * Build https://modernizr.com/download?-webp-setclasses-dontmin
@@ -23,7 +23,7 @@ export default defineNuxtPlugin(nuxtApp => {
   * of control over the experience.
   */
 
-  ;(function(window, document, undefined){
+  ;(function(window, document, _undefined){
     var classes = [];
     
 
@@ -62,6 +62,7 @@ export default defineNuxtPlugin(nuxtApp => {
         // This is in case people listen to synchronous tests. I would leave it out,
         // but the code to *disallow* sync tests in the real version of this
         // function is actually larger than this.
+        // eslint-disable-next-line @typescript-eslint/no-this-alias
         var self = this;
         setTimeout(function() {
           cb(self[test]);

eslint.config.ts

@@ -0,0 +1,47 @@
+import pluginVue from 'eslint-plugin-vue'
+import { globalIgnores } from 'eslint/config';
+import {
+  defineConfigWithVueTs,
+  vueTsConfigs,
+} from '@vue/eslint-config-typescript'
+import pluginVueA11y from "eslint-plugin-vuejs-accessibility";
+
+export default defineConfigWithVueTs(
+  pluginVue.configs['flat/essential'],
+  vueTsConfigs.recommended,
+  ...pluginVueA11y.configs["flat/recommended"],
+  {
+    rules: {
+      "vue/multi-word-component-names": 0,
+      "no-unused-vars": ["error", { "argsIgnorePattern": "^_" }],
+      "@typescript-eslint/no-unused-vars": ["error", { "argsIgnorePattern": "^_" }],
+    }
+  },
+  globalIgnores([
+    ".output/",
+    ".nuxt",
+  ])
+)
+
+
+// import eslint from '@eslint/js';
+// import tseslint from 'typescript-eslint';
+// import pluginVueA11y from "eslint-plugin-vuejs-accessibility";
+// import { globalIgnores } from 'eslint/config';
+
+// export default tseslint.config([
+//   // add more generic rulesets here, such as:
+//   eslint.configs.recommended,
+//   tseslint.configs.recommended,
+//   ...pluginVueA11y.configs["flat/recommended"],
+//   {
+//     rules: {
+//       // override/add rules settings here, such as:
+//       // "vuejs-accessibility/alt-text": "error"
+//     }
+//   },
+//   globalIgnores([
+//     ".output/",
+//     ".nuxt",
+//   ])
+// ]);

package.json

@@ -36,6 +36,10 @@
     "vue-router": "^4.5.1"
   },
   "devDependencies": {
-    "@types/three": "^0.178.1"
+    "@eslint/js": "^9.32.0",
+    "@types/three": "^0.178.1",
+    "@vue/eslint-config-typescript": "^14.6.0",
+    "eslint-plugin-vuejs-accessibility": "^2.4.1",
+    "typescript-eslint": "^8.38.0"
   }
 }