@explorer-1/vue 0.2.7 → 0.2.9

package/src/components/SearchResultsList/SearchResultsList.vue

@@ -17,6 +17,7 @@
         <SearchResultCard
           :is-events="isEvents"
           :is-profiles="isProfiles"
+          :page-content-type="page.content_type"
           :url="page.url"
           :type="page.type"
           :topic="page.topic"

package/src/components/TopicDetailMoreItem/TopicDetailMoreItem.vue

@@ -40,7 +40,7 @@
     <div class="text-gray-dark md:px-5 md:py-5 lg:px-10 lg:py-8 w-full px-10 py-8">
       <!-- label area -->
       <div
-        v-if="theData.label || theData.date || theData.startDate"
+        v-if="theData.label || theData.date || (theData as EventCardObject).startDate"
         class="flex flex-wrap items-center justify-between mb-5"
       >
         <p class="divide-gray-mid text-subtitle flex divide-x">
@@ -50,7 +50,7 @@
             >{{ theData.label }}</span
           >
           <span
-            v-if="theData.date || theData.startDate"
+            v-if="theData.date || (theData as EventCardObject).startDate"
             class="text-gray-mid-dark"
             :class="{ 'pl-2': theData.label }"
           >
@@ -60,7 +60,7 @@
                 $filters.displayDate(theData.date)
               }}
             </template>
-            <template v-else-if="theData.startDate">
+            <template v-else-if="(theData as EventCardObject).startDate">
               {{ formattedEventDates }}
             </template>
           </span>
@@ -80,7 +80,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
 import type { PropType } from 'vue'
-import type { Card } from '../../interfaces'
+import type { Card, EventCardObject } from '../../interfaces'
 import { mixinFormatEventDates } from '../../utils/mixins'
 import BaseLink from './../BaseLink/BaseLink.vue'
 import BaseImage from './../BaseImage/BaseImage.vue'
@@ -99,8 +99,9 @@ export default defineComponent({
   },
   props: {
     data: {
-      type: Object as PropType<Card>,
-      required: false
+      type: Object as PropType<Card | EventCardObject>,
+      required: false,
+      default: undefined
     }
   },
   computed: {
@@ -113,8 +114,11 @@ export default defineComponent({
       return undefined
     },
     formattedEventDates() {
-      if (this.theData?.startDate) {
-        return mixinFormatEventDates(this.theData.startDate, this.theData.endDate)
+      if ((this.theData as EventCardObject)?.startDate) {
+        return mixinFormatEventDates(
+          (this.theData as EventCardObject).startDate,
+          (this.theData as EventCardObject).endDate
+        )
       }
       return undefined
     }

package/src/constants.ts

@@ -0,0 +1,20 @@
+import type { DictionaryInterface, PillDictionaryInterface } from './interfaces'
+
+export const eduMetadataDictionary: PillDictionaryInterface = {
+  EDUExplainerArticlePage: {
+    label: 'Explainer Article',
+    variant: 'secondary'
+  },
+  EDUEventPage: {
+    variant: 'primary'
+  }
+}
+
+// TODO: finish this
+export const searchContentTypeToPageType: DictionaryInterface = {
+  news_news: 'News',
+  events_eventpage: 'EventPage',
+  missions_mission: 'Mission',
+  eduevents_edueventpage: 'EDUEventPage',
+  eduresources_eduexplainerarticlepage: 'EDUExplainerArticlePage'
+}

package/src/interfaces.ts

@@ -79,13 +79,38 @@ export interface Card {
   type?: string
   url?: string
   externalLink?: string
-  page?: Card
+  page?: Card | EventCardObject | EduResourceCardObject
   title?: string
   date?: string
-  startDate?: string
-  endDate?: string
   label?: string
   thumbnailImage?: Partial<ImageObject>
+  summary?: string
+}
+export interface EventCardObject extends Card {
+  startDate?: string
+  endDate?: string
+  startDatetime?: string
+  endDatetime?: string
+  startTime?: string
+  endTime?: string
+  customDate?: string
+  eventType?: string
+  ongoing?: boolean
+  isVirtualEvent?: boolean
+  locationName?: string
+  location?: string
+  locationLink?: string
+}
+
+export interface PrimarySubjectObject {
+  subject: string
+}
+export interface GradeLevelsObject {
+  gradeLevel: string
+}
+export interface EduResourceCardObject extends Card {
+  primarySubject: PrimarySubjectObject
+  gradeLevels: GradeLevelsObject[]
 }
 
 export interface LinkObject {
@@ -138,3 +163,16 @@ export interface Topic {
   title: string
   url: string
 }
+
+export type MetadataType = 'event' | 'resource'
+
+export interface LabelObject {
+  label?: string
+  variant: string
+}
+export interface PillDictionaryInterface {
+  [EDUExplainerArticlePage: string]: LabelObject
+}
+export interface DictionaryInterface {
+  [key: string]: string
+}

package/src/templates/PageContent/PageContent.stories.js

@@ -62,6 +62,7 @@ export const ContentPageData = {
     // via page chooser
     {
       page: {
+        __typename: 'EDUExplainerArticlePage',
         label: 'Mission',
         thumbnailImage: {
           src: {

package/src/templates/PageEventDetail/PageEventDetail.stories.js

@@ -51,7 +51,7 @@ export const BaseStory = {
             '<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'
         }
       ],
-      moreEvents: [...EventsBlockLinkCarouselData],
+      moreEvents: EventsBlockLinkCarouselData,
       speakers: [
         {
           host: 'host',

package/src/templates/PageEventDetail/PageEventDetail.vue

@@ -63,7 +63,8 @@
     <LayoutHelper indent="col-2">
       <EventDetailHero
         :image="data.eventImage"
-        :start-date-split="formattedSplitEventDates"
+        :start-date="data.startDate"
+        :end-date="data.endDate"
       />
 
       <!-- Event details -->
@@ -72,62 +73,7 @@
           class="py-1 mb-10 text-xl lg:mb-0 lg:flex"
           :class="data.registerLink && data.registerLink.length > 0 ? '' : 'lg:mb-10'"
         >
-          <div class="PageEventDetail__Metadata text-primary">
-            <IconCalendar class="relative mr-3 text-[1.2rem]" />
-            <span>{{ formattedEventDates }}</span>
-          </div>
-          <div
-            v-show="displayTime"
-            class="PageEventDetail__Metadata text-primary"
-          >
-            <IconTime class="relative mr-3" />
-            <span>{{ displayTime }}</span>
-          </div>
-          <!--Virtual location -->
-          <div
-            v-if="data.isVirtualEvent && data.locationLink"
-            itemprop="location"
-            itemscope
-            itemtype="https://schema.org/VirtualLocation"
-            class="PageEventDetail__Metadata text-primary"
-          >
-            <link
-              itemprop="url"
-              :href="data.locationLink"
-            />
-            <meta
-              itemprop="name"
-              :content="data.location"
-            />
-            <IconLocation class="relative mr-3" />
-            <BaseLink
-              variant="none"
-              :href="data.locationLink"
-              external-target-blank
-            >
-              {{ data.location }}
-            </BaseLink>
-          </div>
-          <!-- Normal location -->
-          <div
-            v-else-if="data.location"
-            class="PageEventDetail__Metadata text-primary"
-          >
-            <meta
-              itemprop="location"
-              :content="data.location"
-            />
-            <IconLocation class="relative mr-3" />
-            <BaseLink
-              v-if="data.locationLink"
-              variant="none"
-              :href="data.locationLink"
-              external-target-blank
-            >
-              {{ data.location }}
-            </BaseLink>
-            <span v-else>{{ data.location }}</span>
-          </div>
+          <MetadataEvent :event="data" />
           <div class="PageEventDetail__Buttons">
             <BaseButton
               v-if="
@@ -267,34 +213,26 @@
     </LayoutHelper>
 
     <!-- Related Events -->
-    <LayoutHelper
-      v-if="data.moreEvents && data.moreEvents.length > 0"
-      indent="col-1"
+    <div
+      v-if="moreEvents?.length > 0"
       class="my-12 lg:my-16 print:!px-4"
     >
       <BlockLinkCarousel
         item-type="cards"
         class="print:!px-4"
         heading="MORE EVENTS"
-        :items="data.moreEvents"
+        :items="moreEvents"
       />
-    </LayoutHelper>
+    </div>
   </div>
 </template>
 <script lang="ts">
 import { defineComponent } from 'vue'
-import {
-  mixinFormatEventDates,
-  mixinFormatEventTimeInHoursAndMinutes,
-  mixinFormatSplitEventDates
-} from '../../utils/mixins'
+import type { EventCardObject } from './../../interfaces'
 import LayoutHelper from './../../components/LayoutHelper/LayoutHelper.vue'
 import BaseHeading from './../../components/BaseHeading/BaseHeading.vue'
 import ShareButtons from './../../components/ShareButtons/ShareButtons.vue'
 import EventDetailHero from './../../components/EventDetailHero/EventDetailHero.vue'
-import IconCalendar from './../../components/Icons/IconCalendar.vue'
-import IconLocation from './../../components/Icons/IconLocation.vue'
-import IconTime from './../../components/Icons/IconTime.vue'
 import BaseLink from './../../components/BaseLink/BaseLink.vue'
 import BaseButton from './../../components/BaseButton/BaseButton.vue'
 import CalendarButton from './../../components/CalendarButton/CalendarButton.vue'
@@ -303,6 +241,7 @@ import BaseImagePlaceholder from './../../components/BaseImagePlaceholder/BaseIm
 import BaseImage from './../../components/BaseImage/BaseImage.vue'
 import BlockRelatedLinks from './../../components/BlockRelatedLinks/BlockRelatedLinks.vue'
 import BlockLinkCarousel from './../../components/BlockLinkCarousel/BlockLinkCarousel.vue'
+import MetadataEvent from './../../components/MetadataEvent/MetadataEvent.vue'
 // @ts-ignore
 import PlaceholderPortrait from '@explorer-1/common/src/images/svg/placeholder-portrait.svg'
 
@@ -313,9 +252,6 @@ export default defineComponent({
     BaseHeading,
     ShareButtons,
     EventDetailHero,
-    IconCalendar,
-    IconLocation,
-    IconTime,
     BaseLink,
     BaseButton,
     CalendarButton,
@@ -323,12 +259,14 @@ export default defineComponent({
     BaseImagePlaceholder,
     BaseImage,
     BlockRelatedLinks,
-    BlockLinkCarousel
+    BlockLinkCarousel,
+    MetadataEvent
   },
   props: {
     data: {
       type: Object,
-      required: false
+      required: false,
+      default: undefined
     }
   },
   data() {
@@ -337,22 +275,19 @@ export default defineComponent({
     }
   },
   computed: {
-    displayTime(): string {
-      return this.data
-        ? mixinFormatEventTimeInHoursAndMinutes(
-            this.data.startDatetime,
-            this.data.endDatetime,
-            this.data.endTime
-          )
-        : ''
-    },
-    formattedEventDates(): string {
-      return this.data ? mixinFormatEventDates(this.data.startDatetime, this.data.endDatetime) : ''
-    },
-    formattedSplitEventDates() {
-      return this.data
-        ? mixinFormatSplitEventDates(this.data.startDatetime, this.data.endDatetime)
+    moreEvents(): EventCardObject[] {
+      // mimic the data shape of a PageChooserBlock array
+      const mapped = this.data?.moreEvents
+        ? this.data.moreEvents.map((event: EventCardObject) => {
+            return {
+              page: {
+                __typename: 'EventPage',
+                ...event
+              }
+            }
+          })
         : undefined
+      return mapped
     }
   }
 })

package/src/templates/edu/PageEduEventDetail/PageEduEventDetail.stories.js

@@ -34,6 +34,7 @@ const PageEduEventDetailData = {
   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',
+  locationLink: 'https://www.nasa.gov',
   registerLink: [
     {
       document: null,
@@ -76,7 +77,7 @@ const PageEduEventDetailData = {
         '<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],
+  relatedEvents: EventsBlockLinkCarouselData,
   speakers: [
     {
       speaker: {
@@ -125,7 +126,7 @@ const PageEduEventDetailData = {
       ]
     }
   ],
-  relatedContent: BlockLinkCardCarouselData
+  relatedContent: [...BlockLinkCardCarouselData, ...EventsBlockLinkCarouselData]
 }
 // stories
 export const BaseStory = {
@@ -155,7 +156,7 @@ export const MultiDayEvent = {
       ...PageEduEventDetailData,
       startDate: '2024-08-08',
       endDate: '2024-08-12',
-      startDatetime: '2024-08-08T14:00:00-07:00',
+      startDatetime: '2024-08-08T11:00:00-07:00',
       startTime: '15:00:00',
       endDatetime: '2024-08-12T22:00:00-07:00'
     }

package/src/templates/edu/PageEduEventDetail/PageEduEventDetail.vue

@@ -38,17 +38,12 @@
         :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 print:hidden"
-      >
-        <div class="font-extrabold text-6xl leading-tight tracking-wider">
-          {{ formattedSplitEventDates.month }}
-        </div>
-        <div class="text-subtitle">
-          {{ formattedSplitEventDates.year }}
-        </div>
-      </div>
+      <CalendarChip
+        v-if="startDatetimeForFormatting"
+        :start-date="startDatetimeForFormatting"
+        :end-date="data.endDatetime"
+        :ongoing="data.ongoing"
+      />
     </div>
     <LayoutHelper
       indent="col-2"
@@ -58,12 +53,12 @@
         v-if="data.eventType"
         class="flex flex-wrap items-start mb-4"
       >
-        <BaseTag
+        <BasePill
           variant="primary"
           size="lg"
         >
           {{ data.eventType }}
-        </BaseTag>
+        </BasePill>
       </div>
       <BaseHeading
         level="h1"
@@ -90,7 +85,8 @@
       <EventDetailHero
         v-if="heroIsInline"
         :image="data.eventImage"
-        :start-date-split="formattedSplitEventDates"
+        :start-date="startDatetimeForFormatting"
+        :end-date="data.endDate"
         :constrain="data.heroConstrain"
         :ongoing="data.ongoing"
       />
@@ -98,73 +94,12 @@
       <!-- Event details -->
       <div>
         <div
-          class="py-1 mb-10 text-xl lg:mb-0 lg:flex"
+          class="py-1 mb-10 lg:mb-0 lg:flex"
           :class="data.registerLink && data.registerLink.length > 0 ? '' : 'lg:mb-10'"
         >
-          <div
-            v-if="data.ongoing || data.customDate || formattedEventDates"
-            class="PageEduEventDetail__Metadata text-primary"
-            :class="{ 'flex-2': data.customDate }"
-          >
-            <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 lg:mr-2 xl:mr-3" />
-            <span>{{ displayTime }}</span>
-          </div>
-          <!--Virtual location -->
-          <div
-            v-if="data.isVirtualEvent && data.locationLink"
-            itemprop="location"
-            itemscope
-            itemtype="https://schema.org/VirtualLocation"
-            class="PageEduEventDetail__Metadata text-primary"
-          >
-            <link
-              itemprop="url"
-              :href="data.locationLink"
-            />
-            <meta
-              itemprop="name"
-              :content="data.locationName"
-            />
-            <IconLocation class="relative mr-3 lg:mr-2 xl:mr-3" />
-            <BaseLink
-              variant="none"
-              class="text-action"
-              :href="data.locationLink"
-              external-target-blank
-            >
-              {{ data.locationName }}
-            </BaseLink>
-          </div>
-          <!-- 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 lg:mr-2 xl:mr-3" />
-            <BaseLink
-              v-if="data.locationLink"
-              variant="none"
-              :href="data.locationLink"
-              external-target-blank
-            >
-              {{ data.locationName }}
-            </BaseLink>
-            <span v-else>{{ data.locationName }}</span>
-          </div>
+          <MetadataEvent :event="data" />
 
-          <div class="PageEduEventDetail__Buttons">
+          <div class="PageEduEventDetail__Buttons max-w-[17rem]">
             <BaseButton
               v-if="
                 data.registerLink &&
@@ -313,18 +248,17 @@
     </LayoutHelper>
 
     <!-- Related Events -->
-    <LayoutHelper
-      v-if="data.relatedEvents?.length"
-      indent="col-1"
+    <div
+      v-if="relatedEvents?.length"
       class="my-12 lg:my-16 px-0"
     >
       <BlockLinkCarousel
         item-type="cards"
         size="h3"
         heading="Related Events"
-        :items="data.relatedEvents"
+        :items="relatedEvents"
       />
-    </LayoutHelper>
+    </div>
     <!-- Related Content -->
     <div
       v-if="data.relatedContent?.length"
@@ -341,20 +275,13 @@
 </template>
 <script lang="ts">
 import { defineComponent } from 'vue'
-import {
-  mixinFormatEventDates,
-  mixinFormatEventTimeInHoursAndMinutes,
-  mixinFormatSplitEventDates
-} from '../../../utils/mixins'
+import type { EventCardObject } from './../../../interfaces'
 import LayoutHelper from './../../../components/LayoutHelper/LayoutHelper.vue'
 import BaseHeading from './../../../components/BaseHeading/BaseHeading.vue'
-import BaseTag from './../../../components/BaseTag/BaseTag.vue'
+import BasePill from './../../../components/BasePill/BasePill.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 BaseLink from './../../../components/BaseLink/BaseLink.vue'
 import BaseButton from './../../../components/BaseButton/BaseButton.vue'
 import CalendarButton from './../../../components/CalendarButton/CalendarButton.vue'
@@ -364,6 +291,8 @@ 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'
+import CalendarChip from './../../../components/CalendarChip/CalendarChip.vue'
+import MetadataEvent from './../../../components/MetadataEvent/MetadataEvent.vue'
 
 // @ts-ignore
 import PlaceholderPortrait from '@explorer-1/common/src/images/svg/placeholder-portrait.svg'
@@ -373,13 +302,10 @@ export default defineComponent({
   components: {
     LayoutHelper,
     BaseHeading,
-    BaseTag,
+    BasePill,
     ShareButtonsEdu,
     EventDetailHero,
     HeroMedia,
-    IconCalendar,
-    IconLocation,
-    IconTime,
     BaseLink,
     BaseButton,
     CalendarButton,
@@ -388,7 +314,9 @@ export default defineComponent({
     BaseImage,
     BlockRelatedLinks,
     BlockLinkCarousel,
-    BlockText
+    BlockText,
+    CalendarChip,
+    MetadataEvent
   },
   props: {
     data: {
@@ -403,35 +331,23 @@ export default defineComponent({
     }
   },
   computed: {
-    startDateTimeForFormatting(): string {
+    startDatetimeForFormatting(): string {
       return this.data?.startDatetime || this.data?.startDate
     },
-    displayTime(): string {
-      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 | undefined {
-      return this.data && this.startDateTimeForFormatting
-        ? mixinFormatEventDates(this.startDateTimeForFormatting, this.data.endDatetime)
-        : undefined
-    },
-    formattedSplitEventDates() {
-      return this.data && this.startDateTimeForFormatting
-        ? mixinFormatSplitEventDates(this.startDateTimeForFormatting, this.data.endDatetime)
-        : undefined
-    },
     heroIsInline(): boolean {
       return this.data?.heroPosition === 'inline'
+    },
+    relatedEvents(): EventCardObject[] {
+      // mimic the data shape of a PageChooserBlock array
+      const mapped = this.data?.relatedEvents
+        ? this.data.relatedEvents.map((event: EventCardObject) => {
+            return {
+              __typename: 'EDUEventPage',
+              page: event
+            }
+          })
+        : undefined
+      return mapped
     }
   }
 })
@@ -461,7 +377,6 @@ export default defineComponent({
     @apply mt-10;
     @apply lg:mt-0;
     @apply text-center;
-    @apply max-w-[17rem];
   }
   .bg-stars .MixinCarousel__Heading {
     @apply text-white;

package/src/utils/mixins.ts

@@ -307,7 +307,7 @@ export const mixinFormatSplitEventDates = (
 }
 
 // return event dates formatted for listing cards
-export const mixinFormatEventDates = (startDatetime: string, endDatetime?: string): string => {
+export const mixinFormatEventDates = (startDatetime?: string, endDatetime?: string): string => {
   const startDateDayjs = dayjs(startDatetime)
 
   let eventDate = startDateDayjs.format('ll')
@@ -352,7 +352,7 @@ export const mixinFormatEventTimeInHoursAndMinutes = (
     // 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')}`
+        time = `${startDateDayjs.format('h:mm')}-${endDateDayjs.format('h:mm a z')}`
       } else {
         time = `${startDateDayjs.format('h:mm a')} - ${endDateDayjs.format('h:mm a z')}`
       }