From 5f1ca7469293da931fc300febbaee0901d116764 Mon Sep 17 00:00:00 2001
From: Stephanie Smith <stephiescastle@users.noreply.github.com>
Date: Mon, 12 Aug 2024 16:08:46 -0700
Subject: [PATCH] fix: EDU Event Detail Page (#537)

* fixes after feedback on edu event detail page

* fixing speaker data shape

* fixing ICS generation

* fixing custom date display

* fixing ongoing date display

* layout adjustment to related events carousel

* fixing time for multi-day events
---
 .../vue/src/components/BaseTag/BaseTag.vue    |   2 +-
 .../CalendarButton/CalendarButton.vue         |  19 +-
 .../src/components/EventCard/EventCard.vue    |  30 ++-
 .../EventDetailHero/EventDetailHero.vue       |  66 +++--
 .../PageNewsDetail/PageNewsDetail.vue         |   4 +-
 .../PageEduEventDetail.stories.js             | 250 ++++++++++--------
 .../PageEduEventDetail/PageEduEventDetail.vue | 149 +++++++----
 packages/vue/src/utils/mixins.ts              |  32 ++-
 packages/vue/tsconfig.json                    |   2 +-
 9 files changed, 345 insertions(+), 209 deletions(-)

diff --git a/packages/vue/src/components/BaseTag/BaseTag.vue b/packages/vue/src/components/BaseTag/BaseTag.vue
index 152155d7..73127a40 100644
--- a/packages/vue/src/components/BaseTag/BaseTag.vue
+++ b/packages/vue/src/components/BaseTag/BaseTag.vue
@@ -11,7 +11,7 @@ const variantMap: Attributes = {
 const sizeMap: Attributes = {
   sm: 'text-xs border-t-2 py-1 px-2.5',
   md: 'text-xs lg:text-base border-t py-1.5 px-3.5',
-  lg: 'text-base lg:text-lg border-t py-1.5 px-5'
+  lg: 'text-base lg:text-lg border-t pt-1.5 pb-1 px-5'
 }
 
 interface BaseTagProps {
diff --git a/packages/vue/src/components/CalendarButton/CalendarButton.vue b/packages/vue/src/components/CalendarButton/CalendarButton.vue
index 5e77d8c8..45d3bbea 100644
--- a/packages/vue/src/components/CalendarButton/CalendarButton.vue
+++ b/packages/vue/src/components/CalendarButton/CalendarButton.vue
@@ -64,13 +64,18 @@ export default defineComponent({
       options: undefined
     }
   },
+  computed: {
+    icsDescription() {
+      return `${(this.description ? this.description + '\n\n' : '') + window?.location.href}`
+    }
+  },
 
   mounted() {
     this.init()
   },
   methods: {
     init() {
-      let recurrence = {}
+      let recurrence = undefined
       if (this.endDatetime && this.isAllDay) {
         // Calculate how many full days
         const startDateDayjs = dayjs(this.startDatetime)
@@ -81,21 +86,15 @@ export default defineComponent({
 
       this.options = {
         title: this.title ? this.title : undefined,
-        location: this.location ? this.addSlashes(this.location) : undefined,
-        description: this.description ? this.description : undefined,
+        location: this.location ? this.location : undefined,
+        description: this.icsDescription,
         start: new Date(this.startDatetime),
         end: !this.isAllDay && this.endDatetime ? new Date(this.endDatetime) : undefined,
         recurrence
       }
+
       this.icalendar = new ICalendar(this.options)
     },
-    addSlashes(string: string): string {
-      // Escape special characters COMMA, SEMI-COLON and BACKSLASH
-      // as temporary fix for this issue https://github.com/jshor/datebook/issues/179
-      // regex based of https://stackoverflow.com/a/770533
-      // eslint-disable-next-line
-      return string.replace(/[,;\\]/g, '\\$&').replace(/\u0000/g, '\\0')
-    },
     handleDownload() {
       const ics = this.icalendar.render()
       const blob = new Blob([ics], {
diff --git a/packages/vue/src/components/EventCard/EventCard.vue b/packages/vue/src/components/EventCard/EventCard.vue
index 25934eab..554fc5b8 100644
--- a/packages/vue/src/components/EventCard/EventCard.vue
+++ b/packages/vue/src/components/EventCard/EventCard.vue
@@ -65,12 +65,22 @@
             v-if="splitDate"
             class="hidden md:block absolute top-0 left-0 z-10 px-4 py-4 text-center text-white bg-primary"
           >
-            <div class="font-extrabold text-6xl leading-tight tracking-wider">
-              {{ splitDate.day }}
-            </div>
-            <div class="text-subtitle">
-              {{ splitDate.monthAndYear }}
-            </div>
+            <template v-if="themeStore.isEdu">
+              <div class="font-extrabold text-6xl leading-tight tracking-wider">
+                {{ splitDate.month }}
+              </div>
+              <div class="text-subtitle">
+                {{ splitDate.year }}
+              </div>
+            </template>
+            <template v-else>
+              <div class="font-extrabold text-6xl leading-tight tracking-wider">
+                {{ splitDate.day }}
+              </div>
+              <div class="text-subtitle">
+                {{ splitDate.monthAndYear }}
+              </div>
+            </template>
           </div>
         </BaseImagePlaceholder>
       </div>
@@ -84,8 +94,11 @@ import { defineComponent } from 'vue'
 import {
   mixinFormatEventDates,
   mixinFormatSplitEventDates,
-  mixinFormatEventTimeInHoursAndMinutes
+  mixinFormatEventTimeInHoursAndMinutes,
+  type EventDateObject
 } from './../../utils/mixins'
+import { mapStores } from 'pinia'
+import { useThemeStore } from '../../store/theme'
 import BaseLink from './../BaseLink/BaseLink.vue'
 import BaseHeading from './../BaseHeading/BaseHeading.vue'
 import BaseImage from './../BaseImage/BaseImage.vue'
@@ -145,7 +158,8 @@ export default defineComponent({
     }
   },
   computed: {
-    splitDate(): { day: string; monthAndYear: string } | null {
+    ...mapStores(useThemeStore),
+    splitDate(): EventDateObject | null {
       if (this.startDate) {
         return mixinFormatSplitEventDates(this.startDate, this.endDate)
       }
diff --git a/packages/vue/src/components/EventDetailHero/EventDetailHero.vue b/packages/vue/src/components/EventDetailHero/EventDetailHero.vue
index c93be4a3..a4e6e830 100644
--- a/packages/vue/src/components/EventDetailHero/EventDetailHero.vue
+++ b/packages/vue/src/components/EventDetailHero/EventDetailHero.vue
@@ -4,41 +4,55 @@
     class="EventDetailHero mb-10 md:mb-10 lg:mb-14 -mx-4 lg:mx-0"
   >
     <div class="hero">
-      <BaseImage
-        v-if="image.src"
-        :src="image.src.url"
-        :srcset="getSrcSet"
-        :width="image.src.width"
-        :height="image.src.height"
-        :alt="image.alt"
-        image-class="w-full h-auto"
-        object-fit-class="cover"
-        loading="lazy"
-      />
-      <div
-        v-if="startDateSplit"
-        class="ThemeVariantLight absolute top-0 left-0 z-10 px-4 py-4 text-center text-white bg-primary"
+      <BaseImagePlaceholder
+        :aspect-ratio="constrain ? '16:9' : 'none'"
+        dark-mode
       >
-        <div class="font-extrabold text-6xl leading-tight tracking-wider">
-          {{ startDateSplit.day }}
+        <BaseImage
+          v-if="image.src"
+          :src="image.src.url"
+          :srcset="getSrcSet"
+          :width="image.src.width"
+          :height="image.src.height"
+          :alt="image.alt"
+          image-class="w-full h-auto"
+          object-fit-class="cover"
+          loading="lazy"
+        />
+        <div
+          v-if="startDateSplit || ongoing"
+          class="ThemeVariantLight absolute top-0 left-0 z-10 px-4 py-4 text-center text-white bg-primary"
+        >
+          <template v-if="ongoing">
+            <div class="text-subtitle">Ongoing</div>
+          </template>
+          <template v-else>
+            <div class="font-extrabold text-6xl leading-tight tracking-wider uppercase">
+              {{ themeStore.isEdu ? startDateSplit?.month : startDateSplit?.day }}
+            </div>
+            <div class="text-subtitle">
+              {{ themeStore.isEdu ? startDateSplit?.year : startDateSplit?.monthAndYear }}
+            </div>
+          </template>
         </div>
-        <div class="text-subtitle">
-          {{ startDateSplit.monthAndYear }}
-        </div>
-      </div>
+      </BaseImagePlaceholder>
     </div>
   </div>
 </template>
 <script lang="ts">
 import { defineComponent } from 'vue'
+import { mapStores } from 'pinia'
+import { useThemeStore } from '../../store/theme'
 import BaseImage from '../BaseImage/BaseImage.vue'
+import BaseImagePlaceholder from '../BaseImagePlaceholder/BaseImagePlaceholder.vue'
 import { mixinGetSrcSet, type EventDateObject } from './../../utils/mixins'
 import type { PropType } from 'vue'
 
 export default defineComponent({
   name: 'EventDetailHero',
   components: {
-    BaseImage
+    BaseImage,
+    BaseImagePlaceholder
   },
   props: {
     data: {
@@ -50,13 +64,23 @@ export default defineComponent({
       type: Object as PropType<EventDateObject | undefined>,
       required: true
     },
+    ongoing: {
+      type: Boolean,
+      default: false
+    },
     image: {
       type: Object,
       required: false,
       default: undefined
+    },
+    constrain: {
+      type: Boolean,
+      required: false,
+      default: false
     }
   },
   computed: {
+    ...mapStores(useThemeStore),
     getSrcSet() {
       return this.image ? mixinGetSrcSet(this.image) : undefined
     }
diff --git a/packages/vue/src/templates/PageNewsDetail/PageNewsDetail.vue b/packages/vue/src/templates/PageNewsDetail/PageNewsDetail.vue
index 11c81728..e217ef4c 100644
--- a/packages/vue/src/templates/PageNewsDetail/PageNewsDetail.vue
+++ b/packages/vue/src/templates/PageNewsDetail/PageNewsDetail.vue
@@ -174,6 +174,7 @@ import BlockImageStandard from './../../components/BlockImage/BlockImageStandard
 import BlockLinkCarousel from './../../components/BlockLinkCarousel/BlockLinkCarousel.vue'
 import ShareButtons from './../../components/ShareButtons/ShareButtons.vue'
 import BlockText from './../../components/BlockText/BlockText.vue'
+import BlockVideo from './../../components/BlockText/BlockText.vue'
 
 export default defineComponent({
   name: 'PageNewsDetail',
@@ -190,7 +191,8 @@ export default defineComponent({
     BlockImageStandard,
     BlockLinkCarousel,
     ShareButtons,
-    BlockText
+    BlockText,
+    BlockVideo
   },
   props: {
     data: {
diff --git a/packages/vue/src/templates/edu/PageEduEventDetail/PageEduEventDetail.stories.js b/packages/vue/src/templates/edu/PageEduEventDetail/PageEduEventDetail.stories.js
index be61d8fb..e86a3814 100644
--- a/packages/vue/src/templates/edu/PageEduEventDetail/PageEduEventDetail.stories.js
+++ b/packages/vue/src/templates/edu/PageEduEventDetail/PageEduEventDetail.stories.js
@@ -1,6 +1,5 @@
 import { BlockKeyPointsData } from './../../../components/BlockKeyPoints/BlockKeyPoints.stories'
 import { BlockLinkCardCarouselData } from './../../../components/BlockLinkCarousel/BlockLinkCarousel.stories.js'
-import { EventDetailHeroData } from './../../../components/EventDetailHero/EventDetailHero.stories'
 import { EventsBlockLinkCarouselData } from './../../../components/BlockLinkCarousel/BlockLinkCarousel.stories'
 import PageEduEventDetail from './PageEduEventDetail.vue'
 
@@ -17,114 +16,157 @@ export default {
   excludeStories: /.*Data$/
 }
 
-// stories
-export const BaseStory = {
-  name: 'PageEduEventDetail',
-  args: {
-    data: {
-      id: '285',
-      title: 'Becoming a NASA engineer',
-      slug: 'becoming-a-nasa-engineer',
-      url: '/events/becoming-a-nasa-engineer',
-      startDate: '2022-01-23',
-      startDatetime: '2022-01-23T17:00:00-08:00',
-      startTime: '17:00:00',
-      endDate: '2022-01-25',
-      endDatetime: '2022-01-25T23:00:00-08:00',
-      endTime: '23:00:00',
-      isAllDay: false,
-      timezone: 'PST',
-      eventType: 'Workshop',
-      summary:
-        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus et luctus nisi. Maecenas vel turpis sem. Nullam ultricies nulla quis nisi faucibus eleifend. In turpis ante, blandit nec dapibus tempor, posuere at erat. In justo quam, imperdiet at hendrerit eget, imperdiet ut orci. ',
-      locationName: 'Webcast',
-      registerLink: [
-        {
-          text: 'Registration Link',
-          document: '',
-          page: {
-            url: '/placeholder'
-          },
-          externalLink: ''
-        }
-      ],
-      eventImage: {
-        __typename: 'CustomImage',
-        srcSet:
-          'https://picsum.photos/720/420 320w, https://picsum.photos/720/420 640w, https://picsum.photos/720/420 720w',
-        original: 'https://picsum.photos/720/420',
-        src: {
-          __typename: 'CustomRendition',
-          url: 'https://picsum.photos/720/420',
-          width: '720',
-          height: '420'
+const PageEduEventDetailData = {
+  id: '285',
+  title: 'Becoming a NASA engineer',
+  slug: 'becoming-a-nasa-engineer',
+  url: '/events/becoming-a-nasa-engineer',
+  timezone: 'PST',
+  startDate: '2024-08-08',
+  startDatetime: '2024-08-08T14:00:00-07:00',
+  startTime: '15:00:00',
+  endDate: '2024-08-08',
+  endDatetime: '2024-08-08T22:00:00-07:00',
+  endTime: '22:00:00',
+  ongoing: false,
+  eventType: 'Workshop',
+  topper: '<p data-block-key="yecrn">Event topper</p>',
+  summary:
+    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus et luctus nisi. Maecenas vel turpis sem. Nullam ultricies nulla quis nisi faucibus eleifend. In turpis ante, blandit nec dapibus tempor, posuere at erat. In justo quam, imperdiet at hendrerit eget, imperdiet ut orci. ',
+  locationName: 'Webcast',
+  registerLink: [
+    {
+      document: null,
+      externalLink: 'https://nasa.gov',
+      page: null,
+      text: 'Registration Link'
+    }
+  ],
+  eventImage: {
+    __typename: 'CustomImage',
+    srcSet:
+      'https://picsum.photos/720/420 320w, https://picsum.photos/720/420 640w, https://picsum.photos/720/420 720w',
+    original: 'https://picsum.photos/720/420',
+    src: {
+      __typename: 'CustomRendition',
+      url: 'https://picsum.photos/720/420',
+      width: '720',
+      height: '420'
+    },
+    title: 'Marine Picks First Public Mars Global Surveyor Image',
+    alt: '',
+    caption:
+      '<p data-block-key="y00sz">A close-up view of part of the area imaged by Mars Global Surveyor for its public request program.</p>',
+    credit: 'Credit',
+    detailUrl: null
+  },
+  heroConstrain: false,
+  heroPosition: 'inline',
+  thumbnailImage: {
+    alt: '',
+    original: 'https://picsum.photos/512/288'
+  },
+  targetAudience: 'All ages',
+
+  body: [
+    BlockKeyPointsData,
+    {
+      blockType: 'RichTextBlock',
+      value:
+        '<p>Lorem ipsum <a href="/missions/test-mission/">dolor</a> sit amet, consectetur adipiscing elit. Quisque vitae justo quis justo malesuada molestie. Cras sed tincidunt dui.</p><p>Integer imperdiet blandit neque vitae euismod. Nulla aliquet lacus nibh,  vel tincidunt urna efficitur non. In et eros vitae ex posuere maximus  quis eget urna. Suspendisse fringilla posuere velit sit amet posuere.  Morbi malesuada bibendum vehicula. Donec faucibus ut erat ut mattis.  Suspendisse ornare, quam at placerat cursus, dolor mi lacinia nunc, eget  maximus augue nulla in dolor.</p>\n'
+    }
+  ],
+  relatedEvents: [...EventsBlockLinkCarouselData],
+  speakers: [
+    {
+      speaker: {
+        host: 'host',
+        id: '1',
+        internalLink: null,
+        name: 'Varoujan Gorjian',
+        title: 'Splitzer Research Scientest, JPL'
+      }
+    },
+    {
+      speaker: {
+        host: 'co-host',
+        id: '2',
+        image: {
+          alt: '',
+          src: {
+            height: '450',
+            url: 'https://picsum.photos/560/560',
+            width: '450'
+          }
         },
-        title: 'Marine Picks First Public Mars Global Surveyor Image',
-        alt: '',
-        caption:
-          '<p data-block-key="y00sz">A close-up view of part of the area imaged by Mars Global Surveyor for its public request program.</p>',
-        credit: 'Credit',
-        detailUrl: null
-      },
-      thumbnailImage: {
-        alt: '',
-        original: 'https://picsum.photos/512/288'
-      },
-      targetAudience: 'All ages',
-      body: [
-        BlockKeyPointsData,
-        {
-          blockType: 'RichTextBlock',
-          value:
-            '<p>Lorem ipsum <a href="/missions/test-mission/">dolor</a> sit amet, consectetur adipiscing elit. Quisque vitae justo quis justo malesuada molestie. Cras sed tincidunt dui.</p><p>Integer imperdiet blandit neque vitae euismod. Nulla aliquet lacus nibh,  vel tincidunt urna efficitur non. In et eros vitae ex posuere maximus  quis eget urna. Suspendisse fringilla posuere velit sit amet posuere.  Morbi malesuada bibendum vehicula. Donec faucibus ut erat ut mattis.  Suspendisse ornare, quam at placerat cursus, dolor mi lacinia nunc, eget  maximus augue nulla in dolor.</p>\n'
-        }
-      ],
-      relatedEvents: [...EventsBlockLinkCarouselData],
-      speakers: [
+        internalLink: null,
+        name: 'Robert Hurt',
+        title: 'Splitzer visualisation'
+      }
+    }
+  ],
+  relatedLinks: [
+    {
+      blockType: 'RelatedLinksBlock',
+      heading: 'Related Links',
+      links: [
         {
-          host: 'host',
-          id: '1',
-          internalLink: null,
-          name: 'Varoujan Gorjian',
-          title: 'Splitzer Research Scientest, JPL'
+          document: null,
+          externalLink: 'http://www.google.com',
+          page: null,
+          text: 'Lorem ipsum dolor'
         },
         {
-          host: 'co-host',
-          id: '2',
-          image: {
-            alt: '',
-            src: {
-              height: '450',
-              url: 'https://picsum.photos/560/560',
-              width: '450'
-            }
-          },
-          internalLink: null,
-          name: 'Robert Hurt',
-          title: 'Splitzer visualisation'
+          document: null,
+          externalLink: 'http://www.google.com',
+          page: null,
+          text: 'Sit amet consectatur'
         }
-      ],
-      relatedLinks: [
-        {
-          blockType: 'RelatedLinksBlock',
-          heading: 'Related Links',
-          links: [
-            {
-              document: null,
-              externalLink: 'http://www.google.com',
-              page: null,
-              text: 'Lorem ipsum dolor'
-            },
-            {
-              document: null,
-              externalLink: 'http://www.google.com',
-              page: null,
-              text: 'Sit amet consectatur'
-            }
-          ]
-        }
-      ],
-      relatedContent: BlockLinkCardCarouselData
+      ]
+    }
+  ],
+  relatedContent: BlockLinkCardCarouselData
+}
+// stories
+export const BaseStory = {
+  name: 'PageEduEventDetail',
+  args: { data: PageEduEventDetailData }
+}
+
+export const CustomDate = {
+  args: {
+    data: {
+      ...PageEduEventDetailData,
+      startDate: '2024-08-08',
+      startDatetime: null,
+      startTime: null,
+      endDate: '2024-08-08',
+      endDatetime: '2024-08-08T22:00:00-07:00',
+      endTime: null,
+      customDate: 'Custom date information',
+      ongoing: false
+    }
+  }
+}
+
+export const MultiDayEvent = {
+  args: {
+    data: {
+      ...PageEduEventDetailData,
+      startDate: '2024-08-08',
+      endDate: '2024-08-12',
+      startDatetime: '2024-08-08T14:00:00-07:00',
+      startTime: '15:00:00',
+      endDatetime: '2024-08-12T22:00:00-07:00'
+    }
+  }
+}
+
+export const Ongoing = {
+  args: {
+    data: {
+      ...PageEduEventDetailData,
+      ongoing: true
     }
   }
 }
diff --git a/packages/vue/src/templates/edu/PageEduEventDetail/PageEduEventDetail.vue b/packages/vue/src/templates/edu/PageEduEventDetail/PageEduEventDetail.vue
index 88145e96..bd23c368 100644
--- a/packages/vue/src/templates/edu/PageEduEventDetail/PageEduEventDetail.vue
+++ b/packages/vue/src/templates/edu/PageEduEventDetail/PageEduEventDetail.vue
@@ -1,7 +1,10 @@
 <template>
   <div
     v-if="data"
-    class="PageEduEventDetail pt-5 ThemeVariantLight lg:pt-12"
+    class="PageEduEventDetail ThemeVariantLight"
+    :class="{
+      'pt-5 lg:pt-12': heroIsInline
+    }"
     itemscope
     itemtype="http://schema.org/Event"
   >
@@ -25,7 +28,28 @@
       itemprop="description"
       :content="data.summary || data.body"
     />
-
+    <div
+      v-if="!heroIsInline"
+      class="relative max-w-screen-3xl mx-auto -mt-1"
+    >
+      <!-- hero image -->
+      <HeroMedia
+        class="md:mb-12 lg:mb-18 mb-10"
+        :image="data.eventImage"
+        :constrain="data.heroConstrain"
+      />
+      <div
+        v-if="formattedSplitEventDates"
+        class="ThemeVariantLight absolute top-0 left-0 z-10 px-4 py-4 text-center text-white bg-primary"
+      >
+        <div class="font-extrabold text-6xl leading-tight tracking-wider">
+          {{ formattedSplitEventDates.month }}
+        </div>
+        <div class="text-subtitle">
+          {{ formattedSplitEventDates.year }}
+        </div>
+      </div>
+    </div>
     <LayoutHelper
       indent="col-2"
       class="mb-6 lg:mb-12"
@@ -47,6 +71,14 @@
       >
         {{ data.title }}
       </BaseHeading>
+      <div
+        v-if="data.targetAudience"
+        class="text-body-lg mt-3 mb-6"
+      >
+        <strong>Target Audience:</strong>
+
+        {{ data.targetAudience }}
+      </div>
       <ShareButtonsEdu
         class="mt-4"
         :title="data.title"
@@ -56,8 +88,11 @@
 
     <LayoutHelper indent="col-2">
       <EventDetailHero
+        v-if="heroIsInline"
         :image="data.eventImage"
         :start-date-split="formattedSplitEventDates"
+        :constrain="data.heroConstrain"
+        :ongoing="data.ongoing"
       />
 
       <!-- Event details -->
@@ -67,17 +102,18 @@
           :class="data.registerLink && data.registerLink.length > 0 ? '' : 'lg:mb-10'"
         >
           <div
-            v-if="formattedEventDates || data.customDate"
+            v-if="data.ongoing || data.customDate || formattedEventDates"
             class="PageEduEventDetail__Metadata text-primary"
+            :class="{ 'flex-2': data.customDate }"
           >
-            <IconCalendar class="relative mr-3 text-[1.2rem]" />
-            <span>{{ formattedEventDates || data.customDate }}</span>
+            <IconCalendar class="relative mr-3 lg:mr-2 xl:mr-3 text-[1.2rem]" />
+            <span>{{ data.ongoing ? 'Ongoing' : data.customDate || formattedEventDates }}</span>
           </div>
           <div
             v-show="displayTime"
             class="PageEduEventDetail__Metadata text-primary"
           >
-            <IconTime class="relative mr-3" />
+            <IconTime class="relative mr-3 lg:mr-2 xl:mr-3" />
             <span>{{ displayTime }}</span>
           </div>
           <!--Virtual location -->
@@ -96,7 +132,7 @@
               itemprop="name"
               :content="data.locationName"
             />
-            <IconLocation class="relative mr-3" />
+            <IconLocation class="relative mr-3 lg:mr-2 xl:mr-3" />
             <BaseLink
               variant="none"
               class="text-action"
@@ -109,13 +145,14 @@
           <!-- Normal location -->
           <div
             v-else-if="data.locationName"
+            min-
             class="PageEduEventDetail__Metadata text-primary"
           >
             <meta
               itemprop="location"
               :content="data.locationName"
             />
-            <IconLocation class="relative mr-3" />
+            <IconLocation class="relative mr-3 lg:mr-2 xl:mr-3" />
             <BaseLink
               v-if="data.locationLink"
               variant="none"
@@ -126,13 +163,6 @@
             </BaseLink>
             <span v-else>{{ data.locationName }}</span>
           </div>
-          <div
-            v-if="data.targetAudience"
-            class="PageEduEventDetail__Metadata text-primary"
-          >
-            <IconUser class="relative mr-3 text-[.9rem]" />
-            <span>{{ data.targetAudience }}</span>
-          </div>
 
           <div class="PageEduEventDetail__Buttons">
             <BaseButton
@@ -172,6 +202,12 @@
           class="grid-cols-10 lg:grid -mx-4 lg:mx-0"
         >
           <div class="col-span-7">
+            <BlockText
+              v-if="data.topper && data.topper.length > 2"
+              class="lg:mb-8 mb-5 px-4 lg:px-0"
+              :text="data.topper"
+            />
+
             <p
               v-if="data.summary"
               class="BlockText text-body-lg mb-8 px-4 lg:px-0 font-semibold"
@@ -204,7 +240,7 @@
           >
           <div class="flex flex-col flex-wrap justify-start md:flex-row md:-mx-4">
             <div
-              v-for="(speaker, index) in data.speakers"
+              v-for="(item, index) in data.speakers"
               :key="index"
               class="flex flex-1 mb-6 md:flex-none md:flex-wrap md:mx-4 md:w-56"
             >
@@ -215,10 +251,10 @@
                   transparent-mode
                 >
                   <BaseImage
-                    v-if="speaker.image && speaker.image.src"
-                    :src="speaker.image.src.url"
-                    :width="speaker.image.src.width"
-                    :height="speaker.image.src.height"
+                    v-if="item.speaker.image && item.speaker.image.src"
+                    :src="item.speaker.image.src.url"
+                    :width="item.speaker.image.src.width"
+                    :height="item.speaker.image.src.height"
                     alt=""
                     class="object-cover"
                     loading="lazy"
@@ -232,30 +268,30 @@
               </div>
               <div class="flex-1 h-full">
                 <h3
-                  v-if="speaker.name"
+                  v-if="item.speaker.name"
                   class="my-3 text-lg !font-normal !tracking-normal leading-none"
                 >
                   <BaseLink
-                    v-if="speaker.internalLink || speaker.externalLink"
+                    v-if="item.speaker.internalLink || item.speaker.externalLink"
                     link-class="no-underline normal-case"
-                    :to="speaker.internalLink ? speaker.internalLink.url : null"
-                    :href="speaker.externalLink ? speaker.externalLink : null"
+                    :to="item.speaker.internalLink ? item.speaker.internalLink.url : null"
+                    :href="item.speaker.externalLink ? item.speaker.externalLink : null"
                     external-target-blank
                   >
-                    {{ speaker.name }}
+                    {{ item.speaker.name }}
                   </BaseLink>
                   <template v-else>
-                    {{ speaker.name }}
+                    {{ item.speaker.name }}
                   </template>
                 </h3>
                 <p
-                  v-if="speaker.title"
+                  v-if="item.speaker.title"
                   class="mb-3 text-gray-mid-dark"
                 >
-                  {{ speaker.title }}
+                  {{ item.speaker.title }}
                 </p>
                 <p class="text-action capitalize">
-                  {{ speaker.host }}
+                  {{ item.speaker.host }}
                 </p>
               </div>
             </div>
@@ -280,7 +316,7 @@
     <LayoutHelper
       v-if="data.relatedEvents?.length"
       indent="col-1"
-      class="my-12 lg:my-16"
+      class="my-12 lg:my-16 px-0"
     >
       <BlockLinkCarousel
         item-type="cards"
@@ -315,10 +351,10 @@ import BaseHeading from './../../../components/BaseHeading/BaseHeading.vue'
 import BaseTag from './../../../components/BaseTag/BaseTag.vue'
 import ShareButtonsEdu from './../../../components/ShareButtonsEdu/ShareButtonsEdu.vue'
 import EventDetailHero from './../../../components/EventDetailHero/EventDetailHero.vue'
+import HeroMedia from './../../../components/HeroMedia/HeroMedia.vue'
 import IconCalendar from './../../../components/Icons/IconCalendar.vue'
 import IconLocation from './../../../components/Icons/IconLocation.vue'
 import IconTime from './../../../components/Icons/IconTime.vue'
-import IconUser from './../../../components/Icons/IconUser.vue'
 import BaseLink from './../../../components/BaseLink/BaseLink.vue'
 import BaseButton from './../../../components/BaseButton/BaseButton.vue'
 import CalendarButton from './../../../components/CalendarButton/CalendarButton.vue'
@@ -327,6 +363,8 @@ import BaseImagePlaceholder from './../../../components/BaseImagePlaceholder/Bas
 import BaseImage from './../../../components/BaseImage/BaseImage.vue'
 import BlockRelatedLinks from './../../../components/BlockRelatedLinks/BlockRelatedLinks.vue'
 import BlockLinkCarousel from './../../../components/BlockLinkCarousel/BlockLinkCarousel.vue'
+import BlockText from './../../../components/BlockText/BlockText.vue'
+
 // @ts-ignore
 import PlaceholderPortrait from '@explorer-1/common/src/images/svg/placeholder-portrait.svg'
 
@@ -338,10 +376,10 @@ export default defineComponent({
     BaseTag,
     ShareButtonsEdu,
     EventDetailHero,
+    HeroMedia,
     IconCalendar,
     IconLocation,
     IconTime,
-    IconUser,
     BaseLink,
     BaseButton,
     CalendarButton,
@@ -349,7 +387,8 @@ export default defineComponent({
     BaseImagePlaceholder,
     BaseImage,
     BlockRelatedLinks,
-    BlockLinkCarousel
+    BlockLinkCarousel,
+    BlockText
   },
   props: {
     data: {
@@ -364,22 +403,35 @@ export default defineComponent({
     }
   },
   computed: {
+    startDateTimeForFormatting(): string {
+      return this.data?.startDatetime || this.data?.startDate
+    },
     displayTime(): string {
-      return this.data
-        ? mixinFormatEventTimeInHoursAndMinutes(
-            this.data.startDatetime,
-            this.data.endDatetime,
-            this.data.endTime
-          )
-        : ''
+      if (!this.data?.customDate) {
+        const time =
+          this.data && this.startDateTimeForFormatting
+            ? mixinFormatEventTimeInHoursAndMinutes(
+                this.startDateTimeForFormatting,
+                this.data.endDatetime,
+                this.data.endTime
+              )
+            : undefined
+        return time ? time.replaceAll(':00', '') : ''
+      }
+      return ''
     },
-    formattedEventDates(): string {
-      return this.data ? mixinFormatEventDates(this.data.startDatetime, this.data.endDatetime) : ''
+    formattedEventDates(): string | undefined {
+      return this.data && this.startDateTimeForFormatting
+        ? mixinFormatEventDates(this.startDateTimeForFormatting, this.data.endDatetime)
+        : undefined
     },
     formattedSplitEventDates() {
-      return this.data
-        ? mixinFormatSplitEventDates(this.data.startDatetime, this.data.endDatetime)
+      return this.data && this.startDateTimeForFormatting
+        ? mixinFormatSplitEventDates(this.startDateTimeForFormatting, this.data.endDatetime)
         : undefined
+    },
+    heroIsInline(): boolean {
+      return this.data?.heroPosition === 'inline'
     }
   }
 })
@@ -389,12 +441,11 @@ export default defineComponent({
   .PageEduEventDetail__Metadata {
     @apply flex;
     @apply items-baseline;
-    @apply mr-12 md:mr-8 lg:mr-12;
+    @apply mr-4 md:mr-4 xl:mr-12;
     @apply mb-5 lg:mb-7;
+    @apply lg:max-w-[17rem] lg:min-w-[10rem];
 
     span {
-      max-width: 230px;
-      min-width: 110px;
       @apply text-gray-dark;
     }
 
@@ -409,8 +460,8 @@ export default defineComponent({
     @apply lg:ml-auto;
     @apply mt-10;
     @apply lg:mt-0;
-
-    max-width: 260px;
+    @apply text-center;
+    @apply max-w-[17rem];
   }
   .bg-stars .MixinCarousel__Heading {
     @apply text-white;
diff --git a/packages/vue/src/utils/mixins.ts b/packages/vue/src/utils/mixins.ts
index 6310baf3..eacf4d97 100644
--- a/packages/vue/src/utils/mixins.ts
+++ b/packages/vue/src/utils/mixins.ts
@@ -57,6 +57,8 @@ export type lightboxGalleryObject = {
 
 export interface EventDateObject {
   day: string
+  month: string
+  year: string
   monthAndYear: string
 }
 
@@ -285,6 +287,8 @@ export const mixinFormatSplitEventDates = (
   const startDateDayjs = dayjs(startDatetime)
 
   let day = startDateDayjs.format('D')
+  const month = startDateDayjs.format('MMM').replace('.', '')
+  const year = startDateDayjs.format('YYYY')
   const monthAndYear = startDateDayjs.format('MMM YYYY')
 
   if (endDatetime) {
@@ -299,7 +303,7 @@ export const mixinFormatSplitEventDates = (
     }
     // Otherwise, we only show the start date
   }
-  return { day, monthAndYear }
+  return { day, month, year, monthAndYear }
 }
 
 // return event dates formatted for listing cards
@@ -335,27 +339,27 @@ export const mixinFormatEventTimeInHoursAndMinutes = (
   endDatetime?: string,
   endTime?: string
 ): string => {
-  // Only display time if event spans less than one day
   const startDateDayjs = dayjs(startDatetime)
   let time = ''
 
   if (endDatetime) {
     const endDateDayjs = dayjs(endDatetime)
-    if (
-      endDateDayjs.diff(startDateDayjs, 'hour') <= 24 &&
-      endDateDayjs.diff(startDateDayjs, 'day') === 0
-    ) {
-      // Event is less than 24 hours and spans 1 day
-      if (endTime) {
-        if (startDateDayjs.format('a') === endDateDayjs.format('a')) {
-          time = `${startDateDayjs.format('h:mm')}-${endDateDayjs.format('h:mm a z')}`
-        } else {
-          time = `${startDateDayjs.format('h:mm a')} - ${endDateDayjs.format('h:mm a z')}`
-        }
+    // Only display time if event spans less than one day
+    // if (
+    //   endDateDayjs.diff(startDateDayjs, 'hour') <= 24 &&
+    //   endDateDayjs.diff(startDateDayjs, 'day') === 0
+    // ) {
+    // Event is less than 24 hours and spans 1 day
+    if (endTime) {
+      if (startDateDayjs.format('a') === endDateDayjs.format('a')) {
+        time = `${startDateDayjs.format('h:mm')} - ${endDateDayjs.format('h:mm a z')}`
       } else {
-        time = `${startDateDayjs.format('h:mm a z')}`
+        time = `${startDateDayjs.format('h:mm a')} - ${endDateDayjs.format('h:mm a z')}`
       }
+    } else {
+      time = `${startDateDayjs.format('h:mm a z')}`
     }
+    // }
   }
   return time
 }
diff --git a/packages/vue/tsconfig.json b/packages/vue/tsconfig.json
index 8f5d3497..37bc1c6c 100644
--- a/packages/vue/tsconfig.json
+++ b/packages/vue/tsconfig.json
@@ -3,7 +3,7 @@
     "target": "ES2020",
     "useDefineForClassFields": true,
     "module": "ESNext",
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "lib": ["ES2021", "DOM", "DOM.Iterable"],
     "skipLibCheck": true,
 
     /* Bundler mode */