Skip to content

Commit 9e89a88

Browse files
cmpaddencmpadden
committed
pnpm format
1 parent 31c3262 commit 9e89a88

File tree

11 files changed

+164
-122
lines changed

11 files changed

+164
-122
lines changed

‎components/Header.vue‎

Lines changed: 35 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,9 @@ const route = useRoute();
1111
<div class="flex items-center space-x-2">
1212
<HeadlessMenu as="div" class="relative z-50 inline-block text-left">
1313
<div>
14-
<HeadlessMenuButton class="text-gray-700 dark:text-white hover:text-orange-500">
14+
<HeadlessMenuButton
15+
class="text-gray-700 hover:text-orange-500 dark:text-white"
16+
>
1517
<div class="text-2xl">&bull;&bull;&bull;</div>
1618
</HeadlessMenuButton>
1719
</div>
@@ -25,14 +27,16 @@ const route = useRoute();
2527
leave-to-class="transform scale-95 opacity-0"
2628
>
2729
<HeadlessMenuItems
28-
class="absolute right-0 mt-2 w-36 origin-top-right divide-y divide-gray-100 dark:divide-gray-100 rounded-md bg-white/90 dark:bg-black/80 text-gray-900 dark:text-white shadow-lg ring-1 ring-black ring-opacity-5 backdrop-blur-sm focus:outline-none"
30+
class="absolute right-0 mt-2 w-36 origin-top-right divide-y divide-gray-100 rounded-md bg-white/90 text-gray-900 shadow-lg ring-1 ring-black ring-opacity-5 backdrop-blur-sm focus:outline-none dark:divide-gray-100 dark:bg-black/80 dark:text-white"
2931
>
3032
<div class="px-1 py-1">
3133
<HeadlessMenuItem v-slot="{ active }">
3234
<NuxtLink to="/">
3335
<button
3436
:class="[
35-
active ? 'bg-orange-500/50 text-white dark:text-white' : 'text-gray-700 dark:text-white',
37+
active
38+
? 'bg-orange-500/50 text-white dark:text-white'
39+
: 'text-gray-700 dark:text-white',
3640
$route.path === '/' ? 'bg-orange-500' : '',
3741
'group flex w-full items-center rounded-md px-2 py-2 text-sm',
3842
]"
@@ -84,7 +88,9 @@ const route = useRoute();
8488
<a href="/articles">
8589
<button
8690
:class="[
87-
active ? 'bg-orange-500/50 text-white dark:text-white' : 'text-gray-700 dark:text-white',
91+
active
92+
? 'bg-orange-500/50 text-white dark:text-white'
93+
: 'text-gray-700 dark:text-white',
8894
$route.path === '/articles' ? 'bg-orange-500' : '',
8995
'group flex w-full items-center rounded-md px-2 py-2 text-sm',
9096
]"
@@ -112,7 +118,9 @@ const route = useRoute();
112118
<a href="/playground">
113119
<button
114120
:class="[
115-
active ? 'bg-orange-500/50 text-white dark:text-white' : 'text-gray-700 dark:text-white',
121+
active
122+
? 'bg-orange-500/50 text-white dark:text-white'
123+
: 'text-gray-700 dark:text-white',
116124
$route.path === '/playground' ? 'bg-orange-500' : '',
117125
'group flex w-full items-center rounded-md px-2 py-2 text-sm',
118126
]"
@@ -140,7 +148,9 @@ const route = useRoute();
140148
<a href="/talks">
141149
<button
142150
:class="[
143-
active ? 'bg-orange-500/50 text-white dark:text-white' : 'text-gray-700 dark:text-white',
151+
active
152+
? 'bg-orange-500/50 text-white dark:text-white'
153+
: 'text-gray-700 dark:text-white',
144154
$route.path === '/talks' ? 'bg-orange-500' : '',
145155
'group flex w-full items-center rounded-md px-2 py-2 text-sm',
146156
]"
@@ -166,7 +176,9 @@ const route = useRoute();
166176
<a href="https://github.com/cmpadden">
167177
<button
168178
:class="[
169-
active ? 'bg-orange-500/50 text-white dark:text-white' : 'text-gray-700 dark:text-white',
179+
active
180+
? 'bg-orange-500/50 text-white dark:text-white'
181+
: 'text-gray-700 dark:text-white',
170182
'group flex w-full items-center rounded-md px-2 py-2 text-sm',
171183
]"
172184
>
@@ -189,7 +201,9 @@ const route = useRoute();
189201
<a href="https://bsky.app/profile/colton.boo">
190202
<button
191203
:class="[
192-
active ? 'bg-orange-500/50 text-white dark:text-white' : 'text-gray-700 dark:text-white',
204+
active
205+
? 'bg-orange-500/50 text-white dark:text-white'
206+
: 'text-gray-700 dark:text-white',
193207
'group flex w-full items-center rounded-md px-2 py-2 text-sm',
194208
]"
195209
>
@@ -208,17 +222,22 @@ const route = useRoute();
208222
</a>
209223
</HeadlessMenuItem>
210224
</div>
211-
225+
212226
<!-- Divider -->
213227
<div class="border-t border-gray-300 dark:border-gray-600"></div>
214-
228+
215229
<!-- Theme Toggle Section -->
216230
<div class="px-1 py-1">
217231
<HeadlessMenuItem v-slot="{ active }">
218232
<button
219-
@click="$colorMode.preference = $colorMode.value === 'dark' ? 'light' : 'dark'"
233+
@click="
234+
$colorMode.preference =
235+
$colorMode.value === 'dark' ? 'light' : 'dark'
236+
"
220237
:class="[
221-
active ? 'bg-orange-500/50 text-white dark:text-white' : 'text-gray-700 dark:text-white',
238+
active
239+
? 'bg-orange-500/50 text-white dark:text-white'
240+
: 'text-gray-700 dark:text-white',
222241
'group flex w-full items-center rounded-md px-2 py-2 text-sm',
223242
]"
224243
>
@@ -238,7 +257,7 @@ const route = useRoute();
238257
d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"
239258
/>
240259
</svg>
241-
260+
242261
<!-- Moon icon for when we're in light mode (clicking switches to dark) -->
243262
<svg
244263
v-else
@@ -255,7 +274,9 @@ const route = useRoute();
255274
d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"
256275
/>
257276
</svg>
258-
<span class="translate-y-0.5">{{ $colorMode.value === 'dark' ? 'Light Mode' : 'Dark Mode' }}</span>
277+
<span class="translate-y-0.5">{{
278+
$colorMode.value === "dark" ? "Light Mode" : "Dark Mode"
279+
}}</span>
259280
</button>
260281
</HeadlessMenuItem>
261282
</div>

‎components/MoreLink.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ const props = defineProps({
1313
<div class="flex justify-end">
1414
<NuxtLink
1515
:to="props.to"
16-
class="flex items-center text-sm font-bold text-gray-700 dark:text-white hover:text-orange-500"
16+
class="flex items-center text-sm font-bold text-gray-700 hover:text-orange-500 dark:text-white"
1717
>
1818
<span class="translate-y-0.5">More</span>
1919
<CursorArrowRaysIcon class="ml-1 h-5 w-5" aria-hidden="true" />

‎components/ThemeToggle.vue‎

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,17 @@
11
<template>
22
<button
33
@click="toggleTheme"
4-
class="flex items-center justify-center w-8 h-8 rounded-md transition-colors duration-200 hover:bg-orange-500/20 bg-gray-100/10 dark:bg-gray-800/20"
5-
:title="$colorMode.value === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'"
4+
class="flex h-8 w-8 items-center justify-center rounded-md bg-gray-100/10 transition-colors duration-200 hover:bg-orange-500/20 dark:bg-gray-800/20"
5+
:title="
6+
$colorMode.value === 'dark'
7+
? 'Switch to light mode'
8+
: 'Switch to dark mode'
9+
"
610
>
711
<!-- Sun icon for light mode -->
812
<svg
913
v-if="$colorMode.value === 'dark'"
10-
class="w-5 h-5 text-yellow-500 dark:text-yellow-400"
14+
class="h-5 w-5 text-yellow-500 dark:text-yellow-400"
1115
fill="none"
1216
stroke="currentColor"
1317
viewBox="0 0 24 24"
@@ -20,11 +24,11 @@
2024
d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"
2125
/>
2226
</svg>
23-
27+
2428
<!-- Moon icon for dark mode -->
2529
<svg
2630
v-else
27-
class="w-5 h-5 text-gray-700 dark:text-gray-300"
31+
class="h-5 w-5 text-gray-700 dark:text-gray-300"
2832
fill="none"
2933
stroke="currentColor"
3034
viewBox="0 0 24 24"
@@ -41,9 +45,9 @@
4145
</template>
4246

4347
<script setup>
44-
const { $colorMode } = useNuxtApp()
48+
const { $colorMode } = useNuxtApp();
4549
4650
const toggleTheme = () => {
47-
$colorMode.preference = $colorMode.value === 'dark' ? 'light' : 'dark'
48-
}
49-
</script>
51+
$colorMode.preference = $colorMode.value === "dark" ? "light" : "dark";
52+
};
53+
</script>

‎components/section/BlogPosts.vue‎

Lines changed: 31 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -6,42 +6,41 @@ const props = defineProps({
66
</script>
77

88
<template>
9-
<section class="py-2">
10-
<div class="container mx-auto space-y-4">
11-
12-
<div class="mb-4 grid grid-cols-1 gap-4 md:grid-cols-3">
13-
<div v-for="(article, ix) of articles" :key="ix">
14-
<NuxtLink :to="article.path">
15-
<div
16-
class="h-full space-y-4 dark:bg-orange-400/50 p-4 text-gray-700 dark:text-white drop-shadow-lg hover:ring-1 hover:ring-gray-300 dark:hover:ring-white"
17-
>
18-
<div>
19-
<div class="line-clamp-2 flex-1 text-lg font-bold md:text-xl">
20-
{{ article.title }}
21-
</div>
22-
<div class="space-x-2">
23-
<NuxtTime
24-
v-if="show_dates"
25-
:datetime="article.date"
26-
class="text-sm text-gray-600 dark:text-gray-200"
27-
year="numeric"
28-
month="short"
29-
day="2-digit"
30-
/>
31-
<span v-if="ix === 0" class="bg-orange-400 text-sm px-2">Latest!</span>
32-
</div>
9+
<section class="container mx-auto space-y-2">
10+
<div class="grid grid-cols-1 gap-4 md:grid-cols-3">
11+
<div v-for="(article, ix) of articles" :key="ix">
12+
<NuxtLink :to="article.path">
13+
<div
14+
class="h-full space-y-4 rounded-lg p-4 text-gray-700 drop-shadow-lg hover:ring-1 hover:ring-gray-300 dark:bg-orange-400/50 dark:text-white dark:hover:ring-white"
15+
>
16+
<div>
17+
<div
18+
class="line-clamp-1 flex-1 text-lg font-bold md:text-xl"
19+
:title="article.title"
20+
>
21+
{{ article.title }}
3322
</div>
34-
<div class="line-clamp-3 text-sm text-gray-700 dark:text-gray-100">
35-
{{ article.description }}
36-
23+
<div class="space-x-2">
24+
<NuxtTime
25+
v-if="show_dates"
26+
:datetime="article.date"
27+
class="text-sm text-gray-600 dark:text-gray-200"
28+
year="numeric"
29+
month="short"
30+
day="2-digit"
31+
/>
32+
<span v-if="ix === 0" class="text-xs font-bold uppercase"
33+
>[latest]</span
34+
>
3735
</div>
3836
</div>
39-
</NuxtLink>
40-
</div>
41-
</div>
42-
<div>
43-
<MoreLink to="/articles" />
37+
<div class="line-clamp-3 text-sm text-gray-700 dark:text-gray-100">
38+
{{ article.description }}
39+
</div>
40+
</div>
41+
</NuxtLink>
4442
</div>
4543
</div>
44+
<MoreLink to="/articles" />
4645
</section>
4746
</template>

‎components/section/Playground.vue‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -99,23 +99,27 @@ const filtered_links = computed(() => {
9999
</script>
100100

101101
<template>
102-
<section class="bg-gradient-to-b from-transparent to-background dark:to-background-dark text-gray-700 dark:text-white">
102+
<section
103+
class="bg-gradient-to-b from-transparent to-background text-gray-700 dark:to-background-dark dark:text-white"
104+
>
103105
<div class="container mx-auto space-y-4 py-8 text-gray-700 dark:text-white">
104106
<div class="mb-4 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
105107
<nuxt-link
106-
class="relative drop-shadow-lg hover:ring-1 hover:ring-gray-300 dark:hover:ring-white"
108+
class="relative hover:ring-1 hover:ring-gray-300 dark:hover:ring-white"
107109
v-for="link in filtered_links"
108110
:key="link.title"
109111
:to="link.link"
110112
>
111113
<img
112-
class="grayscale-1 h-64 w-full bg-gray-800 object-cover"
114+
class="grayscale-1 h-64 w-full rounded-lg bg-gray-800 object-cover"
113115
:src="link.img || 'images/placeholder.png'"
114116
/>
115117
<div
116-
class="absolute bottom-0 flex w-full items-center justify-center"
118+
class="absolute bottom-2 flex w-full items-center justify-center"
117119
>
118-
<div class="w-full bg-white/90 dark:bg-black/80 px-6 py-2">
120+
<div
121+
class="w-full bg-black bg-[url('/images/noise.svg')] px-6 py-2"
122+
>
119123
<h3 class="text-xl font-bold text-gray-700 dark:text-white">
120124
{{ link.title }}
121125
</h3>

0 commit comments

Comments
 (0)