[READ-ONLY] a fast, modern browser for the npm registry
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

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
··· 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;