Skip to content

Commit 6d3840d

Browse files
RYGRITRYGRIT
committed
fix: update LinkBase usage across app
1 parent 1ab5a16 commit 6d3840d

20 files changed

Lines changed: 132 additions & 102 deletions

‎app/app.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -121,9 +121,9 @@ if (import.meta.client) {
121121
<template>
122122
<div class="min-h-screen flex flex-col bg-bg text-fg">
123123
<NuxtPwaAssets />
124-
<LinkBase to="#main-content" variant="button-primary" class="skip-link">{{
125-
$t('common.skip_link')
126-
}}</LinkBase>
124+
<LinkBase to="#main-content" type="button" class="skip-link" size="sm">
125+
{{ $t('common.skip_link') }}
126+
</LinkBase>
127127

128128
<AppHeader :show-logo="!isHomepage" />
129129

‎app/components/AppFooter.vue‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -17,10 +17,10 @@ const showModal = () => modalRef.value?.showModal?.()
1717
</div>
1818
<!-- Desktop: Show all links. Mobile: Links are in MobileMenu -->
1919
<div class="hidden sm:flex items-center gap-6 min-h-11 text-xs">
20-
<LinkBase :to="{ name: 'about' }">
20+
<LinkBase :to="{ name: 'about' }" size="xs">
2121
{{ $t('footer.about') }}
2222
</LinkBase>
23-
<LinkBase :to="{ name: 'privacy' }">
23+
<LinkBase :to="{ name: 'privacy' }" size="xs">
2424
{{ $t('privacy_policy.title') }}
2525
</LinkBase>
2626
<button
@@ -32,6 +32,7 @@ const showModal = () => modalRef.value?.showModal?.()
3232
{{ $t('footer.keyboard_shortcuts') }}
3333
</button>
3434

35+
<!-- Keyboard Shortcuts Modal -->
3536
<Modal
3637
ref="modalRef"
3738
:modalTitle="$t('footer.keyboard_shortcuts')"
@@ -89,16 +90,16 @@ const showModal = () => modalRef.value?.showModal?.()
8990
</li>
9091
</ul>
9192
</Modal>
92-
<LinkBase to="https://docs.npmx.dev">
93+
<LinkBase to="https://docs.npmx.dev" size="xs">
9394
{{ $t('footer.docs') }}
9495
</LinkBase>
95-
<LinkBase to="https://repo.npmx.dev">
96+
<LinkBase to="https://repo.npmx.dev" size="xs">
9697
{{ $t('footer.source') }}
9798
</LinkBase>
98-
<LinkBase to="https://social.npmx.dev">
99+
<LinkBase to="https://social.npmx.dev" size="xs">
99100
{{ $t('footer.social') }}
100101
</LinkBase>
101-
<LinkBase to="https://chat.npmx.dev">
102+
<LinkBase to="https://chat.npmx.dev" size="xs">
102103
{{ $t('footer.chat') }}
103104
</LinkBase>
104105
</div>

‎app/components/AppHeader.vue‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -257,9 +257,10 @@ onKeyStroke(
257257
v-for="link in desktopLinks"
258258
:key="link.name"
259259
class="border-none"
260-
variant="button-secondary"
260+
type="button"
261261
:to="link.to"
262262
:aria-keyshortcuts="link.keyshortcut"
263+
size="sm"
263264
>
264265
{{ link.label }}
265266
</LinkBase>

‎app/components/BuildEnvironment.vue‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,14 +24,15 @@ const buildTime = computed(() => new Date(buildInfo.value.time))
2424
<LinkBase
2525
v-if="buildInfo.env === 'release'"
2626
:to="`https://github.com/npmx-dev/npmx.dev/tag/v${buildInfo.version}`"
27+
size="sm"
2728
>
2829
v{{ buildInfo.version }}
2930
</LinkBase>
3031
<span v-else class="tracking-wider">{{ buildInfo.env }}</span>
3132

3233
<template v-if="buildInfo.commit && buildInfo.branch !== 'release'">
3334
<span>&middot;</span>
34-
<LinkBase :to="`https://github.com/npmx-dev/npmx.dev/commit/${buildInfo.commit}`">
35+
<LinkBase :to="`https://github.com/npmx-dev/npmx.dev/commit/${buildInfo.commit}`" size="xs">
3536
{{ buildInfo.shortCommit }}
3637
</LinkBase>
3738
</template>

‎app/components/Code/FileTree.vue‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -80,11 +80,12 @@ watch(
8080
<!-- File -->
8181
<template v-else>
8282
<LinkBase
83-
variant="button-secondary"
83+
type="button"
8484
:to="getFileRoute(node.path)"
8585
:aria-current="currentPath === node.path"
8686
class="w-full justify-start! rounded-none! border-none!"
87-
block
87+
:inline="false"
88+
size="sm"
8889
:style="{ paddingLeft: `${depth * 12 + 32}px` }"
8990
:classicon="getFileIcon(node.name)"
9091
>

‎app/components/CollapsibleSection.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -103,7 +103,7 @@ useHead({
103103
/>
104104
</button>
105105

106-
<LinkBase :to="`#${id}`">
106+
<LinkBase :to="`#${id}`" size="xs">
107107
{{ title }}
108108
</LinkBase>
109109
</component>

‎app/components/Compare/ComparisonGrid.vue‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -42,8 +42,9 @@ function getReplacementTooltip(col: ComparisonGridColumn): string {
4242
<span class="inline-flex items-center gap-1.5 truncate">
4343
<LinkBase
4444
:to="packageRoute(col.name, col.version)"
45-
class="text-sm truncate"
46-
block
45+
class="truncate"
46+
:inline="false"
47+
size="sm"
4748
:title="col.version ? `${col.name}@${col.version}` : col.name"
4849
>
4950
{{ col.name }}<template v-if="col.version">@{{ col.version }}</template>
@@ -80,9 +81,9 @@ function getReplacementTooltip(col: ComparisonGridColumn): string {
8081
<p class="text-xs text-fg-muted">
8182
<i18n-t keypath="compare.no_dependency.tooltip_description" tag="span">
8283
<template #link>
83-
<LinkBase to="https://e18e.dev/docs/replacements/">{{
84-
$t('compare.no_dependency.e18e_community')
85-
}}</LinkBase>
84+
<LinkBase to="https://e18e.dev/docs/replacements/" size="xs">
85+
{{ $t('compare.no_dependency.e18e_community') }}
86+
</LinkBase>
8687
</template>
8788
</i18n-t>
8889
</p>

‎app/components/Compare/ReplacementSuggestion.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@ const docUrl = computed(() => {
7373
</ButtonBase>
7474

7575
<!-- Info link -->
76-
<LinkBase v-else-if="docUrl" :to="docUrl" variant="button-secondary" size="small">
76+
<LinkBase v-else-if="docUrl" :to="docUrl" type="button" size="xs">
7777
{{ $t('package.replacement.learn_more') }}
7878
</LinkBase>
7979
</div>

‎app/components/Package/Dependencies.vue‎

Lines changed: 18 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,7 @@ const numberFormatter = useNumberFormatter()
9191
:key="dep"
9292
class="flex items-center justify-between py-1 text-sm gap-2"
9393
>
94-
<LinkBase :to="packageRoute(dep)" class="block truncate" dir="ltr">
94+
<LinkBase :to="packageRoute(dep)" :inline="false" class="truncate" dir="ltr" size="sm">
9595
{{ dep }}
9696
</LinkBase>
9797
<span class="flex items-center gap-1 max-w-[40%]" dir="ltr">
@@ -111,6 +111,7 @@ const numberFormatter = useNumberFormatter()
111111
:class="SEVERITY_TEXT_COLORS[getHighestSeverity(getVulnerableDepInfo(dep)!.counts)]"
112112
:title="`${getVulnerableDepInfo(dep)!.counts.total} vulnerabilities`"
113113
classicon="i-carbon:security"
114+
size="sm"
114115
>
115116
<span class="sr-only">{{ $t('package.dependencies.view_vulnerabilities') }}</span>
116117
</LinkBase>
@@ -120,6 +121,7 @@ const numberFormatter = useNumberFormatter()
120121
class="shrink-0 text-purple-500"
121122
:title="getDeprecatedDepInfo(dep)!.message"
122123
classicon="i-carbon:warning-hex"
124+
size="sm"
123125
>
124126
<span class="sr-only">{{ $t('package.deprecated.label') }}</span>
125127
</LinkBase>
@@ -128,6 +130,7 @@ const numberFormatter = useNumberFormatter()
128130
class="block truncate"
129131
:class="getVersionClass(outdatedDeps[dep])"
130132
:title="outdatedDeps[dep] ? getOutdatedTooltip(outdatedDeps[dep], $t) : version"
133+
size="sm"
131134
>
132135
{{ version }}
133136
</LinkBase>
@@ -178,7 +181,13 @@ const numberFormatter = useNumberFormatter()
178181
class="flex items-center justify-between py-1 text-sm gap-1 min-w-0"
179182
>
180183
<div class="flex items-center gap-1 min-w-0 flex-1">
181-
<LinkBase :to="packageRoute(peer.name)" class="block truncate" dir="ltr">
184+
<LinkBase
185+
:to="packageRoute(peer.name)"
186+
:inline="false"
187+
class="truncate"
188+
dir="ltr"
189+
size="sm"
190+
>
182191
{{ peer.name }}
183192
</LinkBase>
184193
<TagStatic v-if="peer.optional" :title="$t('package.dependencies.optional')">
@@ -187,9 +196,11 @@ const numberFormatter = useNumberFormatter()
187196
</div>
188197
<LinkBase
189198
:to="packageRoute(peer.name, peer.version)"
190-
class="block truncate max-w-[40%]"
199+
:inline="false"
200+
class="truncate max-w-[40%]"
191201
:title="peer.version"
192202
dir="ltr"
203+
size="sm"
193204
>
194205
{{ peer.version }}
195206
</LinkBase>
@@ -239,14 +250,16 @@ const numberFormatter = useNumberFormatter()
239250
:key="dep"
240251
class="flex items-center justify-between py-1 text-sm gap-2"
241252
>
242-
<LinkBase :to="packageRoute(dep)" class="block truncate" dir="ltr">
253+
<LinkBase :to="packageRoute(dep)" :inline="false" class="truncate" dir="ltr" size="sm">
243254
{{ dep }}
244255
</LinkBase>
245256
<LinkBase
246257
:to="packageRoute(dep, version)"
247-
class="block truncate"
258+
:inline="false"
259+
class="truncate"
248260
:title="version"
249261
dir="ltr"
262+
size="sm"
250263
>
251264
{{ version }}
252265
</LinkBase>

‎app/components/Package/InstallScripts.vue‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -59,10 +59,10 @@ const isExpanded = shallowRef(false)
5959
>
6060
<template v-if="installScripts.content?.[scriptName] && scriptParts[scriptName]">
6161
<template v-if="scriptParts[scriptName].prefix">
62-
{{ scriptParts[scriptName].prefix
63-
}}<LinkBase :to="scriptParts[scriptName].link">{{
64-
scriptParts[scriptName].filePath
65-
}}</LinkBase>
62+
{{ scriptParts[scriptName].prefix }}
63+
<LinkBase :to="scriptParts[scriptName].link" text="sm">
64+
{{ scriptParts[scriptName].filePath }}
65+
</LinkBase>
6666
</template>
6767
<LinkBase v-else :to="scriptParts[scriptName].link">
6868
{{ installScripts.content[scriptName] }}

0 commit comments

Comments
 (0)