Rename meta search page and all code (#1868)

* Rename meta search components * String and component renames * simplify external sources page copy * Delete unused screenshots * Update src/locales/en.json * Update src/locales/en.json * Add snapshots * Update About page snapshots * Update src/locales/en.json Co-authored-by: Dhruv Bhanushali <dhruv_b@live.com> * Remove unused strings; quote feature name * Add snapshots Co-authored-by: Olga Bulat <obulat@gmail.com> Co-authored-by: Dhruv Bhanushali <dhruv_b@live.com>
WordPress · Oct 3, 2022 · 7997e31 · 7997e31
1 parent 04989ae
commit 7997e31
Show file tree

Hide file tree

Showing 54 changed files with 158 additions and 241 deletions.
diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -235,11 +235,8 @@ const config: NuxtConfig = {
    */
   redirect: {
     rules: [
-      {
-        from: '^/photos/(.*)$',
-        to: '/image/$1',
-        statusCode: 301,
-      },
+      { from: '^/photos/(.*)$', to: '/image/$1', statusCode: 301 },
+      { from: '/meta-search', to: '/external-sources', statusCode: 301 },
     ],
     // If the URL cannot be decoded, we call next() to show the client-side error page.
     onDecodeError: (

diff --git a/src/assets/screenshots/supported.png b/src/assets/screenshots/supported.png
diff --git a/src/assets/screenshots/unsupported.png b/src/assets/screenshots/unsupported.png
diff --git a/src/components/VErrorSection/VNoResults.vue b/src/components/VErrorSection/VNoResults.vue
@@ -8,7 +8,7 @@
     >
       {{ $t('no-results.alternatives') }}
     </h2>
-    <VMetaSourceList class="mt-4 md:mt-6" :type="type" :query="query" />
+    <VExternalSourceList class="mt-4 md:mt-6" :type="type" :query="query" />
   </div>
 </template>
 
@@ -18,11 +18,11 @@ import { defineComponent, PropType } from '@nuxtjs/composition-api'
 import type { MediaType } from '~/constants/media'
 import type { ApiQueryParams } from '~/utils/search-query-transform'
 
-import VMetaSourceList from '~/components/VMetaSearch/VMetaSourceList.vue'
+import VExternalSourceList from '~/components/VExternalSearch/VExternalSourceList.vue'
 
 export default defineComponent({
   name: 'VNoResults',
-  components: { VMetaSourceList },
+  components: { VExternalSourceList },
   props: {
     type: {
       type: String as PropType<MediaType>,

diff --git a/...omponents/VMetaSearch/VMetaSearchForm.vue → ...s/VExternalSearch/VExternalSearchForm.vue b/...omponents/VMetaSearch/VMetaSearchForm.vue → ...s/VExternalSearch/VExternalSearchForm.vue
@@ -2,38 +2,38 @@
   <section
     :key="type"
     ref="sectionRef"
-    class="meta-search flex flex-row place-items-center justify-center p-4"
-    data-testid="meta-search-form"
+    class="external-sources flex flex-row place-items-center justify-center p-4"
+    data-testid="external-sources-form"
     @keydown.tab.exact="handleTab"
   >
     <i18n
       v-if="!hasNoResults && isSupported"
-      path="meta-search.form.supported-title"
+      path="external-sources.form.supported-title"
       tag="p"
       class="text-base font-normal leading-[130%]"
     />
 
     <i18n
       v-else-if="!hasNoResults && !isSupported"
-      path="meta-search.form.unsupported-title"
+      path="external-sources.form.unsupported-title"
       tag="p"
       class="text-base font-normal leading-[130%]"
     >
       <template #openverse>Openverse</template>
-      <template #type>{{ $t(`meta-search.form.types.${type}`) }}</template>
+      <template #type>{{ $t(`external-sources.form.types.${type}`) }}</template>
     </i18n>
 
     <i18n
       v-else
-      path="meta-search.form.no-results-title"
+      path="external-sources.form.no-results-title"
       tag="p"
       class="text-base font-normal leading-[130%]"
     >
-      <template #type>{{ $t(`meta-search.form.types.${type}`) }}</template>
+      <template #type>{{ $t(`external-sources.form.types.${type}`) }}</template>
       <template #query>{{ query.q }}</template>
     </i18n>
 
-    <VMetaSourceList
+    <VExternalSourceList
       class="inline-flex ms-2 md:justify-center"
       :type="type"
       :query="query"
@@ -54,12 +54,12 @@ import type { ApiQueryParams } from '~/utils/search-query-transform'
 import { getFocusableElements } from '~/utils/focus-management'
 import { defineEvent } from '~/types/emits'
 
-import VMetaSourceList from './VMetaSourceList.vue'
+import VExternalSourceList from './VExternalSourceList.vue'
 
 export default defineComponent({
-  name: 'VMetaSearchForm',
+  name: 'VExternalSearchForm',
   components: {
-    VMetaSourceList,
+    VExternalSourceList,
   },
   props: {
     query: { type: Object as PropType<ApiQueryParams>, required: true },

diff --git a/...omponents/VMetaSearch/VMetaSourceList.vue → ...s/VExternalSearch/VExternalSourceList.vue b/...omponents/VMetaSearch/VMetaSourceList.vue → ...s/VExternalSearch/VExternalSourceList.vue
@@ -2,7 +2,7 @@
   <VPopover
     ref="sourceListPopover"
     class="flex items-stretch"
-    :label="$t('meta-search.button').toString()"
+    :label="$t('external-sources.button').toString()"
     placement="top-start"
   >
     <template #trigger="{ a11yProps }">
@@ -13,7 +13,7 @@
         variant="action-menu-bordered"
         size="disabled"
         class="caption-regular justify-between py-1 px-3 text-dark-charcoal pe-2"
-        >{{ $t('meta-search.button').toString() }}
+        >{{ $t('external-sources.button').toString() }}
         <VIcon
           class="text-dark-charcoal-40 ms-1"
           :class="a11yProps['aria-expanded'] ? 'rotate-180' : 'rotate-0'"
@@ -36,10 +36,10 @@
           @click="close"
         />
         <h2 class="description-bold mb-2 px-4 pt-5 text-start">
-          {{ $t('meta-search.title') }}
+          {{ $t('external-sources.title') }}
         </h2>
         <p class="caption-regular mb-4 px-4 text-start">
-          {{ $t('meta-search.caption', { openverse: 'Openverse' }) }}
+          {{ $t('external-sources.caption', { openverse: 'Openverse' }) }}
         </p>
         <VButton
           v-for="source in sources"
@@ -84,7 +84,7 @@ import closeSmallIcon from '~/assets/icons/close-small.svg'
  * when there are insufficient or zero search results.
  */
 export default defineComponent({
-  name: 'VMetaSourceList',
+  name: 'VExternalSourceList',
   components: { VButton, VIcon, VIconButton, VPopover },
   props: {
     /**

diff --git a/...taSearch/meta/VMetaSourceList.stories.mdx → ...arch/meta/VExternalSourceList.stories.mdx b/...taSearch/meta/VMetaSourceList.stories.mdx → ...arch/meta/VExternalSourceList.stories.mdx
@@ -6,23 +6,23 @@ import {
   Story,
 } from '@storybook/addon-docs'
 
-import VMetaSourceList from '~/components/VMetaSearch/VMetaSourceList.vue'
+import VExternalSourceList from '~/components/VExternalSearch/VExternalSourceList.vue'
 
-<Meta title="Components/VMetaSourceList" component={VMetaSourceList} />
+<Meta title="Components/VExternalSourceList" component={VExternalSourceList} />
 
 export const Template = (args) => ({
-  template: `<VMetaSourceList v-bind="args"/>`,
-  components: { VMetaSourceList },
+  template: `<VExternalSourceList v-bind="args"/>`,
+  components: { VExternalSourceList },
   setup() {
     return { args }
   },
 })
 
-# VMetaSourceList
+# VExternalSourceList
 
-<Description of={VMetaSourceList} />
+<Description of={VExternalSourceList} />
 
-<ArgsTable of={VMetaSourceList} />
+<ArgsTable of={VExternalSourceList} />
 
 ## Images
 

diff --git a/src/components/VSearchGrid.vue b/src/components/VSearchGrid.vue
@@ -18,7 +18,7 @@
 
     <slot name="media" />
 
-    <VMetaSearchForm
+    <VExternalSearchForm
       :type="metaSearchFormType"
       :has-no-results="hasNoResults"
       :query="query"
@@ -43,7 +43,7 @@ import { defineEvent } from '~/types/emits'
 import type { ApiQueryParams } from '~/utils/search-query-transform'
 import type { FetchState } from '~/models/fetch-state'
 
-import VMetaSearchForm from '~/components/VMetaSearch/VMetaSearchForm.vue'
+import VExternalSearchForm from '~/components/VExternalSearch/VExternalSearchForm.vue'
 import VErrorSection from '~/components/VErrorSection/VErrorSection.vue'
 import VErrorImage from '~/components/VErrorSection/VErrorImage.vue'
 import VNoResults from '~/components/VErrorSection/VNoResults.vue'
@@ -53,7 +53,7 @@ export default defineComponent({
   name: 'VSearchGrid',
   components: {
     VErrorSection,
-    VMetaSearchForm,
+    VExternalSearchForm,
     VErrorImage,
     VNoResults,
     VSearchResultsTitle,

diff --git a/src/composables/use-pages.ts b/src/composables/use-pages.ts
@@ -58,9 +58,9 @@ export default function usePages(isNew = false) {
           link: app.localePath('/search-help'),
         },
         {
-          id: 'meta-search',
-          name: 'header.meta-search-nav-item',
-          link: app.localePath('/meta-search'),
+          id: 'external-sources',
+          name: 'header.external-sources-nav-item',
+          link: app.localePath('/external-sources'),
         },
         {
           id: 'feedback',

diff --git a/src/locales/en.json b/src/locales/en.json
@@ -33,7 +33,7 @@
     "about-nav-item": "Our Story",
     "source-nav-item": "Sources",
     "search-guide-nav-item": "Search Guide",
-    "meta-search-nav-item": "Meta Search",
+    "external-sources-nav-item": "External Sources",
     "privacy-nav-item": "Privacy",
     "feedback-nav-item": "Feedback",
     "support-nav-item": "Support Us",
@@ -81,7 +81,7 @@
     },
     "planning": {
       "content": "Currently {openverse} only searches images, with search for audio and video provided through {meta}. But we plan to add additional media types such as open texts and audio, with the ultimate goal of providing access to all 1.4 billion CC licensed and public domain works on the web. All of our code is open source ({frontend}, {api}, {catalog}) and we {community}. You can see what {working}.",
-      "meta": "Meta Search",
+      "meta": "External Sources",
       "frontend": "{openverse} frontend",
       "api": "{openverse} API",
       "catalog": "{openverse} Catalog",
@@ -130,42 +130,28 @@
       "audio": "Audio Sources"
     }
   },
-  "meta-search-page": {
-    "title": "Meta Search",
+  "external-sources-page": {
+    "title": "External Sources",
     "intro": "{openverse} is built on top of a catalog that indexes CC-licensed and public domain content from selected sources. Learn more about our {link}.",
-    "link": "sources",
-    "license": "The internet is a big place! There are plenty of search portals and collections, hosting CC-licensed and public domain content, which we aren’t able to index or surface results from within the {openverse} interface. These are important sources of CC-licensed and public domain content, and we want to make sure that you are able to find the best openly licensed materials possible, regardless of where they are located.",
-    "content": "What content types can I search for using the Meta Search feature?",
-    "content-types": "Meta Search on {openverse} currently supports image, audio, and video search on external sites.",
-    "use": " Use ",
-    "images": {
-      "title": "How does the Meta Search feature work for indexed media types?",
-      "demo-label": "Layout of Meta Search for indexed media type, like images",
-      "content": "{openverse} supports built-in search for some media types, such as images. When you enter a query on the {openverse} homepage, a page of results will be displayed. Scrolling to the bottom of the page, you have two choices:",
-      "continue": "{load-more}, and continue browsing in {openverse}.",
-      "not-finding": "See the section “{not-finding}” below the results.",
-      "info": "The “{not-finding}” section lists other sources of CC-licensed and public domain content. Your search query will be preloaded, and if supported, you can select a {use} filter to proactively filter your results. Click on the button for the external source you’d like to search, and your results will open in a new tab."
-    },
-    "audio-video": {
-      "title": "How does the Meta Search feature work for non-indexed media types?",
-      "demo-label": "Layout of Meta Search for non-indexed media type, like video",
-      "content": "{openverse} does not yet support built-in search for some media types, such as videos. For these media types, click on the appropriate tab and you’ll see sources where you can find CC-licensed content.",
-      "filter": "The Filters bar on the left includes the {use} filter, which may be supported by some meta search sources. Apply these before clicking on the button for the external source you’d like to search."
-    },
+    "link": "sources here",
+    "license": "However, there are many sources of CC-licensed and public domain media which we aren’t able to surface results from within the {openverse} interface yet. This might be because they do not offer a public API, or that our contributors have not yet had time to integrate them into Openverse. These are valued sources and we want to make sure that you are able to find the best openly licensed materials possible, regardless of where they are located.",
     "new": {
-      "title": "Can I suggest new sources for Meta Search?",
+      "title": "Can I suggest new external sources?",
       "content": "Yes, please! Create an {issue} in our GitHub repository or send us an {email} and tell us about the new sources you’d like to see included.",
       "issue": "issue",
       "email": "email"
     },
     "why": {
       "title": "Why did you build this?",
-      "content": "For many years, CC has offered its users a dedicated search portal for searching platforms that have CC licensing filters built in. These platforms included Europeana, Google Images, Flickr, Jamendo, Open Clip Art Library, SpinXpress, Wikimedia Commons, YouTube, ccMixter, and SoundCloud. The search experience looked like this:",
-      "new": "For users of the legacy CC Meta Search site, the Meta Search feature on {openverse} will look familiar. The goal was to ensure that the functionality is not lost, but is updated and embedded within our new search engine for openly licensed content. In addition, the Meta Search feature builds on this functionality, allowing us to quickly add new sources to Meta Search as we discover them, and support new content types in the future, as we expand.",
+      "content": "For many years, Creative Commons has offered its users a dedicated search portal for searching platforms that have CC licensing filters built in. In fact, this is still maintained at {old}.",
+      "old": "oldsearch.creativecommons.org",
+      "new": "For users of the legacy CC Meta Search site, the \"External Sources\" feature on {openverse} will look familiar. The goal was to ensure that the functionality is not lost, but is updated and embedded within our new search engine for openly licensed content. In addition, the \"External Sources\" feature builds on this functionality, allowing us to quickly add new external sources as we discover them, and support new content types in the future, as we expand.",
       "aria-label": "feedback",
       "feedback-suggestions": "We hope you enjoy, and if you have suggestions for improvement, leave us {feedback}.",
       "feedback-link": "feedback"
-    }
+    },
+    "relationships": "This functionality also allows us to start conversations and build relationships with sources that may like to be included in {openverse} in the future. Finally, we can also offer external sources of media types we do not include in {openverse} yet, but plan to.",
+    "explanation": "You can find links to external sources at the bottom of every {openverse} search results page; on pages for searches which return no results; and on pages for media types we do not yet support but intend to."
   },
   "search-guide": {
     "title": "{openverse} Syntax Guide",
@@ -542,7 +528,7 @@
       "right": "→"
     }
   },
-  "meta-search": {
+  "external-sources": {
     "caption": "{openverse} can not guarantee the accuracy of license information. Always verify that the work is actually under a CC license.",
     "button": "Source list",
     "title": "External sources",

diff --git a/src/pages/about.vue b/src/pages/about.vue
@@ -17,7 +17,7 @@
     <i18n path="about.planning.content" tag="p">
       <template #openverse>Openverse</template>
       <template #meta>
-        <VLink href="/meta-search">{{ $t('about.planning.meta') }}</VLink>
+        <VLink href="/external-sources">{{ $t('about.planning.meta') }}</VLink>
       </template>
       <template #frontend>
         <VLink href="https://github.com/wordpress/openverse-frontend/">{{

diff --git a/src/pages/external-sources.vue b/src/pages/external-sources.vue
@@ -0,0 +1,89 @@
+<template>
+  <VContentPage>
+    <h1>
+      {{ $t('external-sources-page.title') }}
+    </h1>
+
+    <i18n path="external-sources-page.intro" tag="p">
+      <template #openverse>Openverse</template>
+      <template #link>
+        <VLink href="/sources">{{ $t('external-sources-page.link') }}</VLink>
+      </template>
+    </i18n>
+    <p>{{ $t('external-sources-page.license', { openverse: 'Openverse' }) }}</p>
+    <p>
+      {{ $t('external-sources-page.explanation', { openverse: 'Openverse' }) }}
+    </p>
+    <p>
+      {{
+        $t('external-sources-page.relationships', { openverse: 'Openverse' })
+      }}
+    </p>
+    <h2>
+      {{ $t('external-sources-page.new.title') }}
+    </h2>
+    <i18n path="external-sources-page.new.content" tag="p">
+      <template #issue>
+        <VLink
+          aria-label="issue"
+          href="https://github.com/WordPress/openverse-catalog/issues/new?assignees=&labels=%F0%9F%9A%A6+status%3A+awaiting+triage%2C%F0%9F%A7%B9+status%3A+ticket+work+required%2C%E2%98%81%EF%B8%8F+provider%3A+any&template=new_source_suggestion.yml&title=%3CSource+name+here%3E"
+          >{{ $t('external-sources-page.new.issue') }}</VLink
+        >
+      </template>
+      <template #email>
+        <VLink aria-label="email" href="mailto:openverse@wordpress.org">{{
+          $t('external-sources-page.new.email')
+        }}</VLink>
+      </template>
+    </i18n>
+    <h2>
+      {{ $t('external-sources-page.why.title') }}
+    </h2>
+    <i18n path="external-sources-page.why.content" tag="p">
+      <template #old>
+        <VLink
+          aria-label="email"
+          href="https://oldsearch.creativecommons.org"
+          >{{ $t('external-sources-page.why.old') }}</VLink
+        >
+      </template>
+    </i18n>
+
+    <p>
+      {{ $t('external-sources-page.why.new', { openverse: 'Openverse' }) }}
+    </p>
+    <i18n path="external-sources-page.why.feedback-suggestions" tag="p">
+      <template #feedback>
+        <VLink
+          :aria-label="$t('external-sources-page.why.aria-label')"
+          href="/feedback"
+          >{{ $t('external-sources-page.why.feedback-link') }}</VLink
+        >
+      </template>
+    </i18n>
+  </VContentPage>
+</template>
+
+<script>
+import { defineComponent } from '@nuxtjs/composition-api'
+
+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`,
+    }
+  },
+})
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+figure {
+  @apply mx-auto max-w-full border border-black md:w-[800px];
+}
+</style>