Move new homepage and 404 to the default layout (#2075)

* Move the home and 404 pages to default layout

* Update snapshots

* Fix layout background not re-rendering on changing page

* Fix homepage search type selection

Author: obulat

src/components/VContentSwitcher/VSearchTypePopover.vue

@@ -17,14 +17,16 @@
       class="w-[260px] pt-2"
       size="small"
       :use-links="placement === 'header'"
-      @select="closePopover"
+      @select="handleSelect"
     />
   </VPopover>
 </template>
 
 <script lang="ts">
 import { defineComponent, PropType, ref } from "@nuxtjs/composition-api"
 
+import type { SearchType } from "~/constants/media"
+
 import VPopover from "~/components/VPopover/VPopover.vue"
 import VSearchTypeButton from "~/components/VContentSwitcher/VSearchTypeButton.vue"
 import VSearchTypes from "~/components/VContentSwitcher/VSearchTypes.vue"
@@ -44,16 +46,17 @@ export default defineComponent({
       default: "header",
     },
   },
-  setup() {
+  setup(_, { emit }) {
     const contentMenuPopover = ref<InstanceType<typeof VPopover> | null>(null)
 
-    const closePopover = () => {
+    const handleSelect = (searchType: SearchType) => {
+      emit("select", searchType)
       contentMenuPopover.value?.close()
     }
 
     return {
       checkIcon,
-      closePopover,
+      handleSelect,
       contentMenuPopover,
     }
   },

src/components/VFourOhFour.vue

@@ -1,6 +1,9 @@
 <template>
   <div
-    class="error relative flex min-h-screen flex-col overflow-x-hidden bg-yellow"
+    class="error relative flex flex-col overflow-x-hidden"
+    :class="
+      isNewHeaderEnabled ? 'flex-grow px-6 sm:px-0' : 'min-h-screen bg-yellow'
+    "
   >
     <svg
       class="z-0 pointer-events-none absolute top-20 -mt-[10%] -ml-[20%] w-[140%] fill-dark-charcoal px-6 opacity-5 lg:mx-auto lg:ml-0 lg:w-full lg:px-16"
@@ -11,7 +14,7 @@
     >
       <use :href="`${Oops}#oops`" />
     </svg>
-    <div>
+    <div v-if="!isNewHeaderEnabled">
       <VLink href="/" class="relative z-10 text-dark-charcoal">
         <VBrand class="m-6 text-[18px] lg:mx-10 lg:my-8" />
       </VLink>
@@ -37,11 +40,14 @@
             </template>
           </i18n>
         </p>
-        <VStandaloneSearchBar route="404" @submit="handleSearch" />
+        <VStandaloneSearchBar
+          v-if="isNewHeaderEnabled"
+          route="404"
+          @submit="handleSearch"
+        />
+        <VStandaloneSearchBarOld v-else route="404" @submit="handleSearch" />
       </div>
     </main>
-
-    <VFooter v-if="isNewHeaderEnabled" mode="internal" />
   </div>
 </template>
 
@@ -53,20 +59,21 @@ import { useFeatureFlagStore } from "~/stores/feature-flag"
 
 import { ALL_MEDIA } from "~/constants/media"
 
-import VStandaloneSearchBar from "~/components/VHeader/VSearchBar/VStandaloneSearchBar.vue"
+import VStandaloneSearchBarOld from "~/components/VHeaderOld/VSearchBar/VStandaloneSearchBarOld.vue"
 import VLink from "~/components/VLink.vue"
 import VBrand from "~/components/VBrand/VBrand.vue"
-import VFooter from "~/components/VFooter/VFooter.vue"
 
 import Oops from "~/assets/oops.svg"
 
 export default defineComponent({
   name: "VFourOhFour",
   components: {
     VLink,
-    VStandaloneSearchBar,
+    VStandaloneSearchBarOld,
+    VStandaloneSearchBar: () =>
+      import("~/components/VHeader/VSearchBar/VStandaloneSearchBar.vue"),
+
     VBrand,
-    VFooter,
   },
   props: ["error"],
   setup() {

src/components/VHeader/VSearchBar/VStandaloneSearchBar.vue

@@ -1,6 +1,6 @@
 <template>
   <form
-    class="search-bar group flex h-[57px] flex-row items-center rounded-sm border-tx bg-white md:h-[69px]"
+    class="search-bar group flex h-14 flex-row items-center rounded-sm border-tx bg-white sm:h-16"
     @submit.prevent="handleSearch"
   >
     <div
@@ -29,7 +29,19 @@
       <!-- @slot Extra information goes here -->
       <slot />
     </div>
-    <VSearchButton type="submit" size="standalone" :route="route" />
+    <VButton
+      type="submit"
+      :aria-label="$t('search.search')"
+      size="disabled"
+      :variant="isHomeRoute ? 'primary' : 'plain'"
+      class="h-full w-14 flex-shrink-0 transition-none rounded-s-none sm:w-16"
+      :class="{
+        'search-button border-black p-0.5px ps-1.5px hover:bg-pink hover:text-white focus:border-tx focus-visible:bg-pink focus-visible:text-white group-focus-within:border-pink group-focus-within:border-tx group-focus-within:bg-pink group-focus-within:text-white group-focus-within:hover:bg-dark-pink group-hover:border-pink group-hover:border-tx group-hover:bg-pink group-hover:text-white group-focus:border-tx':
+          !isHomeRoute,
+      }"
+    >
+      <VIcon :icon-path="searchIcon" />
+    </VButton>
   </form>
 </template>
 
@@ -43,7 +55,10 @@ import {
 
 import { defineEvent } from "~/types/emits"
 
-import VSearchButton from "~/components/VHeader/VSearchBar/VSearchButton.vue"
+import VButton from "~/components/VButton.vue"
+import VIcon from "~/components/VIcon/VIcon.vue"
+
+import searchIcon from "~/assets/icons/search.svg"
 
 /**
  * Displays a search input for a search query and is attached to an action button
@@ -54,7 +69,7 @@ import VSearchButton from "~/components/VHeader/VSearchBar/VSearchButton.vue"
  */
 export default defineComponent({
   name: "VStandaloneSearchBar",
-  components: { VSearchButton },
+  components: { VButton, VIcon },
   props: {
     route: {
       type: String as PropType<"home" | "404">,
@@ -81,6 +96,8 @@ export default defineComponent({
       inputRef,
       handleSearch,
       isHomeRoute,
+
+      searchIcon,
     }
   },
 })
@@ -89,4 +106,8 @@ export default defineComponent({
 .input-field {
   border-inline-end-width: 0;
 }
+
+.search-button {
+  border-inline-start-width: 0;
+}
 </style>

src/components/VHeaderOld/VSearchBar/VStandaloneSearchBarOld.vue

@@ -0,0 +1,97 @@
+<template>
+  <form
+    class="search-bar group flex h-[57px] flex-row items-center rounded-sm border-tx bg-white md:h-[69px]"
+    @submit.prevent="handleSearch"
+  >
+    <div
+      class="input-field search-field group flex h-full flex-grow items-center overflow-hidden rounded-sm border p-0.5px pe-1.5px rounded-e-none border-e-0 focus-within:border-1.5 focus-within:border-pink focus-within:bg-dark-charcoal-06 focus-within:p-0 focus-within:pe-1.5px group-hover:bg-dark-charcoal-06"
+      :class="[isHomeRoute ? 'border-tx' : 'border-black']"
+    >
+      <input
+        id="search-bar"
+        ref="inputRef"
+        type="search"
+        name="q"
+        :placeholder="
+          $t(
+            isHomeRoute ? 'hero.search.placeholder' : '404.search-placeholder'
+          ).toString()
+        "
+        class="h-full w-full appearance-none rounded-none bg-tx text-base leading-none text-dark-charcoal placeholder-dark-charcoal-70 ms-4 focus:outline-none md:text-2xl"
+        :aria-label="
+          isHomeRoute
+            ? $t('search.search-bar-label', {
+                openverse: 'Openverse',
+              }).toString()
+            : $t('404.search-placeholder').toString()
+        "
+      />
+      <!-- @slot Extra information goes here -->
+      <slot />
+    </div>
+    <VSearchButton
+      class="flex-shrink-0"
+      type="submit"
+      size="standalone"
+      :route="route"
+    />
+  </form>
+</template>
+
+<script lang="ts">
+import {
+  computed,
+  defineComponent,
+  PropType,
+  ref,
+} from "@nuxtjs/composition-api"
+
+import { defineEvent } from "~/types/emits"
+
+import VSearchButton from "~/components/VHeader/VSearchBar/VSearchButton.vue"
+
+/**
+ * Displays a search input for a search query and is attached to an action button
+ * that fires a search request. Can contain other elements like the search type
+ * popover. Is uncontrolled: Vue code does not try to set a default value when
+ * hydrating the server-rendered code, so the value entered before full hydration
+ * is not removed.
+ */
+export default defineComponent({
+  name: "VStandaloneSearchBarOld",
+  components: { VSearchButton },
+  props: {
+    route: {
+      type: String as PropType<"home" | "404">,
+      default: "home",
+    },
+  },
+  emits: {
+    submit: defineEvent<[string]>(),
+  },
+  setup(props, { emit }) {
+    const inputRef = ref<HTMLInputElement | null>(null)
+
+    // Only emit `submit` if the input value is not blank
+    const handleSearch = () => {
+      const searchTerm = inputRef.value?.value.trim()
+      if (searchTerm) {
+        emit("submit", searchTerm)
+      }
+    }
+
+    const isHomeRoute = computed(() => props.route === "home")
+
+    return {
+      inputRef,
+      handleSearch,
+      isHomeRoute,
+    }
+  },
+})
+</script>
+<style scoped>
+.input-field {
+  border-inline-end-width: 0;
+}
+</style>

src/components/VHomeGallery/VHomeGallery.vue

@@ -57,6 +57,8 @@ import {
 import { useReducedMotion } from "~/composables/use-media-query"
 import useResizeObserver from "~/composables/use-resize-observer"
 
+import VLink from "~/components/VLink.vue"
+
 import imageInfo from "~/assets/homepage_images/image_info.json"
 
 export const GALLERY_SETS = [
@@ -74,6 +76,7 @@ export type GallerySet = typeof GALLERY_SETS[number]
  */
 export default defineComponent({
   name: "VHomeGallery",
+  components: { VLink },
   props: {
     /**
      * the set of images to use for the gallery grid

src/components/VHomepageContent.vue

@@ -0,0 +1,66 @@
+<template>
+  <div>
+    <h2
+      class="mt-auto mb-2 text-[40px] font-light leading-tight lg:text-[63px]"
+    >
+      {{ $t("hero.subtitle") }}
+    </h2>
+
+    <p class="text-base leading-relaxed">
+      {{ $t("hero.description") }}
+    </p>
+
+    <VStandaloneSearchBar class="mt-4 md:mt-6" @submit="handleSearch">
+      <VSearchTypePopover
+        class="mx-3 group-focus-within:bg-white group-hover:bg-white"
+        :active-item="searchType"
+        placement="searchbar"
+        @select="setSearchType"
+      />
+    </VStandaloneSearchBar>
+
+    <!-- Disclaimer for large screens -->
+    <i18n path="hero.disclaimer.content" tag="p" class="mt-4 text-sr">
+      <template #openverse>Openverse</template>
+      <template #license>
+        <VLink
+          href="https://creativecommons.org/licenses/"
+          class="text-dark-charcoal underline hover:text-dark-charcoal"
+          >{{ $t("hero.disclaimer.license") }}</VLink
+        >
+      </template>
+    </i18n>
+  </div>
+</template>
+<script lang="ts">
+import type { SearchType } from "~/constants/media"
+
+import VLink from "~/components/VLink.vue"
+import VStandaloneSearchBar from "~/components/VHeader/VSearchBar/VStandaloneSearchBar.vue"
+import VSearchTypePopover from "~/components/VContentSwitcher/VSearchTypePopover.vue"
+
+import type { PropType } from "@nuxtjs/composition-api"
+
+export default {
+  name: "VHomepageContent",
+  components: { VSearchTypePopover, VStandaloneSearchBar, VLink },
+  props: {
+    handleSearch: {
+      type: Function as PropType<(query: string) => void>,
+      required: true,
+    },
+    searchType: {
+      type: String as PropType<SearchType>,
+      required: true,
+    },
+    setSearchType: {
+      type: Function as PropType<(searchType: SearchType) => void>,
+      required: true,
+    },
+  },
+}
+</script>
+<style>
+@screen lg {
+}
+</style>