From 0bad3162baca207dc653e9804b25282a2315dac3 Mon Sep 17 00:00:00 2001
From: Olga Bulat <obulat@gmail.com>
Date: Thu, 12 May 2022 08:47:18 +0300
Subject: [PATCH 1/5] Use single `export default` instead of a named object

---
 src/components/VFourOhFour.vue                |  3 +--
 src/components/VHeader/VFilterButton.vue      | 13 +++++-----
 src/components/VHeader/VLogoButton.vue        |  3 +--
 .../VHeader/VSearchBar/VSearchBar.vue         |  3 +--
 src/components/VHeader/VSidebarContent.vue    |  4 +--
 .../VImageDetails/VImageDetails.vue           |  3 +--
 src/components/VMediaInfo/VCopyLicense.vue    |  3 +--
 src/components/VMediaInfo/VMediaReuse.vue     |  3 +--
 src/components/VModal/VModalContent.vue       |  4 +--
 src/components/VSearchResultsTitle.vue        |  3 +--
 src/pages/about.vue                           |  4 +--
 src/pages/index.vue                           | 26 +++++++++----------
 src/pages/search/index.vue                    |  3 +--
 13 files changed, 30 insertions(+), 45 deletions(-)

diff --git a/src/components/VFourOhFour.vue b/src/components/VFourOhFour.vue
index d033dfda2f..490633f146 100644
--- a/src/components/VFourOhFour.vue
+++ b/src/components/VFourOhFour.vue
@@ -62,7 +62,7 @@ import Oops from '~/assets/oops.svg?inline'
 import OpenverseLogo from '~/assets/logo.svg?inline'
 import OpenverseBrand from '~/assets/brand.svg?inline'
 
-const VFourOhFour = defineComponent({
+export default defineComponent({
   name: 'VFourOhFour',
   components: {
     OpenverseLogo,
@@ -113,7 +113,6 @@ const VFourOhFour = defineComponent({
     ],
   },
 })
-export default VFourOhFour
 </script>
 
 <style>
diff --git a/src/components/VHeader/VFilterButton.vue b/src/components/VHeader/VFilterButton.vue
index 060dc30c25..6a27c0044d 100644
--- a/src/components/VHeader/VFilterButton.vue
+++ b/src/components/VHeader/VFilterButton.vue
@@ -34,17 +34,18 @@ import {
   toRefs,
   useContext,
   ref,
+  ComputedRef,
 } from '@nuxtjs/composition-api'
 
 import { useSearchStore } from '~/stores/search'
 import { defineEvent } from '~/types/emits'
 
-import VButton from '~/components/VButton.vue'
+import VButton, { ButtonVariant } from '~/components/VButton.vue'
 import VIcon from '~/components/VIcon/VIcon.vue'
 
 import filterIcon from '~/assets/icons/filter.svg'
 
-const VFilterButton = defineComponent({
+export default defineComponent({
   name: 'VFilterButton',
   components: {
     VIcon,
@@ -73,9 +74,11 @@ const VFilterButton = defineComponent({
      * Determine the visual style of the button
      * based on the viewport, the application of filters, and scrolling.
      */
-    const variant = computed(() => {
+    const variant: ComputedRef<ButtonVariant> = computed(() => {
       // Show the bordered state by default, unless below md
-      let value = isMinScreenMd.value ? 'tertiary' : 'action-menu'
+      let value: ButtonVariant = isMinScreenMd.value
+        ? 'tertiary'
+        : 'action-menu'
 
       if (isHeaderScrolled.value) {
         value = 'action-menu'
@@ -119,6 +122,4 @@ const VFilterButton = defineComponent({
     }
   },
 })
-
-export default VFilterButton
 </script>
diff --git a/src/components/VHeader/VLogoButton.vue b/src/components/VHeader/VLogoButton.vue
index a5a9e86ed4..3f8457b4bb 100644
--- a/src/components/VHeader/VLogoButton.vue
+++ b/src/components/VHeader/VLogoButton.vue
@@ -29,7 +29,7 @@ import VButton from '~/components/VButton.vue'
 
 import OpenverseLogoText from '~/assets/icons/openverse-logo-text.svg?inline'
 
-const VLogoButton = defineComponent({
+export default defineComponent({
   name: 'VLogoButton',
   components: { OpenverseLogoText, VLogoLoader, VButton },
   props: {
@@ -51,5 +51,4 @@ const VLogoButton = defineComponent({
     },
   },
 })
-export default VLogoButton
 </script>
diff --git a/src/components/VHeader/VSearchBar/VSearchBar.vue b/src/components/VHeader/VSearchBar/VSearchBar.vue
index 72f281458a..24ce99025e 100644
--- a/src/components/VHeader/VSearchBar/VSearchBar.vue
+++ b/src/components/VHeader/VSearchBar/VSearchBar.vue
@@ -41,7 +41,7 @@ import VSearchButton from '~/components/VHeader/VSearchBar/VSearchButton.vue'
  * that fires a search request. The loading state and number of hits are also
  * displayed in the bar itself.
  */
-const VSearchBar = defineComponent({
+export default defineComponent({
   name: 'VSearchBar',
   components: { VInputField, VSearchButton },
   inheritAttrs: false,
@@ -88,7 +88,6 @@ const VSearchBar = defineComponent({
     }
   },
 })
-export default VSearchBar
 </script>
 
 <style>
diff --git a/src/components/VHeader/VSidebarContent.vue b/src/components/VHeader/VSidebarContent.vue
index d8ce2611d0..4691d8d6a8 100644
--- a/src/components/VHeader/VSidebarContent.vue
+++ b/src/components/VHeader/VSidebarContent.vue
@@ -13,7 +13,7 @@ import VSearchGridFilter from '~/components/VFilters/VSearchGridFilter.vue'
 /**
  * Renders the inner content of the sidebar and manages focus.
  */
-const VSidebarContent = defineComponent({
+export default defineComponent({
   name: 'VSidebarContent',
   components: { VTeleport, VSearchGridFilter },
   props: {
@@ -27,6 +27,4 @@ const VSidebarContent = defineComponent({
     },
   },
 })
-
-export default VSidebarContent
 </script>
diff --git a/src/components/VImageDetails/VImageDetails.vue b/src/components/VImageDetails/VImageDetails.vue
index cd47a00c60..454a33a091 100644
--- a/src/components/VImageDetails/VImageDetails.vue
+++ b/src/components/VImageDetails/VImageDetails.vue
@@ -50,7 +50,7 @@ import VContentReportPopover from '~/components/VContentReport/VContentReportPop
 import VLink from '~/components/VLink.vue'
 import VMediaTag from '~/components/VMediaTag/VMediaTag.vue'
 
-const VImageDetails = defineComponent({
+export default defineComponent({
   name: 'VImageDetails',
   components: { VContentReportPopover, VLink, VMediaTag },
   props: {
@@ -84,7 +84,6 @@ const VImageDetails = defineComponent({
     return { imgType }
   },
 })
-export default VImageDetails
 </script>
 
 <style scoped>
diff --git a/src/components/VMediaInfo/VCopyLicense.vue b/src/components/VMediaInfo/VCopyLicense.vue
index 585a378ae8..48494f0d05 100644
--- a/src/components/VMediaInfo/VCopyLicense.vue
+++ b/src/components/VMediaInfo/VCopyLicense.vue
@@ -44,7 +44,7 @@ import VLicenseTabPanel from '~/components/VMediaInfo/VLicenseTabPanel.vue'
 
 const tabs = ['rich', 'html', 'plain']
 
-const VCopyLicense = defineComponent({
+export default defineComponent({
   name: 'VCopyLicense',
   components: { VTabs, VTab, VLicenseTabPanel },
   props: {
@@ -64,5 +64,4 @@ const VCopyLicense = defineComponent({
     }
   },
 })
-export default VCopyLicense
 </script>
diff --git a/src/components/VMediaInfo/VMediaReuse.vue b/src/components/VMediaInfo/VMediaReuse.vue
index 933eb4e5a1..b7129b57e8 100644
--- a/src/components/VMediaInfo/VMediaReuse.vue
+++ b/src/components/VMediaInfo/VMediaReuse.vue
@@ -32,7 +32,7 @@ import type { Media } from '~/models/media'
 import VCopyLicense from '~/components/VMediaInfo/VCopyLicense.vue'
 import VMediaLicense from '~/components/VMediaInfo/VMediaLicense.vue'
 
-const VMediaReuse = defineComponent({
+export default defineComponent({
   name: 'VMediaReuse',
   components: { VCopyLicense, VMediaLicense },
   props: {
@@ -51,5 +51,4 @@ const VMediaReuse = defineComponent({
     return { fullLicenseName }
   },
 })
-export default VMediaReuse
 </script>
diff --git a/src/components/VModal/VModalContent.vue b/src/components/VModal/VModalContent.vue
index bd2263d454..a9a943ac76 100644
--- a/src/components/VModal/VModalContent.vue
+++ b/src/components/VModal/VModalContent.vue
@@ -72,7 +72,7 @@ import closeIcon from '~/assets/icons/close.svg'
 /**
  * Renders the inner content of a modal and manages focus.
  */
-const VModalContent = defineComponent({
+export default defineComponent({
   name: 'VModalContent',
   components: { VTeleport, VButton, VIcon, FocusTrap, VLogoButton },
   props: {
@@ -147,8 +147,6 @@ const VModalContent = defineComponent({
     }
   },
 })
-
-export default VModalContent
 </script>
 
 <style module></style>
diff --git a/src/components/VSearchResultsTitle.vue b/src/components/VSearchResultsTitle.vue
index 67e492646b..61c8f09224 100644
--- a/src/components/VSearchResultsTitle.vue
+++ b/src/components/VSearchResultsTitle.vue
@@ -14,7 +14,7 @@ const sizes = {
   DEFAULT: 'default',
   LARGE: 'large',
 }
-const VSearchResultsTitle = defineComponent({
+export default defineComponent({
   name: 'VSearchResultsTitle',
   props: {
     size: {
@@ -24,7 +24,6 @@ const VSearchResultsTitle = defineComponent({
     },
   },
 })
-export default VSearchResultsTitle
 </script>
 
 <style scoped>
diff --git a/src/pages/about.vue b/src/pages/about.vue
index cd90c0f7e0..b31e398f98 100644
--- a/src/pages/about.vue
+++ b/src/pages/about.vue
@@ -78,7 +78,7 @@ import { defineComponent } from '@nuxtjs/composition-api'
 import VLink from '~/components/VLink.vue'
 import VContentPage from '~/components/VContentPage.vue'
 
-const AboutPage = defineComponent({
+export default defineComponent({
   name: 'AboutPage',
   components: { VLink, VContentPage },
   head() {
@@ -89,6 +89,4 @@ const AboutPage = defineComponent({
     }
   },
 })
-
-export default AboutPage
 </script>
diff --git a/src/pages/index.vue b/src/pages/index.vue
index f4125c0479..204f354f85 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -150,9 +150,8 @@ import imageInfo from '~/assets/homepage_images/image_info.json'
 import OpenverseLogo from '~/assets/logo.svg?inline'
 import OpenverseBrand from '~/assets/brand.svg?inline'
 
-const HomePage = {
-  name: 'home-page',
-  layout: 'blank',
+export default {
+  name: 'HomePage',
   components: {
     OpenverseLogo,
     OpenverseBrand,
@@ -162,15 +161,7 @@ const HomePage = {
     VLink,
     VLogoButton,
   },
-  head: {
-    meta: [
-      {
-        hid: 'theme-color',
-        name: 'theme-color',
-        content: '#ffe033',
-      },
-    ],
-  },
+  layout: 'blank',
   setup() {
     const { app } = useContext()
     const router = useRouter()
@@ -244,9 +235,16 @@ const HomePage = {
       handleSearch,
     }
   },
+  head: {
+    meta: [
+      {
+        hid: 'theme-color',
+        name: 'theme-color',
+        content: '#ffe033',
+      },
+    ],
+  },
 }
-
-export default HomePage
 </script>
 
 <style>
diff --git a/src/pages/search/index.vue b/src/pages/search/index.vue
index 7a3be35e10..1e1b3c8d13 100644
--- a/src/pages/search/index.vue
+++ b/src/pages/search/index.vue
@@ -10,7 +10,7 @@ import { propTypes } from '~/pages/search/search-page.types'
 
 import VAllResultsGrid from '~/components/VAllResultsGrid/VAllResultsGrid.vue'
 
-const SearchIndex = defineComponent({
+export default defineComponent({
   name: 'SearchIndex',
   components: { VAllResultsGrid },
   props: propTypes,
@@ -30,5 +30,4 @@ const SearchIndex = defineComponent({
     ],
   },
 })
-export default SearchIndex
 </script>

From f99a6d771e147edfc105c63272009b8a6c6748c2 Mon Sep 17 00:00:00 2001
From: Olga Bulat <obulat@gmail.com>
Date: Thu, 12 May 2022 08:51:06 +0300
Subject: [PATCH 2/5] Use single `export default` instead of a named object

---
 src/components/VButton.vue | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/VButton.vue b/src/components/VButton.vue
index 5b8c66e04f..4768cdd5c4 100644
--- a/src/components/VButton.vue
+++ b/src/components/VButton.vue
@@ -50,18 +50,19 @@ export const buttonVariants = [
   'action-menu',
   'action-menu-secondary',
   'action-menu-muted',
+  'action-menu-muted-pressed',
   'plain',
   'plain-dangerous',
   'full',
 ] as const
 
-type ButtonVariant = typeof buttonVariants[number]
+export type ButtonVariant = typeof buttonVariants[number]
 
 export const buttonSizes = ['large', 'medium', 'small', 'disabled'] as const
 
-type ButtonSize = typeof buttonSizes[number]
+export type ButtonSize = typeof buttonSizes[number]
 
-const buttonTypes = ['button', 'submit', 'reset'] as const
+export const buttonTypes = ['button', 'submit', 'reset'] as const
 
 export type ButtonType = typeof buttonTypes[number]
 

From 5b22ab2095b9adf944bb2cd7800e6a69dc62d216 Mon Sep 17 00:00:00 2001
From: Olga Bulat <obulat@gmail.com>
Date: Thu, 12 May 2022 08:51:43 +0300
Subject: [PATCH 3/5] Update POT file

---
 src/locales/po-files/openverse.pot | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/locales/po-files/openverse.pot b/src/locales/po-files/openverse.pot
index 6baab4e26f..19a29647da 100644
--- a/src/locales/po-files/openverse.pot
+++ b/src/locales/po-files/openverse.pot
@@ -4,7 +4,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: Openverse \n"
 "Report-Msgid-Bugs-To: https://github.com/wordpress/openverse/issues \n"
-"POT-Creation-Date: 2022-05-11T19:21:48+00:00\n"
+"POT-Creation-Date: 2022-05-12T05:51:30+00:00\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=UTF-8\n"
 "Content-Transfer-Encoding: 8bit\n"
@@ -1882,7 +1882,7 @@ msgid "Filters"
 msgstr ""
 
 #. Do not translate words between ### ###.
-#: src/components/VHeader/VFilterButton.vue:101
+#: src/components/VHeader/VFilterButton.vue:104
 msgctxt "header.filter-button.with-count"
 msgid "###count### Filter"
 msgid_plural "###count### Filters"

From aaa64d16a9eaf220ba15aad8f0e77161c9d1b655 Mon Sep 17 00:00:00 2001
From: Olga Bulat <obulat@gmail.com>
Date: Thu, 12 May 2022 09:11:37 +0300
Subject: [PATCH 4/5] Update POT file

---
 src/components/VHeader/VFilterButton.vue | 3 +--
 src/locales/po-files/openverse.pot       | 4 ++--
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/components/VHeader/VFilterButton.vue b/src/components/VHeader/VFilterButton.vue
index a995125401..f5d1d9ff0d 100644
--- a/src/components/VHeader/VFilterButton.vue
+++ b/src/components/VHeader/VFilterButton.vue
@@ -33,7 +33,6 @@ import {
   inject,
   toRefs,
   ref,
-  ComputedRef,
 } from '@nuxtjs/composition-api'
 
 import { useSearchStore } from '~/stores/search'
@@ -74,7 +73,7 @@ export default defineComponent({
      * Determine the visual style of the button
      * based on the viewport, the application of filters, and scrolling.
      */
-    const variant: ComputedRef<ButtonVariant> = computed(() => {
+    const variant = computed(() => {
       // Show the bordered state by default, unless below md
       let value: ButtonVariant = isMinScreenMd.value
         ? 'tertiary'
diff --git a/src/locales/po-files/openverse.pot b/src/locales/po-files/openverse.pot
index 4e24d04b91..7501ae704e 100644
--- a/src/locales/po-files/openverse.pot
+++ b/src/locales/po-files/openverse.pot
@@ -4,7 +4,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: Openverse \n"
 "Report-Msgid-Bugs-To: https://github.com/wordpress/openverse/issues \n"
-"POT-Creation-Date: 2022-05-12T05:53:51+00:00\n"
+"POT-Creation-Date: 2022-05-12T06:11:29+00:00\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=UTF-8\n"
 "Content-Transfer-Encoding: 8bit\n"
@@ -1882,7 +1882,7 @@ msgid "Filters"
 msgstr ""
 
 #. Do not translate words between ### ###.
-#: src/components/VHeader/VFilterButton.vue:104
+#: src/components/VHeader/VFilterButton.vue:103
 msgctxt "header.filter-button.with-count"
 msgid "###count### Filter"
 msgid_plural "###count### Filters"

From b8973ce2cb62302a238abf90a8dc68096a8912b6 Mon Sep 17 00:00:00 2001
From: Olga Bulat <obulat@gmail.com>
Date: Mon, 16 May 2022 19:19:17 +0300
Subject: [PATCH 5/5] Fix license url

---
 src/components/VMediaInfo/VMediaReuse.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/VMediaInfo/VMediaReuse.vue b/src/components/VMediaInfo/VMediaReuse.vue
index b069149d0c..cdee94c899 100644
--- a/src/components/VMediaInfo/VMediaReuse.vue
+++ b/src/components/VMediaInfo/VMediaReuse.vue
@@ -6,7 +6,7 @@
     <h3 class="text-2xl md:text-3xl mb-6">
       {{ $t('media-details.reuse.title') }}
     </h3>
-    <div class="grid md:grid-cols-2 gap-6">
+    <div v-if="media.license_url" class="grid md:grid-cols-2 gap-6">
       <VMediaLicense
         :license="media.license"
         :license-url="media.license_url"