Skip to content

Commit 80bcd90

Browse files
essenmitsosseessenmitsosse
committed
refactor: replace (almost) all links on package page
1 parent 4974d56 commit 80bcd90

2 files changed

Lines changed: 83 additions & 89 deletions

File tree

‎app/components/Link/Base.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,9 +39,9 @@ const props = withDefaults(
3939
<NuxtLink
4040
v-else
4141
:class="{
42-
'text-fg underline-offset-4 underline decoration-fg/50 hover:(no-underline text-fg/80) transition-colors duration-200':
42+
'text-fg underline-offset-4 underline decoration-1 decoration-fg/50 hover:(no-underline text-fg/80) transition-colors duration-200':
4343
variant === 'link',
44-
'gap-x-1 items-center justify-center font-mono border border-border rounded-md transition-all duration-200 aria-current:(bg-fg text-bg border-fg hover:enabled:(text-bg/50))':
44+
'gap-x-1 inline-flex gap-x-1 items-center justify-center font-mono border border-border rounded-md transition-all duration-200 aria-current:(bg-fg text-bg border-fg hover:enabled:(text-bg/50))':
4545
variant !== 'link',
4646
'text-sm px-4 py-2': variant !== 'tag' && variant !== 'link',
4747
'text-xs px-2 py-0.5': variant === 'tag',

‎app/pages/package/[...package].vue‎

Lines changed: 81 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ import { areUrlsEquivalent } from '#shared/utils/url'
1313
import { isEditableElement } from '~/utils/input'
1414
import { formatBytes } from '~/utils/formatters'
1515
import { getDependencyCount } from '~/utils/npm/dependency-count'
16-
import { NuxtLink } from '#components'
1716
import { useModal } from '~/composables/useModal'
1817
import { useAtproto } from '~/composables/atproto/useAtproto'
1918
import { togglePackageLike } from '~/utils/atproto/likes'
@@ -516,13 +515,9 @@ onKeyStroke(
516515
class="font-mono text-2xl sm:text-3xl font-medium min-w-0 break-words"
517516
:title="pkg.name"
518517
>
519-
<NuxtLink
520-
v-if="orgName"
521-
:to="{ name: 'org', params: { org: orgName } }"
522-
class="text-fg-muted hover:text-fg transition-colors duration-200"
523-
>
518+
<LinkBase v-if="orgName" :to="{ name: 'org', params: { org: orgName } }">
524519
@{{ orgName }}
525-
</NuxtLink>
520+
</LinkBase>
526521
<span v-if="orgName">/</span>
527522
<span :class="{ 'text-fg-muted': orgName }">
528523
{{ orgName ? pkg.name.replace(`@${orgName}/`, '') : pkg.name }}
@@ -557,11 +552,11 @@ onKeyStroke(
557552
<span class="i-carbon:arrow-right rtl-flip w-3 h-3" aria-hidden="true" />
558553
</template>
559554

560-
<NuxtLink
555+
<LinkBase
561556
v-if="requestedVersion && resolvedVersion !== requestedVersion"
562557
:to="`/package/${pkg.name}/v/${resolvedVersion}`"
563558
:title="$t('package.view_permalink')"
564-
>{{ resolvedVersion }}</NuxtLink
559+
>{{ resolvedVersion }}</LinkBase
565560
>
566561
<span v-else>v{{ resolvedVersion }}</span>
567562

@@ -576,13 +571,13 @@ onKeyStroke(
576571
"
577572
position="bottom"
578573
>
579-
<a
574+
<LinkBase
575+
variant="tag"
580576
href="#provenance"
581577
:aria-label="$t('package.provenance_section.view_more_details')"
582-
class="inline-flex items-center justify-center gap-1.5 text-fg-muted hover:text-emerald-500 transition-colors duration-200 min-w-6 min-h-6"
583578
>
584579
<span class="i-lucide-shield-check w-3.5 h-3.5 shrink-0" aria-hidden="true" />
585-
</a>
580+
</LinkBase>
586581
</TooltipApp>
587582
</template>
588583
<span
@@ -610,16 +605,16 @@ onKeyStroke(
610605
"
611606
position="bottom"
612607
>
613-
<button
608+
<ButtonBase
614609
@click="likeAction"
615-
type="button"
610+
variant="tag"
616611
:title="
617612
likesData?.userHasLiked ? $t('package.likes.unlike') : $t('package.likes.like')
618613
"
619-
class="inline-flex items-center gap-1.5 font-mono text-sm text-fg hover:text-fg-muted transition-colors duration-200"
620614
:aria-label="
621615
likesData?.userHasLiked ? $t('package.likes.unlike') : $t('package.likes.like')
622616
"
617+
:aria-pressed="likesData?.userHasLiked"
623618
>
624619
<span
625620
:class="
@@ -633,7 +628,7 @@ onKeyStroke(
633628
<span>{{
634629
formatCompactNumber(likesData?.totalLikes ?? 0, { decimals: 1 })
635630
}}</span>
636-
</button>
631+
</ButtonBase>
637632
</TooltipApp>
638633
<template #fallback>
639634
<div
@@ -654,49 +649,49 @@ onKeyStroke(
654649
:aria-label="$t('package.navigation')"
655650
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"
656651
>
657-
<NuxtLink
652+
<LinkBase
653+
variant="button-secondary"
658654
v-if="docsLink"
659655
:to="docsLink"
660-
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 inline-flex items-center gap-1.5"
661656
aria-keyshortcuts="d"
662657
>
663658
<span class="i-carbon:document w-3 h-3" aria-hidden="true" />
664659
{{ $t('package.links.docs') }}
665660
<kbd
666-
class="inline-flex items-center justify-center w-4 h-4 text-xs bg-bg-muted border border-border rounded"
661+
class="inline-flex items-center justify-center w-4 h-4 text-xs bg-bg-muted border border-border rounded no-underline"
667662
aria-hidden="true"
668663
>
669664
d
670665
</kbd>
671-
</NuxtLink>
672-
<NuxtLink
666+
</LinkBase>
667+
<LinkBase
668+
variant="button-secondary"
673669
:to="`/package-code/${pkg.name}/v/${resolvedVersion}`"
674-
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 inline-flex items-center gap-1.5"
675670
aria-keyshortcuts="."
676671
>
677672
<span class="i-carbon:code w-3 h-3" aria-hidden="true" />
678673
{{ $t('package.links.code') }}
679674
<kbd
680-
class="inline-flex items-center justify-center w-4 h-4 text-xs bg-bg-muted border border-border rounded"
675+
class="inline-flex items-center justify-center w-4 h-4 text-xs bg-bg-muted border border-border rounded no-underline"
681676
aria-hidden="true"
682677
>
683678
.
684679
</kbd>
685-
</NuxtLink>
686-
<NuxtLink
680+
</LinkBase>
681+
<LinkBase
682+
variant="button-secondary"
687683
:to="{ path: '/compare', query: { packages: pkg.name } }"
688-
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 inline-flex items-center gap-1.5"
689684
aria-keyshortcuts="c"
690685
>
691686
<span class="i-carbon:compare w-3 h-3" aria-hidden="true" />
692687
{{ $t('package.links.compare') }}
693688
<kbd
694-
class="inline-flex items-center justify-center w-4 h-4 text-xs bg-bg-muted border border-border rounded"
689+
class="inline-flex items-center justify-center w-4 h-4 text-xs bg-bg-muted border border-border rounded no-underline"
695690
aria-hidden="true"
696691
>
697692
c
698693
</kbd>
699-
</NuxtLink>
694+
</LinkBase>
700695
</nav>
701696
</div>
702697
</header>
@@ -715,127 +710,124 @@ onKeyStroke(
715710
</div>
716711

717712
<!-- External links -->
718-
<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">
713+
<ul class="flex flex-wrap items-center gap-1 sm:gap-2 list-none m-0 p-0 mt-3">
719714
<li v-if="repositoryUrl">
720-
<a
715+
<LinkBase
716+
variant="button-secondary"
721717
:href="repositoryUrl"
722718
target="_blank"
723719
rel="noopener noreferrer"
724-
class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
725720
>
726721
<span class="w-4 h-4" :class="repoProviderIcon" aria-hidden="true" />
727722
<span v-if="repoRef">
728723
{{ repoRef.owner }}<span class="opacity-50">/</span>{{ repoRef.repo }}
729724
</span>
730725
<span v-else>{{ $t('package.links.repo') }}</span>
731-
</a>
726+
</LinkBase>
732727
</li>
733728
<li v-if="repositoryUrl && repoMeta && starsLink">
734-
<a
729+
<LinkBase
730+
variant="button-secondary"
735731
:href="starsLink"
736732
target="_blank"
737733
rel="noopener noreferrer"
738-
class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
739734
>
740735
<span class="w-4 h-4 i-carbon:star" aria-hidden="true" />
741736
{{ formatCompactNumber(stars, { decimals: 1 }) }}
742-
</a>
737+
</LinkBase>
743738
</li>
744739
<li v-if="forks && forksLink">
745-
<a
740+
<LinkBase
741+
variant="button-secondary"
746742
:href="forksLink"
747743
target="_blank"
748744
rel="noopener noreferrer"
749-
class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
750745
>
751746
<span class="i-carbon:fork w-4 h-4" aria-hidden="true" />
752747
{{ formatCompactNumber(forks, { decimals: 1 }) }}
753-
</a>
748+
</LinkBase>
754749
</li>
755750
<li v-if="homepageUrl">
756-
<a
751+
<LinkBase
752+
variant="button-secondary"
757753
:href="homepageUrl"
758754
target="_blank"
759755
rel="noopener noreferrer"
760-
class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
761756
>
762757
<span class="i-carbon:link w-4 h-4" aria-hidden="true" />
763758
{{ $t('package.links.homepage') }}
764-
</a>
759+
</LinkBase>
765760
</li>
766761
<li v-if="displayVersion?.bugs?.url">
767-
<a
762+
<LinkBase
763+
variant="button-secondary"
768764
:href="displayVersion.bugs.url"
769765
target="_blank"
770766
rel="noopener noreferrer"
771-
class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
772767
>
773768
<span class="i-carbon:warning w-4 h-4" aria-hidden="true" />
774769
{{ $t('package.links.issues') }}
775-
</a>
770+
</LinkBase>
776771
</li>
777772
<li>
778-
<a
773+
<LinkBase
774+
variant="button-secondary"
779775
:href="`https://www.npmjs.com/package/${pkg.name}`"
780776
target="_blank"
781777
rel="noopener noreferrer"
782-
class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
783778
:title="$t('common.view_on_npm')"
784779
>
785780
<span class="i-carbon:logo-npm w-4 h-4" aria-hidden="true" />
786781
npm
787-
</a>
782+
</LinkBase>
788783
</li>
789784
<li v-if="jsrInfo?.exists && jsrInfo.url">
790-
<a
785+
<LinkBase
786+
variant="button-secondary"
791787
:href="jsrInfo.url"
792788
target="_blank"
793789
rel="noopener noreferrer"
794-
class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
795790
:title="$t('badges.jsr.title')"
796791
>
797792
<span class="i-simple-icons:jsr w-4 h-4" aria-hidden="true" />
798793
{{ $t('package.links.jsr') }}
799-
</a>
794+
</LinkBase>
800795
</li>
801796
<li v-if="fundingUrl">
802-
<a
797+
<LinkBase
798+
variant="button-secondary"
803799
:href="fundingUrl"
804800
target="_blank"
805801
rel="noopener noreferrer"
806-
class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
807802
>
808803
<span class="i-carbon:favorite w-4 h-4" aria-hidden="true" />
809804
{{ $t('package.links.fund') }}
810-
</a>
805+
</LinkBase>
811806
</li>
812807
<!-- Mobile-only: Docs + Code + Compare links -->
813808
<li v-if="docsLink && displayVersion" class="sm:hidden">
814-
<NuxtLink
815-
:to="docsLink"
816-
class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
817-
>
809+
<LinkBase variant="button-secondary" :to="docsLink">
818810
<span class="i-carbon:document w-4 h-4" aria-hidden="true" />
819811
{{ $t('package.links.docs') }}
820-
</NuxtLink>
812+
</LinkBase>
821813
</li>
822814
<li v-if="resolvedVersion" class="sm:hidden">
823-
<NuxtLink
815+
<LinkBase
816+
variant="button-secondary"
824817
:to="`/package-code/${pkg.name}/v/${resolvedVersion}`"
825-
class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
826818
>
827819
<span class="i-carbon:code w-4 h-4" aria-hidden="true" />
828820
{{ $t('package.links.code') }}
829-
</NuxtLink>
821+
</LinkBase>
830822
</li>
831823
<li class="sm:hidden">
832-
<NuxtLink
824+
<LinkBase
825+
variant="button-secondary"
833826
:to="{ path: '/compare', query: { packages: pkg.name } }"
834-
class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
835827
>
836828
<span class="i-carbon:compare w-4 h-4" aria-hidden="true" />
837829
{{ $t('package.links.compare') }}
838-
</NuxtLink>
830+
</LinkBase>
839831
</li>
840832
</ul>
841833
</div>
@@ -905,29 +897,31 @@ onKeyStroke(
905897
</ClientOnly>
906898
</template>
907899

908-
<a
909-
v-if="getDependencyCount(displayVersion) > 0"
910-
:href="`https://npmgraph.js.org/?q=${pkg.name}`"
911-
target="_blank"
912-
rel="noopener noreferrer"
913-
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 focus-visible:outline-accent/70 rounded"
914-
:title="$t('package.stats.view_dependency_graph')"
915-
>
916-
<span class="i-carbon:network-3 w-3.5 h-3.5" aria-hidden="true" />
917-
<span class="sr-only">{{ $t('package.stats.view_dependency_graph') }}</span>
918-
</a>
919-
920-
<a
921-
v-if="getDependencyCount(displayVersion) > 0"
922-
:href="`https://node-modules.dev/grid/depth#install=${pkg.name}${resolvedVersion ? `@${resolvedVersion}` : ''}`"
923-
target="_blank"
924-
rel="noopener noreferrer"
925-
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 focus-visible:outline-accent/70 rounded"
926-
:title="$t('package.stats.inspect_dependency_tree')"
927-
>
928-
<span class="i-lucide-view w-3.5 h-3.5" aria-hidden="true" />
929-
<span class="sr-only">{{ $t('package.stats.inspect_dependency_tree') }}</span>
930-
</a>
900+
<div class="flex items-center gap-1">
901+
<LinkBase
902+
variant="tag"
903+
v-if="getDependencyCount(displayVersion) > 0"
904+
:href="`https://npmgraph.js.org/?q=${pkg.name}`"
905+
target="_blank"
906+
rel="noopener noreferrer"
907+
:title="$t('package.stats.view_dependency_graph')"
908+
>
909+
<span class="i-carbon:network-3 w-3.5 h-3.5" aria-hidden="true" />
910+
<span class="sr-only">{{ $t('package.stats.view_dependency_graph') }}</span>
911+
</LinkBase>
912+
913+
<LinkBase
914+
variant="tag"
915+
v-if="getDependencyCount(displayVersion) > 0"
916+
:href="`https://node-modules.dev/grid/depth#install=${pkg.name}${resolvedVersion ? `@${resolvedVersion}` : ''}`"
917+
target="_blank"
918+
rel="noopener noreferrer"
919+
:title="$t('package.stats.inspect_dependency_tree')"
920+
>
921+
<span class="i-lucide-view w-3.5 h-3.5" aria-hidden="true" />
922+
<span class="sr-only">{{ $t('package.stats.inspect_dependency_tree') }}</span>
923+
</LinkBase>
924+
</div>
931925
</dd>
932926
</div>
933927

0 commit comments

Comments
 (0)