Skip to content

Commit bdfb6c2

Browse files
danielroedanielroe
committed
fix: more tweaks
1 parent d2cb189 commit bdfb6c2

File tree

2 files changed

+94
-52
lines changed

2 files changed

+94
-52
lines changed

‎app/components/Package/Playgrounds.vue‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,10 @@ function focusMenuItem(index: number) {
110110

111111
<template>
112112
<section v-if="links.length > 0" class="px-1">
113-
<h2 id="playgrounds-heading" class="text-xs text-fg-subtle uppercase tracking-wider mb-3">
113+
<h2
114+
id="playgrounds-heading"
115+
class="text-xs font-mono text-fg-subtle uppercase tracking-wider text-white mb-3"
116+
>
114117
{{ $t('package.playgrounds.title') }}
115118
</h2>
116119

‎app/components/Package/Skeleton.vue‎

Lines changed: 90 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -24,9 +24,9 @@
2424
<div
2525
class="hidden sm:flex items-center gap-0.5 p-0.5 bg-bg-subtle border border-border-subtle rounded-md shrink-0 ms-auto self-center"
2626
>
27-
<SkeletonInline class="h-7 w-16 rounded" />
28-
<SkeletonInline class="h-7 w-14 rounded" />
27+
<SkeletonInline class="h-7 w-22 rounded" />
2928
<SkeletonInline class="h-7 w-20 rounded" />
29+
<SkeletonInline class="h-7 w-26 rounded" />
3030
</div>
3131

3232
<!-- Metrics badges + likes — matches basis-full flex row -->
@@ -124,38 +124,54 @@
124124
<!-- Install section — matches area-install in [...name].vue -->
125125
<section class="area-install scroll-mt-20">
126126
<div class="flex flex-wrap items-center justify-between mb-3">
127-
<h2 class="text-xs text-fg-subtle uppercase tracking-wider">
127+
<h2 class="text-xs font-mono text-fg-subtle uppercase tracking-wider">
128128
{{ $t('package.get_started.title') }}
129129
</h2>
130130
<!-- Package manager select placeholder -->
131131
<SkeletonInline class="h-7 w-24 rounded" />
132132
</div>
133-
<!-- Install command code block -->
134-
<div class="relative">
135-
<div
136-
class="bg-bg-muted border border-border rounded-md p-4 font-mono text-sm overflow-x-auto pe-16"
137-
>
138-
<SkeletonInline class="h-5 w-52" />
133+
<!-- Terminal-style install command — matches TerminalInstall.vue -->
134+
<div class="bg-bg-subtle border border-border rounded-lg overflow-hidden">
135+
<div class="flex gap-1.5 px-3 pt-2 sm:px-4 sm:pt-3">
136+
<span class="w-2.5 h-2.5 rounded-full bg-fg-subtle" />
137+
<span class="w-2.5 h-2.5 rounded-full bg-fg-subtle" />
138+
<span class="w-2.5 h-2.5 rounded-full bg-fg-subtle" />
139+
</div>
140+
<div class="px-3 pt-2 pb-3 sm:px-4 sm:pt-3 sm:pb-4 space-y-1">
141+
<!-- $ install command -->
142+
<div class="flex items-center gap-2">
143+
<span class="text-fg-subtle font-mono text-sm select-none shrink-0">$</span>
144+
<SkeletonInline class="h-5 w-40" />
145+
</div>
146+
<!-- # Run locally -->
147+
<div class="flex items-center gap-2 pt-1">
148+
<SkeletonInline class="h-4 w-24" />
149+
</div>
150+
<!-- $ run command -->
151+
<div class="flex items-center gap-2">
152+
<span class="text-fg-subtle font-mono text-sm select-none shrink-0">$</span>
153+
<SkeletonInline class="h-5 w-28" />
154+
</div>
155+
<!-- # Create new project -->
156+
<div class="flex items-center gap-2 pt-1">
157+
<SkeletonInline class="h-4 w-36" />
158+
</div>
159+
<!-- $ create command -->
160+
<div class="flex items-center gap-2">
161+
<span class="text-fg-subtle font-mono text-sm select-none shrink-0">$</span>
162+
<SkeletonInline class="h-5 w-32" />
163+
</div>
139164
</div>
140-
<SkeletonInline class="absolute top-3 inset-ie-3 h-6 w-12 rounded" />
141165
</div>
142166
</section>
143167

144-
<!-- Vulns area — matches scanning placeholder in [...name].vue -->
145-
<div class="area-vulns">
146-
<div class="rounded-lg border border-border bg-bg-subtle px-4 py-3 flex items-center gap-2">
147-
<span
148-
class="i-carbon:circle-dash w-4 h-4 text-fg-subtle motion-safe:animate-spin"
149-
aria-hidden="true"
150-
/>
151-
<span class="text-sm text-fg-muted" />
152-
</div>
153-
</div>
168+
<!-- Vulns area (empty placeholder to hold grid space) -->
169+
<div class="area-vulns" />
154170

155171
<!-- README — matches area-readme in [...name].vue -->
156172
<section class="area-readme min-w-0 scroll-mt-20">
157173
<div class="flex flex-wrap items-center justify-between mb-3 px-1">
158-
<h2 class="text-xs text-fg-subtle uppercase tracking-wider">
174+
<h2 class="text-xs font-mono text-fg-subtle uppercase tracking-wider">
159175
{{ $t('package.readme.title') }}
160176
</h2>
161177
</div>
@@ -188,11 +204,13 @@
188204
<!-- Download stats — matches CollapsibleSection + sparkline skeleton -->
189205
<section>
190206
<div class="flex items-center justify-between mb-3 px-1">
191-
<h2 class="text-xs text-fg-subtle uppercase tracking-wider flex items-center gap-2">
207+
<h2
208+
class="text-xs font-mono text-fg-subtle uppercase tracking-wider flex items-center gap-2"
209+
>
192210
<span class="w-4 h-4 flex items-center justify-center shrink-0">
193211
<span class="i-carbon:chevron-down w-3 h-3" aria-hidden="true" />
194212
</span>
195-
{{ $t('package.skeleton.weekly') }}
213+
{{ $t('package.downloads.title') }}
196214
</h2>
197215
</div>
198216
<div class="ms-6 max-w-xs">
@@ -212,10 +230,20 @@
212230
</div>
213231
</section>
214232

233+
<!-- Playgrounds — matches PackagePlaygrounds (not CollapsibleSection) -->
234+
<section class="px-1">
235+
<h2 class="text-xs font-mono text-fg-subtle uppercase tracking-wider mb-3">
236+
{{ $t('package.playgrounds.title') }}
237+
</h2>
238+
<SkeletonBlock class="w-full h-9 rounded-md" />
239+
</section>
240+
215241
<!-- Compatibility — matches CollapsibleSection -->
216242
<section>
217243
<div class="flex items-center justify-between mb-3 px-1">
218-
<h2 class="text-xs text-fg-subtle uppercase tracking-wider flex items-center gap-2">
244+
<h2
245+
class="text-xs font-mono text-fg-subtle uppercase tracking-wider flex items-center gap-2"
246+
>
219247
<span class="w-4 h-4 flex items-center justify-center shrink-0">
220248
<span class="i-carbon:chevron-down w-3 h-3" aria-hidden="true" />
221249
</span>
@@ -230,51 +258,58 @@
230258
</div>
231259
</section>
232260

233-
<!-- Versions — matches CollapsibleSection -->
261+
<!-- Versions — matches CollapsibleSection + PackageVersions -->
234262
<section>
235263
<div class="flex items-center justify-between mb-3 px-1">
236-
<h2 class="text-xs text-fg-subtle uppercase tracking-wider flex items-center gap-2">
264+
<h2
265+
class="text-xs font-mono text-fg-subtle uppercase tracking-wider flex items-center gap-2"
266+
>
237267
<span class="w-4 h-4 flex items-center justify-center shrink-0">
238268
<span class="i-carbon:chevron-down w-3 h-3" aria-hidden="true" />
239269
</span>
240270
{{ $t('package.skeleton.versions') }}
241271
</h2>
242272
</div>
243-
<div class="ms-6 space-y-0.5">
244-
<div class="flex items-center justify-between gap-2 py-1.5">
245-
<SkeletonInline class="h-4 w-16" />
246-
<SkeletonInline class="h-4 w-24" />
247-
</div>
248-
<div class="flex items-center justify-between gap-2 py-1.5">
249-
<SkeletonInline class="h-4 w-14" />
250-
<SkeletonInline class="h-4 w-24" />
251-
</div>
252-
<div class="flex items-center justify-between gap-2 py-1.5">
253-
<SkeletonInline class="h-4 w-18" />
254-
<SkeletonInline class="h-4 w-24" />
255-
</div>
256-
<div class="flex items-center justify-between gap-2 py-1.5">
257-
<SkeletonInline class="h-4 w-14" />
258-
<SkeletonInline class="h-4 w-24" />
273+
<div class="ms-6 space-y-0.5 min-w-0">
274+
<!-- Version rows with expand chevron + version + tag + date -->
275+
<div v-for="i in 4" :key="i" class="flex items-center gap-2 px-1">
276+
<span class="w-4 h-4 flex items-center justify-center shrink-0">
277+
<span class="i-carbon:chevron-right w-3 h-3 text-fg-subtle" aria-hidden="true" />
278+
</span>
279+
<div class="flex-1 py-1.5 min-w-0 flex gap-2 justify-between items-center">
280+
<div>
281+
<SkeletonInline
282+
class="h-4"
283+
:class="i === 1 ? 'w-12' : i === 2 ? 'w-22' : i === 3 ? 'w-26' : 'w-14'"
284+
/>
285+
<SkeletonInline class="h-2.5 w-10 mt-0.5" />
286+
</div>
287+
<SkeletonInline class="h-3 w-20 shrink-0" />
288+
</div>
259289
</div>
260-
<div class="flex items-center justify-between gap-2 py-1.5">
261-
<SkeletonInline class="h-4 w-16" />
262-
<SkeletonInline class="h-4 w-24" />
290+
<!-- Other versions row -->
291+
<div class="flex items-center gap-2 p-1">
292+
<span class="w-4 h-4 flex items-center justify-center shrink-0">
293+
<span class="i-carbon:chevron-right w-3 h-3 text-fg-subtle" aria-hidden="true" />
294+
</span>
295+
<SkeletonInline class="h-3 w-28" />
263296
</div>
264297
</div>
265298
</section>
266299

267300
<!-- Dependencies — matches CollapsibleSection -->
268301
<section>
269302
<div class="flex items-center justify-between mb-3 px-1">
270-
<h2 class="text-xs text-fg-subtle uppercase tracking-wider flex items-center gap-2">
303+
<h2
304+
class="text-xs font-mono text-fg-subtle uppercase tracking-wider flex items-center gap-2"
305+
>
271306
<span class="w-4 h-4 flex items-center justify-center shrink-0">
272307
<span class="i-carbon:chevron-down w-3 h-3" aria-hidden="true" />
273308
</span>
274309
{{ $t('package.skeleton.dependencies') }}
275310
</h2>
276311
</div>
277-
<ul class="ms-6 space-y-1 list-none m-0 p-0">
312+
<ul class="ms-6 px-1 space-y-1 list-none m-0 p-0">
278313
<li class="flex items-center justify-between py-1 text-sm">
279314
<SkeletonInline class="h-4 w-24" />
280315
<SkeletonInline class="h-4 w-12" />
@@ -297,14 +332,16 @@
297332
<!-- Keywords — matches CollapsibleSection -->
298333
<section>
299334
<div class="flex items-center justify-between mb-3 px-1">
300-
<h2 class="text-xs text-fg-subtle uppercase tracking-wider flex items-center gap-2">
335+
<h2
336+
class="text-xs font-mono text-fg-subtle uppercase tracking-wider flex items-center gap-2"
337+
>
301338
<span class="w-4 h-4 flex items-center justify-center shrink-0">
302339
<span class="i-carbon:chevron-down w-3 h-3" aria-hidden="true" />
303340
</span>
304341
{{ $t('package.skeleton.keywords') }}
305342
</h2>
306343
</div>
307-
<ul class="ms-6 flex flex-wrap gap-1.5 list-none m-0 p-0">
344+
<ul class="ms-6 flex flex-wrap gap-1.5 list-none m-0 p-1">
308345
<li><SkeletonInline class="h-6 w-16 rounded" /></li>
309346
<li><SkeletonInline class="h-6 w-12 rounded" /></li>
310347
<li><SkeletonInline class="h-6 w-20 rounded" /></li>
@@ -317,14 +354,16 @@
317354
<!-- Maintainers — matches CollapsibleSection -->
318355
<section>
319356
<div class="flex items-center justify-between mb-3 px-1">
320-
<h2 class="text-xs text-fg-subtle uppercase tracking-wider flex items-center gap-2">
357+
<h2
358+
class="text-xs font-mono text-fg-subtle uppercase tracking-wider flex items-center gap-2"
359+
>
321360
<span class="w-4 h-4 flex items-center justify-center shrink-0">
322361
<span class="i-carbon:chevron-down w-3 h-3" aria-hidden="true" />
323362
</span>
324363
{{ $t('package.skeleton.maintainers') }}
325364
</h2>
326365
</div>
327-
<ul class="ms-6 space-y-2 list-none m-0 p-0">
366+
<ul class="ms-6 space-y-2 list-none my-1 px-1">
328367
<li><SkeletonInline class="h-5 w-28" /></li>
329368
<li><SkeletonInline class="h-5 w-24" /></li>
330369
</ul>

0 commit comments

Comments
 (0)