Skip to content

Commit 69c89a3

Browse files
TechWatchingTechWatching
committed
refactor: improve type definitions and enhance code readability across components
1 parent b3c8afd commit 69c89a3

14 files changed

Lines changed: 191 additions & 84 deletions

File tree

‎app/app.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ const { data: contentNavigation } = useLazyAsyncData('navigation-content', () =>
5454
})
5555
5656
// Helper to add icon to navigation items
57-
const addIconToItems = (items: any[] | undefined, icon: string) =>
57+
const addIconToItems = (items: { path?: string, title?: string, [key: string]: unknown }[] | undefined, icon: string) =>
5858
(items || []).map(item => ({ ...item, icon }))
5959
6060
// Combine navigation with proper section labels and icons on each item

‎app/components/ContactForm.vue‎

Lines changed: 45 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -33,8 +33,7 @@ async function onSubmit(event: FormSubmitEvent<Schema>) {
3333
icon: 'i-heroicons-envelope'
3434
})
3535
await navigateTo({ path: '/' })
36-
}
37-
catch {
36+
} catch {
3837
toast.add({
3938
title: 'Oops',
4039
description: 'Sorry, your message was not successfully sent, try again or contact me by message on LinkedIn/BlueSky/Mastodon.',
@@ -46,25 +45,60 @@ async function onSubmit(event: FormSubmitEvent<Schema>) {
4645
</script>
4746

4847
<template>
49-
<UForm :schema="schema" :state="state" class="space-y-4" @submit="onSubmit">
50-
<UFormField label="Name" name="name">
51-
<UInput v-model="state.name" placeholder="Your name" class="w-full" />
48+
<UForm
49+
:schema="schema"
50+
:state="state"
51+
class="space-y-4"
52+
@submit="onSubmit"
53+
>
54+
<UFormField
55+
label="Name"
56+
name="name"
57+
>
58+
<UInput
59+
v-model="state.name"
60+
placeholder="Your name"
61+
class="w-full"
62+
/>
5263
</UFormField>
5364

54-
<UFormField label="Email" name="email">
55-
<UInput v-model="state.email" type="email" placeholder="your.email@example.com" class="w-full" />
65+
<UFormField
66+
label="Email"
67+
name="email"
68+
>
69+
<UInput
70+
v-model="state.email"
71+
type="email"
72+
placeholder="your.email@example.com"
73+
class="w-full"
74+
/>
5675
</UFormField>
5776

58-
<UFormField label="Message" name="message">
59-
<UTextarea v-model="state.message" placeholder="Your message..." class="w-full" :rows="5" />
77+
<UFormField
78+
label="Message"
79+
name="message"
80+
>
81+
<UTextarea
82+
v-model="state.message"
83+
placeholder="Your message..."
84+
class="w-full"
85+
:rows="5"
86+
/>
6087
</UFormField>
6188

6289
<!-- Honeypot field for spam protection -->
63-
<UFormField label="Message details" name="messageDetails" class="hidden">
90+
<UFormField
91+
label="Message details"
92+
name="messageDetails"
93+
class="hidden"
94+
>
6495
<UTextarea v-model="state.messageDetails" />
6596
</UFormField>
6697

67-
<UButton type="submit" loading-auto>
98+
<UButton
99+
type="submit"
100+
loading-auto
101+
>
68102
Send
69103
</UButton>
70104
</UForm>

‎app/components/PostsTags.vue‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,10 @@ defineProps<{ tags: string[] }>()
66

77
<template>
88
<div>
9-
<USeparator type="dashed" label="Tags" />
9+
<USeparator
10+
type="dashed"
11+
label="Tags"
12+
/>
1013
<div class="flex flex-wrap w-full items-center gap-3 mt-5">
1114
<UBadge
1215
v-for="(tag, index) in tags"

‎app/components/SocialsShare.vue‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,11 @@
33

44
<template>
55
<div>
6-
<USeparator type="dashed" label="Share" class="mt-4 mb-5" />
6+
<USeparator
7+
type="dashed"
8+
label="Share"
9+
class="mt-4 mb-5"
10+
/>
711
<div class="flex flex-wrap gap-2 justify-center mb-5">
812
<SocialShare
913
v-for="network in ['bluesky', 'mastodon', 'linkedin', 'hackernews', 'reddit', 'email']"

‎app/components/content/Tweet.vue‎

Lines changed: 16 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,10 @@ useHead({
1414
})
1515
const colorMode = useColorMode()
1616
const isDark = computed({
17-
get () {
17+
get() {
1818
return colorMode.value === 'dark'
1919
},
20-
set () {
20+
set() {
2121
colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
2222
}
2323
})
@@ -42,8 +42,8 @@ async function create(retries = 10) {
4242
{
4343
theme: isDark.value ? 'dark' : 'light',
4444
conversation: props.conversation || 'none',
45-
cards: props.cards,
46-
},
45+
cards: props.cards
46+
}
4747
)
4848
loaded.value = true
4949
if (element === undefined)
@@ -56,14 +56,20 @@ onMounted(() => {
5656
</script>
5757

5858
<template>
59-
<div ref="tweet" class="tweet nuxtcontent-tweet">
60-
<div v-if="!loaded || tweetNotFound" class="w-30 h-30 my-10px bg-gray-400 bg-opacity-10 rounded-lg flex opacity-50">
61-
<div class="m-auto animate-pulse text-4xl">
62-
<UIcon name="i-carbon-logo-twitter" />
63-
<span v-if="tweetNotFound">Could not load tweet with id="{{ props.id }}"</span>
64-
</div>
59+
<div
60+
ref="tweet"
61+
class="tweet nuxtcontent-tweet"
62+
>
63+
<div
64+
v-if="!loaded || tweetNotFound"
65+
class="w-30 h-30 my-10px bg-gray-400 bg-opacity-10 rounded-lg flex opacity-50"
66+
>
67+
<div class="m-auto animate-pulse text-4xl">
68+
<UIcon name="i-carbon-logo-twitter" />
69+
<span v-if="tweetNotFound">Could not load tweet with id="{{ props.id }}"</span>
6570
</div>
6671
</div>
72+
</div>
6773
</template>
6874

6975
<style>

‎app/error.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ const { data: contentNavigation } = useLazyAsyncData('navigation-content', () =>
3131
})
3232
3333
// Helper to add icon to navigation items
34-
const addIconToItems = (items: any[] | undefined, icon: string) =>
34+
const addIconToItems = (items: { path?: string, title?: string, [key: string]: unknown }[] | undefined, icon: string) =>
3535
(items || []).map(item => ({ ...item, icon }))
3636
3737
// Combine navigation with proper section labels and icons on each item

‎app/pages/contact.vue‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,10 @@ useSeoMeta({
1212

1313
<template>
1414
<UContainer>
15-
<UPageHeader :title="title" :description="description" />
15+
<UPageHeader
16+
:title="title"
17+
:description="description"
18+
/>
1619
<UPageBody>
1720
<ContactForm />
1821
</UPageBody>

‎app/pages/posts/[slug].vue‎

Lines changed: 15 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -28,14 +28,14 @@ useSeoMeta({
2828
useSchemaOrg([
2929
defineArticle({
3030
'@type': 'BlogPosting',
31-
headline: title,
31+
'headline': title,
3232
description,
33-
datePublished: post.value.date,
34-
image: post.value.image?.src,
35-
author: {
33+
'datePublished': post.value.date,
34+
'image': post.value.image?.src,
35+
'author': {
3636
'@type': 'Person',
37-
name: 'Alexandre Nédélec',
38-
url: 'https://techwatching.dev/about'
37+
'name': 'Alexandre Nédélec',
38+
'url': 'https://techwatching.dev/about'
3939
}
4040
})
4141
])
@@ -60,7 +60,7 @@ if (post.value.image?.src) {
6060
v-if="post.image?.src"
6161
:src="post.image.src"
6262
:alt="post.title"
63-
class="mt-8 w-full object-cover rounded-lg aspect-[16/9]"
63+
class="mt-8 w-full object-cover rounded-lg aspect-video"
6464
/>
6565

6666
<UPageHeader
@@ -106,7 +106,10 @@ if (post.value.image?.src) {
106106

107107
<!-- Mobile: show tags and share inline -->
108108
<div class="block lg:hidden mt-8">
109-
<PostsTags v-if="post.tags?.length" :tags="post.tags" />
109+
<PostsTags
110+
v-if="post.tags?.length"
111+
:tags="post.tags"
112+
/>
110113
<SocialsShare class="mt-6" />
111114
</div>
112115

@@ -120,7 +123,10 @@ if (post.value.image?.src) {
120123
<template #right>
121124
<UContentToc :links="post?.body?.toc?.links">
122125
<template #bottom>
123-
<PostsTags v-if="post.tags?.length" :tags="post.tags" />
126+
<PostsTags
127+
v-if="post.tags?.length"
128+
:tags="post.tags"
129+
/>
124130
<SocialsShare />
125131
</template>
126132
</UContentToc>

‎app/pages/posts/index.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ const badgeColors: Record<string, 'primary' | 'secondary' | 'success' | 'info' |
2929
announcement: 'error'
3030
}
3131
32-
function getBadgeWithColor(badge: any) {
32+
function getBadgeWithColor(badge: string | { label?: string, color?: string } | undefined) {
3333
if (!badge) return undefined
3434
if (typeof badge === 'string') {
3535
const color = badgeColors[badge.toLowerCase()] || 'primary'

‎app/pages/speaking.vue‎

Lines changed: 48 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -140,31 +140,43 @@ function formatDate(date?: string) {
140140
<UPageBody>
141141
<!-- Stats Overview -->
142142
<section class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-12">
143-
<UPageCard variant="soft" class="text-center">
143+
<UPageCard
144+
variant="soft"
145+
class="text-center"
146+
>
144147
<div class="text-3xl font-bold text-primary">
145148
{{ stats.totalTalks }}
146149
</div>
147150
<div class="text-muted text-sm">
148151
Speaking Events
149152
</div>
150153
</UPageCard>
151-
<UPageCard variant="soft" class="text-center">
154+
<UPageCard
155+
variant="soft"
156+
class="text-center"
157+
>
152158
<div class="text-3xl font-bold text-primary">
153159
{{ stats.conferences }}
154160
</div>
155161
<div class="text-muted text-sm">
156162
Conferences
157163
</div>
158164
</UPageCard>
159-
<UPageCard variant="soft" class="text-center">
165+
<UPageCard
166+
variant="soft"
167+
class="text-center"
168+
>
160169
<div class="text-3xl font-bold text-primary">
161170
{{ stats.years }}
162171
</div>
163172
<div class="text-muted text-sm">
164173
Years Speaking
165174
</div>
166175
</UPageCard>
167-
<UPageCard variant="soft" class="text-center">
176+
<UPageCard
177+
variant="soft"
178+
class="text-center"
179+
>
168180
<div class="text-3xl font-bold text-primary">
169181
{{ stats.podcasts }}
170182
</div>
@@ -175,9 +187,15 @@ function formatDate(date?: string) {
175187
</section>
176188

177189
<!-- Upcoming Events -->
178-
<section v-if="upcomingEvents.length" class="mb-16">
190+
<section
191+
v-if="upcomingEvents.length"
192+
class="mb-16"
193+
>
179194
<h2 class="text-2xl font-bold mb-6 flex items-center gap-2">
180-
<UIcon name="i-lucide-calendar-clock" class="text-primary" />
195+
<UIcon
196+
name="i-lucide-calendar-clock"
197+
class="text-primary"
198+
/>
181199
Upcoming Events
182200
</h2>
183201
<UPageGrid>
@@ -216,12 +234,18 @@ function formatDate(date?: string) {
216234
<!-- Past Events as Timeline grouped by Year -->
217235
<section>
218236
<h2 class="text-2xl font-bold mb-8 flex items-center gap-2 justify-center">
219-
<UIcon name="i-lucide-history" class="text-primary" />
237+
<UIcon
238+
name="i-lucide-history"
239+
class="text-primary"
240+
/>
220241
Past Talks
221242
</h2>
222243

223244
<div class="max-w-2xl mx-auto space-y-12">
224-
<div v-for="{ year, timelineItems } in eventsByYear" :key="year">
245+
<div
246+
v-for="{ year, timelineItems } in eventsByYear"
247+
:key="year"
248+
>
225249
<!-- Year Header -->
226250
<div class="flex items-center gap-4 mb-6">
227251
<div class="h-px flex-1 bg-default" />
@@ -259,15 +283,21 @@ function formatDate(date?: string) {
259283
class="capitalize shrink-0"
260284
/>
261285
</div>
262-
<p v-if="item.location" class="text-muted text-sm mt-0.5 flex items-center gap-1">
286+
<p
287+
v-if="item.location"
288+
class="text-muted text-sm mt-0.5 flex items-center gap-1"
289+
>
263290
<UIcon
264291
:name="item.isOnline ? 'i-lucide-globe' : 'i-lucide-map-pin'"
265292
class="size-3.5"
266293
/>
267294
{{ item.location }}
268295
</p>
269296
</div>
270-
<div v-if="item.url || item.slides" class="flex items-center gap-2 shrink-0">
297+
<div
298+
v-if="item.url || item.slides"
299+
class="flex items-center gap-2 shrink-0"
300+
>
271301
<UButton
272302
v-if="item.url"
273303
:to="item.url"
@@ -299,10 +329,16 @@ function formatDate(date?: string) {
299329

300330
<!-- Contact CTA -->
301331
<section class="mt-16">
302-
<UPageCard variant="subtle" class="text-center max-w-2xl mx-auto">
332+
<UPageCard
333+
variant="subtle"
334+
class="text-center max-w-2xl mx-auto"
335+
>
303336
<div class="flex flex-col items-center gap-4 py-4">
304337
<div class="p-3 rounded-full bg-primary/10">
305-
<UIcon name="i-lucide-message-circle" class="size-8 text-primary" />
338+
<UIcon
339+
name="i-lucide-message-circle"
340+
class="size-8 text-primary"
341+
/>
306342
</div>
307343
<h3 class="text-xl font-semibold text-highlighted">
308344
Want me to speak at your event?

0 commit comments

Comments
 (0)