forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
refactor: remove unnecessary prop from links (#1247)
authored by
Marcus Blättermann
and committed by
GitHub
2a474e97
e0c6b735
+70
-81
+1
-1
app/components/AppHeader.vue
+1
-1
app/components/AppHeader.vue
···
270
270
<!-- Mobile: Menu button (always visible, click to open menu) -->
271
271
<ButtonBase
272
272
type="button"
273
-
class="sm:hidden flex"
273
+
class="sm:hidden"
274
274
:aria-label="$t('nav.open_menu')"
275
275
:aria-expanded="showMobileMenu"
276
276
@click="showMobileMenu = !showMobileMenu"
+5
-6
app/components/Button/Base.vue
+5
-6
app/components/Button/Base.vue
···
6
6
variant?: 'primary' | 'secondary'
7
7
size?: 'small' | 'medium'
8
8
ariaKeyshortcuts?: string
9
+
block?: boolean
9
10
10
11
classicon?: string
11
12
}>(),
···
27
28
<template>
28
29
<button
29
30
ref="el"
30
-
class="group cursor-pointer inline-flex gap-x-1 items-center justify-center font-mono border border-border rounded-md transition-all duration-200 disabled:(opacity-40 cursor-not-allowed border-transparent)"
31
+
class="group cursor-pointer gap-x-1 items-center justify-center font-mono border border-border rounded-md transition-all duration-200 disabled:(opacity-40 cursor-not-allowed border-transparent)"
31
32
:class="{
33
+
'inline-flex': !block,
34
+
'flex': block,
32
35
'text-sm px-4 py-2': size === 'medium',
33
36
'text-xs px-2 py-0.5': size === 'small',
34
37
'bg-transparent text-fg hover:enabled:(bg-fg/10) focus-visible:enabled:(bg-fg/10) aria-pressed:(bg-fg/10 border-fg/20 hover:enabled:(bg-fg/20 text-fg/50))':
···
48
51
"
49
52
:aria-keyshortcuts="ariaKeyshortcuts"
50
53
>
51
-
<span
52
-
v-if="classicon"
53
-
:class="[size === 'small' ? 'size-3' : 'size-4', classicon]"
54
-
aria-hidden="true"
55
-
/>
54
+
<span v-if="classicon" class="size-[1em]" :class="classicon" aria-hidden="true" />
56
55
<slot />
57
56
<kbd
58
57
v-if="ariaKeyshortcuts"
+4
-2
app/components/Code/FileTree.vue
+4
-2
app/components/Code/FileTree.vue
···
50
50
<!-- Directory -->
51
51
<template v-if="node.type === 'directory'">
52
52
<ButtonBase
53
-
class="w-full flex! justify-start! rounded-none! border-none!"
53
+
class="w-full justify-start! rounded-none! border-none!"
54
+
block
54
55
:aria-pressed="isNodeActive(node)"
55
56
:style="{ paddingLeft: `${depth * 12 + 12}px` }"
56
57
@click="toggleDir(node.path)"
···
82
83
variant="button-secondary"
83
84
:to="getFileRoute(node.path)"
84
85
:aria-current="currentPath === node.path"
85
-
class="w-full flex! justify-start! rounded-none! border-none!"
86
+
class="w-full justify-start! rounded-none! border-none!"
87
+
block
86
88
:style="{ paddingLeft: `${depth * 12 + 32}px` }"
87
89
:classicon="getFileIcon(node.name)"
88
90
>
+1
-1
app/components/CollapsibleSection.vue
+1
-1
app/components/CollapsibleSection.vue
+2
-1
app/components/Compare/ComparisonGrid.vue
+2
-1
app/components/Compare/ComparisonGrid.vue
···
42
42
<span class="inline-flex items-center gap-1.5 truncate">
43
43
<LinkBase
44
44
:to="packageRoute(col.name, col.version)"
45
-
class="text-sm flex! truncate"
45
+
class="text-sm truncate"
46
+
block
46
47
:title="col.version ? `${col.name}@${col.version}` : col.name"
47
48
>
48
49
{{ col.name }}<template v-if="col.version">@{{ col.version }}</template>
+1
-6
app/components/Header/AuthModal.client.vue
+1
-6
app/components/Header/AuthModal.client.vue
···
142
142
{{ $t('auth.modal.create_account') }}
143
143
</ButtonBase>
144
144
<hr class="color-border" />
145
-
<ButtonBase
146
-
type="button"
147
-
variant="primary"
148
-
class="w-full flex items-center justify-center gap-2"
149
-
@click="handleBlueskySignIn"
150
-
>
145
+
<ButtonBase type="button" variant="primary" class="w-full" @click="handleBlueskySignIn" block>
151
146
{{ $t('auth.modal.connect_bluesky') }}
152
147
<svg fill="none" viewBox="0 0 64 57" width="20" style="width: 20px">
153
148
<path
+17
-22
app/components/Link/Base.vue
+17
-22
app/components/Link/Base.vue
···
12
12
type?: never
13
13
variant?: 'button-primary' | 'button-secondary' | 'link'
14
14
size?: 'small' | 'medium'
15
-
iconSize?: 'sm' | 'md' | 'lg'
15
+
block?: boolean
16
16
17
17
ariaKeyshortcuts?: string
18
18
···
50
50
() => !!props.to && typeof props.to === 'string' && props.to.startsWith('#'),
51
51
)
52
52
53
-
const ICON_SIZE_MAP = {
54
-
sm: 'size-3 min-w-3',
55
-
md: 'size-4 min-w-4',
56
-
lg: 'size-5 min-w-5',
57
-
}
58
-
59
53
/** size is only applicable for button like links */
60
54
const isLink = computed(() => props.variant === 'link')
61
-
const isButton = computed(() => props.variant !== 'link')
62
-
const isButtonSmall = computed(() => props.size === 'small' && props.variant !== 'link')
63
-
const isButtonMedium = computed(() => props.size === 'medium' && props.variant !== 'link')
64
-
65
-
const iconSizeClass = computed(
66
-
() => ICON_SIZE_MAP[props.iconSize || (isButtonSmall.value && 'sm') || 'md'],
67
-
)
55
+
const isButton = computed(() => !isLink.value)
56
+
const isButtonSmall = computed(() => props.size === 'small' && !isLink.value)
57
+
const isButtonMedium = computed(() => props.size === 'medium' && !isLink.value)
68
58
</script>
69
59
70
60
<template>
71
61
<span
72
62
v-if="disabled"
73
63
:class="{
74
-
'opacity-50 inline-flex gap-x-1 items-center justify-center font-mono border border-transparent rounded-md':
64
+
'flex': block,
65
+
'inline-flex': !block,
66
+
'opacity-50 gap-x-1 items-center justify-center font-mono border border-transparent rounded-md':
75
67
isButton,
76
68
'text-sm px-4 py-2': isButtonMedium,
77
69
'text-xs px-2 py-0.5': isButtonSmall,
···
82
74
/></span>
83
75
<NuxtLink
84
76
v-else
85
-
class="group/link inline-flex gap-x-1 items-center justify-center"
77
+
class="group/link gap-x-1 items-center"
86
78
:class="{
79
+
'flex': block,
80
+
'inline-flex': !block,
87
81
'underline-offset-[0.2rem] underline decoration-1 decoration-fg/30':
88
82
!isLinkAnchor && isLink && !noUnderline,
89
-
'font-mono text-fg hover:(decoration-accent text-accent) focus-visible:(decoration-accent text-accent) transition-colors duration-200':
83
+
'justify-start font-mono text-fg hover:(decoration-accent text-accent) focus-visible:(decoration-accent text-accent) transition-colors duration-200':
90
84
isLink,
91
-
'font-mono border border-border rounded-md transition-all duration-200': isButton,
85
+
'justify-center font-mono border border-border rounded-md transition-all duration-200':
86
+
isButton,
92
87
'text-sm px-4 py-2': isButtonMedium,
93
88
'text-xs px-2 py-0.5': isButtonSmall,
94
89
'bg-transparent text-fg hover:(bg-fg/10 text-accent) focus-visible:(bg-fg/10 text-accent) aria-[current=true]:(bg-fg/10 text-accent border-fg/20 hover:enabled:(bg-fg/20 text-fg/50))':
···
100
95
:aria-keyshortcuts="ariaKeyshortcuts"
101
96
:target="isLinkExternal ? '_blank' : undefined"
102
97
>
103
-
<span v-if="classicon" class="me-1" :class="[iconSizeClass, classicon]" aria-hidden="true" />
98
+
<span v-if="classicon" class="size-[1em]" :class="classicon" aria-hidden="true" />
104
99
<slot />
105
100
<!-- automatically show icon indicating external link -->
106
101
<span
107
102
v-if="isLinkExternal && !classicon"
108
-
class="i-carbon:launch rtl-flip w-3 h-3 opacity-50"
103
+
class="i-carbon:launch rtl-flip size-[1em] opacity-50"
109
104
aria-hidden="true"
110
105
/>
111
106
<span
112
107
v-else-if="isLinkAnchor && isLink"
113
-
class="i-carbon:link w-3 h-3 opacity-0 group-hover/link:opacity-100 transition-opacity duration-200"
108
+
class="i-carbon:link size-[1em] opacity-0 group-hover/link:opacity-100 transition-opacity duration-200"
114
109
aria-hidden="true"
115
110
/>
116
111
<kbd
117
112
v-if="ariaKeyshortcuts"
118
-
class="ms-2 inline-flex items-center justify-center w-4 h-4 text-xs text-fg bg-bg-muted border border-border rounded no-underline"
113
+
class="ms-2 inline-flex items-center justify-center size-4 text-xs text-fg bg-bg-muted border border-border rounded no-underline"
119
114
aria-hidden="true"
120
115
>
121
116
{{ ariaKeyshortcuts }}
+36
-38
app/components/Package/Versions.vue
+36
-38
app/components/Package/Versions.vue
···
354
354
<!-- Version info -->
355
355
<div class="flex-1 py-1.5 min-w-0 flex gap-2 justify-between items-center">
356
356
<div class="overflow-hidden">
357
-
<div>
358
-
<LinkBase
359
-
:to="versionRoute(row.primaryVersion.version)"
360
-
class="text-sm block truncate"
361
-
:class="
362
-
row.primaryVersion.deprecated ? 'text-red-400 hover:text-red-300' : undefined
363
-
"
364
-
:title="
365
-
row.primaryVersion.deprecated
366
-
? $t('package.versions.deprecated_title', {
367
-
version: row.primaryVersion.version,
368
-
})
369
-
: row.primaryVersion.version
370
-
"
371
-
:classicon="row.primaryVersion.deprecated ? 'i-carbon-warning-hex' : undefined"
372
-
icon-size="sm"
373
-
>
374
-
<span dir="ltr">
375
-
{{ row.primaryVersion.version }}
376
-
</span>
377
-
</LinkBase>
378
-
</div>
357
+
<LinkBase
358
+
:to="versionRoute(row.primaryVersion.version)"
359
+
block
360
+
class="text-sm"
361
+
:class="
362
+
row.primaryVersion.deprecated ? 'text-red-400 hover:text-red-300' : undefined
363
+
"
364
+
:title="
365
+
row.primaryVersion.deprecated
366
+
? $t('package.versions.deprecated_title', {
367
+
version: row.primaryVersion.version,
368
+
})
369
+
: row.primaryVersion.version
370
+
"
371
+
:classicon="row.primaryVersion.deprecated ? 'i-carbon-warning-hex' : undefined"
372
+
>
373
+
<span dir="ltr" class="block truncate">
374
+
{{ row.primaryVersion.version }}
375
+
</span>
376
+
</LinkBase>
379
377
<div v-if="row.tags.length" class="flex items-center gap-1 mt-0.5 flex-wrap">
380
378
<span
381
379
v-for="tag in row.tags"
382
380
:key="tag"
383
-
class="text-4xs font-semibold text-fg-subtle uppercase tracking-wide truncate max-w-[150px]"
381
+
class="text-4xs font-semibold text-fg-subtle uppercase tracking-wide truncate"
384
382
:title="tag"
385
383
>
386
384
{{ tag }}
···
415
413
<div class="flex items-center justify-between gap-2">
416
414
<LinkBase
417
415
:to="versionRoute(v.version)"
418
-
class="text-xs block truncate"
416
+
block
417
+
class="text-xs"
419
418
:class="v.deprecated ? 'text-red-400 hover:text-red-300' : undefined"
420
419
:title="
421
420
v.deprecated
···
423
422
: v.version
424
423
"
425
424
:classicon="v.deprecated ? 'i-carbon-warning-hex' : undefined"
426
-
icon-size="sm"
427
425
>
428
-
<span dir="ltr">
426
+
<span dir="ltr" class="block truncate">
429
427
{{ v.version }}
430
428
</span>
431
429
</LinkBase>
···
513
511
<div class="flex items-center justify-between gap-2">
514
512
<LinkBase
515
513
:to="versionRoute(row.primaryVersion.version)"
516
-
class="text-xs block truncate"
514
+
block
515
+
class="text-xs"
517
516
:class="
518
517
row.primaryVersion.deprecated ? 'text-red-400 hover:text-red-300' : undefined
519
518
"
···
525
524
: row.primaryVersion.version
526
525
"
527
526
:classicon="row.primaryVersion.deprecated ? 'i-carbon-warning-hex' : undefined"
528
-
icon-size="sm"
529
527
>
530
-
<span dir="ltr">
528
+
<span dir="ltr" class="block truncate">
531
529
{{ row.primaryVersion.version }}
532
530
</span>
533
531
</LinkBase>
···
586
584
<LinkBase
587
585
v-if="group.versions[0]?.version"
588
586
:to="versionRoute(group.versions[0]?.version)"
589
-
class="text-xs block truncate"
587
+
block
588
+
class="text-xs"
590
589
:class="
591
590
group.versions[0]?.deprecated
592
591
? 'text-red-400 hover:text-red-300'
···
602
601
:classicon="
603
602
group.versions[0]?.deprecated ? 'i-carbon-warning-hex' : undefined
604
603
"
605
-
icon-size="sm"
606
604
>
607
-
<span dir="ltr">
605
+
<span dir="ltr" class="block truncate">
608
606
{{ group.versions[0]?.version }}
609
607
</span>
610
608
</LinkBase>
···
644
642
<div v-else class="py-1">
645
643
<div class="flex items-center justify-between gap-2">
646
644
<div class="flex items-center gap-2 min-w-0">
647
-
<span class="w-4 shrink-0" />
648
645
<LinkBase
649
646
v-if="group.versions[0]?.version"
650
647
:to="versionRoute(group.versions[0]?.version)"
651
-
class="text-xs block truncate"
648
+
block
649
+
class="text-xs ms-6"
652
650
:class="
653
651
group.versions[0]?.deprecated
654
652
? 'text-red-400 hover:text-red-300'
···
664
662
:classicon="
665
663
group.versions[0]?.deprecated ? 'i-carbon-warning-hex' : undefined
666
664
"
667
-
icon-size="sm"
668
665
>
669
-
<span dir="ltr">
666
+
<span dir="ltr" class="block truncate">
670
667
{{ group.versions[0]?.version }}
671
668
</span>
672
669
</LinkBase>
···
708
705
<div class="flex items-center justify-between gap-2">
709
706
<LinkBase
710
707
:to="versionRoute(v.version)"
711
-
class="text-xs block truncate"
708
+
block
709
+
class="text-xs"
712
710
:class="v.deprecated ? 'text-red-400 hover:text-red-300' : undefined"
713
711
:title="
714
712
v.deprecated
···
717
715
"
718
716
:classicon="v.deprecated ? 'i-carbon-warning-hex' : undefined"
719
717
>
720
-
<span dir="ltr">
718
+
<span dir="ltr" class="block truncate">
721
719
{{ v.version }}
722
720
</span>
723
721
</LinkBase>
+2
-1
app/components/ReadmeTocDropdown.vue
+2
-1
app/components/ReadmeTocDropdown.vue
+1
-1
app/components/Tag/Static.vue
+1
-1
app/components/Tag/Static.vue
···
16
16
class="bg-bg-muted text-fg-muted inline-flex gap-x-1 items-center justify-center font-mono border border-transparent rounded-md text-xs px-2 py-0.5"
17
17
:class="{ 'opacity-40': variant === 'ghost' }"
18
18
>
19
-
<span v-if="classicon" :class="['size-3', classicon]" aria-hidden="true" />
19
+
<span v-if="classicon" class="size-[1em]" :class="classicon" aria-hidden="true" />
20
20
<slot />
21
21
</component>
22
22
</template>
-2
app/pages/package-code/[...path].vue
-2
app/pages/package-code/[...path].vue
···
497
497
<LinkBase
498
498
variant="button-secondary"
499
499
:to="`https://cdn.jsdelivr.net/npm/${packageName}@${version}/${filePath}`"
500
-
class="inline-flex items-center gap-2"
501
500
>
502
501
{{ $t('code.view_raw') }}
503
502
</LinkBase>
···
549
548
<LinkBase
550
549
variant="button-secondary"
551
550
:to="`https://cdn.jsdelivr.net/npm/${packageName}@${version}/${filePath}`"
552
-
class="inline-flex items-center gap-2"
553
551
>
554
552
{{ $t('code.view_raw') }}
555
553
</LinkBase>