Skip to content

Commit db829cc

Browse files
essenmitsossedanielroe
essenmitsosse
and
danielroe
authored
refactor: remove class shortcuts (#604)
Co-authored-by: Daniel Roe <daniel@roe.dev>
1 parent 8b06544 commit db829cc

File tree

16 files changed

+145
-145
lines changed

16 files changed

+145
-145
lines changed

‎app/components/BaseCard.vue‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<script setup lang="ts">
2+
defineProps<{
3+
/** Whether this is an exact match for the query */
4+
isExactMatch?: boolean
5+
}>()
6+
</script>
7+
8+
<template>
9+
<article
10+
class="group bg-bg-subtle border border-border rounded-lg p-4 sm:p-6 transition-[border-color,background-color] duration-200 hover:(border-border-hover bg-bg-muted) cursor-pointer relative focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-bg focus-within:ring-offset-2 focus-within:ring-fg/50 focus-within:bg-bg-muted focus-within:border-border-hover"
11+
:class="{
12+
'border-accent/30 contrast-more:border-accent/90 bg-accent/5': isExactMatch,
13+
}"
14+
>
15+
<!-- Glow effect for exact matches -->
16+
<div
17+
v-if="isExactMatch"
18+
class="absolute -inset-px rounded-lg bg-gradient-to-r from-accent/0 via-accent/20 to-accent/0 opacity-100 blur-sm -z-1 pointer-events-none motion-reduce:opacity-50"
19+
aria-hidden="true"
20+
/>
21+
<slot />
22+
</article>
23+
</template>

‎app/components/Filter/Panel.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -228,7 +228,7 @@ const hasActiveFilters = computed(() => !!filterSummary.value)
228228
:value="filters.text"
229229
:placeholder="searchPlaceholder"
230230
autocomplete="off"
231-
class="input-base"
231+
class="w-full bg-bg-subtle border border-border rounded-md px-4 py-3 font-mono text-sm text-fg placeholder:text-fg-subtle transition-all duration-200 focus:(border-fg/40 outline-none ring-1 ring-fg/10)"
232232
@input="handleTextInput"
233233
/>
234234
</div>

‎app/components/Package/Card.vue‎

Lines changed: 2 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -29,18 +29,7 @@ const pkgDescription = useMarkdown(() => ({
2929
</script>
3030

3131
<template>
32-
<article
33-
class="group card-interactive scroll-mt-48 scroll-mb-6 relative focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-bg focus-within:ring-offset-2 focus-within:ring-fg/50 focus-within:bg-bg-muted focus-within:border-border-hover"
34-
:class="{
35-
'border-accent/30 contrast-more:border-accent/90 bg-accent/5': isExactMatch,
36-
}"
37-
>
38-
<!-- Glow effect for exact matches -->
39-
<div
40-
v-if="isExactMatch"
41-
class="absolute -inset-px rounded-lg bg-gradient-to-r from-accent/0 via-accent/20 to-accent/0 opacity-100 blur-sm -z-1 pointer-events-none motion-reduce:opacity-50"
42-
aria-hidden="true"
43-
/>
32+
<BaseCard :isExactMatch="isExactMatch">
4433
<div class="mb-2 flex items-baseline justify-start gap-2">
4534
<component
4635
:is="headingLevel ?? 'h3'"
@@ -169,5 +158,5 @@ const pkgDescription = useMarkdown(() => ({
169158
{{ keyword }}
170159
</li>
171160
</ul>
172-
</article>
161+
</BaseCard>
173162
</template>

‎app/components/Package/Skeleton.vue‎

Lines changed: 56 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -12,20 +12,20 @@
1212
<div class="flex-1 min-w-0">
1313
<!-- Package name: h1 font-mono text-2xl sm:text-3xl font-medium mb-2 -->
1414
<h1 class="font-mono text-2xl sm:text-3xl font-medium mb-2">
15-
<span class="skeleton inline-block h-9 w-48" />
15+
<SkeletonInline class="h-9 w-48" />
1616
</h1>
1717
<!-- Description: fixed height container matching min-h-[4.5rem] (72px) to prevent CLS -->
1818
<div class="relative max-w-2xl min-h-[4.5rem]">
1919
<div class="space-y-2">
20-
<span class="skeleton block h-5 w-full" />
21-
<span class="skeleton block h-5 w-4/5" />
22-
<span class="skeleton block h-5 w-3/5" />
20+
<SkeletonBlock class="h-5 w-full" />
21+
<SkeletonBlock class="h-5 w-4/5" />
22+
<SkeletonBlock class="h-5 w-3/5" />
2323
</div>
2424
</div>
2525
</div>
2626

2727
<!-- Version badge: shrink-0 px-3 py-1 font-mono text-sm bg-bg-muted border border-border rounded-md -->
28-
<span class="skeleton shrink-0 h-8 w-20 rounded-md" />
28+
<SkeletonInline class="shrink-0 h-8 w-20 rounded-md" />
2929
</div>
3030

3131
<!-- Stats grid: grid grid-cols-2 sm:grid-cols-3 md:grid-cols-6 gap-4 mt-6 -->
@@ -36,7 +36,7 @@
3636
{{ $t('package.skeleton.license') }}
3737
</dt>
3838
<dd class="font-mono text-sm">
39-
<span class="skeleton inline-block h-5 w-12" />
39+
<SkeletonInline class="h-5 w-12" />
4040
</dd>
4141
</div>
4242

@@ -46,7 +46,7 @@
4646
{{ $t('package.skeleton.weekly') }}
4747
</dt>
4848
<dd class="font-mono text-sm">
49-
<span class="skeleton inline-block h-5 w-20" />
49+
<SkeletonInline class="h-5 w-20" />
5050
</dd>
5151
</div>
5252

@@ -56,7 +56,7 @@
5656
{{ $t('package.skeleton.size') }}
5757
</dt>
5858
<dd class="font-mono text-sm">
59-
<span class="skeleton inline-block h-5 w-16" />
59+
<SkeletonInline class="h-5 w-16" />
6060
</dd>
6161
</div>
6262

@@ -66,7 +66,7 @@
6666
{{ $t('package.skeleton.deps') }}
6767
</dt>
6868
<dd class="font-mono text-sm">
69-
<span class="skeleton inline-block h-5 w-8" />
69+
<SkeletonInline class="h-5 w-8" />
7070
</dd>
7171
</div>
7272

@@ -76,7 +76,7 @@
7676
{{ $t('package.skeleton.published') }}
7777
</dt>
7878
<dd class="font-mono text-sm">
79-
<span class="skeleton inline-block h-5 w-28" />
79+
<SkeletonInline class="h-5 w-28" />
8080
</dd>
8181
</div>
8282
</dl>
@@ -85,16 +85,16 @@
8585
<nav aria-label="Package links" class="mt-6">
8686
<ul class="flex flex-wrap items-center gap-4 list-none m-0 p-0">
8787
<li>
88-
<span class="skeleton inline-block h-5 w-14" />
88+
<SkeletonInline class="h-5 w-14" />
8989
</li>
9090
<li>
91-
<span class="skeleton inline-block h-5 w-20" />
91+
<SkeletonInline class="h-5 w-20" />
9292
</li>
9393
<li>
94-
<span class="skeleton inline-block h-5 w-16" />
94+
<SkeletonInline class="h-5 w-16" />
9595
</li>
9696
<li>
97-
<span class="skeleton inline-block h-5 w-12" />
97+
<SkeletonInline class="h-5 w-12" />
9898
</li>
9999
</ul>
100100
</nav>
@@ -110,10 +110,12 @@
110110
</h2>
111111
<!-- code-block with relative positioning for copy button -->
112112
<div class="relative">
113-
<div class="code-block pe-16">
114-
<span class="skeleton inline-block h-5 w-52" />
113+
<div
114+
class="bg-bg-muted border border-border rounded-md p-4 font-mono text-sm overflow-x-auto pe-16"
115+
>
116+
<SkeletonInline class="h-5 w-52" />
115117
</div>
116-
<span class="skeleton absolute top-3 inset-ie-3 h-6 w-12 rounded" />
118+
<SkeletonInline class="absolute top-3 inset-ie-3 h-6 w-12 rounded" />
117119
</div>
118120
</section>
119121

@@ -131,20 +133,20 @@
131133
<!-- Simulated README content -->
132134
<div class="space-y-4">
133135
<!-- Heading -->
134-
<span class="skeleton block h-7 w-2/3" />
136+
<SkeletonBlock class="h-7 w-2/3" />
135137
<!-- Paragraphs -->
136-
<span class="skeleton block h-4 w-full" />
137-
<span class="skeleton block h-4 w-full" />
138-
<span class="skeleton block h-4 w-4/5" />
138+
<SkeletonBlock class="h-4 w-full" />
139+
<SkeletonBlock class="h-4 w-full" />
140+
<SkeletonBlock class="h-4 w-4/5" />
139141
<!-- Gap for section break -->
140-
<span class="skeleton block h-6 w-1/2 mt-6" />
141-
<span class="skeleton block h-4 w-full" />
142-
<span class="skeleton block h-4 w-full" />
143-
<span class="skeleton block h-4 w-3/4" />
142+
<SkeletonBlock class="h-6 w-1/2 mt-6" />
143+
<SkeletonBlock class="h-4 w-full" />
144+
<SkeletonBlock class="h-4 w-full" />
145+
<SkeletonBlock class="h-4 w-3/4" />
144146
<!-- Code block placeholder -->
145-
<div class="skeleton h-24 w-full rounded-lg mt-4" />
146-
<span class="skeleton block h-4 w-full" />
147-
<span class="skeleton block h-4 w-5/6" />
147+
<SkeletonBlock class="h-24 w-full rounded-lg mt-4" />
148+
<SkeletonBlock class="h-4 w-full" />
149+
<SkeletonBlock class="h-4 w-5/6" />
148150
</div>
149151
</section>
150152
</div>
@@ -161,10 +163,10 @@
161163
</h2>
162164
<ul class="space-y-2 list-none m-0 p-0">
163165
<li>
164-
<span class="skeleton inline-block h-5 w-28" />
166+
<SkeletonInline class="h-5 w-28" />
165167
</li>
166168
<li>
167-
<span class="skeleton inline-block h-5 w-24" />
169+
<SkeletonInline class="h-5 w-24" />
168170
</li>
169171
</ul>
170172
</section>
@@ -179,12 +181,12 @@
179181
</h2>
180182
<!-- flex flex-wrap gap-1.5 -->
181183
<ul class="flex flex-wrap gap-1.5 list-none m-0 p-0">
182-
<li><span class="skeleton inline-block h-6 w-16 rounded" /></li>
183-
<li><span class="skeleton inline-block h-6 w-12 rounded" /></li>
184-
<li><span class="skeleton inline-block h-6 w-20 rounded" /></li>
185-
<li><span class="skeleton inline-block h-6 w-14 rounded" /></li>
186-
<li><span class="skeleton inline-block h-6 w-18 rounded" /></li>
187-
<li><span class="skeleton inline-block h-6 w-10 rounded" /></li>
184+
<li><SkeletonInline class="h-6 w-16 rounded" /></li>
185+
<li><SkeletonInline class="h-6 w-12 rounded" /></li>
186+
<li><SkeletonInline class="h-6 w-20 rounded" /></li>
187+
<li><SkeletonInline class="h-6 w-14 rounded" /></li>
188+
<li><SkeletonInline class="h-6 w-18 rounded" /></li>
189+
<li><SkeletonInline class="h-6 w-10 rounded" /></li>
188190
</ul>
189191
</section>
190192

@@ -199,24 +201,24 @@
199201
<!-- space-y-1, each row: flex items-center justify-between py-1.5 text-sm -->
200202
<div class="space-y-1">
201203
<div class="flex items-center justify-between py-1.5 text-sm">
202-
<span class="skeleton inline-block h-4 w-16" />
203-
<span class="skeleton inline-block h-4 w-24" />
204+
<SkeletonInline class="h-4 w-16" />
205+
<SkeletonInline class="h-4 w-24" />
204206
</div>
205207
<div class="flex items-center justify-between py-1.5 text-sm">
206-
<span class="skeleton inline-block h-4 w-14" />
207-
<span class="skeleton inline-block h-4 w-24" />
208+
<SkeletonInline class="h-4 w-14" />
209+
<SkeletonInline class="h-4 w-24" />
208210
</div>
209211
<div class="flex items-center justify-between py-1.5 text-sm">
210-
<span class="skeleton inline-block h-4 w-18" />
211-
<span class="skeleton inline-block h-4 w-24" />
212+
<SkeletonInline class="h-4 w-18" />
213+
<SkeletonInline class="h-4 w-24" />
212214
</div>
213215
<div class="flex items-center justify-between py-1.5 text-sm">
214-
<span class="skeleton inline-block h-4 w-14" />
215-
<span class="skeleton inline-block h-4 w-24" />
216+
<SkeletonInline class="h-4 w-14" />
217+
<SkeletonInline class="h-4 w-24" />
216218
</div>
217219
<div class="flex items-center justify-between py-1.5 text-sm">
218-
<span class="skeleton inline-block h-4 w-16" />
219-
<span class="skeleton inline-block h-4 w-24" />
220+
<SkeletonInline class="h-4 w-16" />
221+
<SkeletonInline class="h-4 w-24" />
220222
</div>
221223
</div>
222224
</section>
@@ -232,20 +234,20 @@
232234
<!-- space-y-1, each: flex items-center justify-between py-1 text-sm -->
233235
<ul class="space-y-1 list-none m-0 p-0">
234236
<li class="flex items-center justify-between py-1 text-sm">
235-
<span class="skeleton inline-block h-4 w-24" />
236-
<span class="skeleton inline-block h-4 w-12" />
237+
<SkeletonInline class="h-4 w-24" />
238+
<SkeletonInline class="h-4 w-12" />
237239
</li>
238240
<li class="flex items-center justify-between py-1 text-sm">
239-
<span class="skeleton inline-block h-4 w-32" />
240-
<span class="skeleton inline-block h-4 w-10" />
241+
<SkeletonInline class="h-4 w-32" />
242+
<SkeletonInline class="h-4 w-10" />
241243
</li>
242244
<li class="flex items-center justify-between py-1 text-sm">
243-
<span class="skeleton inline-block h-4 w-20" />
244-
<span class="skeleton inline-block h-4 w-14" />
245+
<SkeletonInline class="h-4 w-20" />
246+
<SkeletonInline class="h-4 w-14" />
245247
</li>
246248
<li class="flex items-center justify-between py-1 text-sm">
247-
<span class="skeleton inline-block h-4 w-28" />
248-
<span class="skeleton inline-block h-4 w-12" />
249+
<SkeletonInline class="h-4 w-28" />
250+
<SkeletonInline class="h-4 w-12" />
249251
</li>
250252
</ul>
251253
</section>

‎app/components/Package/WeeklyDownloadStats.vue‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -221,20 +221,20 @@ const config = computed(() => {
221221
<div class="min-h-[75.195px]">
222222
<!-- Title row: date range (24px height) -->
223223
<div class="h-6 flex items-center ps-3">
224-
<span class="skeleton h-3 w-36" />
224+
<SkeletonInline class="h-3 w-36" />
225225
</div>
226226
<!-- Chart area: data label left, sparkline right -->
227227
<div class="aspect-[500/80] flex items-center">
228228
<!-- Data label (covers ~42% width) -->
229229
<div class="w-[42%] flex items-center ps-0.5">
230-
<span class="skeleton h-7 w-24" />
230+
<SkeletonInline class="h-7 w-24" />
231231
</div>
232232
<!-- Sparkline area (~58% width) -->
233233
<div class="flex-1 flex items-end gap-0.5 h-4/5 pe-3">
234-
<span
234+
<SkeletonInline
235235
v-for="i in 16"
236236
:key="i"
237-
class="skeleton flex-1 rounded-sm"
237+
class="flex-1 rounded-sm"
238238
:style="{ height: `${25 + ((i * 7) % 50)}%` }"
239239
/>
240240
</div>

‎app/components/SearchSuggestionCard.vue‎

Lines changed: 2 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -12,18 +12,7 @@ defineProps<{
1212
</script>
1313

1414
<template>
15-
<article
16-
class="group card-interactive relative focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-bg focus-within:ring-offset-2 focus-within:ring-fg/50 focus-within:bg-bg-muted focus-within:border-border-hover"
17-
:class="{
18-
'border-accent/30 contrast-more:border-accent/90 bg-accent/5': isExactMatch,
19-
}"
20-
>
21-
<!-- Glow effect for exact matches -->
22-
<div
23-
v-if="isExactMatch"
24-
class="absolute -inset-px rounded-lg bg-gradient-to-r from-accent/0 via-accent/20 to-accent/0 opacity-100 blur-sm -z-1 pointer-events-none motion-reduce:opacity-50"
25-
aria-hidden="true"
26-
/>
15+
<BaseCard :isExactMatch="isExactMatch">
2716
<NuxtLink
2817
:to="type === 'user' ? `/~${name}` : `/@${name}`"
2918
:data-suggestion-index="index"
@@ -72,5 +61,5 @@ defineProps<{
7261
aria-hidden="true"
7362
/>
7463
</NuxtLink>
75-
</article>
64+
</BaseCard>
7665
</template>

‎app/components/Settings/Toggle.server.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ defineProps<{
1010
<span v-if="label" class="text-sm text-fg font-medium text-start">
1111
{{ label }}
1212
</span>
13-
<span class="skeleton block h-6 w-11 shrink-0 rounded-full" />
13+
<SkeletonBlock class="h-6 w-11 shrink-0 rounded-full" />
1414
</div>
1515
<p v-if="description" class="text-sm text-fg-muted">
1616
{{ description }}

‎app/components/SkeletonBlock.vue‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<template>
2+
<div class="bg-bg-elevated rounded animate-skeleton-pulse" />
3+
</template>

‎app/components/SkeletonInline.vue‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<template>
2+
<span class="inline-block bg-bg-elevated rounded animate-skeleton-pulse" />
3+
</template>

0 commit comments

Comments
 (0)