forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
fix: display docs/code in tabs to the right and fix sticky layout (#256)
authored by
Daniel Roe
and committed by
GitHub
ebf4a2e3
154d47b4
+175
-153
+175
-153
app/pages/[...package].vue
+175
-153
app/pages/[...package].vue
···
421
421
}
422
422
})
423
423
424
+
onKeyStroke('d', () => {
425
+
if (docsLink.value) {
426
+
router.push(docsLink.value)
427
+
}
428
+
})
429
+
424
430
defineOgImageComponent('Package', {
425
431
name: () => pkg.value?.name ?? 'Package',
426
432
version: () => displayVersion.value?.version ?? '',
···
435
441
436
442
<article
437
443
v-else-if="status === 'success' && pkg"
438
-
class="package-page motion-safe:animate-fade-in overflow-x-hidden"
444
+
class="package-page motion-safe:animate-fade-in"
439
445
>
440
446
<!-- Package header -->
441
-
<header class="area-header pb-8 border-b border-border">
447
+
<header class="area-header border-b border-border">
442
448
<div class="mb-4">
443
449
<!-- Package name and version -->
444
450
<div class="flex items-baseline gap-2 mb-1.5 sm:gap-3 sm:mb-2 flex-wrap min-w-0">
···
512
518
</template>
513
519
</ClientOnly>
514
520
515
-
<a
516
-
:href="`https://www.npmjs.com/package/${pkg.name}`"
517
-
target="_blank"
518
-
rel="noopener noreferrer"
519
-
class="link-subtle font-mono text-sm inline-flex items-center gap-1.5 ml-auto shrink-0 self-center"
520
-
:title="$t('common.view_on_npm')"
521
+
<!-- Internal navigation: Docs + Code (hidden on mobile, shown in external links instead) -->
522
+
<nav
523
+
v-if="displayVersion"
524
+
aria-label="Package navigation"
525
+
class="hidden sm:flex items-center gap-1 p-0.5 bg-bg-subtle border border-border-subtle rounded-md shrink-0 ml-auto self-center"
521
526
>
522
-
<span class="i-carbon-logo-npm w-4 h-4" aria-hidden="true" />
523
-
<span class="hidden sm:inline">npm</span>
524
-
<span class="sr-only sm:hidden">{{ $t('common.view_on_npm') }}</span>
525
-
</a>
527
+
<NuxtLink
528
+
v-if="docsLink"
529
+
:to="docsLink"
530
+
class="px-2 py-1.5 font-mono text-xs rounded transition-colors duration-150 border border-transparent text-fg-subtle hover:text-fg hover:bg-bg hover:shadow hover:border-border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 inline-flex items-center gap-1.5"
531
+
aria-keyshortcuts="d"
532
+
>
533
+
<span class="i-carbon-document w-3 h-3" aria-hidden="true" />
534
+
{{ $t('package.links.docs') }}
535
+
<kbd
536
+
class="inline-flex items-center justify-center w-4 h-4 text-xs bg-bg-muted border border-border rounded"
537
+
aria-hidden="true"
538
+
>
539
+
d
540
+
</kbd>
541
+
</NuxtLink>
542
+
<NuxtLink
543
+
:to="{
544
+
name: 'code',
545
+
params: { path: [...pkg.name.split('/'), 'v', displayVersion.version] },
546
+
}"
547
+
class="px-2 py-1.5 font-mono text-xs rounded transition-colors duration-150 border border-transparent text-fg-subtle hover:text-fg hover:bg-bg hover:shadow hover:border-border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 inline-flex items-center gap-1.5"
548
+
aria-keyshortcuts="."
549
+
>
550
+
<span class="i-carbon-code w-3 h-3" aria-hidden="true" />
551
+
{{ $t('package.links.code') }}
552
+
<kbd
553
+
class="inline-flex items-center justify-center w-4 h-4 text-xs bg-bg-muted border border-border rounded"
554
+
aria-hidden="true"
555
+
>
556
+
.
557
+
</kbd>
558
+
</NuxtLink>
559
+
</nav>
526
560
</div>
527
561
528
562
<!-- Fixed height description container to prevent CLS -->
···
552
586
</button>
553
587
</div>
554
588
</div>
589
+
590
+
<!-- External links -->
591
+
<ul class="flex flex-wrap items-center gap-x-3 gap-y-1.5 sm:gap-4 list-none m-0 p-0 mt-3">
592
+
<li v-if="repositoryUrl">
593
+
<a
594
+
:href="repositoryUrl"
595
+
target="_blank"
596
+
rel="noopener noreferrer"
597
+
class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
598
+
>
599
+
<span class="w-4 h-4" :class="repoProviderIcon" aria-hidden="true" />
600
+
<span v-if="repoRef">
601
+
{{ repoRef.owner }}<span class="opacity-50">/</span>{{ repoRef.repo }}
602
+
</span>
603
+
<span v-else>{{ $t('package.links.repo') }}</span>
604
+
</a>
605
+
</li>
606
+
<li v-if="repositoryUrl && repoMeta && starsLink">
607
+
<a
608
+
:href="starsLink"
609
+
target="_blank"
610
+
rel="noopener noreferrer"
611
+
class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
612
+
>
613
+
<span class="w-4 h-4 i-carbon-star" aria-hidden="true" />
614
+
{{ formatCompactNumber(stars, { decimals: 1 }) }}
615
+
</a>
616
+
</li>
617
+
<li v-if="forks && forksLink">
618
+
<a
619
+
:href="forksLink"
620
+
target="_blank"
621
+
rel="noopener noreferrer"
622
+
class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
623
+
>
624
+
<span class="i-carbon-fork w-4 h-4" aria-hidden="true" />
625
+
{{ formatCompactNumber(forks, { decimals: 1 }) }}
626
+
</a>
627
+
</li>
628
+
<li v-if="homepageUrl">
629
+
<a
630
+
:href="homepageUrl"
631
+
target="_blank"
632
+
rel="noopener noreferrer"
633
+
class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
634
+
>
635
+
<span class="i-carbon-link w-4 h-4" aria-hidden="true" />
636
+
{{ $t('package.links.homepage') }}
637
+
</a>
638
+
</li>
639
+
<li v-if="displayVersion?.bugs?.url">
640
+
<a
641
+
:href="displayVersion.bugs.url"
642
+
target="_blank"
643
+
rel="noopener noreferrer"
644
+
class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
645
+
>
646
+
<span class="i-carbon-warning w-4 h-4" aria-hidden="true" />
647
+
{{ $t('package.links.issues') }}
648
+
</a>
649
+
</li>
650
+
<li>
651
+
<a
652
+
:href="`https://www.npmjs.com/package/${pkg.name}`"
653
+
target="_blank"
654
+
rel="noopener noreferrer"
655
+
class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
656
+
:title="$t('common.view_on_npm')"
657
+
>
658
+
<span class="i-carbon-logo-npm w-4 h-4" aria-hidden="true" />
659
+
npm
660
+
</a>
661
+
</li>
662
+
<li v-if="jsrInfo?.exists && jsrInfo.url">
663
+
<a
664
+
:href="jsrInfo.url"
665
+
target="_blank"
666
+
rel="noopener noreferrer"
667
+
class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
668
+
:title="$t('badges.jsr.title')"
669
+
>
670
+
<span class="i-simple-icons-jsr w-4 h-4" aria-hidden="true" />
671
+
{{ $t('package.links.jsr') }}
672
+
</a>
673
+
</li>
674
+
<li v-if="fundingUrl">
675
+
<a
676
+
:href="fundingUrl"
677
+
target="_blank"
678
+
rel="noopener noreferrer"
679
+
class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
680
+
>
681
+
<span class="i-carbon-favorite w-4 h-4" aria-hidden="true" />
682
+
{{ $t('package.links.fund') }}
683
+
</a>
684
+
</li>
685
+
<!-- Mobile-only: Docs + Code links -->
686
+
<li v-if="docsLink && displayVersion" class="sm:hidden">
687
+
<NuxtLink
688
+
:to="docsLink"
689
+
class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
690
+
>
691
+
<span class="i-carbon-document w-4 h-4" aria-hidden="true" />
692
+
{{ $t('package.links.docs') }}
693
+
</NuxtLink>
694
+
</li>
695
+
<li v-if="displayVersion" class="sm:hidden">
696
+
<NuxtLink
697
+
:to="{
698
+
name: 'code',
699
+
params: { path: [...pkg.name.split('/'), 'v', displayVersion.version] },
700
+
}"
701
+
class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
702
+
>
703
+
<span class="i-carbon-code w-4 h-4" aria-hidden="true" />
704
+
{{ $t('package.links.code') }}
705
+
</NuxtLink>
706
+
</li>
707
+
</ul>
555
708
</div>
556
709
557
710
<div
···
572
725
</div>
573
726
574
727
<!-- Stats grid -->
575
-
<dl class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-6 gap-3 sm:gap-4 mt-4 sm:mt-6">
728
+
<dl
729
+
class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3 sm:gap-4 py-4 sm:py-6 mt-4 sm:mt-6 border-t border-border"
730
+
>
576
731
<div v-if="pkg.license" class="space-y-1">
577
732
<dt class="text-xs text-fg-subtle uppercase tracking-wider">
578
733
{{ $t('package.stats.license') }}
···
582
737
</dd>
583
738
</div>
584
739
585
-
<div v-if="downloads" class="space-y-1">
586
-
<dt class="text-xs text-fg-subtle uppercase tracking-wider">
587
-
{{ $t('package.stats.weekly') }}
588
-
</dt>
589
-
<dd class="font-mono text-sm text-fg flex items-center justify-start gap-2">
590
-
{{ formatNumber(downloads.downloads) }}
591
-
<a
592
-
:href="`https://npm.chart.dev/${pkg.name}`"
593
-
target="_blank"
594
-
rel="noopener noreferrer"
595
-
class="text-fg-subtle hover:text-fg transition-colors duration-200 inline-flex items-center justify-center min-w-6 min-h-6 -m-1 p-1"
596
-
:title="$t('package.stats.view_download_trends')"
597
-
>
598
-
<span class="i-carbon-chart-line w-3.5 h-3.5 inline-block" aria-hidden="true" />
599
-
<span class="sr-only">{{ $t('package.stats.view_download_trends') }}</span>
600
-
</a>
601
-
</dd>
602
-
</div>
603
-
604
740
<div class="space-y-1">
605
741
<dt class="text-xs text-fg-subtle uppercase tracking-wider">
606
742
{{ $t('package.stats.deps') }}
···
636
772
</dd>
637
773
</div>
638
774
639
-
<div class="space-y-1 sm:col-span-2">
775
+
<div class="space-y-1">
640
776
<dt class="text-xs text-fg-subtle uppercase tracking-wider flex items-center gap-1">
641
777
{{ $t('package.stats.install_size') }}
642
778
<span
···
674
810
</div>
675
811
676
812
<div v-if="pkg.time?.modified" class="space-y-1">
677
-
<dt class="text-xs text-fg-subtle uppercase tracking-wider sm:text-right">
813
+
<dt class="text-xs text-fg-subtle uppercase tracking-wider">
678
814
{{ $t('package.stats.updated') }}
679
815
</dt>
680
-
<dd class="font-mono text-sm text-fg sm:text-right">
816
+
<dd class="font-mono text-sm text-fg">
681
817
<DateTime :datetime="pkg.time.modified" date-style="medium" />
682
818
</dd>
683
819
</div>
684
820
</dl>
685
-
686
-
<!-- Links -->
687
-
<nav aria-label="Package links" class="mt-6">
688
-
<ul class="flex flex-wrap items-stretch gap-3 sm:gap-4 list-none m-0 p-0">
689
-
<li v-if="repositoryUrl">
690
-
<a
691
-
:href="repositoryUrl"
692
-
target="_blank"
693
-
rel="noopener noreferrer"
694
-
class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
695
-
>
696
-
<span class="w-4 h-4" :class="repoProviderIcon" aria-hidden="true" />
697
-
<span v-if="repoRef">
698
-
{{ repoRef.owner }}<span class="opacity-50">/</span>{{ repoRef.repo }}
699
-
</span>
700
-
<span v-else>{{ $t('package.links.repo') }}</span>
701
-
</a>
702
-
</li>
703
-
<li v-if="repositoryUrl && repoMeta && starsLink">
704
-
<a
705
-
:href="starsLink"
706
-
target="_blank"
707
-
rel="noopener noreferrer"
708
-
class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
709
-
>
710
-
<span class="w-4 h-4 i-carbon-star" aria-hidden="true" />
711
-
{{ formatCompactNumber(stars, { decimals: 1 }) }}
712
-
</a>
713
-
</li>
714
-
<li v-if="homepageUrl">
715
-
<a
716
-
:href="homepageUrl"
717
-
target="_blank"
718
-
rel="noopener noreferrer"
719
-
class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
720
-
>
721
-
<span class="i-carbon-link w-4 h-4" aria-hidden="true" />
722
-
{{ $t('package.links.homepage') }}
723
-
</a>
724
-
</li>
725
-
<li v-if="displayVersion?.bugs?.url">
726
-
<a
727
-
:href="displayVersion.bugs.url"
728
-
target="_blank"
729
-
rel="noopener noreferrer"
730
-
class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
731
-
>
732
-
<span class="i-carbon-warning w-4 h-4" aria-hidden="true" />
733
-
{{ $t('package.links.issues') }}
734
-
</a>
735
-
</li>
736
-
737
-
<li v-if="forks && forksLink">
738
-
<a
739
-
:href="forksLink"
740
-
target="_blank"
741
-
rel="noopener noreferrer"
742
-
class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
743
-
>
744
-
<span class="i-carbon-fork w-4 h-4" aria-hidden="true" />
745
-
<span>
746
-
{{ formatCompactNumber(forks, { decimals: 1 }) }}
747
-
{{ $t('package.links.forks', { count: forks }, forks) }}
748
-
</span>
749
-
</a>
750
-
</li>
751
-
752
-
<li v-if="jsrInfo?.exists && jsrInfo.url">
753
-
<a
754
-
:href="jsrInfo.url"
755
-
target="_blank"
756
-
rel="noopener noreferrer"
757
-
class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
758
-
:title="$t('badges.jsr.title')"
759
-
>
760
-
<span class="i-simple-icons-jsr w-4 h-4" aria-hidden="true" />
761
-
{{ $t('package.links.jsr') }}
762
-
</a>
763
-
</li>
764
-
<li v-if="docsLink">
765
-
<NuxtLink
766
-
:to="docsLink"
767
-
class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
768
-
>
769
-
<span class="i-carbon-document w-4 h-4" aria-hidden="true" />
770
-
{{ $t('package.links.docs') }}
771
-
</NuxtLink>
772
-
</li>
773
-
<li v-if="fundingUrl">
774
-
<NuxtLink
775
-
:to="fundingUrl"
776
-
class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
777
-
>
778
-
<span class="i-carbon-favorite w-4 h-4" aria-hidden="true" />
779
-
{{ $t('package.links.fund') }}
780
-
</NuxtLink>
781
-
</li>
782
-
<li v-if="displayVersion" class="sm:ml-auto">
783
-
<NuxtLink
784
-
:to="{
785
-
name: 'code',
786
-
params: { path: [...pkg.name.split('/'), 'v', displayVersion.version] },
787
-
}"
788
-
class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
789
-
aria-keyshortcuts="."
790
-
>
791
-
<span class="i-carbon-code w-4 h-4 sm:invisible" aria-hidden="true" />
792
-
{{ $t('package.links.code') }}
793
-
<kbd
794
-
class="hidden sm:inline-flex items-center justify-center w-4 h-4 text-xs bg-bg-muted border border-border rounded"
795
-
aria-hidden="true"
796
-
>
797
-
.
798
-
</kbd>
799
-
</NuxtLink>
800
-
</li>
801
-
</ul>
802
-
</nav>
803
821
</header>
804
822
805
823
<!-- Security vulnerabilities warning -->
···
1296
1314
1297
1315
.area-header {
1298
1316
grid-area: header;
1317
+
overflow-x: hidden;
1299
1318
}
1300
1319
.area-install {
1301
1320
grid-area: install;
1321
+
overflow-x: hidden;
1302
1322
}
1303
1323
.area-vulns {
1304
1324
grid-area: vulns;
1325
+
overflow-x: hidden;
1305
1326
}
1306
1327
.area-readme {
1307
1328
grid-area: readme;
1329
+
overflow-x: hidden;
1308
1330
}
1309
1331
.area-sidebar {
1310
1332
grid-area: sidebar;