Skip to content

Commit bf06a1e

Browse files
essenmitsosseessenmitsosse
committed
feat: automatically open all external links in new window
1 parent b070507 commit bf06a1e

5 files changed

Lines changed: 30 additions & 67 deletions

File tree

‎app/components/AppFooter.vue‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,16 +18,16 @@ const isHome = computed(() => route.name === 'index')
1818
<LinkBase to="/about">
1919
{{ $t('footer.about') }}
2020
</LinkBase>
21-
<LinkBase href="https://docs.npmx.dev" target="_blank" rel="noopener noreferrer">
21+
<LinkBase href="https://docs.npmx.dev">
2222
{{ $t('footer.docs') }}
2323
</LinkBase>
24-
<LinkBase href="https://repo.npmx.dev" target="_blank" rel="noopener noreferrer">
24+
<LinkBase href="https://repo.npmx.dev">
2525
{{ $t('footer.source') }}
2626
</LinkBase>
27-
<LinkBase href="https://social.npmx.dev" target="_blank" rel="noopener noreferrer">
27+
<LinkBase href="https://social.npmx.dev">
2828
{{ $t('footer.social') }}
2929
</LinkBase>
30-
<LinkBase href="https://chat.npmx.dev" target="_blank" rel="noopener noreferrer">
30+
<LinkBase href="https://chat.npmx.dev">
3131
{{ $t('footer.chat') }}
3232
</LinkBase>
3333
</div>

‎app/components/Link/Base.vue‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,16 @@ const props = withDefaults(
2121
*/
2222
'aria-keyshortcuts'?: never
2323
24+
/**
25+
* Don't use this directly. This will automatically be set to `_blank` if `href` for external links.
26+
*/
27+
'target'?: never
28+
29+
/**
30+
* Don't use this directly. This will automatically be set to `_blank` if `href` for external links.
31+
*/
32+
'rel'?: never
33+
2434
'classicon'?: string
2535
} &
2636
/** This makes sure the link always has either `to` or `href` */
@@ -62,6 +72,8 @@ const props = withDefaults(
6272
:to="to"
6373
:href="href"
6474
:aria-keyshortcuts="keyshortcut"
75+
:target="href ? '_blank' : undefined"
76+
:rel="href ? 'noopener noreferrer' : undefined"
6577
>
6678
<span
6779
v-if="classicon"

‎app/pages/about.vue‎

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -74,9 +74,7 @@ const { data: contributors, status: contributorsStatus } = useFetch<GitHubContri
7474
<strong class="text-fg">{{ $t('about.what_we_are.better_ux_dx') }}</strong>
7575
</template>
7676
<template #jsr>
77-
<LinkBase href="https://jsr.io/" target="_blank" rel="noopener noreferrer"
78-
>JSR</LinkBase
79-
>
77+
<LinkBase href="https://jsr.io/">JSR</LinkBase>
8078
</template>
8179
</i18n-t>
8280
</p>
@@ -108,32 +106,32 @@ const { data: contributors, status: contributorsStatus } = useFetch<GitHubContri
108106
>
109107
<template #already>{{ $t('about.what_we_are_not.words.already') }}</template>
110108
<template #people>
111-
<LinkBase :href="pmLinks.npm" target="_blank" rel="noopener noreferrer">{{
109+
<LinkBase :href="pmLinks.npm">{{
112110
$t('about.what_we_are_not.words.people')
113111
}}</LinkBase>
114112
</template>
115113
<template #building>
116-
<LinkBase :href="pmLinks.pnpm" target="_blank" rel="noopener noreferrer">{{
114+
<LinkBase :href="pmLinks.pnpm">{{
117115
$t('about.what_we_are_not.words.building')
118116
}}</LinkBase>
119117
</template>
120118
<template #really>
121-
<LinkBase :href="pmLinks.yarn" target="_blank" rel="noopener noreferrer">{{
119+
<LinkBase :href="pmLinks.yarn">{{
122120
$t('about.what_we_are_not.words.really')
123121
}}</LinkBase>
124122
</template>
125123
<template #cool>
126-
<LinkBase :href="pmLinks.bun" target="_blank" rel="noopener noreferrer">{{
124+
<LinkBase :href="pmLinks.bun">{{
127125
$t('about.what_we_are_not.words.cool')
128126
}}</LinkBase>
129127
</template>
130128
<template #package>
131-
<LinkBase :href="pmLinks.deno" target="_blank" rel="noopener noreferrer">{{
129+
<LinkBase :href="pmLinks.deno">{{
132130
$t('about.what_we_are_not.words.package')
133131
}}</LinkBase>
134132
</template>
135133
<template #managers>
136-
<LinkBase :href="pmLinks.vlt" target="_blank" rel="noopener noreferrer">{{
134+
<LinkBase :href="pmLinks.vlt">{{
137135
$t('about.what_we_are_not.words.managers')
138136
}}</LinkBase>
139137
</template>

‎app/pages/package-code/[...path].vue‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -493,12 +493,9 @@ defineOgImageComponent('Default', {
493493
<LinkBase
494494
variant="button-secondary"
495495
:href="`https://cdn.jsdelivr.net/npm/${packageName}@${version}/${filePath}`"
496-
target="_blank"
497-
rel="noopener noreferrer"
498496
class="inline-flex items-center gap-2"
499497
>
500498
{{ $t('code.view_raw') }}
501-
<span class="i-carbon:launch w-4 h-4" />
502499
</LinkBase>
503500
</div>
504501

@@ -548,12 +545,9 @@ defineOgImageComponent('Default', {
548545
<LinkBase
549546
variant="button-secondary"
550547
:href="`https://cdn.jsdelivr.net/npm/${packageName}@${version}/${filePath}`"
551-
target="_blank"
552-
rel="noopener noreferrer"
553548
class="inline-flex items-center gap-2"
554549
>
555550
{{ $t('code.view_raw') }}
556-
<span class="i-carbon:launch w-4 h-4" />
557551
</LinkBase>
558552
</div>
559553

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

Lines changed: 7 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -697,8 +697,6 @@ onKeyStroke(
697697
<LinkBase
698698
variant="button-secondary"
699699
:href="repositoryUrl"
700-
target="_blank"
701-
rel="noopener noreferrer"
702700
:classicon="repoProviderIcon"
703701
>
704702
<span v-if="repoRef">
@@ -708,44 +706,24 @@ onKeyStroke(
708706
</LinkBase>
709707
</li>
710708
<li v-if="repositoryUrl && repoMeta && starsLink">
711-
<LinkBase
712-
variant="button-secondary"
713-
:href="starsLink"
714-
target="_blank"
715-
rel="noopener noreferrer"
716-
classicon="i-carbon:star"
717-
>
709+
<LinkBase variant="button-secondary" :href="starsLink" classicon="i-carbon:star">
718710
{{ formatCompactNumber(stars, { decimals: 1 }) }}
719711
</LinkBase>
720712
</li>
721713
<li v-if="forks && forksLink">
722-
<LinkBase
723-
variant="button-secondary"
724-
:href="forksLink"
725-
target="_blank"
726-
rel="noopener noreferrer"
727-
classicon="i-carbon:fork"
728-
>
714+
<LinkBase variant="button-secondary" :href="forksLink" classicon="i-carbon:fork">
729715
{{ formatCompactNumber(forks, { decimals: 1 }) }}
730716
</LinkBase>
731717
</li>
732718
<li v-if="homepageUrl">
733-
<LinkBase
734-
variant="button-secondary"
735-
:href="homepageUrl"
736-
target="_blank"
737-
rel="noopener noreferrer"
738-
classicon="i-carbon:link"
739-
>
719+
<LinkBase variant="button-secondary" :href="homepageUrl" classicon="i-carbon:link">
740720
{{ $t('package.links.homepage') }}
741721
</LinkBase>
742722
</li>
743723
<li v-if="displayVersion?.bugs?.url">
744724
<LinkBase
745725
variant="button-secondary"
746726
:href="displayVersion.bugs.url"
747-
target="_blank"
748-
rel="noopener noreferrer"
749727
classicon="i-carbon:warning"
750728
>
751729
{{ $t('package.links.issues') }}
@@ -755,8 +733,6 @@ onKeyStroke(
755733
<LinkBase
756734
variant="button-secondary"
757735
:href="`https://www.npmjs.com/package/${pkg.name}`"
758-
target="_blank"
759-
rel="noopener noreferrer"
760736
:title="$t('common.view_on_npm')"
761737
classicon="i-carbon:logo-npm"
762738
>
@@ -767,22 +743,14 @@ onKeyStroke(
767743
<LinkBase
768744
variant="button-secondary"
769745
:href="jsrInfo.url"
770-
target="_blank"
771-
rel="noopener noreferrer"
772746
:title="$t('badges.jsr.title')"
773747
classicon="i-simple-icons:jsr"
774748
>
775749
{{ $t('package.links.jsr') }}
776750
</LinkBase>
777751
</li>
778752
<li v-if="fundingUrl">
779-
<LinkBase
780-
variant="button-secondary"
781-
:href="fundingUrl"
782-
target="_blank"
783-
rel="noopener noreferrer"
784-
classicon="i-carbon:favorite"
785-
>
753+
<LinkBase variant="button-secondary" :href="fundingUrl" classicon="i-carbon:favorite">
786754
{{ $t('package.links.fund') }}
787755
</LinkBase>
788756
</li>
@@ -883,8 +851,6 @@ onKeyStroke(
883851
variant="tag"
884852
v-if="getDependencyCount(displayVersion) > 0"
885853
:href="`https://npmgraph.js.org/?q=${pkg.name}`"
886-
target="_blank"
887-
rel="noopener noreferrer"
888854
:title="$t('package.stats.view_dependency_graph')"
889855
classicon="i-carbon:network-3"
890856
>
@@ -895,8 +861,6 @@ onKeyStroke(
895861
variant="tag"
896862
v-if="getDependencyCount(displayVersion) > 0"
897863
:href="`https://node-modules.dev/grid/depth#install=${pkg.name}${resolvedVersion ? `@${resolvedVersion}` : ''}`"
898-
target="_blank"
899-
rel="noopener noreferrer"
900864
:title="$t('package.stats.inspect_dependency_tree')"
901865
classicon="i-carbon:tree-view"
902866
>
@@ -1122,14 +1086,9 @@ onKeyStroke(
11221086
<Readme v-if="readmeData?.html" :html="readmeData.html" />
11231087
<p v-else class="text-fg-subtle italic">
11241088
{{ $t('package.readme.no_readme') }}
1125-
<a
1126-
v-if="repositoryUrl"
1127-
:href="repositoryUrl"
1128-
target="_blank"
1129-
rel="noopener noreferrer"
1130-
class="link"
1131-
>{{ $t('package.readme.view_on_github') }}</a
1132-
>
1089+
<a v-if="repositoryUrl" :href="repositoryUrl" class="link">{{
1090+
$t('package.readme.view_on_github')
1091+
}}</a>
11331092
</p>
11341093

11351094
<section

0 commit comments

Comments
 (0)