Add feature flag for opening external links in a new tab (#749)

Closes https://github.com/modrinth/knossos/issues/438
This commit is contained in:
triphora 2022-11-20 15:43:01 -05:00 committed by GitHub
parent ab2c31aa8a
commit aafd7ed21f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 102 additions and 53 deletions

View File

@ -3,7 +3,7 @@
<div <div
:class="{ :class="{
shown: shown, shown: shown,
noblur: !$orElse($store.state.cosmetics.advancedRendering, true), noblur: !$orElse($cosmetics.advancedRendering, true),
}" }"
class="modal-overlay" class="modal-overlay"
@click="hide" @click="hide"

View File

@ -318,7 +318,7 @@
<p> <p>
Modrinth is Modrinth is
<a <a
target="_blank" :target="$external()"
href="https://github.com/modrinth" href="https://github.com/modrinth"
class="text-link" class="text-link"
> >
@ -327,7 +327,7 @@
</p> </p>
<p> <p>
{{ owner }}/{{ slug }} {{ branch }}@<a {{ owner }}/{{ slug }} {{ branch }}@<a
target="_blank" :target="$external()"
:href="'https://github.com/' + owner + '/' + slug + '/tree/' + hash" :href="'https://github.com/' + owner + '/' + slug + '/tree/' + hash"
class="text-link" class="text-link"
>{{ hash.substring(0, 7) }}</a >{{ hash.substring(0, 7) }}</a
@ -341,7 +341,7 @@
<nuxt-link to="/legal/privacy">Privacy</nuxt-link> <nuxt-link to="/legal/privacy">Privacy</nuxt-link>
<nuxt-link to="/legal/rules">Rules</nuxt-link> <nuxt-link to="/legal/rules">Rules</nuxt-link>
<a <a
target="_blank" :target="$external()"
href="https://github.com/modrinth/knossos/blob/master/LICENSE.md" href="https://github.com/modrinth/knossos/blob/master/LICENSE.md"
> >
License License
@ -349,19 +349,19 @@
</div> </div>
<div class="links links-2" role="region" aria-label="Resources"> <div class="links links-2" role="region" aria-label="Resources">
<h4 aria-hidden="true">Resources</h4> <h4 aria-hidden="true">Resources</h4>
<a target="_blank" href="https://blog.modrinth.com">Blog</a> <a :target="$external()" href="https://blog.modrinth.com">Blog</a>
<a target="_blank" href="https://docs.modrinth.com">Docs</a> <a :target="$external()" href="https://docs.modrinth.com">Docs</a>
<a target="_blank" href="https://status.modrinth.com">Status</a> <a :target="$external()" href="https://status.modrinth.com">Status</a>
<a target="_blank" href="https://github.com/modrinth">GitHub</a> <a :target="$external()" href="https://github.com/modrinth">GitHub</a>
</div> </div>
<div class="links links-3" role="region" aria-label="Interact"> <div class="links links-3" role="region" aria-label="Interact">
<h4 aria-hidden="true">Interact</h4> <h4 aria-hidden="true">Interact</h4>
<a target="_blank" href="https://discord.gg/EUHuJHt">Discord</a> <a :target="$external()" href="https://discord.gg/EUHuJHt">Discord</a>
<a target="_blank" href="https://twitter.com/modrinth">Twitter</a> <a :target="$external()" href="https://twitter.com/modrinth">Twitter</a>
<a target="_blank" rel="me" href="https://floss.social/@modrinth"> <a :target="$external()" rel="me" href="https://floss.social/@modrinth">
Mastodon Mastodon
</a> </a>
<a target="_blank" href="https://crowdin.com/project/modrinth"> <a :target="$external()" href="https://crowdin.com/project/modrinth">
Crowdin Crowdin
</a> </a>
</div> </div>

View File

@ -11,7 +11,7 @@ export default function (context) {
return return
} }
if (context.$config.analytics.base_url == null) { if (process.env.NODE_ENV !== 'production') {
return return
} }

View File

@ -375,6 +375,7 @@ export default {
render: { render: {
routeDone(url, result, context) { routeDone(url, result, context) {
setTimeout(() => { setTimeout(() => {
if (process.env.NODE_ENV !== 'production') return
axios axios
.post( .post(
`${process.env.ARIADNE_URL || STAGING_ARIADNE_URL}view`, `${process.env.ARIADNE_URL || STAGING_ARIADNE_URL}view`,

View File

@ -8,7 +8,7 @@
<div <div
:class="{ :class="{
'normal-page': true, 'normal-page': true,
'alt-layout': $store.state.cosmetics.projectLayout, 'alt-layout': $cosmetics.projectLayout,
}" }"
> >
<aside class="normal-page__sidebar"> <aside class="normal-page__sidebar">
@ -282,7 +282,7 @@
v-if="project.issues_url" v-if="project.issues_url"
:href="project.issues_url" :href="project.issues_url"
class="title" class="title"
target="_blank" :target="$external()"
> >
<IssuesIcon aria-hidden="true" /> <IssuesIcon aria-hidden="true" />
<span>Issues</span> <span>Issues</span>
@ -291,7 +291,7 @@
v-if="project.source_url" v-if="project.source_url"
:href="project.source_url" :href="project.source_url"
class="title" class="title"
target="_blank" :target="$external()"
> >
<CodeIcon aria-hidden="true" /> <CodeIcon aria-hidden="true" />
<span>Source</span> <span>Source</span>
@ -300,7 +300,7 @@
v-if="project.wiki_url" v-if="project.wiki_url"
:href="project.wiki_url" :href="project.wiki_url"
class="title" class="title"
target="_blank" :target="$external()"
> >
<WikiIcon aria-hidden="true" /> <WikiIcon aria-hidden="true" />
<span>Wiki</span> <span>Wiki</span>
@ -308,7 +308,7 @@
<a <a
v-if="project.discord_url" v-if="project.discord_url"
:href="project.discord_url" :href="project.discord_url"
target="_blank" :target="$external()"
> >
<DiscordIcon class="shrink" aria-hidden="true" /> <DiscordIcon class="shrink" aria-hidden="true" />
<span>Discord</span> <span>Discord</span>
@ -317,7 +317,7 @@
v-for="(donation, index) in project.donation_urls" v-for="(donation, index) in project.donation_urls"
:key="index" :key="index"
:href="donation.url" :href="donation.url"
target="_blank" :target="$external()"
> >
<BuyMeACoffeeLogo <BuyMeACoffeeLogo
v-if="donation.id === 'bmac'" v-if="donation.id === 'bmac'"
@ -537,13 +537,16 @@
To install {{ project.title }}, visit To install {{ project.title }}, visit
<a <a
href="https://docs.modrinth.com/docs/modpacks/playing_modpacks/" href="https://docs.modrinth.com/docs/modpacks/playing_modpacks/"
target="_blank" :target="$external()"
>our documentation</a >our documentation</a
> >
which provides instructions on using which provides instructions on using
<a href="https://atlauncher.com/about" target="_blank">ATLauncher</a>, <a href="https://atlauncher.com/about" :target="$external()">
<a href="https://multimc.org/" target="_blank">MultiMC</a>, and ATLauncher</a
<a href="https://prismlauncher.org" target="_blank">Prism Launcher</a >, <a href="https://multimc.org/" :target="$external()">MultiMC</a>,
and
<a href="https://prismlauncher.org" :target="$external()">
Prism Launcher</a
>. >.
</div> </div>
<Advertisement <Advertisement
@ -617,7 +620,7 @@
v-if="project.issues_url" v-if="project.issues_url"
:href="project.issues_url" :href="project.issues_url"
class="title" class="title"
target="_blank" :target="$external()"
> >
<IssuesIcon aria-hidden="true" /> <IssuesIcon aria-hidden="true" />
<span>Issues</span> <span>Issues</span>
@ -626,7 +629,7 @@
v-if="project.source_url" v-if="project.source_url"
:href="project.source_url" :href="project.source_url"
class="title" class="title"
target="_blank" :target="$external()"
> >
<CodeIcon aria-hidden="true" /> <CodeIcon aria-hidden="true" />
<span>Source</span> <span>Source</span>
@ -635,7 +638,7 @@
v-if="project.wiki_url" v-if="project.wiki_url"
:href="project.wiki_url" :href="project.wiki_url"
class="title" class="title"
target="_blank" :target="$external()"
> >
<WikiIcon aria-hidden="true" /> <WikiIcon aria-hidden="true" />
<span>Wiki</span> <span>Wiki</span>
@ -643,7 +646,7 @@
<a <a
v-if="project.discord_url" v-if="project.discord_url"
:href="project.discord_url" :href="project.discord_url"
target="_blank" :target="$external()"
> >
<DiscordIcon class="shrink" aria-hidden="true" /> <DiscordIcon class="shrink" aria-hidden="true" />
<span>Discord</span> <span>Discord</span>
@ -652,7 +655,7 @@
v-for="(donation, index) in project.donation_urls" v-for="(donation, index) in project.donation_urls"
:key="index" :key="index"
:href="donation.url" :href="donation.url"
target="_blank" :target="$external()"
> >
<BuyMeACoffeeLogo <BuyMeACoffeeLogo
v-if="donation.id === 'bmac'" v-if="donation.id === 'bmac'"

View File

@ -9,8 +9,9 @@
<p> <p>
Our primary goal is to be as open as possible, with all our code being Our primary goal is to be as open as possible, with all our code being
<a target="_blank" href="https://github.com/modrinth">open source</a>, <a :target="$external()" href="https://github.com/modrinth">
while giving back to the modding community as much as possible. open source</a
>, while giving back to the modding community as much as possible.
</p> </p>
<p> <p>
@ -27,29 +28,32 @@
<p> <p>
On the technical level, Modrinth is made up of two main components: the On the technical level, Modrinth is made up of two main components: the
Rust-based backend named Rust-based backend named
<a target="_blank" href="https://github.com/modrinth/labrinth" <a :target="$external()" href="https://github.com/modrinth/labrinth"
>Labrinth</a >Labrinth</a
>, and the Vue-based frontend named >, and the Vue-based frontend named
<a target="_blank" href="https://github.com/modrinth/knossos">Knossos</a <a :target="$external()" href="https://github.com/modrinth/knossos">
Knossos</a
>. >.
</p> </p>
<p> <p>
Additionally, some other custom-created resources exist, including but Additionally, some other custom-created resources exist, including but
not limited to: not limited to:
<a target="_blank" href="https://github.com/modrinth/minotaur" <a :target="$external()" href="https://github.com/modrinth/minotaur"
>Minotaur</a >Minotaur</a
>, a Gradle plugin for easily publishing mods to Modrinth, and >, a Gradle plugin for easily publishing mods to Modrinth, and
<a target="_blank" href="https://github.com/modrinth/minos">Minos</a>, <a :target="$external()" href="https://github.com/modrinth/minos">
an authentication provider. All of Modrinth's code can be found on Minos</a
<a target="_blank" href="https://github.com/modrinth">our GitHub page</a >, an authentication provider. All of Modrinth's code can be found on
<a :target="$external()" href="https://github.com/modrinth"
>our GitHub page</a
>. >.
</p> </p>
<h2>Backend Documentation</h2> <h2>Backend Documentation</h2>
<p> <p>
Documentation for the Modrinth API (Labrinth) can be found on the GitHub Documentation for the Modrinth API (Labrinth) can be found on the GitHub
repository's wiki repository's wiki
<a target="_blank" href="https://docs.modrinth.com">here</a>. <a :target="$external()" href="https://docs.modrinth.com">here</a>.
</p> </p>
</div> </div>
</div> </div>

View File

@ -12,10 +12,12 @@
<h1>Discover, Play, and Create Minecraft content</h1> <h1>Discover, Play, and Create Minecraft content</h1>
<h3> <h3>
Find enjoyable, quality content through our Find enjoyable, quality content through our
<a href="https://github.com/modrinth" target="_blank">open-source</a> <a href="https://github.com/modrinth" :target="$external()">
open-source
</a>
modding platform built for the community. Create stuff, get paid, and modding platform built for the community. Create stuff, get paid, and
deploy your project with our deploy your project with our
<a href="https://docs.modrinth.com" target="_blank" <a href="https://docs.modrinth.com" :target="$external()"
>fully documented</a >fully documented</a
> >
API! API!
@ -80,13 +82,15 @@
working on giving creators more analytics, adding new types of working on giving creators more analytics, adding new types of
projects, our launcher, and much more! If you have any more projects, our launcher, and much more! If you have any more
feature ideas, feel free to join our feature ideas, feel free to join our
<a href="https://discord.gg/EUHuJHt" target="_blank">Discord</a>! <a href="https://discord.gg/EUHuJHt" :target="$external()">
Discord</a
>!
</p> </p>
<div class="features"> <div class="features">
<div class="feature completed"> <div class="feature completed">
<CheckIcon /> <CheckIcon />
<p> <p>
<a href="https://github.com/modrinth" target="_blank"> <a href="https://github.com/modrinth" :target="$external()">
100% open source 100% open source
</a> </a>
</p> </p>
@ -98,7 +102,7 @@
<div class="feature completed"> <div class="feature completed">
<CheckIcon /> <CheckIcon />
<p> <p>
<a href="https://docs.modrinth.com" target="_blank"> <a href="https://docs.modrinth.com" :target="$external()">
Completely documented API Completely documented API
</a> </a>
</p> </p>
@ -193,7 +197,7 @@
We have created an open source modding platform for the community. We have created an open source modding platform for the community.
We're committed to open source so the community can trust us as We're committed to open source so the community can trust us as
their modding platform. Our API is their modding platform. Our API is
<a href="https://docs.modrinth.com" target="_blank" <a href="https://docs.modrinth.com" :target="$external()"
>fully documented</a >fully documented</a
> >
so anyone can use it. We will never add restrictions on our API! so anyone can use it. We will never add restrictions on our API!

View File

@ -3,7 +3,7 @@
:class="{ :class="{
'search-page': true, 'search-page': true,
'normal-page': true, 'normal-page': true,
'alt-layout': $store.state.cosmetics.searchLayout, 'alt-layout': $cosmetics.searchLayout,
}" }"
> >
<aside <aside
@ -215,7 +215,7 @@
<div <div
v-if=" v-if="
projectType.id === 'modpack' && projectType.id === 'modpack' &&
$orElse($store.state.cosmetics.modpacksAlphaNotice, true) $orElse($cosmetics.modpacksAlphaNotice, true)
" "
class="card warning" class="card warning"
aria-label="Warning" aria-label="Warning"
@ -225,20 +225,22 @@
instructions on instructions on
<a <a
href="https://docs.modrinth.com/docs/modpacks/playing_modpacks/" href="https://docs.modrinth.com/docs/modpacks/playing_modpacks/"
target="_blank" :target="$external()"
>playing modpacks</a >playing modpacks</a
> >
with with
<a href="https://atlauncher.com/about" target="_blank">ATLauncher</a>, <a href="https://atlauncher.com/about" :target="$external()"
<a href="https://multimc.org/" target="_blank">MultiMC</a>, and >ATLauncher</a
<a href="https://prismlauncher.org" target="_blank">Prism Launcher</a>. >, <a href="https://multimc.org/" :target="$external()">MultiMC</a>, and
Pack creators can reference our documentation on <a href="https://prismlauncher.org" :target="$external()">
Prism Launcher</a
>. Pack creators can reference our documentation on
<a <a
href="https://docs.modrinth.com/docs/modpacks/creating_modpacks/" href="https://docs.modrinth.com/docs/modpacks/creating_modpacks/"
target="_blank" :target="$external()"
>creating modpacks</a >creating modpacks</a
>. Join us on >. Join us on
<a href="https://discord.gg/EUHuJHt" target="_blank">Discord</a> <a href="https://discord.gg/EUHuJHt" :target="$external()">Discord</a>
for support. for support.
</div> </div>
<Advertisement <Advertisement

View File

@ -92,6 +92,24 @@
@change="saveCosmeticSettings" @change="saveCosmeticSettings"
/> />
</div> </div>
<div class="adjacent-input small">
<label for="external-links-new-tab">
<span class="label__title">Open external links in new tab</span>
<span class="label__description">
Make links which go outside of Modrinth open in a new tab. No matter
this setting, links on the same domain and in Markdown descriptions
will open in the same tab, and links on ads and edit pages will open
in a new tab.
</span>
</label>
<input
id="external-links-new-tab"
v-model="externalLinksNewTab"
class="switch stylized-toggle"
type="checkbox"
@change="saveCosmeticSettings"
/>
</div>
</section> </section>
</div> </div>
</template> </template>
@ -110,6 +128,7 @@ export default {
projectLayout: false, projectLayout: false,
modpacksAlphaNotice: true, modpacksAlphaNotice: true,
advancedRendering: true, advancedRendering: true,
externalLinksNewTab: true,
} }
}, },
fetch() { fetch() {
@ -122,6 +141,9 @@ export default {
this.modpacksAlphaNotice this.modpacksAlphaNotice
this.advancedRendering = this.advancedRendering =
this.$store.state.cosmetics.advancedRendering ?? this.advancedRendering this.$store.state.cosmetics.advancedRendering ?? this.advancedRendering
this.externalLinksNewTab =
this.$store.state.cosmetics.externalLinksNewTab ??
this.externalLinksNewTab
}, },
head: { head: {
title: 'Display settings - Modrinth', title: 'Display settings - Modrinth',
@ -133,6 +155,7 @@ export default {
projectLayout: this.projectLayout, projectLayout: this.projectLayout,
modpacksAlphaNotice: this.modpacksAlphaNotice, modpacksAlphaNotice: this.modpacksAlphaNotice,
advancedRendering: this.advancedRendering, advancedRendering: this.advancedRendering,
externalLinksNewTab: this.externalLinksNewTab,
$cookies: this.$cookies, $cookies: this.$cookies,
}) })
}, },

View File

@ -138,7 +138,7 @@
</div> </div>
<a <a
:href="githubUrl" :href="githubUrl"
target="_blank" :target="$external()"
class="sidebar__item github-button iconified-button" class="sidebar__item github-button iconified-button"
> >
<GitHubIcon aria-hidden="true" /> <GitHubIcon aria-hidden="true" />

View File

@ -2,6 +2,7 @@ export default (ctx, inject) => {
inject('user', ctx.store.state.user) inject('user', ctx.store.state.user)
inject('tag', ctx.store.state.tag) inject('tag', ctx.store.state.tag)
inject('auth', ctx.store.state.auth) inject('auth', ctx.store.state.auth)
inject('cosmetics', ctx.store.state.cosmetics)
inject('defaultHeaders', () => { inject('defaultHeaders', () => {
const obj = { headers: {} } const obj = { headers: {} }
@ -21,6 +22,9 @@ export default (ctx, inject) => {
formatVersions(versionsArray, ctx.store) formatVersions(versionsArray, ctx.store)
) )
inject('orElse', (first, otherwise) => first ?? otherwise) inject('orElse', (first, otherwise) => first ?? otherwise)
inject('external', () =>
ctx.store.state.cosmetics.externalLinksNewTab ? '_blank' : ''
)
inject('formatBytes', formatBytes) inject('formatBytes', formatBytes)
inject('formatWallet', formatWallet) inject('formatWallet', formatWallet)
inject('formatProjectType', formatProjectType) inject('formatProjectType', formatProjectType)

View File

@ -11,6 +11,7 @@ export const state = () => ({
projectLayout: false, projectLayout: false,
modpacksAlphaNotice: true, modpacksAlphaNotice: true,
advancedRendering: true, advancedRendering: true,
externalLinksNewTab: true,
notUsingBlockers: false, notUsingBlockers: false,
}) })
@ -27,6 +28,9 @@ export const mutations = {
SET_ADVANCED_RENDERING(state, advancedRendering) { SET_ADVANCED_RENDERING(state, advancedRendering) {
state.advancedRendering = advancedRendering state.advancedRendering = advancedRendering
}, },
SET_EXTERNAL_LINKS_NEW_TAB(state, externalLinksNewTab) {
state.externalLinksNewTab = externalLinksNewTab
},
SET_NOT_USING_BLOCKERS(state, notUsingBlockers) { SET_NOT_USING_BLOCKERS(state, notUsingBlockers) {
state.notUsingBlockers = notUsingBlockers state.notUsingBlockers = notUsingBlockers
}, },
@ -38,6 +42,7 @@ export const actions = {
commit('SET_SEARCH_LAYOUT', $cookies.get('search-layout')) commit('SET_SEARCH_LAYOUT', $cookies.get('search-layout'))
commit('SET_MODPACKS_ALPHA_NOTICE', $cookies.get('modpacks-alpha-notice')) commit('SET_MODPACKS_ALPHA_NOTICE', $cookies.get('modpacks-alpha-notice'))
commit('SET_ADVANCED_RENDERING', $cookies.get('advanced-rendering')) commit('SET_ADVANCED_RENDERING', $cookies.get('advanced-rendering'))
commit('SET_EXTERNAL_LINKS_NEW_TAB', $cookies.get('external-links-new-tab'))
}, },
save( save(
{ commit }, { commit },
@ -46,6 +51,7 @@ export const actions = {
searchLayout, searchLayout,
modpacksAlphaNotice, modpacksAlphaNotice,
advancedRendering, advancedRendering,
externalLinksNewTab,
$cookies, $cookies,
} }
) { ) {
@ -53,10 +59,12 @@ export const actions = {
commit('SET_SEARCH_LAYOUT', searchLayout) commit('SET_SEARCH_LAYOUT', searchLayout)
commit('SET_MODPACKS_ALPHA_NOTICE', modpacksAlphaNotice) commit('SET_MODPACKS_ALPHA_NOTICE', modpacksAlphaNotice)
commit('SET_ADVANCED_RENDERING', advancedRendering) commit('SET_ADVANCED_RENDERING', advancedRendering)
commit('SET_EXTERNAL_LINKS_NEW_TAB', externalLinksNewTab)
$cookies.set('project-layout', projectLayout, parameters) $cookies.set('project-layout', projectLayout, parameters)
$cookies.set('search-layout', searchLayout, parameters) $cookies.set('search-layout', searchLayout, parameters)
$cookies.set('modpacks-alpha-notice', modpacksAlphaNotice, parameters) $cookies.set('modpacks-alpha-notice', modpacksAlphaNotice, parameters)
$cookies.set('advanced-rendering', advancedRendering, parameters) $cookies.set('advanced-rendering', advancedRendering, parameters)
$cookies.set('external-links-new-tab', externalLinksNewTab, parameters)
}, },
} }