Migrate to eslint 9

TechWatching · TechWatching · commit cf32f672b865 · 2024-11-26T23:02:49.000+01:00
diff --git a/.eslintignore b/.eslintignore
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
diff --git a/components/AppFooter.vue b/components/AppFooter.vue
diff --git a/components/AppHeader.vue b/components/AppHeader.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type {NavItem} from '@nuxt/content/dist/runtime/types'
-import {NuxtImg} from "#components";
+import type {NavItem} from '@nuxt/content'
+import {NuxtImg} from '#components'
 
 const navigation = inject<Ref<NavItem[]>>('navigation', ref([]))
 
diff --git a/components/ContactForm.vue b/components/ContactForm.vue
@@ -24,7 +24,6 @@ const submitJsonApiKey = config.public.submitJsonApiKey
 const sj = new SubmitJSON({ apiKey: submitJsonApiKey, endpoint: '3blcoDHQS' })
 const toast = useToast()
 async function onSubmit (event: FormSubmitEvent<Schema>) {
-  let toastMessage = ''
   try {
     await sj.submit(event.data)
     toast.add({
@@ -34,7 +33,7 @@ async function onSubmit (event: FormSubmitEvent<Schema>) {
     })
     await navigateTo({ path: '/' })
   }
-  catch (error) {
+  catch {
     toast.add({
       title: 'Oops',
       description: 'Sorry, your message was not successfully sent, try again or contact me by message on LinkedIn/BueSky/Mastodon.',
diff --git a/components/ImagePlaceholder.vue b/components/ImagePlaceholder.vue
@@ -1,7 +1,10 @@
 <template>
   <div class="bg-gray-900/5 dark:bg-white/5 ring-1 ring-inset ring-gray-900/10 dark:ring-white/10 rounded-xl lg:-m-4 p-4">
     <div class="aspect-w-16 aspect-h-9 rounded-lg relative overflow-hidden border border-dashed border-gray-900/10 dark:border-white/10">
-      <svg class="absolute inset-0 h-full w-full stroke-gray-900/10 dark:stroke-white/10" fill="none">
+      <svg
+        class="absolute inset-0 h-full w-full stroke-gray-900/10 dark:stroke-white/10"
+        fill="none"
+      >
         <defs>
           <pattern
             id="pattern-5c1e4f0e-62d5-498b-8ff0-cf77bb448c8e"
@@ -14,7 +17,12 @@
             <path d="M-3 13 15-5M-5 5l18-18M-1 21 17 3" />
           </pattern>
         </defs>
-        <rect stroke="none" fill="url(#pattern-5c1e4f0e-62d5-498b-8ff0-cf77bb448c8e)" width="100%" height="100%" />
+        <rect
+          stroke="none"
+          fill="url(#pattern-5c1e4f0e-62d5-498b-8ff0-cf77bb448c8e)"
+          width="100%"
+          height="100%"
+        />
       </svg>
     </div>
   </div>
diff --git a/components/PostsTags.vue b/components/PostsTags.vue
@@ -7,7 +7,8 @@ defineProps<{ tags: string[] }>()
 <template>
   <UDivider type="dashed" label="Tags"/>
   <div class="flex flex-wrap w-full items-center gap-3 mt-5">
-    <UBadge v-for="(tag, index) in tags"
+    <UBadge
+v-for="(tag, index) in tags"
             :key="index"
             :ui="{base: 'text-center justify-center'}">
       <NuxtLink :to="`/tags/${getTagSlug(tag)}`">{{tag}}</NuxtLink>
diff --git a/components/content/Tweet.vue b/components/content/Tweet.vue
@@ -28,14 +28,14 @@ const loaded = ref(false)
 const tweetNotFound = ref(false)
 
 async function create(retries = 10) {
-  // @ts-expect-error global
+  // @ts-expect-error global external script injected
   if (!window.twttr?.widgets?.createTweet) {
     if (retries <= 0)
       return console.error('Failed to load Twitter widget after 10 retries.')
     setTimeout(() => create(retries - 1), 1000)
     return
   }
-  // @ts-expect-error global
+  // @ts-expect-error global external script injected
   const element = await window.twttr.widgets.createTweet(
     props.id.toString(),
     tweet.value,
diff --git a/error.vue b/error.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { NuxtError } from '#app'
-import type { ParsedContent } from '@nuxt/content/dist/runtime/types'
+import type { ParsedContent } from '@nuxt/content/'
 
 useSeoMeta({
   title: 'Page not found',
diff --git a/eslint.config.mjs b/eslint.config.mjs
@@ -0,0 +1,7 @@
+// @ts-check
+import withNuxt from './.nuxt/eslint.config.mjs'
+export default withNuxt({
+  rules: {
+    '@typescript-eslint/no-explicit-any': 'off'
+  }
+})
diff --git a/layouts/default.vue b/layouts/default.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { ParsedContent } from '@nuxt/content/dist/runtime/types'
+import type { ParsedContent } from '@nuxt/content/'
 
 const { data: navigation } = await useAsyncData('navigation', () => fetchContentNavigation(), { default: () => [] })
 const { data: files } = useLazyFetch<ParsedContent[]>('/api/search.json', { default: () => [], server: false })
@@ -9,13 +9,13 @@ provide('navigation', navigation)
 
 <template>
   <div>
-    <Header />
+    <AppHeader />
 
     <UMain>
       <slot />
     </UMain>
 
-    <Footer />
+    <AppFooter />
 
     <ClientOnly>
       <LazyUContentSearch :files="files" :navigation="navigation" />
diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -14,7 +14,8 @@ export default defineNuxtConfig({
     'nuxt-og-image',
     "@stefanobartoletti/nuxt-social-share",
     "@nuxtjs/seo",
-    "@nuxtjs/mdc"
+    "@nuxtjs/mdc",
+    '@nuxt/eslint'
   ],
   content: {
     highlight: {
@@ -72,4 +73,4 @@ export default defineNuxtConfig({
     }
   },
   compatibilityDate: '2024-09-05'
-})
+})
diff --git a/package.json b/package.json
@@ -9,6 +9,7 @@
     "preview": "nuxt preview",
     "postinstall": "nuxt prepare",
     "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
     "typecheck": "nuxt typecheck"
   },
   "dependencies": {
@@ -32,13 +33,14 @@
     "zod": "^3.23.8"
   },
   "devDependencies": {
-    "@iconify-json/vscode-icons": "^1.2.2",
-    "@nuxt/eslint-config": "^0.6.0",
+    "@nuxt/eslint": "^0.7.2",
     "@nuxthq/studio": "^2.2.1",
     "@nuxtjs/seo": "2.0.2",
     "@stefanobartoletti/nuxt-social-share": "^1.2.0",
-    "eslint": "^8.57.1",
+    "eslint": "^9.15.0",
     "nuxt": "^3.14.1592",
+    "typescript": "^5.7.2",
     "vue-tsc": "^2.1.10"
-  }
+  },
+  "packageManager": "pnpm@9.12.0"
 }
diff --git a/pages/about.vue b/pages/about.vue
@@ -28,7 +28,7 @@ useSeoMeta({
       <img
         src="/images/bordeaux_1.jpg"
         class="w-full rounded-md shadow-xl ring-1 ring-gray-300 dark:ring-gray-700"
-        alt="Picture of Place de la Bourse (Bordeaux) at night."/>
+        alt="Picture of Place de la Bourse (Bordeaux) at night.">
     </UPageHero>
     <UPage>
       <UPageBody prose>
diff --git a/pages/goodies/[slug].vue b/pages/goodies/[slug].vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { withoutTrailingSlash, joinURL } from 'ufo'
 import type { BlogPost } from '~/types'
-import Giscus from '@giscus/vue'
 
 const route = useRoute()
 
@@ -35,16 +34,10 @@ if (post.value.image?.src) {
     twitterImage: joinURL(site.url, post.value.image.src)
   })
 } else {
-  defineOgImage({
-    component: 'Saas',
-    title,
-    description,
-    headline: 'Blog'
-  })
+  defineOgImageComponent('Saas', {
+    headline: 'Blog'})
 }
 
-const colorMode = useColorMode()
-const theme = computed(() => colorMode.value == "dark" ? "" : "light")
 </script>
 
 <template>
diff --git a/pages/goodies/index.vue b/pages/goodies/index.vue
@@ -24,8 +24,8 @@ const activeArticle = useState()
     <UPageHeader :title="title" :description="description"/>
     <UPageBody>
       <UBlogList>
-        <UBlogPost @click="activeArticle = index"
-          v-for="(article, index) in articles"
+        <UBlogPost
+v-for="(article, index) in articles"
           :key="index"
           :to="article._path"
           :title="article.title"
@@ -35,8 +35,8 @@ const activeArticle = useState()
           class="col-span-full"
           :class="activeArticle === index && 'active'"
           :ui="{ title: 'text-3xl', description: 'text-xl'}"
-        >
-        </UBlogPost>
+          @click="activeArticle = index"
+        />
       </UBlogList>
     </UPageBody>
   </UContainer>
diff --git a/pages/index.vue b/pages/index.vue
@@ -17,7 +17,8 @@ useSeoMeta({
 
 <template>
   <div v-if="page">
-    <ULandingHero :title="page.hero.title" :description="page.hero.description" :links="page.hero.links"
+    <ULandingHero
+:title="page.hero.title" :description="page.hero.description" :links="page.hero.links"
                   :ui="{description: 'text-primary dark:text-primary'}">
       <template #headline>
         <UAvatar
@@ -30,10 +31,12 @@ useSeoMeta({
       </template>
     </ULandingHero>
 
-    <ULandingSection :title="page.roles.title" :description="page.roles.description"
+    <ULandingSection
+:title="page.roles.title" :description="page.roles.description"
                      :ui="{description: 'text-primary dark:text-primary'}">
       <UPageGrid>
-        <ULandingCard v-for="(item, index) in page.roles.items" :key="index" v-bind="item"
+        <ULandingCard
+v-for="(item, index) in page.roles.items" :key="index" v-bind="item"
                       :ui="{ icon: { base: 'text-primary dark:text-primary' } }"/>
       </UPageGrid>
     </ULandingSection>
diff --git a/pages/posts/[slug].vue b/pages/posts/[slug].vue
@@ -3,6 +3,7 @@ import { withoutTrailingSlash, joinURL } from 'ufo'
 import type { BlogPost } from '~/types'
 import Giscus from '@giscus/vue'
 import {NuxtImg} from "#components";
+import PostsTags from "~/components/PostsTags.vue";
 
 const route = useRoute()
 
@@ -44,10 +45,7 @@ if (post.value.image?.src) {
     twitterImage: joinURL(site.url, post.value.image.src)
   })
 } else {
-  defineOgImage({
-    component: 'Saas',
-    title,
-    description,
+  defineOgImageComponent('Saas', {
     headline: 'Blog'
   })
 }
@@ -87,7 +85,7 @@ const theme = computed(() => colorMode.value == "dark" ? "" : "light")
         <ContentRenderer v-if="post && post.body" :value="post" class="prose prose-primary dark:prose-invert max-w-none" />
 
         <div class="block sm:hidden">
-          <Tags :tags="post.tags"></Tags>
+          <PostsTags :tags="post.tags"/>
           <SocialsShare/>
         </div>
 
@@ -100,7 +98,7 @@ const theme = computed(() => colorMode.value == "dark" ? "" : "light")
       <template #right>
         <UContentToc v-if="post.body && post.body.toc" :links="post.body.toc.links" :ui="{ wrapper: ''}"/>
         <div class="hidden sm:block">
-          <Tags :tags="post.tags"></Tags>
+          <PostsTags :tags="post.tags"/>
           <SocialsShare/>
         </div>
       </template>
@@ -117,8 +115,7 @@ const theme = computed(() => colorMode.value == "dark" ? "" : "light")
       input-position="top"
       :theme="theme"
       loading="lazy"
-      crossorigin="anonymous">
-    </Giscus>
+      crossorigin="anonymous"/>
   </UContainer>
 </template>
 
diff --git a/pages/posts/index.vue b/pages/posts/index.vue
@@ -18,11 +18,7 @@ useSeoMeta({
   ogDescription: page.value.description
 })
 
-defineOgImage({
-  component: 'Saas',
-  title: page.value.title,
-  description: page.value.description
-})
+defineOgImageComponent('Saas')
 const activePost = useState()
 </script>
 
@@ -34,8 +30,8 @@ const activePost = useState()
 
     <UPageBody>
       <UBlogList>
-        <UBlogPost @click="activePost = index"
-          v-for="(post, index) in posts"
+        <UBlogPost
+v-for="(post, index) in posts"
           :key="index"
           :to="post._path"
           :title="post.title"
@@ -49,6 +45,7 @@ const activePost = useState()
           :ui="{
             description: 'line-clamp-2'
           }"
+          @click="activePost = index"
         >
           <!-- <template #date>
               <time :datetime="post.date" class="ext-sm text-gray-500 dark:text-gray-400 font-medium pointer-events-none">
diff --git a/pages/tags/[tag].vue b/pages/tags/[tag].vue
@@ -46,8 +46,7 @@ useSeoMeta({
           :ui="{
             description: 'line-clamp-2'
           }"
-        >
-        </UBlogPost>
+        />
       </UBlogList>
     </UPageBody>
   </UContainer>
diff --git a/pages/tags/index.vue b/pages/tags/index.vue
@@ -19,7 +19,7 @@ const tagOccurences = computed(() => {
         return acc;
       }, new Map<string, number>()) ?? new Map<string, number>()
     return [...occurences.entries()]
-      .sort(([tagA, occurenceA], [tagB, occurenceB]) => occurenceB - occurenceA)
+      .sort(([_tagA, occurenceA], [_tagB, occurenceB]) => occurenceB - occurenceA)
   });
 
 const title = 'Tags'
@@ -40,7 +40,7 @@ useSeoMeta({
       <UPageHeader :title="title" :description="description"/>
       <UPageBody>
         <div class="flex flex-wrap place-content-evenly gap-5 mt-4">
-          <UChip size="2xl" v-for="[tag, occurence] in tagOccurences" :key="tag" :text="occurence">
+          <UChip v-for="[tag, occurence] in tagOccurences" :key="tag" size="2xl" :text="occurence">
             <UButton color="white" :to="getTagRoute(tag)">{{tag}}</UButton>
           </UChip>
         </div>
diff --git a/plugins/posthog.client.ts b/plugins/posthog.client.ts
@@ -1,6 +1,6 @@
 ﻿import { defineNuxtPlugin } from '#app'
 import posthog from 'posthog-js'
-export default defineNuxtPlugin(nuxtApp => {
+export default defineNuxtPlugin(_nuxtApp => {
   const runtimeConfig = useRuntimeConfig();
   const posthogPublicKey = runtimeConfig.public.posthogPublicKey
   const posthogHost = runtimeConfig.public.posthogHost
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/server/api/__sitemap__/urls.ts b/server/api/__sitemap__/urls.ts
diff --git a/server/feed.ts b/server/feed.ts
diff --git a/types/index.d.ts b/types/index.d.ts
