Show a CC Search → Openverse notice

nuxt.config.js

@@ -117,7 +117,7 @@ export default {
   modern: 'client',
   server: { port: process.env.PORT || 8443 },
   router: {
-    middleware: 'embed',
+    middleware: 'middleware',
   },
   components: {
     dirs: [
@@ -132,7 +132,8 @@ export default {
   plugins: [
     { src: '~/plugins/ab-test-init.js', mode: 'client' },
     { src: '~/plugins/ga.js', mode: 'client' },
-    { src: '~/plugins/message.js' },
+    { src: '~/plugins/url-change.js' },
+    { src: '~/plugins/migration-notice.js' },
   ],
   css: [
     '~/assets/fonts.css',

src/components/MigrationNotice.vue

@@ -0,0 +1,24 @@
+<template>
+  <NoticeBar>
+    {{ $t('migration-notice.intro') }}
+    <i18n tag="span" path="migration-notice.more">
+      <template #read-more>
+        <a
+          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
+        >
+      </template>
+    </i18n>
+  </NoticeBar>
+</template>
+
+<script>
+import NoticeBar from '~/components/NoticeBar/NoticeBar.vue'
+
+export default {
+  name: 'MigrationNotice',
+  components: { NoticeBar },
+}
+</script>

src/components/NoticeBar/NoticeBar.vue

@@ -0,0 +1,18 @@
+<template>
+  <div
+    class="font-heading font-semibold text-base text-center leading-tight bg-yellow text-dark-blue py-6"
+  >
+    <!-- @slot Content goes here -->
+    <slot />
+  </div>
+</template>
+
+<script>
+/**
+ * Displays notices is a yellow strip. The onus of positioning this bar is on
+ * the parent component.
+ */
+export default {
+  name: 'NoticeBar',
+}
+</script>

src/components/NoticeBar/meta/NoticeBar.stories.mdx

@@ -0,0 +1,34 @@
+import {
+  ArgsTable,
+  Canvas,
+  Description,
+  Meta,
+  Story,
+} from '@storybook/addon-docs'
+
+import NoticeBar from '~/components/NoticeBar/NoticeBar'
+
+<Meta title="Components/Notice bar" component={NoticeBar} />
+
+export const Template = (args, { argTypes }) => ({
+  template: `<NoticeBar>{{ text }}</NoticeBar>`,
+  components: { NoticeBar },
+  props: Object.keys(argTypes),
+})
+
+# Notice bar
+
+<Description of={NoticeBar} />
+
+<ArgsTable of={NoticeBar} />
+
+<Canvas>
+  <Story
+    name="Default"
+    args={{
+      text: 'Your text goes here.',
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>

src/layouts/embedded-with-nav-search.vue

@@ -1,22 +1,25 @@
 <template>
   <div class="app">
+    <MigrationNotice v-show="isReferredFromCc" />
     <HeaderSection :show-nav-search="true" />
     <main class="embedded">
       <Nuxt />
     </main>
   </div>
 </template>
 <script>
+import { mapState } from 'vuex'
 import iframeHeight from '~/mixins/iframe-height'
 import i18nSync from '~/mixins/i18n-sync'
 
 const embeddedWithNavSearch = {
   name: 'embedded-with-nav-search',
-  mixins: [iframeHeight, i18nSync],
   layout: 'embedded-with-nav-search',
+  mixins: [iframeHeight, i18nSync],
   head() {
     return this.$nuxtI18nHead({ addSeoAttributes: true })
   },
+  computed: mapState(['isReferredFromCc']),
 }
 export default embeddedWithNavSearch
 </script>

src/layouts/embedded.vue

@@ -1,22 +1,25 @@
 <template>
   <div class="app">
+    <MigrationNotice v-show="isReferredFromCc" />
     <HeaderSection />
     <main class="embedded">
       <Nuxt />
     </main>
   </div>
 </template>
 <script>
+import { mapState } from 'vuex'
 import iframeHeight from '~/mixins/iframe-height'
 import i18nSync from '~/mixins/i18n-sync'
 
 const embeddedPage = {
   name: 'embedded',
-  mixins: [iframeHeight, i18nSync],
   layout: 'embedded',
+  mixins: [iframeHeight, i18nSync],
   head() {
     return this.$nuxtI18nHead({ addSeoAttributes: true })
   },
+  computed: mapState(['isReferredFromCc']),
 }
 export default embeddedPage
 </script>

src/locales/en.json

@@ -596,5 +596,10 @@
     "aria": {
       "arrow-label": "Dropdown"
     }
+  },
+  "migration-notice": {
+    "intro": "CC Search is now called Openverse and joins WordPress as an open source project.",
+    "more": "{read-more} about this announcement.",
+    "read": "Read more"
   }
 }