From 292ac98200e23b451dbdbe42ef7e15d90d9f18cb Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 23 Mar 2026 21:53:39 +0000
Subject: [PATCH 1/2] refactor: apply Nuxt best practices and clean code
 improvements

- Remove unnecessary explicit imports (leverage Nuxt auto-imports for utils and components)
- Extract duplicate getTimestamp into shared utils/date.ts
- Fix dead conditional in TalkPreviewCard (identical branches)
- Fix non-null assertion mixed with optional chaining in Hero.vue
- Extract repeated Motion animation config into constants in Hero.vue
- Add error handling to clipboard utility
- Replace raw <img> with <NuxtImg> for image optimization
- Use stable keys instead of array index in v-for loops
- Add build validation step to CI workflow

https://claude.ai/code/session_01D9Js2socgpErtmsWh88fMj
---
 .github/workflows/ci.yml                  |  3 +
 app/components/AppFooter.vue              |  4 +-
 app/components/LabCard.vue                |  2 -
 app/components/landing/Hero.vue           | 95 ++++++-----------------
 app/components/landing/LabsTeaser.vue     |  2 -
 app/components/landing/SpeakingTeaser.vue |  4 -
 app/components/talks/TalkPreviewCard.vue  |  4 +-
 app/pages/index.vue                       |  3 -
 app/pages/labs/[slug].vue                 |  7 +-
 app/pages/labs/index.vue                  |  2 -
 app/pages/speaking/[slug].vue             |  2 -
 app/pages/speaking/index.vue              |  3 -
 app/utils/clipboard.ts                    |  2 +
 app/utils/date.ts                         |  9 +++
 app/utils/labs.ts                         |  8 +-
 app/utils/speaking.ts                     | 10 ---
 16 files changed, 43 insertions(+), 117 deletions(-)
 create mode 100644 app/utils/date.ts

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 58d9ce9..2d2e1b8 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -32,3 +32,6 @@ jobs:
 
       - name: Typecheck
         run: pnpm run typecheck
+
+      - name: Build
+        run: pnpm run generate
diff --git a/app/components/AppFooter.vue b/app/components/AppFooter.vue
index 66fabfb..098e2ec 100644
--- a/app/components/AppFooter.vue
+++ b/app/components/AppFooter.vue
@@ -7,8 +7,8 @@ const { footer } = useAppConfig()
     <UContainer class="flex flex-col items-center gap-3">
       <div class="flex items-center gap-2">
         <UButton
-          v-for="(link, index) of footer?.links"
-          :key="index"
+          v-for="link of footer?.links"
+          :key="link['aria-label'] || link.to"
           v-bind="{ size: 'xs', color: 'neutral', variant: 'ghost', ...link }"
           class="text-highlighted hover:text-highlighted"
         />
diff --git a/app/components/LabCard.vue b/app/components/LabCard.vue
index 086ccdd..2d0e91a 100644
--- a/app/components/LabCard.vue
+++ b/app/components/LabCard.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { getLabPath, labStatusIconMap, labStatusMap, type LabEntry } from '../utils/labs'
-
 defineProps<{
   lab: LabEntry
 }>()
diff --git a/app/components/landing/Hero.vue b/app/components/landing/Hero.vue
index 5989057..7cf7254 100644
--- a/app/components/landing/Hero.vue
+++ b/app/components/landing/Hero.vue
@@ -15,6 +15,10 @@ const avatarSrc = computed(() => colorMode.value === 'dark'
   : global.picture?.light
 )
 
+const heroInitial = { scale: 1.1, opacity: 0, filter: 'blur(20px)' }
+const heroAnimate = { scale: 1, opacity: 1, filter: 'blur(0px)' }
+const heroTransition = (delay: number) => ({ duration: 0.6, delay })
+
 defineProps<{
   page: HeroPage
 }>()
@@ -31,25 +35,14 @@ defineProps<{
   >
     <template #headline>
       <Motion
-        :initial="{
-          scale: 1.1,
-          opacity: 0,
-          filter: 'blur(20px)'
-        }"
-        :animate="{
-          scale: 1,
-          opacity: 1,
-          filter: 'blur(0px)'
-        }"
-        :transition="{
-          duration: 0.6,
-          delay: 0.1
-        }"
+        :initial="heroInitial"
+        :animate="heroAnimate"
+        :transition="heroTransition(0.1)"
       >
         <NuxtImg
           class="size-18 rounded-full object-cover ring ring-default ring-offset-3 ring-offset-(--ui-bg)"
           :src="avatarSrc"
-          :alt="global.picture?.alt!"
+          :alt="global.picture?.alt ?? 'Profile picture'"
           width="72"
           height="72"
           sizes="72px"
@@ -63,20 +56,9 @@ defineProps<{
     <template #title>
       <div class="space-y-4 text-center">
         <Motion
-          :initial="{
-            scale: 1.1,
-            opacity: 0,
-            filter: 'blur(20px)'
-          }"
-          :animate="{
-            scale: 1,
-            opacity: 1,
-            filter: 'blur(0px)'
-          }"
-          :transition="{
-            duration: 0.6,
-            delay: 0.1
-          }"
+          :initial="heroInitial"
+          :animate="heroAnimate"
+          :transition="heroTransition(0.1)"
         >
           <p class="text-sm font-medium uppercase tracking-[0.28em] text-muted">
             {{ page.hero.name }}
@@ -84,20 +66,9 @@ defineProps<{
         </Motion>
 
         <Motion
-          :initial="{
-            scale: 1.1,
-            opacity: 0,
-            filter: 'blur(20px)'
-          }"
-          :animate="{
-            scale: 1,
-            opacity: 1,
-            filter: 'blur(0px)'
-          }"
-          :transition="{
-            duration: 0.6,
-            delay: 0.2
-          }"
+          :initial="heroInitial"
+          :animate="heroAnimate"
+          :transition="heroTransition(0.2)"
         >
           {{ page.hero.role }}
         </Motion>
@@ -106,20 +77,9 @@ defineProps<{
 
     <template #description>
       <Motion
-        :initial="{
-          scale: 1.1,
-          opacity: 0,
-          filter: 'blur(20px)'
-        }"
-        :animate="{
-          scale: 1,
-          opacity: 1,
-          filter: 'blur(0px)'
-        }"
-        :transition="{
-          duration: 0.6,
-          delay: 0.35
-        }"
+        :initial="heroInitial"
+        :animate="heroAnimate"
+        :transition="heroTransition(0.35)"
       >
         {{ page.hero.intro }}
       </Motion>
@@ -127,25 +87,14 @@ defineProps<{
 
     <template #links>
       <Motion
-        :initial="{
-          scale: 1.1,
-          opacity: 0,
-          filter: 'blur(20px)'
-        }"
-        :animate="{
-          scale: 1,
-          opacity: 1,
-          filter: 'blur(0px)'
-        }"
-        :transition="{
-          duration: 0.6,
-          delay: 0.5
-        }"
+        :initial="heroInitial"
+        :animate="heroAnimate"
+        :transition="heroTransition(0.5)"
       >
         <div class="flex flex-wrap items-center justify-center gap-3">
           <UButton
-            v-for="(link, index) of footer?.links"
-            :key="index"
+            v-for="link of footer?.links"
+            :key="link['aria-label'] || link.to"
             v-bind="{ size: 'xs', color: 'neutral', variant: 'ghost', ...link }"
             class="text-highlighted hover:text-highlighted"
           />
diff --git a/app/components/landing/LabsTeaser.vue b/app/components/landing/LabsTeaser.vue
index 60c9691..b83efca 100644
--- a/app/components/landing/LabsTeaser.vue
+++ b/app/components/landing/LabsTeaser.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { getLabPath, type LabEntry } from '../../utils/labs'
-
 type LabsSection = {
   title: string
   description: string
diff --git a/app/components/landing/SpeakingTeaser.vue b/app/components/landing/SpeakingTeaser.vue
index b53c9de..7830bc0 100644
--- a/app/components/landing/SpeakingTeaser.vue
+++ b/app/components/landing/SpeakingTeaser.vue
@@ -1,8 +1,4 @@
 <script setup lang="ts">
-import TalkPreviewCard from '../talks/TalkPreviewCard.vue'
-import type { TalkEntry } from '../../utils/speaking'
-import { getTalkPath } from '../../utils/speaking'
-
 type SpeakingSection = {
   title: string
   description: string
diff --git a/app/components/talks/TalkPreviewCard.vue b/app/components/talks/TalkPreviewCard.vue
index e7f8b37..feb20ad 100644
--- a/app/components/talks/TalkPreviewCard.vue
+++ b/app/components/talks/TalkPreviewCard.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import type { TalkEntry } from '../../utils/speaking'
-
 type PreviewAction = {
   label: string
   to: string
@@ -47,7 +45,7 @@ const subtitle = computed(() => {
     class="border border-default"
     :class="variant === 'list' ? 'h-full' : ''"
     :ui="{
-      body: variant === 'featured' ? 'p-6 sm:p-8' : 'p-6 sm:p-8'
+      body: 'p-6 sm:p-8'
     }"
   >
     <div
diff --git a/app/pages/index.vue b/app/pages/index.vue
index f1ad96f..093770d 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -1,7 +1,4 @@
 <script setup lang="ts">
-import { sortLabs } from '../utils/labs'
-import { getLatestTalk } from '../utils/speaking'
-
 const { data: page } = await useAsyncData('index', () => {
   return queryCollection('index').first()
 })
diff --git a/app/pages/labs/[slug].vue b/app/pages/labs/[slug].vue
index ce9ba0f..26deb18 100644
--- a/app/pages/labs/[slug].vue
+++ b/app/pages/labs/[slug].vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { formatLabDate, getLabSlug, labStatusIconMap, labStatusMap, sortLabs } from '../../utils/labs'
-
 const route = useRoute()
 const slug = Array.isArray(route.params.slug) ? route.params.slug[0] : route.params.slug
 
@@ -97,11 +95,12 @@ const hasImage = computed(() => Boolean(lab.value?.image))
               body: 'p-0'
             }"
           >
-            <img
+            <NuxtImg
               :src="lab.image"
               :alt="`${lab.title} project preview`"
               class="h-full w-full object-cover"
-            >
+              loading="lazy"
+            />
           </UCard>
 
           <UCard
diff --git a/app/pages/labs/index.vue b/app/pages/labs/index.vue
index 6635e28..a953d0c 100644
--- a/app/pages/labs/index.vue
+++ b/app/pages/labs/index.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { sortLabs } from '../../utils/labs'
-
 const { data: page } = await useAsyncData('labs-page', () => {
   return queryCollection('pages').path('/labs').first()
 })
diff --git a/app/pages/speaking/[slug].vue b/app/pages/speaking/[slug].vue
index 94f1ebd..72e81ba 100644
--- a/app/pages/speaking/[slug].vue
+++ b/app/pages/speaking/[slug].vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { getTalkSlug, resolveTalkEntry, sortTalks, type ResolvedTalkResource } from '../../utils/speaking'
-
 const route = useRoute()
 const slug = Array.isArray(route.params.slug) ? route.params.slug[0] : route.params.slug
 
diff --git a/app/pages/speaking/index.vue b/app/pages/speaking/index.vue
index f13604b..5d5dbba 100644
--- a/app/pages/speaking/index.vue
+++ b/app/pages/speaking/index.vue
@@ -1,7 +1,4 @@
 <script setup lang="ts">
-import TalkPreviewCard from '../../components/talks/TalkPreviewCard.vue'
-import { getTalkPath, sortTalks } from '../../utils/speaking'
-
 const { data: page } = await useAsyncData('speaking', () => {
   return queryCollection('speaking').first()
 })
diff --git a/app/utils/clipboard.ts b/app/utils/clipboard.ts
index e501b16..f24b453 100644
--- a/app/utils/clipboard.ts
+++ b/app/utils/clipboard.ts
@@ -2,5 +2,7 @@ export function copyToClipboard(toCopy: string, message: string = 'Copied to cli
   const toast = useToast()
   navigator.clipboard.writeText(toCopy).then(() => {
     toast.add({ title: message, color: 'success', icon: 'i-lucide-check-circle' })
+  }).catch(() => {
+    toast.add({ title: 'Failed to copy to clipboard', color: 'error', icon: 'i-lucide-x-circle' })
   })
 }
diff --git a/app/utils/date.ts b/app/utils/date.ts
new file mode 100644
index 0000000..e7bde2f
--- /dev/null
+++ b/app/utils/date.ts
@@ -0,0 +1,9 @@
+export const getTimestamp = (value?: string | Date | null): number | null => {
+  if (!value) {
+    return null
+  }
+
+  const timestamp = new Date(value).getTime()
+
+  return Number.isNaN(timestamp) ? null : timestamp
+}
diff --git a/app/utils/labs.ts b/app/utils/labs.ts
index 8c047a5..eace7bf 100644
--- a/app/utils/labs.ts
+++ b/app/utils/labs.ts
@@ -39,15 +39,9 @@ export const labStatusIconMap: Record<LabStatus, string> = {
   paused: 'i-lucide-pause'
 }
 
-const getTimestamp = (value: string | Date) => {
-  const timestamp = new Date(value).getTime()
-
-  return Number.isNaN(timestamp) ? 0 : timestamp
-}
-
 export const sortLabs = <Lab extends LabEntry>(labs: Lab[]) => {
   return labs.slice().sort((left, right) => {
-    return getTimestamp(right.date) - getTimestamp(left.date) || left.title.localeCompare(right.title)
+    return (getTimestamp(right.date) ?? 0) - (getTimestamp(left.date) ?? 0) || left.title.localeCompare(right.title)
   })
 }
 
diff --git a/app/utils/speaking.ts b/app/utils/speaking.ts
index f303496..7a21e96 100644
--- a/app/utils/speaking.ts
+++ b/app/utils/speaking.ts
@@ -46,16 +46,6 @@ export type ResolvedTalkEntry<Talk extends TalkEntry = TalkEntry> = Omit<Talk, '
   resources: ResolvedTalkResource[]
 }
 
-const getTimestamp = (value?: string | Date | null) => {
-  if (!value) {
-    return null
-  }
-
-  const timestamp = new Date(value).getTime()
-
-  return Number.isNaN(timestamp) ? null : timestamp
-}
-
 export const sortTalks = <Talk extends TalkEntry>(talks: Talk[]) => {
   return talks.slice().sort((left, right) => {
     const leftTimestamp = getTimestamp(left.date)

From 0f721acfc76a4020a261389c5eefbb5b4168cc1a Mon Sep 17 00:00:00 2001
From: fmeyer <fabian.meyer@eventim.de>
Date: Mon, 23 Mar 2026 23:12:06 +0100
Subject: [PATCH 2/2] fix nuxt warnings on speaking pages

---
 app/components/landing/Hero.vue           | 2 +-
 app/components/landing/SpeakingTeaser.vue | 2 +-
 app/pages/speaking/index.vue              | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/components/landing/Hero.vue b/app/components/landing/Hero.vue
index 7cf7254..8a308f4 100644
--- a/app/components/landing/Hero.vue
+++ b/app/components/landing/Hero.vue
@@ -46,7 +46,7 @@ defineProps<{
           width="72"
           height="72"
           sizes="72px"
-          densities="x1 x2 x3"
+          densities="x1 x2"
           fit="cover"
           loading="eager"
         />
diff --git a/app/components/landing/SpeakingTeaser.vue b/app/components/landing/SpeakingTeaser.vue
index 7830bc0..bdc458a 100644
--- a/app/components/landing/SpeakingTeaser.vue
+++ b/app/components/landing/SpeakingTeaser.vue
@@ -41,7 +41,7 @@ defineProps<{
     </Motion>
 
     <div class="space-y-4">
-      <TalkPreviewCard
+      <TalksTalkPreviewCard
         v-if="talk"
         :talk="talk"
         variant="featured"
diff --git a/app/pages/speaking/index.vue b/app/pages/speaking/index.vue
index 5d5dbba..6aa1dd1 100644
--- a/app/pages/speaking/index.vue
+++ b/app/pages/speaking/index.vue
@@ -65,7 +65,7 @@ useSeoMeta({
           :transition="{ delay: index * 0.08 }"
           :in-view-options="{ once: true }"
         >
-          <TalkPreviewCard
+          <TalksTalkPreviewCard
             :talk="talk"
             variant="list"
             :show-summary="true"