forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
fix: use `<NuxtTime>` for locale-await time elements
+26
-30
+26
-22
app/components/PackageVersions.vue
+26
-22
app/components/PackageVersions.vue
···
290
290
function getTagVersions(tag: string): VersionDisplay[] {
291
291
return tagVersions.value.get(tag) ?? []
292
292
}
293
-
294
-
function formatDate(dateStr: string): string {
295
-
return new Date(dateStr).toLocaleDateString('en-US', {
296
-
year: 'numeric',
297
-
month: 'short',
298
-
day: 'numeric',
299
-
})
300
-
}
301
293
</script>
302
294
303
295
<template>
···
341
333
{{ row.primaryVersion.version }}
342
334
</NuxtLink>
343
335
<div class="flex items-center gap-2 shrink-0">
344
-
<time
336
+
<NuxtTime
345
337
v-if="row.primaryVersion.time"
346
338
:datetime="row.primaryVersion.time"
339
+
year="numeric"
340
+
month="short"
341
+
day="numeric"
347
342
class="text-xs text-fg-subtle"
348
-
>
349
-
{{ formatDate(row.primaryVersion.time) }}
350
-
</time>
343
+
/>
351
344
<ProvenanceBadge
352
345
v-if="row.primaryVersion.hasProvenance"
353
346
:package-name="packageName"
···
384
377
{{ v.version }}
385
378
</NuxtLink>
386
379
<div class="flex items-center gap-2 shrink-0">
387
-
<time v-if="v.time" :datetime="v.time" class="text-[10px] text-fg-subtle">
388
-
{{ formatDate(v.time) }}
389
-
</time>
380
+
<NuxtTime
381
+
v-if="v.time"
382
+
:datetime="v.time"
383
+
class="text-[10px] text-fg-subtle"
384
+
year="numeric"
385
+
month="short"
386
+
day="numeric"
387
+
/>
390
388
<ProvenanceBadge
391
389
v-if="v.hasProvenance"
392
390
:package-name="packageName"
···
451
449
{{ row.primaryVersion.version }}
452
450
</NuxtLink>
453
451
<div class="flex items-center gap-2 shrink-0">
454
-
<time
452
+
<NuxtTime
455
453
v-if="row.primaryVersion.time"
456
454
:datetime="row.primaryVersion.time"
457
455
class="text-[10px] text-fg-subtle"
458
-
>
459
-
{{ formatDate(row.primaryVersion.time) }}
460
-
</time>
456
+
year="numeric"
457
+
month="short"
458
+
day="numeric"
459
+
/>
461
460
</div>
462
461
</div>
463
462
<div v-if="row.tags.length" class="flex items-center gap-1 mt-0.5 flex-wrap">
···
543
542
{{ v.version }}
544
543
</NuxtLink>
545
544
<div class="flex items-center gap-2 shrink-0">
546
-
<time v-if="v.time" :datetime="v.time" class="text-[10px] text-fg-subtle">
547
-
{{ formatDate(v.time) }}
548
-
</time>
545
+
<NuxtTime
546
+
v-if="v.time"
547
+
:datetime="v.time"
548
+
class="text-[10px] text-fg-subtle"
549
+
year="numeric"
550
+
month="short"
551
+
day="numeric"
552
+
/>
549
553
<ProvenanceBadge
550
554
v-if="v.hasProvenance"
551
555
:package-name="packageName"
-8
app/utils/formatters.ts
-8
app/utils/formatters.ts
···
2
2
return new Intl.NumberFormat('en-US').format(num)
3
3
}
4
4
5
-
export function formatDate(dateStr: string): string {
6
-
return new Date(dateStr).toLocaleDateString('en-US', {
7
-
year: 'numeric',
8
-
month: 'short',
9
-
day: 'numeric',
10
-
})
11
-
}
12
-
13
5
export function toIsoDateString(date: Date): string {
14
6
const year = date.getUTCFullYear()
15
7
const month = String(date.getUTCMonth() + 1).padStart(2, '0')