various www-frontend parity fixes (#598)

* removing BlockTwitterEmbed * fixing /home/ prefix in BaseButton links * making sure all links are using either BaseLink or BaseButton * fixing passing query params in NavSearchForm * fixing hydration error in SwimlaneCTA * fixing vue build error
nasa-jpl · Sep 5, 2024 · 563964d · 563964d
1 parent 6f74333
commit 563964d
Show file tree

Hide file tree

Showing 12 changed files with 44 additions and 110 deletions.
diff --git a/packages/vue/lib/main.ts b/packages/vue/lib/main.ts
@@ -76,7 +76,6 @@ import BlockStreamfield from './../src/components/BlockStreamfield/BlockStreamfi
 import BlockTable from './../src/components/BlockTable/BlockTable.vue'
 import BlockTeaser from './../src/components/BlockTeaser/BlockTeaser.vue'
 import BlockText from './../src/components/BlockText/BlockText.vue'
-import BlockTwitterEmbed from './../src/components/BlockTwitterEmbed/BlockTwitterEmbed.vue'
 import BlockVideo from './../src/components/BlockVideo/BlockVideo.vue'
 import BlockVideoEmbed from './../src/components/BlockVideoEmbed/BlockVideoEmbed.vue'
 import CalendarButton from './../src/components/CalendarButton/CalendarButton.vue'
@@ -280,7 +279,6 @@ export {
   BlockTable,
   BlockTeaser,
   BlockText,
-  BlockTwitterEmbed,
   BlockVideo,
   BlockVideoEmbed,
   CalendarButton,

diff --git a/packages/vue/src/components/BaseButton/BaseButton.vue b/packages/vue/src/components/BaseButton/BaseButton.vue
@@ -75,6 +75,14 @@ export default defineComponent({
       }
       return undefined
     },
+    computedTo() {
+      let toValue = this.to
+      // filter out unnecessary `/home/` prefix from wagtail default site urlPaths
+      if (toValue && typeof toValue === 'string' && toValue.startsWith('/home/')) {
+        toValue = toValue.replace('/home/', '/')
+      }
+      return toValue
+    },
     variantClass(): string {
       let classes = variants[this.variant]
       if (!this.$slots.default && this.$slots.icon) {
@@ -99,7 +107,7 @@ export default defineComponent({
     :aria-label="ariaLabel"
     :disabled="disabled"
     :href="theHref"
-    :to="to ? to : undefined"
+    :to="computedTo ? computedTo : undefined"
     @click="$emit('click')"
   >
     <span class="label block">

diff --git a/packages/vue/src/components/BlockRelatedLinks/BlockRelatedLinks.vue b/packages/vue/src/components/BlockRelatedLinks/BlockRelatedLinks.vue
@@ -8,12 +8,12 @@
     >
       {{ data.heading }}
     </BaseHeading>
-    <ul
-      v-for="(link, index) in data.links"
-      :key="index"
-      class="sm:w-3/4 md:w-2/3 lg:w-3/4 xl:w-2/3 mb-2 print:list-disc print:ml-4"
-    >
-      <li>
+    <ul class="sm:w-3/4 md:w-2/3 lg:w-3/4 xl:w-2/3 print:list-disc print:ml-4">
+      <li
+        v-for="(link, index) in data.links"
+        :key="index"
+        class="mb-2"
+      >
         <template v-if="link.externalLink">
           <RelatedLink
             variant="external"

diff --git a/packages/vue/src/components/BlockRelatedLinks/RelatedLink.vue b/packages/vue/src/components/BlockRelatedLinks/RelatedLink.vue
@@ -2,8 +2,10 @@
   <component
     :is="tag"
     :to="to"
+    variant="none"
     :href="href"
     class="bg-gray-light group text-body-lg flex items-center justify-between px-4 py-4 cursor-pointer print:px-0 print:py-0 print:block"
+    link-class="bg-gray-light group text-body-lg flex items-center justify-between  w-full print:block"
     :target="target"
     rel="noopener"
   >
@@ -19,6 +21,7 @@
 </template>
 <script lang="ts">
 import { defineComponent, resolveComponent } from 'vue'
+import BaseLink from './../BaseLink/BaseLink.vue'
 import IconArrow from './../Icons/IconArrow.vue'
 import IconDownload from './../Icons/IconDownload.vue'
 import IconExternal from './../Icons/IconExternal.vue'
@@ -36,6 +39,7 @@ export const variants: Variants = {
 export default defineComponent({
   name: 'BlockRelatedLinks',
   components: {
+    BaseLink,
     IconArrow,
     IconDownload,
     IconExternal
@@ -59,7 +63,7 @@ export default defineComponent({
   computed: {
     tag() {
       if (this.to) {
-        return resolveComponent('NuxtLink')
+        return resolveComponent('BaseLink')
       } else {
         return 'a'
       }

diff --git a/packages/vue/src/components/BlockStreamfield/BlockStreamfield.vue b/packages/vue/src/components/BlockStreamfield/BlockStreamfield.vue
@@ -150,13 +150,6 @@
         <BlockImageComparison :data="block" />
       </LayoutHelper>
 
-      <BlockTwitterEmbed
-        v-else-if="block.blockType == 'TwitterEmbedBlock'"
-        :key="`twitterEmbedBlock${index}`"
-        class="lg:mb-18 mb-10"
-        :data="block"
-      />
-
       <LayoutHelper
         v-else-if="block.blockType == 'IframeEmbedBlock'"
         :key="`iframeEmbedBlock${index}`"
@@ -271,7 +264,6 @@ import BlockRelatedLinks, {
 import BlockTable from './../BlockTable/BlockTable.vue'
 import BlockTeaser from './../BlockTeaser/BlockTeaser.vue'
 import BlockText from './../BlockText/BlockText.vue'
-import BlockTwitterEmbed from './../BlockTwitterEmbed/BlockTwitterEmbed.vue'
 import BlockIframeEmbed from './../BlockIframeEmbed/BlockIframeEmbed.vue'
 import BlockGist from './../BlockGist/BlockGist.vue'
 import BlockVideo from './../BlockVideo/BlockVideo.vue'
@@ -311,7 +303,6 @@ export default defineComponent({
     BlockTable,
     BlockTeaser,
     BlockText,
-    BlockTwitterEmbed,
     BlockIframeEmbed,
     BlockGist,
     BlockVideo,

diff --git a/packages/vue/src/components/BlockTwitterEmbed/BlockTwitterEmbed.stories.js b/packages/vue/src/components/BlockTwitterEmbed/BlockTwitterEmbed.stories.js
diff --git a/packages/vue/src/components/BlockTwitterEmbed/BlockTwitterEmbed.vue b/packages/vue/src/components/BlockTwitterEmbed/BlockTwitterEmbed.vue
diff --git a/packages/vue/src/components/HeroMedium/HeroMedium.vue b/packages/vue/src/components/HeroMedium/HeroMedium.vue
@@ -47,7 +47,8 @@
           'my-6 lg:mt-0 lg:mb-10': compact
         }"
       >
-        <nuxt-link
+        <BaseLink
+          variant="none"
           :to="feature.url"
           class="lg:w-1/2 xl:w-5/12 block"
         >
@@ -79,7 +80,7 @@
               <IconArrow class="inline" />
             </span>
           </p>
-        </nuxt-link>
+        </BaseLink>
         <BaseLink
           :to="feature.url"
           class="lg:block hidden"

diff --git a/packages/vue/src/components/HomepageCarouselItem/HomepageCarouselItem.vue b/packages/vue/src/components/HomepageCarouselItem/HomepageCarouselItem.vue
@@ -66,7 +66,7 @@
             <span class="sr-only">.</span>
           </p>
           <component
-            :is="item.externalLink || (item.page && item.page.url) ? 'BaseLink' : 'div'"
+            :is="tag"
             variant="none"
             link-class="block"
             :href="item.externalLink ? item.externalLink : null"
@@ -98,7 +98,7 @@
   </div>
 </template>
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { defineComponent, resolveComponent } from 'vue'
 import type { PropType } from 'vue'
 import type { ImageObject } from '../../interfaces'
 import BaseLink from './../BaseLink/BaseLink.vue'
@@ -128,7 +128,16 @@ export default defineComponent({
   props: {
     item: {
       type: Object as PropType<Slide>,
-      required: false
+      default: undefined
+    }
+  },
+  computed: {
+    tag() {
+      if (this.item?.externalLink || (this.item?.page && this.item?.page.url)) {
+        return resolveComponent('BaseLink')
+      } else {
+        return 'div'
+      }
     }
   }
 })

diff --git a/packages/vue/src/components/NavSearchForm/NavSearchForm.vue b/packages/vue/src/components/NavSearchForm/NavSearchForm.vue
@@ -20,7 +20,7 @@ const clearSearch = () => {
 }
 const submitSearch = () => {
   emit('submitForm')
-  router.push({ path: '/search', query: searchQuery.value })
+  router.push({ path: '/search', query: { query: searchQuery.value } })
 }
 </script>
 <template>

diff --git a/packages/vue/src/components/SwimlaneCTA/SwimlaneCTA.vue b/packages/vue/src/components/SwimlaneCTA/SwimlaneCTA.vue
@@ -10,9 +10,9 @@
       link-class="max-w-screen-3xl block w-full mx-auto"
     >
       <div
+        v-bind-once="{ style: 'background-image: url(' + randomizeImage + ');' }"
         role="presentation"
         :class="'SwimlaneCTA lg:block hidden' + computedClass"
-        :style="'background-image: url(' + randomizeImage + ');'"
       >
         <div class="absolute inset-0 z-10 bg-black bg-opacity-25"></div>
         <div
@@ -61,9 +61,9 @@
         </div>
       </div>
       <div
+        v-bind-once="{ style: 'background-image: url(' + randomizeImageSmall + ');' }"
         role="presentation"
         :class="'SwimlaneCTA lg:hidden block' + computedClass"
-        :style="'background-image: url(' + randomizeImageSmall + ');'"
       >
         <div
           class="lg:flex-row lg:pr-12 lg:py-5 flex flex-col justify-center w-full px-5 py-6 bg-black bg-opacity-25"

diff --git a/...ages/vue/src/components/TopicDetailMissionCarouselItem/TopicDetailMissionCarouselItem.vue b/...ages/vue/src/components/TopicDetailMissionCarouselItem/TopicDetailMissionCarouselItem.vue
@@ -1,6 +1,7 @@
 <template>
-  <nuxt-link
+  <BaseLink
     v-if="data"
+    variant="none"
     :to="data.url"
     class="TopicDetailMissionCarouselItem ThemeVariantLight group block cursor-pointer"
   >
@@ -59,7 +60,7 @@
         />
       </div>
     </div>
-  </nuxt-link>
+  </BaseLink>
 </template>
 
 <script lang="ts">
@@ -69,6 +70,7 @@ import type { ClockType } from '../MissionDetailStats/MissionDetailStats.vue'
 import type { PropType } from 'vue'
 import type { ImageObject } from '../../interfaces'
 import MissionDetailStatsMicro from './../MissionDetailStats/MissionDetailStatsMicro.vue'
+import BaseLink from './../BaseLink/BaseLink.vue'
 import BaseImage from './../BaseImage/BaseImage.vue'
 import BaseImagePlaceholder from './../BaseImagePlaceholder/BaseImagePlaceholder.vue'
 
@@ -87,7 +89,8 @@ export default defineComponent({
   components: {
     MissionDetailStatsMicro,
     BaseImage,
-    BaseImagePlaceholder
+    BaseImagePlaceholder,
+    BaseLink
   },
   props: {
     data: {