forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
feat: call out latest version in version list (#448)
authored by
Tom Sherman
and committed by
GitHub
7cf66b24
75e50e8f
+65
-53
+65
-53
app/components/PackageVersions.vue
+65
-53
app/components/PackageVersions.vue
···
109
109
const rows = isPackageDeprecated.value
110
110
? allTagRows.value
111
111
: allTagRows.value.filter(row => !row.primaryVersion.deprecated)
112
-
return rows.slice(0, MAX_VISIBLE_TAGS)
112
+
const first = rows.slice(0, MAX_VISIBLE_TAGS)
113
+
const latestTagRow = rows.find(row => row.tag === 'latest')
114
+
// Ensure 'latest' tag is always included (at the end) if not already present
115
+
if (latestTagRow && !first.includes(latestTagRow)) {
116
+
first.pop()
117
+
first.push(latestTagRow)
118
+
}
119
+
return first
113
120
})
114
121
115
122
// Hidden tag rows (all other tags) - shown in "Other versions"
···
322
329
<div class="space-y-0.5 min-w-0">
323
330
<!-- Dist-tag rows (limited to MAX_VISIBLE_TAGS) -->
324
331
<div v-for="row in visibleTagRows" :key="row.id">
325
-
<div class="flex items-center gap-2">
332
+
<div
333
+
class="flex items-center gap-2 pe-2"
334
+
:class="row.tag === 'latest' ? 'bg-bg-subtle rounded-lg' : ''"
335
+
>
326
336
<!-- Expand button (only if there are more versions to show) -->
327
337
<button
328
338
v-if="getTagVersions(row.tag).length > 1 || !hasLoadedAll"
···
354
364
<span v-else class="w-4" />
355
365
356
366
<!-- Version info -->
357
-
<div class="flex-1 py-1.5 min-w-0">
358
-
<div class="flex items-center justify-between gap-2">
359
-
<NuxtLink
360
-
:to="versionRoute(row.primaryVersion.version)"
361
-
class="font-mono text-sm transition-colors duration-200 truncate inline-flex items-center gap-1"
362
-
:class="
363
-
row.primaryVersion.deprecated
364
-
? 'text-red-400 hover:text-red-300'
365
-
: 'text-fg-muted hover:text-fg'
366
-
"
367
-
:title="
368
-
row.primaryVersion.deprecated
369
-
? $t('package.versions.deprecated_title', {
370
-
version: row.primaryVersion.version,
371
-
})
372
-
: row.primaryVersion.version
373
-
"
374
-
>
367
+
<div class="flex-1 py-1.5 min-w-0 flex gap-2 justify-between items-center">
368
+
<div>
369
+
<div>
370
+
<NuxtLink
371
+
:to="versionRoute(row.primaryVersion.version)"
372
+
class="font-mono text-sm transition-colors duration-200 truncate inline-flex items-center gap-1"
373
+
:class="
374
+
row.primaryVersion.deprecated
375
+
? 'text-red-400 hover:text-red-300'
376
+
: 'text-fg-muted hover:text-fg'
377
+
"
378
+
:title="
379
+
row.primaryVersion.deprecated
380
+
? $t('package.versions.deprecated_title', {
381
+
version: row.primaryVersion.version,
382
+
})
383
+
: row.primaryVersion.version
384
+
"
385
+
>
386
+
<span
387
+
v-if="row.primaryVersion.deprecated"
388
+
class="i-carbon-warning-hex w-3.5 h-3.5 shrink-0"
389
+
aria-hidden="true"
390
+
/>
391
+
{{ row.primaryVersion.version }}
392
+
</NuxtLink>
393
+
</div>
394
+
<div v-if="row.tags.length" class="flex items-center gap-1 mt-0.5 flex-wrap">
375
395
<span
376
-
v-if="row.primaryVersion.deprecated"
377
-
class="i-carbon-warning-hex w-3.5 h-3.5 shrink-0"
378
-
aria-hidden="true"
379
-
/>
380
-
{{ row.primaryVersion.version }}
381
-
</NuxtLink>
382
-
<div class="flex items-center gap-2 shrink-0">
383
-
<DateTime
384
-
v-if="row.primaryVersion.time"
385
-
:datetime="row.primaryVersion.time"
386
-
year="numeric"
387
-
month="short"
388
-
day="numeric"
389
-
class="text-xs text-fg-subtle"
390
-
/>
391
-
<ProvenanceBadge
392
-
v-if="row.primaryVersion.hasProvenance"
393
-
:package-name="packageName"
394
-
:version="row.primaryVersion.version"
395
-
compact
396
-
/>
396
+
v-for="tag in row.tags"
397
+
:key="tag"
398
+
class="text-[9px] font-semibold text-fg-subtle uppercase tracking-wide truncate max-w-[150px]"
399
+
:title="tag"
400
+
>
401
+
{{ tag }}
402
+
</span>
397
403
</div>
398
404
</div>
399
-
<div v-if="row.tags.length" class="flex items-center gap-1 mt-0.5 flex-wrap">
400
-
<span
401
-
v-for="tag in row.tags"
402
-
:key="tag"
403
-
class="text-[9px] font-semibold text-fg-subtle uppercase tracking-wide truncate max-w-[150px]"
404
-
:title="tag"
405
-
>
406
-
{{ tag }}
407
-
</span>
405
+
<div class="flex items-center gap-2 shrink-0">
406
+
<DateTime
407
+
v-if="row.primaryVersion.time"
408
+
:datetime="row.primaryVersion.time"
409
+
year="numeric"
410
+
month="short"
411
+
day="numeric"
412
+
class="text-xs text-fg-subtle"
413
+
/>
414
+
<ProvenanceBadge
415
+
v-if="row.primaryVersion.hasProvenance"
416
+
:package-name="packageName"
417
+
:version="row.primaryVersion.version"
418
+
compact
419
+
/>
408
420
</div>
409
421
</div>
410
422
</div>
···
412
424
<!-- Expanded versions -->
413
425
<div
414
426
v-if="expandedTags.has(row.tag) && getTagVersions(row.tag).length > 1"
415
-
class="ms-4 ps-2 border-is border-border space-y-0.5"
427
+
class="ms-4 ps-2 border-is border-border space-y-0.5 pe-2"
416
428
>
417
429
<div v-for="v in getTagVersions(row.tag).slice(1)" :key="v.version" class="py-1">
418
430
<div class="flex items-center justify-between gap-2">
···
542
554
/>
543
555
{{ row.primaryVersion.version }}
544
556
</NuxtLink>
545
-
<div class="flex items-center gap-2 shrink-0">
557
+
<div class="flex items-center gap-2 shrink-0 pe-2">
546
558
<DateTime
547
559
v-if="row.primaryVersion.time"
548
560
:datetime="row.primaryVersion.time"
···
618
630
{{ group.versions[0]?.version }}
619
631
</NuxtLink>
620
632
</div>
621
-
<div class="flex items-center gap-2 shrink-0">
633
+
<div class="flex items-center gap-2 shrink-0 pe-2">
622
634
<DateTime
623
635
v-if="group.versions[0]?.time"
624
636
:datetime="group.versions[0]?.time"