From eaa96578affa5dac9ff5ed4b7a67cf528e70c4c1 Mon Sep 17 00:00:00 2001
From: Stephanie Smith <stephiescastle@users.noreply.github.com>
Date: Mon, 29 Jul 2024 16:46:02 -0700
Subject: [PATCH] fix: news detail page (#520)

* fixing BlockImageCarousel bug, adding fallback image source for fancybox

* fixing inline hero image on edu news detail pages

* fixing alignment of BlockInlineImage

* fixing publication date on edu news template

* modifying DetailHeadline component to handle single and multiple authors

* fixing some bugs when there is no author data

* fixing accessibility issue -- temp workaround

* bumping explorer-1/vue version
---
 packages/vue/package.json                     |  2 +-
 .../BlockImage/BlockImageFullBleed.vue        |  2 +-
 .../BlockImage/BlockImageStandard.vue         |  2 +-
 .../BlockImageCarousel.stories.js             |  2 +-
 .../BlockImageCarousel/BlockImageCarousel.vue |  2 +-
 .../BlockImageCarouselItem.vue                |  2 +-
 .../BlockImageGallery/BlockImageGallery.vue   |  2 +-
 .../BlockInlineImage/BlockInlineImage.vue     | 80 ++++++++++---------
 .../BlockStreamfield/BlockStreamfield.vue     |  1 -
 .../DetailHeadline/DetailHeadline.stories.js  | 20 +++++
 .../DetailHeadline/DetailHeadline.vue         | 57 ++++++++++---
 .../PageImageDetail.stories.js                |  6 +-
 .../PageImageDetail/PageImageDetail.vue       |  2 +-
 .../PageEduNewsDetail.stories.js              | 10 ++-
 .../PageEduNewsDetail/PageEduNewsDetail.vue   | 29 ++++---
 .../PageInfographicDetail.vue                 |  2 +-
 16 files changed, 145 insertions(+), 76 deletions(-)

diff --git a/packages/vue/package.json b/packages/vue/package.json
index 8e56a964..468f0a64 100644
--- a/packages/vue/package.json
+++ b/packages/vue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@explorer-1/vue",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "private": false,
   "publishConfig": {
     "access": "public"
diff --git a/packages/vue/src/components/BlockImage/BlockImageFullBleed.vue b/packages/vue/src/components/BlockImage/BlockImageFullBleed.vue
index d2a66e20..2f2bd92e 100644
--- a/packages/vue/src/components/BlockImage/BlockImageFullBleed.vue
+++ b/packages/vue/src/components/BlockImage/BlockImageFullBleed.vue
@@ -84,7 +84,7 @@ export default defineComponent({
       <div class="max-w-screen-3xl mx-auto">
         <MixinFancybox
           v-if="theData.src"
-          :src="theData.original"
+          :src="theData.original || theData.src?.url"
           :caption="theData.caption"
           :credit="theData.credit"
           :detail-url="theData.detailUrl"
diff --git a/packages/vue/src/components/BlockImage/BlockImageStandard.vue b/packages/vue/src/components/BlockImage/BlockImageStandard.vue
index 616ecba8..67e5eb54 100644
--- a/packages/vue/src/components/BlockImage/BlockImageStandard.vue
+++ b/packages/vue/src/components/BlockImage/BlockImageStandard.vue
@@ -74,7 +74,7 @@ export default defineComponent({
   <div v-if="theData">
     <MixinFancybox
       v-if="theData.src"
-      :src="theData.original"
+      :src="theData.original || theData.src?.url"
       :caption="theData.caption"
       :credit="theData.credit"
       :detail-url="theData.detailUrl"
diff --git a/packages/vue/src/components/BlockImageCarousel/BlockImageCarousel.stories.js b/packages/vue/src/components/BlockImageCarousel/BlockImageCarousel.stories.js
index 9eb0507d..a8522ac8 100644
--- a/packages/vue/src/components/BlockImageCarousel/BlockImageCarousel.stories.js
+++ b/packages/vue/src/components/BlockImageCarousel/BlockImageCarousel.stories.js
@@ -99,7 +99,7 @@ export const BlockImageCarouselData = [
 
 // stories
 export const BaseStory = {
-  name: 'BlockImageCarousel',
+  name: 'CarouselBlock',
   args: {
     blockId: 'ev106po56n',
     showTitle: false,
diff --git a/packages/vue/src/components/BlockImageCarousel/BlockImageCarousel.vue b/packages/vue/src/components/BlockImageCarousel/BlockImageCarousel.vue
index d207626f..4d2c0efc 100644
--- a/packages/vue/src/components/BlockImageCarousel/BlockImageCarousel.vue
+++ b/packages/vue/src/components/BlockImageCarousel/BlockImageCarousel.vue
@@ -170,7 +170,7 @@ export default defineComponent({
       return false
     },
     itemsMobileNav(): Partial<ImageObject>[] | undefined {
-      const navArray = this.items
+      const navArray = this.items ? this.items.map((item) => item) : undefined
       if (navArray && this.hasCover) {
         navArray.push({ cover: 'hasCover' })
         return navArray
diff --git a/packages/vue/src/components/BlockImageCarouselItem/BlockImageCarouselItem.vue b/packages/vue/src/components/BlockImageCarouselItem/BlockImageCarouselItem.vue
index 004309b1..de149115 100644
--- a/packages/vue/src/components/BlockImageCarouselItem/BlockImageCarouselItem.vue
+++ b/packages/vue/src/components/BlockImageCarouselItem/BlockImageCarouselItem.vue
@@ -1,7 +1,7 @@
 <template>
   <div v-if="theImageData">
     <MixinFancybox
-      :src="theImageData.original"
+      :src="theImageData.original || theImageData.src?.url"
       :caption="theImageData.caption"
       :credit="theImageData.credit"
       :detail-url="theImageData.detailUrl"
diff --git a/packages/vue/src/components/BlockImageGallery/BlockImageGallery.vue b/packages/vue/src/components/BlockImageGallery/BlockImageGallery.vue
index a16ee920..f15aea43 100644
--- a/packages/vue/src/components/BlockImageGallery/BlockImageGallery.vue
+++ b/packages/vue/src/components/BlockImageGallery/BlockImageGallery.vue
@@ -10,7 +10,7 @@
     <template #firstSlide>
       <MixinFancybox
         v-if="cover"
-        :src="cover.original"
+        :src="cover.original || cover.src?.url"
         :caption="description"
         :credit="cover.credit"
         :detail-url="cover.detailUrl"
diff --git a/packages/vue/src/components/BlockInlineImage/BlockInlineImage.vue b/packages/vue/src/components/BlockInlineImage/BlockInlineImage.vue
index 70ed5cfb..1842ec16 100644
--- a/packages/vue/src/components/BlockInlineImage/BlockInlineImage.vue
+++ b/packages/vue/src/components/BlockInlineImage/BlockInlineImage.vue
@@ -1,49 +1,51 @@
 <template>
   <div
     v-if="data"
-    class="BlockInlineImage lg:BaseGrid container mx-auto"
+    class="BlockInlineImage container mx-auto"
   >
-    <!-- the image -->
-    <div
-      v-if="theImageData"
-      class="lg:mb-0 lg:w-full sm:w-xl lg:mt-0 lg:pr-4 2xl:pr-0 col-span-5 mx-auto mt-8 mb-8"
-      :class="data.alignTo === 'right' ? 'col-start-8 lg:order-2' : 'col-start-1 lg:order-1'"
-    >
-      <!-- should accommodate any size/shape image without cropping -->
-      <MixinFancybox
+    <div class="lg:BaseGrid lg:px-0 px-4">
+      <!-- the image -->
+      <div
         v-if="theImageData"
-        :src="theImageData.original"
-        :caption="theImageData.caption"
-        :credit="theImageData.credit"
-        :detail-url="theImageData.detailUrl"
+        class="lg:mb-0 lg:w-full sm:w-xl lg:mt-0 lg:pr-4 2xl:pr-0 col-span-5 mx-auto mt-8 mb-8"
+        :class="data.alignTo === 'right' ? 'col-start-8 lg:order-2' : 'col-start-1 lg:order-1'"
       >
-        <BaseImagePlaceholder aspect-ratio="none">
-          <BaseImage
-            v-if="theImageData && theImageData.src"
-            :src="theImageData.src.url"
-            :srcset="theSrcSet"
-            :width="theImageData.src.width"
-            :height="theImageData.src.height"
-            image-class="w-full h-auto"
-            :alt="theImageData.alt"
-            loading="lazy"
-          />
-        </BaseImagePlaceholder>
-      </MixinFancybox>
-      <BaseImageCaption
-        v-if="hasCaptionArea"
-        class="lg:mt-3 mt-2"
-        :data="theImageData"
-      />
-    </div>
+        <!-- should accommodate any size/shape image without cropping -->
+        <MixinFancybox
+          v-if="theImageData"
+          :src="theImageData.original || theImageData.src?.url"
+          :caption="theImageData.caption"
+          :credit="theImageData.credit"
+          :detail-url="theImageData.detailUrl"
+        >
+          <BaseImagePlaceholder aspect-ratio="none">
+            <BaseImage
+              v-if="theImageData && theImageData.src"
+              :src="theImageData.src.url"
+              :srcset="theSrcSet"
+              :width="theImageData.src.width"
+              :height="theImageData.src.height"
+              image-class="w-full h-auto"
+              :alt="theImageData.alt"
+              loading="lazy"
+            />
+          </BaseImagePlaceholder>
+        </MixinFancybox>
+        <BaseImageCaption
+          v-if="hasCaptionArea"
+          class="lg:mt-3 mt-2"
+          :data="theImageData"
+        />
+      </div>
 
-    <!-- the text -->
-    <div
-      v-if="data.text"
-      class="flex col-span-5"
-      :class="data.alignTo === 'right' ? 'col-start-3 lg:order-1' : 'col-start-6 lg:order-2'"
-    >
-      <BlockText :text="data.text" />
+      <!-- the text -->
+      <div
+        v-if="data.text"
+        class="flex col-span-5"
+        :class="data.alignTo === 'right' ? 'col-start-3 lg:order-1' : 'col-start-6 lg:order-2'"
+      >
+        <BlockText :text="data.text" />
+      </div>
     </div>
   </div>
 </template>
diff --git a/packages/vue/src/components/BlockStreamfield/BlockStreamfield.vue b/packages/vue/src/components/BlockStreamfield/BlockStreamfield.vue
index 53d390b5..f9b8fe10 100644
--- a/packages/vue/src/components/BlockStreamfield/BlockStreamfield.vue
+++ b/packages/vue/src/components/BlockStreamfield/BlockStreamfield.vue
@@ -28,7 +28,6 @@
       <BlockInlineImage
         v-else-if="block.blockType == 'InlineImageBlock'"
         :key="`inlineImageBlock${index}`"
-        class="lg:px-0 px-4"
         :class="seamlessText(index) ? 'lg:mb-8 mb-5' : 'lg:mb-18 mb-10'"
         :data="block"
       />
diff --git a/packages/vue/src/components/DetailHeadline/DetailHeadline.stories.js b/packages/vue/src/components/DetailHeadline/DetailHeadline.stories.js
index 45a27ac1..8e15a8e9 100644
--- a/packages/vue/src/components/DetailHeadline/DetailHeadline.stories.js
+++ b/packages/vue/src/components/DetailHeadline/DetailHeadline.stories.js
@@ -30,6 +30,26 @@ export const BaseStory = {
   args: DetailHeadlineData
 }
 
+export const MultipleAuthors = {
+  args: {
+    ...DetailHeadlineData,
+    author: [
+      {
+        author: {
+          name: 'Author Name',
+          organization: 'Organization'
+        }
+      },
+      {
+        author: {
+          name: 'Another Author',
+          organization: 'Organization'
+        }
+      }
+    ]
+  }
+}
+
 export const NoAuthor = {
   args: {
     title: "NASA's Ingenuity Mars Helicopter Recharges Its Batteries in Flight",
diff --git a/packages/vue/src/components/DetailHeadline/DetailHeadline.vue b/packages/vue/src/components/DetailHeadline/DetailHeadline.vue
index f1e2f122..767c8ce6 100644
--- a/packages/vue/src/components/DetailHeadline/DetailHeadline.vue
+++ b/packages/vue/src/components/DetailHeadline/DetailHeadline.vue
@@ -46,18 +46,30 @@
       >{{ title }}
     </BaseHeading>
     <div
-      v-if="author || publicationDate"
+      v-if="authors?.length || publicationDate"
       class="lg:text-base text-gray-mid-dark divide-gray-mid-dark px-3 mt-5 -ml-3 text-sm leading-normal"
     >
       <span
-        v-if="author"
+        v-if="authors?.length"
         :itemprop="schema ? 'author' : undefined"
         itemscope
         itemtype="https://schema.org/Person"
         class="pr-3 border-r mr-2"
       >
         Written by
-        <span :itemprop="schema ? 'name' : undefined">{{ author.name }}</span>
+        <template
+          v-for="(a, index) of authors"
+          :key="index"
+        >
+          <span
+            class="inline-block"
+            :itemprop="schema ? 'name' : undefined"
+            >{{ a.name }}</span
+          >
+          <template v-if="index !== authors.length - 1"
+            ><span class="inline-block pr-1">,</span></template
+          >
+        </template>
       </span>
       <span
         v-else
@@ -87,7 +99,7 @@
 import { defineComponent, type PropType } from 'vue'
 import { mapStores } from 'pinia'
 import { useThemeStore } from '../../store/theme'
-import type { Topic } from './../../interfaces'
+import type { Topic, AuthorObject } from './../../interfaces'
 import BaseLink from './../BaseLink/BaseLink.vue'
 import BaseHeading from './../BaseHeading/BaseHeading.vue'
 
@@ -100,32 +112,39 @@ export default defineComponent({
   props: {
     title: {
       type: String,
-      required: false
+      required: false,
+      default: undefined
     },
     author: {
-      type: Object,
-      required: false
+      type: Object as PropType<AuthorObject | AuthorObject[]>,
+      required: false,
+      default: undefined
     },
     publicationDate: {
       type: String,
-      required: false
+      required: false,
+      default: undefined
     },
     publicationTime: {
       type: String,
-      required: false
+      required: false,
+      default: undefined
     },
     topics: {
       type: Array as PropType<Topic[]>,
-      required: false
+      required: false,
+      default: undefined
     },
     // if topics array isn't available
     label: {
       type: String,
-      required: false
+      required: false,
+      default: undefined
     },
     labelLink: {
       type: String,
-      required: false
+      required: false,
+      default: undefined
     },
     schema: {
       type: Boolean,
@@ -138,6 +157,20 @@ export default defineComponent({
       const currentTime = this.publicationTime || '00:00:00'
       const returnDate = new Date(this.publicationDate + ' ' + currentTime)
       return returnDate.toISOString()
+    },
+    authors(): { name: string; organization: string }[] | undefined {
+      let authors: AuthorObject[] | undefined = undefined
+      if (this.author && this.author.constructor === Array) {
+        authors = []
+        // @ts-expect-error we know it's an array at this point
+        this.author.forEach((author: { author: AuthorObject }) => {
+          // @ts-expect-error authors array is defined above
+          authors.push(author.author)
+        })
+      } else if (this.author) {
+        authors = [this.author] as AuthorObject[]
+      }
+      return authors
     }
   }
 })
diff --git a/packages/vue/src/templates/PageImageDetail/PageImageDetail.stories.js b/packages/vue/src/templates/PageImageDetail/PageImageDetail.stories.js
index e870de4f..a841990d 100644
--- a/packages/vue/src/templates/PageImageDetail/PageImageDetail.stories.js
+++ b/packages/vue/src/templates/PageImageDetail/PageImageDetail.stories.js
@@ -58,7 +58,11 @@ export const ImageDetailPageData = {
       }
     ],
     keepExploringInstrument: BlockLinkTileCarouselData,
-    keepExploringMission: BlockLinkTileCarouselData,
+    keepExploringMission: [
+      BlockLinkTileCarouselData[0],
+      BlockLinkTileCarouselData[1],
+      BlockLinkTileCarouselData[2]
+    ],
     keepExploringTarget: BlockLinkTileCarouselData,
     label: 'Image',
     piaNumber: 'PIA23356',
diff --git a/packages/vue/src/templates/PageImageDetail/PageImageDetail.vue b/packages/vue/src/templates/PageImageDetail/PageImageDetail.vue
index 092089bc..2fe121b3 100755
--- a/packages/vue/src/templates/PageImageDetail/PageImageDetail.vue
+++ b/packages/vue/src/templates/PageImageDetail/PageImageDetail.vue
@@ -40,7 +40,7 @@
       />
       <MixinFancybox
         v-if="data.image"
-        :src="data.image.original"
+        :src="data.image.original || data.image.src?.url"
         :caption="data.image.caption"
         :credit="data.image.credit"
         :title="data.title"
diff --git a/packages/vue/src/templates/edu/PageEduNewsDetail/PageEduNewsDetail.stories.js b/packages/vue/src/templates/edu/PageEduNewsDetail/PageEduNewsDetail.stories.js
index aee3fe3b..6c0cf0a1 100644
--- a/packages/vue/src/templates/edu/PageEduNewsDetail/PageEduNewsDetail.stories.js
+++ b/packages/vue/src/templates/edu/PageEduNewsDetail/PageEduNewsDetail.stories.js
@@ -31,7 +31,15 @@ export const BaseStory = {
       slug: 'nasas-ingenuity-mars-helicopter-recharges-its-batteries-in-flight',
       url: '/news/nasas-ingenuity-mars-helicopter-recharges-its-batteries-in-flight',
       title: "NASA's Ingenuity Mars Helicopter Recharges Its Batteries in Flight",
-      firstPublishedAt: '2024-06-20T20:36:49.657301+00:00',
+      publicationDate: '2024-06-20 20:36:49.657301+00:00',
+      authors: [
+        {
+          author: {
+            name: 'Author Name',
+            organization: 'Organization Name'
+          }
+        }
+      ],
       getTopicsForDisplay: [
         {
           title: 'Mars',
diff --git a/packages/vue/src/templates/edu/PageEduNewsDetail/PageEduNewsDetail.vue b/packages/vue/src/templates/edu/PageEduNewsDetail/PageEduNewsDetail.vue
index a7ed9939..6144eefb 100644
--- a/packages/vue/src/templates/edu/PageEduNewsDetail/PageEduNewsDetail.vue
+++ b/packages/vue/src/templates/edu/PageEduNewsDetail/PageEduNewsDetail.vue
@@ -3,29 +3,31 @@ import { computed } from 'vue'
 import isEmpty from 'lodash/isEmpty.js'
 import type { StreamfieldBlockData } from './../../../components/BlockStreamfield/BlockStreamfield.vue'
 import type {
+  AuthorObject,
   ImageObject,
   PageResponseObject,
   RelatedLinkObject,
   Topic,
   ThumbnailObject
 } from './../../../interfaces'
-import HeroMedia from '@explorer-1/vue/src/components/HeroMedia/HeroMedia.vue'
-import LayoutHelper from '@explorer-1/vue/src/components/LayoutHelper/LayoutHelper.vue'
-import DetailHeadline from '@explorer-1/vue/src/components/DetailHeadline/DetailHeadline.vue'
-import ShareButtonsEdu from '@explorer-1/vue/src/components/ShareButtonsEdu/ShareButtonsEdu.vue'
-import BlockImageStandard from '@explorer-1/vue/src/components/BlockImage/BlockImageStandard.vue'
-import BlockText from '@explorer-1/vue/src/components/BlockText/BlockText.vue'
-import BlockStreamfield from '@explorer-1/vue/src/components/BlockStreamfield/BlockStreamfield.vue'
+import HeroMedia from './../../../components/HeroMedia/HeroMedia.vue'
+import LayoutHelper from './../../../components/LayoutHelper/LayoutHelper.vue'
+import DetailHeadline from './../../../components/DetailHeadline/DetailHeadline.vue'
+import ShareButtonsEdu from './../../../components/ShareButtonsEdu/ShareButtonsEdu.vue'
+import BlockImageStandard from './../../../components/BlockImage/BlockImageStandard.vue'
+import BlockText from './../../../components/BlockText/BlockText.vue'
+import BlockStreamfield from './../../../components/BlockStreamfield/BlockStreamfield.vue'
 
 interface PageEduNewsDetailObject extends PageResponseObject {
   url: string
   heroImage: ImageObject
+  heroImageInline: ImageObject
   thumbnailImage: ThumbnailObject
   heroPosition: string
   heroConstrain: boolean
   heroImageCaption: string
-  firstPublishedAt: string
-  lastPublishedAt: string
+  authors: AuthorObject[]
+  publicationDate: string
   title: string
   getTopicsForDisplay: Topic[]
   summary: string
@@ -62,7 +64,7 @@ const computedClass = computed(() => {
 })
 
 const dateTimeArray = computed(() => {
-  return props.data.firstPublishedAt.split('T')
+  return props.data.publicationDate.split(' ')
 })
 </script>
 <template>
@@ -97,6 +99,7 @@ const dateTimeArray = computed(() => {
     >
       <DetailHeadline
         :title="data.title"
+        :author="data.authors"
         :publication-date="dateTimeArray?.length ? dateTimeArray[0] : undefined"
         :publication-time="dateTimeArray?.length ? dateTimeArray[1] : undefined"
         :topics="data.getTopicsForDisplay"
@@ -118,9 +121,9 @@ const dateTimeArray = computed(() => {
       class="lg:mb-22 mt-10 mb-10"
     >
       <BlockImageStandard
-        :data="data.heroImage"
-        :display-caption="data.heroImage.displayCaption"
-        :caption="data.heroImage.caption"
+        :data="data.heroImageInline"
+        :display-caption="data.heroImageInline.displayCaption"
+        :caption="data.heroImageInline.caption"
         :constrain="data.heroConstrain"
       />
     </LayoutHelper>
diff --git a/packages/vue/src/templates/www/PageInfographicDetail/PageInfographicDetail.vue b/packages/vue/src/templates/www/PageInfographicDetail/PageInfographicDetail.vue
index 33a37e62..8b10d889 100755
--- a/packages/vue/src/templates/www/PageInfographicDetail/PageInfographicDetail.vue
+++ b/packages/vue/src/templates/www/PageInfographicDetail/PageInfographicDetail.vue
@@ -13,7 +13,7 @@
     <div class="max-w-screen-3xl lg:mb-24 mx-auto mt-10 mb-8">
       <MixinFancybox
         v-if="data.image"
-        :src="data.image.original"
+        :src="data.image.original || data.image.src?.url"
         :caption="data.image.caption"
         :credit="data.image.credit"
         :detail-url="data.image.detailUrl"