Skip to content

Commit c228da2

Browse files
danielroedanielroe
committed
fix: add icons, fix scroll margins, and make all headings linkable
1 parent 82db200 commit c228da2

5 files changed

Lines changed: 132 additions & 19 deletions

File tree

‎app/components/PackageDependencies.vue‎

Lines changed: 38 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -48,9 +48,23 @@ const sortedOptionalDependencies = computed(() => {
4848
<template>
4949
<div class="space-y-8">
5050
<!-- Dependencies -->
51-
<section v-if="sortedDependencies.length > 0" aria-labelledby="dependencies-heading">
52-
<h2 id="dependencies-heading" class="text-xs text-fg-subtle uppercase tracking-wider mb-3">
51+
<section
52+
id="dependencies"
53+
v-if="sortedDependencies.length > 0"
54+
aria-labelledby="dependencies-heading"
55+
class="scroll-mt-20"
56+
>
57+
<h2
58+
id="dependencies-heading"
59+
class="group inline-flex items-center gap-1.5 text-xs text-fg-subtle uppercase tracking-wider mb-3"
60+
>
5361
{{ $t('package.dependencies.title', { count: sortedDependencies.length }) }}
62+
<a
63+
href="#dependencies"
64+
class="opacity-0 group-hover:opacity-100 text-fg-subtle hover:text-fg-muted transition-opacity duration-200 no-underline"
65+
>
66+
<span class="i-carbon-link w-3 h-3 block" aria-hidden="true" />
67+
</a>
5468
</h2>
5569
<ul class="space-y-1 list-none m-0 p-0" :aria-label="$t('package.dependencies.list_label')">
5670
<li
@@ -99,12 +113,23 @@ const sortedOptionalDependencies = computed(() => {
99113
</section>
100114

101115
<!-- Peer Dependencies -->
102-
<section v-if="sortedPeerDependencies.length > 0" aria-labelledby="peer-dependencies-heading">
116+
<section
117+
id="peer-dependencies"
118+
v-if="sortedPeerDependencies.length > 0"
119+
aria-labelledby="peer-dependencies-heading"
120+
class="scroll-mt-20"
121+
>
103122
<h2
104123
id="peer-dependencies-heading"
105-
class="text-xs text-fg-subtle uppercase tracking-wider mb-3"
124+
class="group inline-flex items-center gap-1.5 text-xs text-fg-subtle uppercase tracking-wider mb-3"
106125
>
107126
{{ $t('package.peer_dependencies.title', { count: sortedPeerDependencies.length }) }}
127+
<a
128+
href="#peer-dependencies"
129+
class="opacity-0 group-hover:opacity-100 text-fg-subtle hover:text-fg-muted transition-opacity duration-200 no-underline"
130+
>
131+
<span class="i-carbon-link w-3 h-3 block" aria-hidden="true" />
132+
</a>
108133
</h2>
109134
<ul
110135
class="space-y-1 list-none m-0 p-0"
@@ -154,16 +179,24 @@ const sortedOptionalDependencies = computed(() => {
154179

155180
<!-- Optional Dependencies -->
156181
<section
182+
id="optional-dependencies"
157183
v-if="sortedOptionalDependencies.length > 0"
158184
aria-labelledby="optional-dependencies-heading"
185+
class="scroll-mt-20"
159186
>
160187
<h2
161188
id="optional-dependencies-heading"
162-
class="text-xs text-fg-subtle uppercase tracking-wider mb-3"
189+
class="group inline-flex items-center gap-1.5 text-xs text-fg-subtle uppercase tracking-wider mb-3"
163190
>
164191
{{
165192
$t('package.optional_dependencies.title', { count: sortedOptionalDependencies.length })
166193
}}
194+
<a
195+
href="#optional-dependencies"
196+
class="opacity-0 group-hover:opacity-100 text-fg-subtle hover:text-fg-muted transition-opacity duration-200 no-underline"
197+
>
198+
<span class="i-carbon-link w-3 h-3 block" aria-hidden="true" />
199+
</a>
167200
</h2>
168201
<ul
169202
class="space-y-1 list-none m-0 p-0"

‎app/components/PackageMaintainers.vue‎

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -153,9 +153,23 @@ watch(
153153
</script>
154154

155155
<template>
156-
<section v-if="maintainers?.length" aria-labelledby="maintainers-heading">
157-
<h2 id="maintainers-heading" class="text-xs text-fg-subtle uppercase tracking-wider mb-3">
156+
<section
157+
id="maintainers"
158+
v-if="maintainers?.length"
159+
aria-labelledby="maintainers-heading"
160+
class="scroll-mt-20"
161+
>
162+
<h2
163+
id="maintainers-heading"
164+
class="group inline-flex items-center gap-1.5 text-xs text-fg-subtle uppercase tracking-wider mb-3"
165+
>
158166
{{ $t('package.maintainers.title') }}
167+
<a
168+
href="#maintainers"
169+
class="opacity-0 group-hover:opacity-100 text-fg-subtle hover:text-fg-muted transition-opacity duration-200 no-underline"
170+
>
171+
<span class="i-carbon-link w-3 h-3 block" aria-hidden="true" />
172+
</a>
159173
</h2>
160174
<ul class="space-y-2 list-none m-0 p-0" :aria-label="$t('package.maintainers.list_label')">
161175
<li

‎app/components/PackageVersions.vue‎

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -305,9 +305,23 @@ function getTagVersions(tag: string): VersionDisplay[] {
305305
</script>
306306

307307
<template>
308-
<section v-if="allTagRows.length > 0" aria-labelledby="versions-heading" class="overflow-hidden">
309-
<h2 id="versions-heading" class="text-xs text-fg-subtle uppercase tracking-wider mb-3">
308+
<section
309+
id="versions"
310+
v-if="allTagRows.length > 0"
311+
aria-labelledby="versions-heading"
312+
class="overflow-hidden scroll-mt-20"
313+
>
314+
<h2
315+
id="versions-heading"
316+
class="group inline-flex items-center gap-1.5 text-xs text-fg-subtle uppercase tracking-wider mb-3"
317+
>
310318
{{ $t('package.versions.title') }}
319+
<a
320+
href="#versions"
321+
class="opacity-0 group-hover:opacity-100 text-fg-subtle hover:text-fg-muted transition-opacity duration-200 no-underline"
322+
>
323+
<span class="i-carbon-link w-3 h-3 block" aria-hidden="true" />
324+
</a>
311325
</h2>
312326

313327
<div class="space-y-0.5 min-w-0">

‎app/components/PackageWeeklyDownloadStats.vue‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -144,10 +144,18 @@ const config = computed(() => {
144144

145145
<template>
146146
<div class="space-y-8">
147-
<section>
147+
<section id="downloads" class="scroll-mt-20">
148148
<div class="flex items-center justify-between mb-3">
149-
<h2 class="text-xs text-fg-subtle uppercase tracking-wider">
149+
<h2
150+
class="group inline-flex items-center gap-1.5 text-xs text-fg-subtle uppercase tracking-wider"
151+
>
150152
{{ $t('package.downloads.title') }}
153+
<a
154+
href="#downloads"
155+
class="opacity-0 group-hover:opacity-100 text-fg-subtle hover:text-fg-muted transition-opacity duration-200 no-underline"
156+
>
157+
<span class="i-carbon-link w-3 h-3 block" aria-hidden="true" />
158+
</a>
151159
</h2>
152160
<button
153161
type="button"
@@ -211,7 +219,7 @@ const config = computed(() => {
211219
class="w-12 h-12 bg-bg-elevated border border-border rounded-full shadow-lg flex items-center justify-center text-fg-muted hover:text-fg transition-colors"
212220
:aria-label="$t('common.close')"
213221
>
214-
<span class="w-5 h-5 i-carbon-close" />
222+
<span class="w-5 h-5 i-carbon-close" aria-hidden="true" />
215223
</button>
216224
</div>
217225
</template>

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

Lines changed: 51 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -667,10 +667,19 @@ defineOgImageComponent('Package', {
667667
/>
668668

669669
<!-- Install command with package manager selector -->
670-
<section aria-labelledby="install-heading" class="area-install">
670+
<section id="install" aria-labelledby="install-heading" class="area-install scroll-mt-20">
671671
<div class="flex flex-wrap items-center justify-between mb-3">
672-
<h2 id="install-heading" class="text-xs text-fg-subtle uppercase tracking-wider">
672+
<h2
673+
id="install-heading"
674+
class="group inline-flex items-center gap-1.5 text-xs text-fg-subtle uppercase tracking-wider"
675+
>
673676
{{ $t('package.install.title') }}
677+
<a
678+
href="#install"
679+
class="opacity-0 group-hover:opacity-100 text-fg-subtle hover:text-fg-muted transition-opacity duration-200 no-underline"
680+
>
681+
<span class="i-carbon-link w-3 h-3 block" aria-hidden="true" />
682+
</a>
674683
</h2>
675684
<!-- Package manager tabs -->
676685
<div
@@ -769,9 +778,22 @@ defineOgImageComponent('Package', {
769778
</section>
770779

771780
<!-- README -->
772-
<section id="readme" aria-labelledby="readme-heading" class="area-readme min-w-0">
773-
<h2 id="readme-heading" class="text-xs text-fg-subtle uppercase tracking-wider mb-4">
781+
<section
782+
id="readme"
783+
aria-labelledby="readme-heading"
784+
class="area-readme min-w-0 scroll-mt-20"
785+
>
786+
<h2
787+
id="readme-heading"
788+
class="group inline-flex items-center gap-1.5 text-xs text-fg-subtle uppercase tracking-wider mb-4"
789+
>
774790
{{ $t('package.readme.title') }}
791+
<a
792+
href="#readme"
793+
class="opacity-0 group-hover:opacity-100 text-fg-subtle hover:text-fg-muted transition-opacity duration-200 no-underline"
794+
>
795+
<span class="i-carbon-link w-3 h-3 block" aria-hidden="true" />
796+
</a>
775797
</h2>
776798
<!-- eslint-disable vue/no-v-html -- HTML is sanitized server-side -->
777799
<div
@@ -799,9 +821,23 @@ defineOgImageComponent('Package', {
799821
</ClientOnly>
800822

801823
<!-- Keywords -->
802-
<section v-if="displayVersion?.keywords?.length" aria-labelledby="keywords-heading">
803-
<h2 id="keywords-heading" class="text-xs text-fg-subtle uppercase tracking-wider mb-3">
824+
<section
825+
id="keywords"
826+
v-if="displayVersion?.keywords?.length"
827+
aria-labelledby="keywords-heading"
828+
class="scroll-mt-20"
829+
>
830+
<h2
831+
id="keywords-heading"
832+
class="group inline-flex items-center gap-1.5 text-xs text-fg-subtle uppercase tracking-wider mb-3"
833+
>
804834
{{ $t('package.keywords_title') }}
835+
<a
836+
href="#keywords"
837+
class="opacity-0 group-hover:opacity-100 text-fg-subtle hover:text-fg-muted transition-opacity duration-200 no-underline"
838+
>
839+
<span class="i-carbon-link w-3 h-3 block" aria-hidden="true" />
840+
</a>
805841
</h2>
806842
<ul class="flex flex-wrap gap-1.5 list-none m-0 p-0">
807843
<li v-for="keyword in displayVersion.keywords.slice(0, 15)" :key="keyword">
@@ -822,16 +858,24 @@ defineOgImageComponent('Package', {
822858
/>
823859

824860
<section
861+
id="compatibility"
825862
v-if="
826863
displayVersion?.engines && (displayVersion.engines.node || displayVersion.engines.npm)
827864
"
828865
aria-labelledby="compatibility-heading"
866+
class="scroll-mt-20"
829867
>
830868
<h2
831869
id="compatibility-heading"
832-
class="text-xs text-fg-subtle uppercase tracking-wider mb-3"
870+
class="group inline-flex items-center gap-1.5 text-xs text-fg-subtle uppercase tracking-wider mb-3"
833871
>
834872
{{ $t('package.compatibility') }}
873+
<a
874+
href="#compatibility"
875+
class="opacity-0 group-hover:opacity-100 text-fg-subtle hover:text-fg-muted transition-opacity duration-200 no-underline"
876+
>
877+
<span class="i-carbon-link w-3 h-3 block" aria-hidden="true" />
878+
</a>
835879
</h2>
836880
<dl class="space-y-2">
837881
<div v-if="displayVersion.engines.node" class="flex justify-between gap-4 py-1">

0 commit comments

Comments
 (0)