From b94398c5c9fbda1599ccb4b94db753329a33df63 Mon Sep 17 00:00:00 2001
From: Stephanie Smith <stephanie.c.smith@jpl.nasa.gov>
Date: Mon, 29 Jul 2024 13:51:57 -0700
Subject: [PATCH 1/8] fixing BlockImageCarousel bug, adding fallback image
 source for fancybox

---
 packages/vue/src/components/BlockImage/BlockImageFullBleed.vue  | 2 +-
 packages/vue/src/components/BlockImage/BlockImageStandard.vue   | 2 +-
 .../components/BlockImageCarousel/BlockImageCarousel.stories.js | 2 +-
 .../src/components/BlockImageCarousel/BlockImageCarousel.vue    | 2 +-
 .../BlockImageCarouselItem/BlockImageCarouselItem.vue           | 2 +-
 .../vue/src/components/BlockImageGallery/BlockImageGallery.vue  | 2 +-
 .../vue/src/components/BlockInlineImage/BlockInlineImage.vue    | 2 +-
 packages/vue/src/templates/PageImageDetail/PageImageDetail.vue  | 2 +-
 .../www/PageInfographicDetail/PageInfographicDetail.vue         | 2 +-
 9 files changed, 9 insertions(+), 9 deletions(-)

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..6f28bb0c 100644
--- a/packages/vue/src/components/BlockInlineImage/BlockInlineImage.vue
+++ b/packages/vue/src/components/BlockInlineImage/BlockInlineImage.vue
@@ -12,7 +12,7 @@
       <!-- should accommodate any size/shape image without cropping -->
       <MixinFancybox
         v-if="theImageData"
-        :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/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/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"

From fd775f6c807c9db5abdc44b9e8c0958bd89be137 Mon Sep 17 00:00:00 2001
From: Stephanie Smith <stephanie.c.smith@jpl.nasa.gov>
Date: Mon, 29 Jul 2024 14:04:13 -0700
Subject: [PATCH 2/8] fixing inline hero image on edu news detail pages

---
 .../PageEduNewsDetail/PageEduNewsDetail.vue   | 21 ++++++++++---------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/packages/vue/src/templates/edu/PageEduNewsDetail/PageEduNewsDetail.vue b/packages/vue/src/templates/edu/PageEduNewsDetail/PageEduNewsDetail.vue
index a7ed9939..6e0fcac2 100644
--- a/packages/vue/src/templates/edu/PageEduNewsDetail/PageEduNewsDetail.vue
+++ b/packages/vue/src/templates/edu/PageEduNewsDetail/PageEduNewsDetail.vue
@@ -9,17 +9,18 @@ import type {
   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
@@ -118,9 +119,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>

From b4baec4db73420cde00d26a8af21f4dca139ab11 Mon Sep 17 00:00:00 2001
From: Stephanie Smith <stephanie.c.smith@jpl.nasa.gov>
Date: Mon, 29 Jul 2024 14:44:22 -0700
Subject: [PATCH 3/8] fixing alignment of BlockInlineImage

---
 .../BlockInlineImage/BlockInlineImage.vue     | 80 ++++++++++---------
 .../BlockStreamfield/BlockStreamfield.vue     |  1 -
 2 files changed, 41 insertions(+), 40 deletions(-)

diff --git a/packages/vue/src/components/BlockInlineImage/BlockInlineImage.vue b/packages/vue/src/components/BlockInlineImage/BlockInlineImage.vue
index 6f28bb0c..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 || theImageData.src?.url"
-        :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"
       />

From 40a40e57677c156ab9f664a7031d8dae66285875 Mon Sep 17 00:00:00 2001
From: Stephanie Smith <stephanie.c.smith@jpl.nasa.gov>
Date: Mon, 29 Jul 2024 14:50:41 -0700
Subject: [PATCH 4/8] fixing publication date on edu news template

---
 .../edu/PageEduNewsDetail/PageEduNewsDetail.stories.js       | 2 +-
 .../templates/edu/PageEduNewsDetail/PageEduNewsDetail.vue    | 5 ++---
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/packages/vue/src/templates/edu/PageEduNewsDetail/PageEduNewsDetail.stories.js b/packages/vue/src/templates/edu/PageEduNewsDetail/PageEduNewsDetail.stories.js
index aee3fe3b..07442547 100644
--- a/packages/vue/src/templates/edu/PageEduNewsDetail/PageEduNewsDetail.stories.js
+++ b/packages/vue/src/templates/edu/PageEduNewsDetail/PageEduNewsDetail.stories.js
@@ -31,7 +31,7 @@ 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',
       getTopicsForDisplay: [
         {
           title: 'Mars',
diff --git a/packages/vue/src/templates/edu/PageEduNewsDetail/PageEduNewsDetail.vue b/packages/vue/src/templates/edu/PageEduNewsDetail/PageEduNewsDetail.vue
index 6e0fcac2..f7741e1a 100644
--- a/packages/vue/src/templates/edu/PageEduNewsDetail/PageEduNewsDetail.vue
+++ b/packages/vue/src/templates/edu/PageEduNewsDetail/PageEduNewsDetail.vue
@@ -25,8 +25,7 @@ interface PageEduNewsDetailObject extends PageResponseObject {
   heroPosition: string
   heroConstrain: boolean
   heroImageCaption: string
-  firstPublishedAt: string
-  lastPublishedAt: string
+  publicationDate: string
   title: string
   getTopicsForDisplay: Topic[]
   summary: string
@@ -63,7 +62,7 @@ const computedClass = computed(() => {
 })
 
 const dateTimeArray = computed(() => {
-  return props.data.firstPublishedAt.split('T')
+  return props.data.publicationDate.split(' ')
 })
 </script>
 <template>

From bc8281d034ea69721f102ec41a3eb4ae2996eb57 Mon Sep 17 00:00:00 2001
From: Stephanie Smith <stephanie.c.smith@jpl.nasa.gov>
Date: Mon, 29 Jul 2024 15:26:51 -0700
Subject: [PATCH 5/8] modifying DetailHeadline component to handle single and
 multiple authors

---
 .../DetailHeadline/DetailHeadline.stories.js  | 20 +++++++
 .../DetailHeadline/DetailHeadline.vue         | 57 +++++++++++++++----
 2 files changed, 67 insertions(+), 10 deletions(-)

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..b60ee36f 100644
--- a/packages/vue/src/components/DetailHeadline/DetailHeadline.vue
+++ b/packages/vue/src/components/DetailHeadline/DetailHeadline.vue
@@ -50,14 +50,26 @@
       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"
         :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
@@ -91,6 +103,10 @@ import type { Topic } from './../../interfaces'
 import BaseLink from './../BaseLink/BaseLink.vue'
 import BaseHeading from './../BaseHeading/BaseHeading.vue'
 
+interface Author {
+  name: string
+  organization: string
+}
 export default defineComponent({
   name: 'DetailHeadline',
   components: {
@@ -100,32 +116,39 @@ export default defineComponent({
   props: {
     title: {
       type: String,
-      required: false
+      required: false,
+      default: undefined
     },
     author: {
-      type: Object,
-      required: false
+      type: Object as PropType<Author | Author[]>,
+      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 +161,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: Author[] | 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: Author }) => {
+          // @ts-expect-error authors array is defined above
+          authors.push(author.author)
+        })
+      } else {
+        authors = [this.author] as Author[]
+      }
+      return authors
     }
   }
 })

From 83f5c6e834c232285bd7fbe9838f43ae6a78dd72 Mon Sep 17 00:00:00 2001
From: Stephanie Smith <stephanie.c.smith@jpl.nasa.gov>
Date: Mon, 29 Jul 2024 15:40:11 -0700
Subject: [PATCH 6/8] fixing some bugs when there is no author data

---
 .../DetailHeadline/DetailHeadline.vue         | 20 ++++++++-----------
 .../PageEduNewsDetail.stories.js              |  8 ++++++++
 .../PageEduNewsDetail/PageEduNewsDetail.vue   |  3 +++
 3 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/packages/vue/src/components/DetailHeadline/DetailHeadline.vue b/packages/vue/src/components/DetailHeadline/DetailHeadline.vue
index b60ee36f..767c8ce6 100644
--- a/packages/vue/src/components/DetailHeadline/DetailHeadline.vue
+++ b/packages/vue/src/components/DetailHeadline/DetailHeadline.vue
@@ -46,11 +46,11 @@
       >{{ 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="authors"
+        v-if="authors?.length"
         :itemprop="schema ? 'author' : undefined"
         itemscope
         itemtype="https://schema.org/Person"
@@ -99,14 +99,10 @@
 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'
 
-interface Author {
-  name: string
-  organization: string
-}
 export default defineComponent({
   name: 'DetailHeadline',
   components: {
@@ -120,7 +116,7 @@ export default defineComponent({
       default: undefined
     },
     author: {
-      type: Object as PropType<Author | Author[]>,
+      type: Object as PropType<AuthorObject | AuthorObject[]>,
       required: false,
       default: undefined
     },
@@ -163,16 +159,16 @@ export default defineComponent({
       return returnDate.toISOString()
     },
     authors(): { name: string; organization: string }[] | undefined {
-      let authors: Author[] | undefined = 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: Author }) => {
+        this.author.forEach((author: { author: AuthorObject }) => {
           // @ts-expect-error authors array is defined above
           authors.push(author.author)
         })
-      } else {
-        authors = [this.author] as Author[]
+      } else if (this.author) {
+        authors = [this.author] as AuthorObject[]
       }
       return authors
     }
diff --git a/packages/vue/src/templates/edu/PageEduNewsDetail/PageEduNewsDetail.stories.js b/packages/vue/src/templates/edu/PageEduNewsDetail/PageEduNewsDetail.stories.js
index 07442547..6c0cf0a1 100644
--- a/packages/vue/src/templates/edu/PageEduNewsDetail/PageEduNewsDetail.stories.js
+++ b/packages/vue/src/templates/edu/PageEduNewsDetail/PageEduNewsDetail.stories.js
@@ -32,6 +32,14 @@ export const BaseStory = {
       url: '/news/nasas-ingenuity-mars-helicopter-recharges-its-batteries-in-flight',
       title: "NASA's Ingenuity Mars Helicopter Recharges Its Batteries in Flight",
       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 f7741e1a..6144eefb 100644
--- a/packages/vue/src/templates/edu/PageEduNewsDetail/PageEduNewsDetail.vue
+++ b/packages/vue/src/templates/edu/PageEduNewsDetail/PageEduNewsDetail.vue
@@ -3,6 +3,7 @@ import { computed } from 'vue'
 import isEmpty from 'lodash/isEmpty.js'
 import type { StreamfieldBlockData } from './../../../components/BlockStreamfield/BlockStreamfield.vue'
 import type {
+  AuthorObject,
   ImageObject,
   PageResponseObject,
   RelatedLinkObject,
@@ -25,6 +26,7 @@ interface PageEduNewsDetailObject extends PageResponseObject {
   heroPosition: string
   heroConstrain: boolean
   heroImageCaption: string
+  authors: AuthorObject[]
   publicationDate: string
   title: string
   getTopicsForDisplay: Topic[]
@@ -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"

From 12312d187910d815078f1dae2bbac7773757d8c8 Mon Sep 17 00:00:00 2001
From: Stephanie Smith <stephanie.c.smith@jpl.nasa.gov>
Date: Mon, 29 Jul 2024 15:55:55 -0700
Subject: [PATCH 7/8] fixing accessibility issue -- temp workaround

---
 .../templates/PageImageDetail/PageImageDetail.stories.js    | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

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',

From b74ab25dc253e049537a8e705c16ae303d03359b Mon Sep 17 00:00:00 2001
From: Stephanie Smith <stephanie.c.smith@jpl.nasa.gov>
Date: Mon, 29 Jul 2024 16:41:55 -0700
Subject: [PATCH 8/8] bumping explorer-1/vue version

---
 packages/vue/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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"