Add meta tags to pages with new_header enabled

nuxt.config.ts

@@ -29,8 +29,12 @@ const meta = [
     name: 'viewport',
     content: 'width=device-width,initial-scale=1',
   },
-  // Tells Google to only crawl Openverse when iframed
-  { hid: 'googlebot', name: 'googlebot', content: 'noindex,indexifembedded' },
+  // By default, tell all robots not to index pages. Will be overridden in the
+  // search, content and home pages.
+  { hid: 'robots', name: 'robots', content: 'noindex' },
+  // Tell Googlebot to crawl Openverse when iframed
+  // TODO: remove after the iframe is removed
+  { hid: 'googlebot', name: 'googlebot', content: 'indexifembedded' },
   {
     vmid: 'monetization',
     name: 'monetization',

src/pages/about.vue

@@ -73,20 +73,30 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from '@nuxtjs/composition-api'
+import { defineComponent, useMeta } from '@nuxtjs/composition-api'
+
+import { useFeatureFlagStore } from '~/stores/feature-flag'
+import { useI18n } from '~/composables/use-i18n'
 
 import VLink from '~/components/VLink.vue'
 import VContentPage from '~/components/VContentPage.vue'
 
 export default defineComponent({
   name: 'AboutPage',
   components: { VLink, VContentPage },
-  head() {
-    return {
-      title: `${this.$t('about.title', {
+  setup() {
+    const i18n = useI18n()
+    const featureFlagStore = useFeatureFlagStore()
+
+    useMeta({
+      title: `${i18n.t('about.title', {
         openverse: 'Openverse',
       })} | Openverse`,
-    }
+      meta: featureFlagStore.isOn('new_header')
+        ? [{ hid: 'robots', name: 'robots', content: 'all' }]
+        : undefined,
+    })
   },
+  head: {},
 })
 </script>

src/pages/external-sources.vue

@@ -63,21 +63,31 @@
     </i18n>
   </VContentPage>
 </template>
+<script lang="ts">
+import { defineComponent, useMeta } from '@nuxtjs/composition-api'
 
-<script>
-import { defineComponent } from '@nuxtjs/composition-api'
+import { useFeatureFlagStore } from '~/stores/feature-flag'
+
+import { useI18n } from '~/composables/use-i18n'
 
 import VContentPage from '~/components/VContentPage.vue'
 import VLink from '~/components/VLink.vue'
 
 export default defineComponent({
   name: 'ExternalSourcesPage',
   components: { VContentPage, VLink },
-  head() {
-    return {
-      title: `${this.$t('external-sources-page.title')} | Openverse`,
-    }
+  setup() {
+    const i18n = useI18n()
+    const featureFlagStore = useFeatureFlagStore()
+
+    useMeta({
+      title: `${i18n.t('external-sources-page.title')} | Openverse`,
+      meta: featureFlagStore.isOn('new_header')
+        ? [{ hid: 'robots', name: 'robots', content: 'all' }]
+        : undefined,
+    })
   },
+  head: {},
 })
 </script>
 

src/pages/feedback.vue

@@ -39,7 +39,10 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from '@nuxtjs/composition-api'
+import { defineComponent, useMeta } from '@nuxtjs/composition-api'
+
+import { useFeatureFlagStore } from '~/stores/feature-flag'
+import { useI18n } from '~/composables/use-i18n'
 
 import VLink from '~/components/VLink.vue'
 import VContentPage from '~/components/VContentPage.vue'
@@ -62,15 +65,21 @@ export default defineComponent({
   name: 'FeedbackPage',
   components: { VLink, VContentPage, VTabs, VTab, VTabPanel },
   setup() {
+    const i18n = useI18n()
+    const featureFlagStore = useFeatureFlagStore()
+
+    useMeta({
+      title: `${i18n.t('feedback.title')} | Openverse`,
+      meta: featureFlagStore.isOn('new_header')
+        ? [{ hid: 'robots', name: 'robots', content: 'all' }]
+        : undefined,
+    })
+
     return {
       forms,
       tabs,
     }
   },
-  head() {
-    return {
-      title: `${this.$t('feedback.title')} | Openverse`,
-    }
-  },
+  head: {},
 })
 </script>

src/pages/index.vue

@@ -127,6 +127,7 @@ import {
   onMounted,
   ref,
   useContext,
+  useMeta,
   useRouter,
 } from '@nuxtjs/composition-api'
 
@@ -140,6 +141,7 @@ import { isMinScreen } from '~/composables/use-media-query'
 
 import { useMediaStore } from '~/stores/media'
 import { useSearchStore } from '~/stores/search'
+import { useFeatureFlagStore } from '~/stores/feature-flag'
 
 import VLink from '~/components/VLink.vue'
 import VLogoButtonOld from '~/components/VHeaderOld/VLogoButtonOld.vue'
@@ -148,6 +150,8 @@ import VSearchTypeRadio from '~/components/VContentSwitcher/VSearchTypeRadio.vue
 import VSearchTypePopoverOld from '~/components/VContentSwitcherOld/VSearchTypePopoverOld.vue'
 import VBrand from '~/components/VBrand/VBrand.vue'
 
+import type { Dictionary } from 'vue-router/types/router'
+
 import imageInfo from '~/assets/homepage_images/image_info.json'
 
 export default defineComponent({
@@ -162,6 +166,16 @@ export default defineComponent({
   },
   layout: 'blank',
   setup() {
+    const featureFlagStore = useFeatureFlagStore()
+    const themeColorMeta = [
+      { hid: 'theme-color', name: 'theme-color', content: '#ffe033' },
+    ]
+    useMeta({
+      meta: featureFlagStore.isOn('new_header')
+        ? [...themeColorMeta, { hid: 'robots', name: 'robots', content: 'all' }]
+        : themeColorMeta,
+    })
+
     const { app } = useContext()
     const router = useRouter()
     const mediaStore = useMediaStore()
@@ -197,7 +211,7 @@ export default defineComponent({
     const contentSwitcher = ref<InstanceType<
       typeof VSearchTypePopoverOld
     > | null>(null)
-    const searchType = ref(ALL_MEDIA)
+    const searchType = ref<SupportedSearchType>(ALL_MEDIA)
 
     const setSearchType = (type: SupportedSearchType) => {
       searchType.value = type
@@ -212,7 +226,7 @@ export default defineComponent({
 
       const newPath = app.localePath({
         path: searchPath(searchType.value),
-        query: searchStore.searchQueryParams,
+        query: searchStore.searchQueryParams as Dictionary<string>,
       })
       router.push(newPath)
     }

src/pages/search-help.vue

@@ -223,7 +223,10 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, useContext } from '@nuxtjs/composition-api'
+import { defineComponent, useContext, useMeta } from '@nuxtjs/composition-api'
+
+import { useFeatureFlagStore } from '~/stores/feature-flag'
+import { useI18n } from '~/composables/use-i18n'
 
 import VLink from '~/components/VLink.vue'
 import VContentPage from '~/components/VContentPage.vue'
@@ -233,6 +236,19 @@ export default defineComponent({
   components: { VLink, VContentPage },
   setup() {
     const { app } = useContext()
+
+    const i18n = useI18n()
+    const featureFlagStore = useFeatureFlagStore()
+
+    useMeta({
+      title: `${i18n.t('search-guide.title', {
+        openverse: 'Openverse',
+      })} | Openverse`,
+      meta: featureFlagStore.isOn('new_header')
+        ? [{ hid: 'robots', name: 'robots', content: 'all' }]
+        : undefined,
+    })
+
     const pathFromQuery = (queryString: string, quote = false) => {
       return app.localePath({
         path: 'search',
@@ -246,12 +262,6 @@ export default defineComponent({
     }
     return { pathFromQuery, providerSearchLink }
   },
-  head() {
-    return {
-      title: `${this.$t('search-guide.title', {
-        openverse: 'Openverse',
-      })} | Openverse`,
-    }
-  },
+  head: {},
 })
 </script>

src/pages/search/audio.vue

@@ -52,6 +52,8 @@ import { useUiStore } from '~/stores/ui'
 
 import { IsMinScreenMdKey } from '~/types/provides'
 
+import { useFeatureFlagStore } from '~/stores/feature-flag'
+
 import VSnackbar from '~/components/VSnackbar.vue'
 import VAudioTrack from '~/components/VAudioTrack/VAudioTrack.vue'
 import VLoadMore from '~/components/VLoadMore.vue'
@@ -69,7 +71,14 @@ export default defineComponent({
   },
   props: propTypes,
   setup(props) {
-    useMeta({ title: `${props.searchTerm} | Openverse` })
+    const featureFlagStore = useFeatureFlagStore()
+
+    useMeta({
+      title: `${props.searchTerm} | Openverse`,
+      meta: featureFlagStore.isOn('new_header')
+        ? [{ hid: 'robots', name: 'robots', content: 'all' }]
+        : undefined,
+    })
 
     const results = computed(() => props.resultItems.audio)
 

src/pages/search/image.vue

@@ -12,6 +12,7 @@ import { computed, defineComponent, useMeta } from '@nuxtjs/composition-api'
 
 import { propTypes } from '~/pages/search/search-page.types'
 import { useFocusFilters } from '~/composables/use-focus-filters'
+import { useFeatureFlagStore } from '~/stores/feature-flag'
 
 import VImageGrid from '~/components/VImageGrid/VImageGrid.vue'
 
@@ -20,7 +21,14 @@ export default defineComponent({
   components: { VImageGrid },
   props: propTypes,
   setup(props) {
-    useMeta({ title: `${props.searchTerm} | Openverse` })
+    const featureFlagStore = useFeatureFlagStore()
+
+    useMeta({
+      title: `${props.searchTerm} | Openverse`,
+      meta: featureFlagStore.isOn('new_header')
+        ? [{ hid: 'robots', name: 'robots', content: 'all' }]
+        : undefined,
+    })
 
     const results = computed(() => props.resultItems.image)
 

src/pages/search/index.vue

@@ -6,6 +6,7 @@
 import { defineComponent, useMeta } from '@nuxtjs/composition-api'
 
 import { propTypes } from '~/pages/search/search-page.types'
+import { useFeatureFlagStore } from '~/stores/feature-flag'
 
 import VAllResultsGrid from '~/components/VAllResultsGrid/VAllResultsGrid.vue'
 
@@ -14,16 +15,15 @@ export default defineComponent({
   components: { VAllResultsGrid },
   props: propTypes,
   setup(props) {
-    useMeta({ title: `${props.searchTerm} | Openverse` })
-  },
-  head: {
-    meta: [
-      {
-        hid: 'robots',
-        name: 'robots',
-        content: 'noindex',
-      },
-    ],
+    const featureFlagStore = useFeatureFlagStore()
+
+    useMeta({
+      title: `${props.searchTerm} | Openverse`,
+      meta: featureFlagStore.isOn('new_header')
+        ? [{ hid: 'robots', name: 'robots', content: 'all' }]
+        : undefined,
+    })
   },
+  head: {},
 })
 </script>

src/pages/sources.vue

@@ -82,9 +82,11 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from '@nuxtjs/composition-api'
+import { defineComponent, useMeta } from '@nuxtjs/composition-api'
 
 import { supportedMediaTypes } from '~/constants/media'
+import { useI18n } from '~/composables/use-i18n'
+import { useFeatureFlagStore } from '~/stores/feature-flag'
 
 import VButton from '~/components/VButton.vue'
 import VLink from '~/components/VLink.vue'
@@ -98,13 +100,18 @@ export default defineComponent({
   name: 'SourcePage',
   components: { VButton, VContentPage, VIcon, VLink, VSourcesTable },
   setup() {
-    return { externalLinkIcon, supportedMediaTypes }
-  },
+    const i18n = useI18n()
+    const featureFlagStore = useFeatureFlagStore()
 
-  head() {
-    return {
-      title: `${this.$t('sources.title')} | Openverse`,
-    }
+    useMeta({
+      title: `${i18n.t('sources.title')} | Openverse`,
+      meta: featureFlagStore.isOn('new_header')
+        ? [{ hid: 'robots', name: 'robots', content: 'all' }]
+        : undefined,
+    })
+
+    return { externalLinkIcon, supportedMediaTypes }
   },
+  head: {},
 })
 </script>

tsconfig.json

@@ -86,6 +86,8 @@
     "src/components/VHeader/VPageLinks.vue",
     "src/components/VHeader/VSearchBar/**.vue",
     "src/components/VImageDetails/VRelatedImages.vue",
+
+    "src/pages/about.vue",
     "src/pages/feedback.vue",
     "src/pages/search-help.vue",