Add VLink component for external links

src/components/AudioDetails/VAudioDetails.vue

@@ -22,7 +22,9 @@
           <div v-if="audio.audio_set">
             <dt>{{ $t('audio-details.table.album') }}</dt>
             <dd>
-              <a :href="audio.audio_set.url">{{ audio.audio_set.name }}</a>
+              <VLink :href="audio.audio_set.url">{{
+                audio.audio_set.name
+              }}</VLink>
             </dd>
           </div>
           <div v-if="audio.category">
@@ -52,13 +54,9 @@
               {{ $t('audio-details.table.provider') }}
             </dt>
             <dd>
-              <a
-                :href="audio.foreign_landing_url"
-                target="blank"
-                rel="noopener noreferrer"
-              >
+              <VLink :href="audio.foreign_landing_url">
                 {{ providerName }}
-              </a>
+              </VLink>
             </dd>
           </div>
           <div v-if="audio.source && sourceName !== providerName">
@@ -87,9 +85,12 @@
 import getProviderName from '~/utils/get-provider-name'
 import { PROVIDER } from '~/constants/store-modules'
 import { mapState } from 'vuex'
+import VLink from '~/components/VLink.vue'
+import VAudioThumbnail from '~/components/VAudioThumbnail/VAudioThumbnail.vue'
 
 export default {
   name: 'VAudioDetails',
+  components: { VLink, VAudioThumbnail },
   props: ['audio'],
   computed: {
     ...mapState(PROVIDER, ['audioProviders']),

src/components/AudioDetails/VRelatedAudio.vue

@@ -24,10 +24,13 @@ import { computed, ref } from '@nuxtjs/composition-api'
 import { AUDIO } from '~/constants/media'
 
 import useRelated from '~/composables/use-related'
-import { isMinScreen } from '@/composables/use-media-query'
+import { isMinScreen } from '~/composables/use-media-query'
+import VAudioTrack from '~/components/VAudioTrack/VAudioTrack.vue'
+import LoadingIcon from '~/components/LoadingIcon.vue'
 
 export default {
   name: 'VRelatedAudio',
+  components: { VAudioTrack, LoadingIcon },
   props: {
     audioId: {
       type: String,

src/components/ExtensionBrowsers.vue

@@ -1,15 +1,13 @@
 <template>
   <ul class="buttons is-centered">
     <li v-for="(browser, key) in browsers" :key="key">
-      <a
-        target="_blank"
-        rel="nofollow noreferrer"
+      <VLink
         :href="browser.extUrl"
         class="browser-button button small me-2 is-opaque"
       >
         {{ $t(`browsers.${key}`) }}
         <img class="ms-2" :src="browser.logo" :alt="$t(`browsers.${key}`)" />
-      </a>
+      </VLink>
     </li>
   </ul>
 </template>

src/components/FooterSection.vue

@@ -16,12 +16,9 @@
           <div class="attribution mt-8">
             <i18n path="footer.caption.label" tag="p" class="caption">
               <template #noted>
-                <a
-                  href="https://creativecommons.org/policies#license"
-                  target="_blank"
-                  rel="noopener"
-                  >{{ $t('footer.caption.noted') }}</a
-                >
+                <VLink href="https://creativecommons.org/policies#license">{{
+                  $t('footer.caption.noted')
+                }}</VLink>
               </template>
               <template #attribution>
                 <a

src/components/ImageDetails/ReuseSurvey.vue

@@ -1,15 +1,13 @@
 <template>
   <div class="reuse-survey caption mt-1">
     {{ $t('photo-details.survey.content') }}
-    <a
+    <VLink
       :href="formLink"
-      target="_blank"
-      rel="noopener"
       @click="onReuseSurveyClick"
       @keyup.enter="onReuseSurveyClick"
     >
       {{ $t('photo-details.survey.link') }}
-    </a>
+    </VLink>
     {{ $t('photo-details.survey.answer') }}
   </div>
 </template>
@@ -20,13 +18,15 @@ import {
   DETAIL_PAGE_EVENTS,
 } from '~/constants/usage-data-analytics-types'
 import { USAGE_DATA } from '~/constants/store-modules'
+import VLink from '~/components/VLink.vue'
 
 const reuseForm =
   'https://docs.google.com/forms/d/e/1FAIpQLSegPUDIUj_odzclJhhWRfPumSfbHtXDVDCHqRfFl7ZS8cMn2g/viewform'
 const imageLinkEntry = '2039681354'
 
 export default {
   name: 'ReuseSurvey',
+  components: { VLink },
   props: ['image'],
   data: () => ({
     location: '',

src/components/MigrationNotice.vue

@@ -3,11 +3,10 @@
     {{ $t('migration-notice.intro') }}
     <i18n tag="span" path="migration-notice.more">
       <template #read-more>
-        <a
+        <VLink
           class="text-dark-blue hover:text-dark-blue underline"
           href="https://wordpress.org/news/2021/05/welcome-to-openverse/"
-          target="_blank"
-          >{{ $t('migration-notice.read') }}</a
+          >{{ $t('migration-notice.read') }}</VLink
         >
       </template>
     </i18n>
@@ -16,9 +15,10 @@
 
 <script>
 import NoticeBar from '~/components/NoticeBar/NoticeBar.vue'
+import VLink from '~/components/VLink.vue'
 
 export default {
   name: 'MigrationNotice',
-  components: { NoticeBar },
+  components: { NoticeBar, VLink },
 }
 </script>

src/components/VAudioTrack/layouts/VFullLayout.vue

@@ -41,12 +41,12 @@
             class="font-semibold leading-snug"
           >
             <template #creator>
-              <a
+              <VLink
                 class="p-px rounded-sm focus:outline-none focus:ring focus:ring-pink"
                 :href="audio.creator_url"
               >
                 {{ audio.creator }}
-              </a>
+              </VLink>
             </template>
           </i18n>
 
@@ -71,11 +71,13 @@
 import { computed, defineComponent } from '@nuxtjs/composition-api'
 
 import DownloadButton from '~/components/DownloadButton.vue'
+import VLink from '~/components/VLink.vue'
 
 export default defineComponent({
   name: 'VFullLayout',
   components: {
     DownloadButton,
+    VLink,
   },
   props: ['audio', 'size', 'status', 'currentTime'],
   setup(props) {

src/components/VContentReport/VContentReportForm.vue

@@ -10,13 +10,9 @@
         tag="p"
       >
         <template #source>
-          <a
-            :href="media.url"
-            class="text-pink hover:underline"
-            target="_blank"
-            rel="noopener"
-            >{{ providerName }}</a
-          >
+          <VLink :href="media.url" class="text-pink hover:underline">{{
+            providerName
+          }}</VLink>
         </template>
       </i18n>
     </div>
@@ -114,6 +110,7 @@ import VIcon from '~/components/VIcon/VIcon.vue'
 import VRadio from '~/components/VRadio/VRadio.vue'
 import VDmcaNotice from '~/components/VContentReport/VDmcaNotice.vue'
 import VReportDescForm from '~/components/VContentReport/VReportDescForm.vue'
+import VLink from '~/components/VLink.vue'
 
 import ReportService from '~/data/report-service'
 
@@ -126,6 +123,7 @@ export default defineComponent({
   components: {
     VButton,
     VIcon,
+    VLink,
     VRadio,
     VDmcaNotice,
     VReportDescForm,

src/components/VContentReport/VDmcaNotice.vue

@@ -5,23 +5,17 @@
     tag="p"
   >
     <template #form>
-      <a
+      <VLink
         :aria-label="$t('media-details.content-report.form.dmca.form')"
         :href="DMCA_FORM_URL"
         class="text-pink hover:underline"
-        target="_blank"
-        rel="noopener"
-        >{{ $t('media-details.content-report.form.dmca.form') }}</a
+        >{{ $t('media-details.content-report.form.dmca.form') }}</VLink
       >
     </template>
     <template #source>
-      <a
-        :href="foreignLandingUrl"
-        class="text-pink hover:underline"
-        target="_blank"
-        rel="noopener noreferrer"
-        >{{ provider }}</a
-      >
+      <VLink :href="foreignLandingUrl" class="text-pink hover:underline">{{
+        provider
+      }}</VLink>
     </template>
   </i18n>
 </template>
@@ -30,9 +24,11 @@
 import { defineComponent } from '@nuxtjs/composition-api'
 
 import { DMCA_FORM_URL } from '~/constants/content-report'
+import VLink from '~/components/VLink.vue'
 
 export default defineComponent({
   name: 'VDmcaNotice',
+  components: { VLink },
   props: {
     /**
      * the foreign landing URL for the media item

src/components/VFilters/VLicenseExplanationTooltip.vue

@@ -16,9 +16,9 @@
       class="caption float-right m-2"
     >
       <template #link>
-        <a target="_blank" :href="`${getLicenseDeedLink(license)}`">{{
+        <VLink :href="`${getLicenseDeedLink(license)}`">{{
           $t('filters.license-explanation.link')
-        }}</a>
+        }}</VLink>
       </template>
     </i18n>
     <i18n
@@ -28,20 +28,22 @@
       class="caption float-right m-2"
     >
       <template #link>
-        <a target="_blank" :href="`${getLicenseDeedLink(license)}`">{{
+        <VLink :href="`${getLicenseDeedLink(license)}`">{{
           $t('filters.license-explanation.link')
-        }}</a>
+        }}</VLink>
       </template>
     </i18n>
   </div>
 </template>
 
 <script>
 import { isLicense } from '~/utils/license'
+import VLink from '~/components/VLink.vue'
+import LicenseElements from '~/components/LicenseElements.vue'
 
 export default {
   name: 'VLicenseExplanationTooltip',
-
+  components: { VLink, LicenseElements },
   props: {
     license: {
       type: String,

src/components/VImageDetails/VImageDetails.vue

@@ -18,13 +18,9 @@
       <div>
         <dt>{{ $t('image-details.information.source') }}</dt>
         <dd>
-          <a
-            :href="image.foreign_landing_url"
-            target="blank"
-            rel="noopener noreferrer"
-            class="text-pink"
-            >{{ sourceName }}</a
-          >
+          <VLink :href="image.foreign_landing_url" class="text-pink">{{
+            sourceName
+          }}</VLink>
         </dd>
       </div>
       <div>

src/components/VLink.vue

@@ -0,0 +1,15 @@
+<template>
+  <a target="_blank" rel="noopener noreferrer" v-on="$listeners"><slot /></a>
+</template>
+
+<script>
+/**
+ * This is a simple wrapper component for external links that ensures that the links
+ * are set to open in a new tab and not raise an error with the current iframe setup.
+ */
+import { defineComponent } from '@nuxtjs/composition-api'
+
+export default defineComponent({
+  name: 'VLink',
+})
+</script>

src/components/VMediaInfo/VCopyLicense.vue

@@ -42,13 +42,11 @@
           tag="p"
         >
           <template #title>
-            <a
+            <VLink
               :href="media.foreign_landing_url"
-              target="_blank"
-              rel="noopener"
               @click="onSourceLinkClicked"
               @keyup.enter="onSourceLinkClicked"
-              >{{ media.title }}</a
+              >{{ media.title }}</VLink
             ></template
           >
           <template #creator>
@@ -58,14 +56,12 @@
               tag="span"
             >
               <template #creator-name>
-                <a
+                <VLink
                   v-if="media.creator_url"
                   :href="media.creator_url"
-                  target="_blank"
-                  rel="noopener"
                   @click="onCreatorLinkClicked"
                   @keyup.enter="onCreatorLinkClicked"
-                  >{{ media.creator }}</a
+                  >{{ media.creator }}</VLink
                 >
                 <span v-else>{{ media.creator }}</span>
               </template>
@@ -79,12 +75,9 @@
             }}
           </template>
           <template #license>
-            <a
-              class="uppercase"
-              :href="licenseUrl"
-              target="_blank"
-              rel="noopener"
-              >{{ fullLicenseName }}</a
+            <VLink class="uppercase" :href="licenseUrl">{{
+              fullLicenseName
+            }}</VLink
             >{{ period }}
           </template>
         </i18n>
@@ -156,7 +149,6 @@ import {
   ref,
   useContext,
 } from '@nuxtjs/composition-api'
-import CopyButton from '~/components/CopyButton.vue'
 import { COPY_ATTRIBUTION } from '~/constants/action-types'
 import { ATTRIBUTION, USAGE_DATA } from '~/constants/store-modules'
 import {
@@ -166,9 +158,12 @@ import {
 import getAttributionHtml from '~/utils/attribution-html'
 import { isPublicDomain } from '~/utils/license'
 
+import VLink from '~/components/VLink.vue'
+import CopyButton from '~/components/CopyButton.vue'
+
 const VCopyLicense = defineComponent({
   name: 'VCopyLicense',
-  components: { CopyButton },
+  components: { CopyButton, VLink },
   props: {
     media: {
       type: Object,