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
:class="{
shown: shown,
noblur: !$orElse($store.state.cosmetics.advancedRendering, true),
noblur: !$orElse($cosmetics.advancedRendering, true),
}"
class="modal-overlay"
@click="hide"

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -92,6 +92,24 @@
@change="saveCosmeticSettings"
/>
</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>
</div>
</template>
@ -110,6 +128,7 @@ export default {
projectLayout: false,
modpacksAlphaNotice: true,
advancedRendering: true,
externalLinksNewTab: true,
}
},
fetch() {
@ -122,6 +141,9 @@ export default {
this.modpacksAlphaNotice
this.advancedRendering =
this.$store.state.cosmetics.advancedRendering ?? this.advancedRendering
this.externalLinksNewTab =
this.$store.state.cosmetics.externalLinksNewTab ??
this.externalLinksNewTab
},
head: {
title: 'Display settings - Modrinth',
@ -133,6 +155,7 @@ export default {
projectLayout: this.projectLayout,
modpacksAlphaNotice: this.modpacksAlphaNotice,
advancedRendering: this.advancedRendering,
externalLinksNewTab: this.externalLinksNewTab,
$cookies: this.$cookies,
})
},

View File

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

View File

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

View File

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