Make VLink component that wraps around both external and internal links

src/components/AudioDetails/VAudioDetails.vue

@@ -10,13 +10,13 @@
       <div class="flex flex-col gap-4 lg:gap-6 flex-grow">
         <p v-if="audio.description" class="mb-6">{{ audio.description }}</p>
         <ul class="flex flex-wrap gap-2">
-          <MediaTag
+          <VMediaTag
             v-for="(tag, index) in audio.tags.filter((i) => !!i)"
             :key="index"
             tag="li"
           >
             {{ tag.name }}
-          </MediaTag>
+          </VMediaTag>
         </ul>
         <dl v-if="audio">
           <div v-if="audio.audio_set">
@@ -87,10 +87,11 @@ import { PROVIDER } from '~/constants/store-modules'
 import { mapState } from 'vuex'
 import VLink from '~/components/VLink.vue'
 import VAudioThumbnail from '~/components/VAudioThumbnail/VAudioThumbnail.vue'
+import VMediaTag from '~/components/VMediaTag/VMediaTag.vue'
 
 export default {
   name: 'VAudioDetails',
-  components: { VLink, VAudioThumbnail },
+  components: { VAudioThumbnail, VLink, VMediaTag },
   props: ['audio'],
   computed: {
     ...mapState(PROVIDER, ['audioProviders']),

src/components/DownloadButton.vue

@@ -6,7 +6,7 @@
     :size="size"
   >
     <template #default="{ buttonProps }">
-      <a
+      <VLink
         v-bind="buttonProps"
         class="whitespace-nowrap"
         :href="selectedFormat.download_url"
@@ -19,7 +19,7 @@
         <span class="ms-1 font-normal">{{
           getFormatSize(selectedFormat.extension_name)
         }}</span>
-      </a>
+      </VLink>
     </template>
 
     <template
@@ -62,13 +62,14 @@
 import filesize from 'filesize'
 import axios from 'axios'
 import local from '~/utils/local'
-import DropdownButton from '~/components/DropdownButton'
+import DropdownButton from '~/components/DropdownButton.vue'
+import VLink from '~/components/VLink.vue'
 
 const LS_DOWNLOAD_FORMAT_EXTENSION_KEY = 'openverse:download-format-extension'
 
 export default {
   name: 'DownloadButton',
-  components: { DropdownButton },
+  components: { DropdownButton, VLink },
   props: {
     formats: {
       type: Array,

src/components/VImageDetails/VImageDetails.vue

@@ -6,6 +6,14 @@
       </h3>
       <VContentReportPopover :media="image" />
     </div>
+    <ul v-if="image && image.tags" class="flex flex-wrap gap-2 mb-6">
+      <VMediaTag
+        v-for="(tag, index) in image.tags.filter((i) => !!i)"
+        :key="index"
+        tag="li"
+        >{{ tag.name }}</VMediaTag
+      >
+    </ul>
     <dl>
       <div>
         <dt>{{ $t('image-details.information.type') }}</dt>
@@ -38,8 +46,12 @@
 <script>
 import { computed, defineComponent, useContext } from '@nuxtjs/composition-api'
 
+import VContentReportPopover from '~/components/VContentReport/VContentReportPopover.vue'
+import VMediaTag from '~/components/VMediaTag/VMediaTag.vue'
+
 const VImageDetails = defineComponent({
   name: 'VImageDetails',
+  components: { VContentReportPopover, VMediaTag },
   props: {
     image: {
       type: Object,

src/components/VLink.vue

@@ -6,50 +6,34 @@
 
 <script>
 /**
- * This is a wrapper component for all links. All VLinks have to have a valid `href` attr.
+ * This is a wrapper component for all links. All VLinks have to have a valid `href` prop.
  * Links with `href` starting with `/` are treated as internal links.
  *
  * Internal links use `NuxtLink` component with `to` attribute set to `localePath(href)`
  * External links use `a` element set to open in a new tab and not raise an error with the current iframe setup.
  */
-import {
-  computed,
-  defineComponent,
-  useContext,
-  watch,
-} from '@nuxtjs/composition-api'
-import { warn } from '@/utils/warn'
+import { computed, defineComponent, useContext } from '@nuxtjs/composition-api'
 
 const defaultProps = { target: '_blank', rel: 'noopener noreferrer' }
 
 export default defineComponent({
   name: 'VLink',
-  setup(_, { attrs }) {
+  props: {
+    href: {
+      type: String,
+      required: true,
+      validator: (v) => !['', '#'].includes(v),
+    },
+  },
+  setup(props) {
     const { app } = useContext()
-    const isInternal = computed(() => attrs.href?.startsWith('/'))
+    const isInternal = computed(() => props.href?.startsWith('/'))
     const linkComponent = computed(() => (isInternal.value ? 'NuxtLink' : 'a'))
 
-    let linkProperties = {}
-    watch(
-      [attrs],
-      ([attrs]) => {
-        // No need to declare `href` as an explicit prop as Vue preserves
-        // the `attrs` object reference between renders and updates the properties
-        // meaning we'll always have the latest values for the properties on the
-        // attrs object
-        if (!attrs.href || attrs.href === '#') {
-          warn('VLink is missing a valid `href` attribute.')
-        }
-        const { href, ...otherProperties } = attrs
-        linkProperties = isInternal.value
-          ? { ...otherProperties, to: app.localePath(href) }
-          : {
-              ...otherProperties,
-              ...defaultProps,
-              href,
-            }
-      },
-      { immediate: true }
+    let linkProperties = computed(() =>
+      isInternal.value
+        ? { to: app?.localePath(props.href) ?? props.href }
+        : { ...defaultProps, href: props.href }
     )
 
     return { linkProperties, linkComponent }

src/components/MediaTag/MediaTag.vue → src/components/VMediaTag/VMediaTag.vue

@@ -2,7 +2,7 @@
   <Component
     :is="tag"
     v-bind="$attrs"
-    class="text-dark-blue text-sr md:text-sm font-semibold px-2 md:px-3 py-1 md:py-2 bg-dark-charcoal-10 rounded-full leading-none inline-flex"
+    class="text-dark-blue text-sr md:text-base font-semibold px-3 md:px-4 py-1 md:py-2 bg-dark-charcoal-10 rounded-full leading-[130%] md:leading-[130%] inline-flex"
   >
     <!-- @slot Content goes here -->
     <slot />
@@ -23,7 +23,7 @@ export default {
      */
     tag: {
       type: String,
-      default: 'div',
+      default: 'span',
     },
   },
 }

src/components/MediaTag/meta/MediaTag.stories.mdx → src/components/VMediaTag/meta/VMediaTag.stories.mdx

@@ -6,21 +6,21 @@ import {
   Story,
 } from '@storybook/addon-docs'
 
-import MediaTag from '~/components/MediaTag/MediaTag'
+import VMediaTag from '~/components/VMediaTag/VMediaTag'
 
-<Meta title="Components/Media tag" component={MediaTag} />
+<Meta title="Components/VMediaTag" component={VMediaTag} />
 
 export const Template = (args, { argTypes }) => ({
-  template: `<MediaTag v-bind="$props" v-on="$props">Hello</MediaTag>`,
-  components: { MediaTag },
+  template: `<VMediaTag v-bind="$props">Hello</VMediaTag>`,
+  components: { VMediaTag },
   props: Object.keys(argTypes),
 })
 
 # Media tag
 
-<Description of={MediaTag} />
+<Description of={VMediaTag} />
 
-<ArgsTable of={MediaTag} />
+<ArgsTable of={VMediaTag} />
 
 By default, the component is a transparent wrapper over `<span>`.
 
@@ -38,7 +38,6 @@ focus states on interactive elements, can be applied to add to the base styles.
     args={{
       tag: 'a',
       href: 'https://wordpress.org/',
-      class: 'hover:bg-dark-charcoal-60 hover:text-white hover:no-underline',
     }}
   >
     {Template.bind({})}

src/locales/en.json

@@ -64,28 +64,6 @@
       "with-count": "{count} Filter|{count} Filters"
     }
   },
-  "footer": {
-    "navigation": {
-      "contact": "Contact",
-      "privacy": "Privacy",
-      "policies": "Policies",
-      "terms": "Terms"
-    },
-    "caption": {
-      "label": "Except where otherwise {noted}, content on this site is licensed under a {attribution}. {icons}",
-      "noted": "noted",
-      "attribution": "Creative Commons Attribution 4.0 International license",
-      "icons": "Icons by Font Awesome."
-    },
-    "donate": {
-      "work": "Our work relies on you!",
-      "help": "Help us keep the internet free and open."
-    },
-    "aria": {
-      "contact": "contact info",
-      "donate": "donate section"
-    }
-  },
   "about": {
     "title": "About Openverse",
     "description": {