@explorer-1/vue 0.1.7 → 0.1.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@explorer-1/vue",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "private": false,
   "publishConfig": {
     "access": "public"

package/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"

package/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"

package/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,

package/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

package/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"

package/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"

package/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>

package/src/components/BlockLinkCard/BlockLinkCard.vue

@@ -58,7 +58,7 @@
 
       <component
         :is="headingLevel || 'p'"
-        class="text-gray-dark text-xl font-medium leading-tight tracking-tight"
+        class="text-gray-dark text-xl font-medium leading-tight tracking-tight edu:font-extrabold"
         :class="{ 'lg:text-3xl': !compact }"
       >
         {{ theItem.title }}

package/src/components/BlockLinkTile/BlockLinkTile.vue

@@ -59,7 +59,7 @@
           </p>
           <component
             :is="headingLevel || 'p'"
-            class="text-xl leading-tight tracking-tight transition-all duration-200 ease-in delay-200"
+            class="text-xl leading-tight tracking-tight transition-all duration-200 ease-in delay-200 edu:font-extrabold"
             :class="
               compact
                 ? 'font-semibold mb-0 lg:group-hover:mb-1'

package/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"
       />

package/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",

package/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
     }
   }
 })

package/src/components/NavSecondary/NavSecondary.vue

@@ -8,7 +8,7 @@
   >
     <div class="max-w-screen-3xl mx-auto">
       <div
-        class="nav-secondary-container lg:container lg:px-0 lg:whitespace-normal border-gray-mid text-gray-mid-dark lg:overflow-visible relative px-4 pb-0 mx-auto overflow-x-auto text-sm font-medium whitespace-nowrap border-t border-opacity-50"
+        class="nav-secondary-container lg:container lg:px-0 lg:whitespace-normal border-gray-mid text-gray-mid-dark lg:overflow-visible relative px-4 pb-0 mx-auto overflow-x-auto text-sm font-medium whitespace-nowrap border-t border-opacity-50 edu:border-0"
       >
         <div class="lg:ml-0 2xl:-mr-3 lg:justify-end flex -ml-3">
           <template v-for="(item, index) in theBreadcrumb">
@@ -139,7 +139,7 @@ export default defineComponent({
 <style lang="scss">
 .NavSecondary {
   top: -1px; // for intersection observer to work
-  @apply sticky z-50 w-full bg-white border-b edu:border-0 border-gray-mid border-opacity-0 transition-border-opacity duration-150 ease-in;
+  @apply sticky z-40 w-full bg-white border-b edu:border-0 border-gray-mid border-opacity-0 transition-border-opacity duration-150 edu:duration-300 ease-in;
   @apply hidden;
   @screen lg {
     @apply block;
@@ -188,4 +188,10 @@ export default defineComponent({
     }
   }
 }
+// since we depend on a body class, the edu: prefix won't work as usual and requires the below line
+body.header-sticky-showing .ThemeEdu .NavSecondary {
+  @screen lg {
+    @apply top-[4.45rem];
+  }
+}
 </style>

package/src/components/ShareButtonsEdu/ShareButtonsEdu.vue

@@ -68,6 +68,11 @@ const twitterLink = computed((): string => {
 const pinterestLink = computed(() => {
   return `http://pinterest.com/pin/create/button/?url=${encodedURL.value}&media=${props.image}&description=${encodedTitle.value}`
 })
+
+const googleClassroomLink = computed(() => {
+  return `https://classroom.google.com/share?url=${encodedURL.value}`
+})
+
 const mailLink = computed((): string => {
   return `mailto:?body=${encodedTitle.value}:%20${encodedURL.value}&subject=${encodedTitle.value}`
 })
@@ -178,7 +183,7 @@ const buttonClass = computed(() => {
 
           <BaseButton
             variant="social"
-            href="#"
+            :href="googleClassroomLink"
             aria-label="Google Classroom"
             target="_blank"
             rel="noopener"

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

package/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"

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

package/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>

package/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"

package/src/utils/filters.js

@@ -1,4 +1,5 @@
-import dayjs from './dayjs'
+// must include `.js`
+import dayjs from './dayjs.js'
 
 const filters = {
   // To support more locales update add imports to dayjs.js'

package/src/utils/mixins.ts

@@ -213,7 +213,11 @@ export const mixinGetExternalLink = (link: RelatedLinkObject): string | undefine
 // Gets the fully qualified canonical URL of the current page if passed $route.path string
 export const mixinCanonicalUrl = (path: string): string => {
   const domain = 'https://www.jpl.nasa.gov'
-  return domain + path
+  if (path.startsWith('http')) {
+    return path
+  } else {
+    return domain + path
+  }
 }
 // Used to construct an array of image objects to use with BaseLightbox
 // TODO: currently only assembles an array of 1 item (single image lightbox).