From aafd7ed21fcf6652b27a1de0b600d57b5d57bc8c Mon Sep 17 00:00:00 2001
From: triphora <emmaffle@modrinth.com>
Date: Sun, 20 Nov 2022 15:43:01 -0500
Subject: [PATCH] Add feature flag for opening external links in a new tab
 (#749)

Closes https://github.com/modrinth/knossos/issues/438
---
 components/ui/Modal.vue  |  2 +-
 layouts/default.vue      | 22 +++++++++++-----------
 middleware/analytics.js  |  2 +-
 nuxt.config.js           |  1 +
 pages/_type/_id.vue      | 33 ++++++++++++++++++---------------
 pages/about.vue          | 22 +++++++++++++---------
 pages/index.vue          | 16 ++++++++++------
 pages/search.vue         | 20 +++++++++++---------
 pages/settings/index.vue | 23 +++++++++++++++++++++++
 pages/user/_id.vue       |  2 +-
 plugins/shorthands.js    |  4 ++++
 store/cosmetics.js       |  8 ++++++++
 12 files changed, 102 insertions(+), 53 deletions(-)

diff --git a/components/ui/Modal.vue b/components/ui/Modal.vue
index 76af85eab..f27cdb036 100644
--- a/components/ui/Modal.vue
+++ b/components/ui/Modal.vue
@@ -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"
diff --git a/layouts/default.vue b/layouts/default.vue
index a4f30786d..055420e33 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -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>
diff --git a/middleware/analytics.js b/middleware/analytics.js
index 4bb4fea87..fed71cc48 100644
--- a/middleware/analytics.js
+++ b/middleware/analytics.js
@@ -11,7 +11,7 @@ export default function (context) {
     return
   }
 
-  if (context.$config.analytics.base_url == null) {
+  if (process.env.NODE_ENV !== 'production') {
     return
   }
 
diff --git a/nuxt.config.js b/nuxt.config.js
index c81095f5d..c8bc06b62 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -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`,
diff --git a/pages/_type/_id.vue b/pages/_type/_id.vue
index f3290f4e2..aa367a973 100644
--- a/pages/_type/_id.vue
+++ b/pages/_type/_id.vue
@@ -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'"
diff --git a/pages/about.vue b/pages/about.vue
index 8f61ffebf..a1f1ed071 100644
--- a/pages/about.vue
+++ b/pages/about.vue
@@ -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>
diff --git a/pages/index.vue b/pages/index.vue
index 574891208..35fdcba11 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -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!
diff --git a/pages/search.vue b/pages/search.vue
index 4fcf9a2f0..b7275714e 100644
--- a/pages/search.vue
+++ b/pages/search.vue
@@ -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
diff --git a/pages/settings/index.vue b/pages/settings/index.vue
index 60717a4fc..c3d927201 100644
--- a/pages/settings/index.vue
+++ b/pages/settings/index.vue
@@ -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,
       })
     },
diff --git a/pages/user/_id.vue b/pages/user/_id.vue
index eea9ad689..9415a610d 100644
--- a/pages/user/_id.vue
+++ b/pages/user/_id.vue
@@ -138,7 +138,7 @@
             </div>
             <a
               :href="githubUrl"
-              target="_blank"
+              :target="$external()"
               class="sidebar__item github-button iconified-button"
             >
               <GitHubIcon aria-hidden="true" />
diff --git a/plugins/shorthands.js b/plugins/shorthands.js
index acd7a049e..98d93a9f1 100644
--- a/plugins/shorthands.js
+++ b/plugins/shorthands.js
@@ -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)
diff --git a/store/cosmetics.js b/store/cosmetics.js
index a68a0c033..16815efd6 100644
--- a/store/cosmetics.js
+++ b/store/cosmetics.js
@@ -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)
   },
 }