@explorer-1/vue 0.1.8 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@explorer-1/vue",
-  "version": "0.1.8",
+  "version": "0.2.0",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -28,7 +28,7 @@
     "vue": "^3.4.21",
     "vue-observe-visibility": "^1.0.0",
     "vue3-compare-image": "^1.2.5",
-    "@explorer-1/common": "1.0.5"
+    "@explorer-1/common": "1.1.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.4",

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

@@ -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;
@@ -184,8 +184,14 @@ export default defineComponent({
       }
     }
     @screen lg {
-      @apply top-28 edu:top-18;
+      @apply top-28;
     }
   }
 }
+// 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/TheFooter/TheFooter.vue

@@ -32,7 +32,7 @@
       <div class="footer-extras lg:col-span-3 col-span-12">
         <!-- email sign up -->
         <div class="text-subtitle text-blue edu:text-white lg:mb-5 mb-3">
-          Get the Latest from JPL
+          {{ `Get the Latest from JPL ${themeStore.isEdu ? 'Education' : ''} ` }}
         </div>
         <TheFooterSignUp class="lg:mb-10 mb-8" />
         <!-- social media -->
@@ -101,9 +101,7 @@
       <div class="3xl:px-0 container px-4 mx-auto">
         <div v-if="data && data.relatedNasaSites">
           <div class="text-subtitle text-blue edu:text-white mb-5">
-            <template v-if="themeStore.theme === 'ThemeEdu'">
-              Related NASA Education Sites
-            </template>
+            <template v-if="themeStore.isEdu"> Related NASA Education Sites </template>
             <template v-else> Related NASA Sites </template>
           </div>
           <div class="auto-col-4">
@@ -148,9 +146,9 @@
         >
           <div
             v-if="commitSha"
-            class="lg:inline-block lg:mb-0 block px-3 mb-2"
+            class="lg:inline-block lg:mb-0 block pr-4 mb-2"
           >
-            <span class="text-gray-light font-bold">Version:</span>
+            <span class="text-gray-light font-bold inline-block pr-1">Version:</span>
             <span>{{ commitSha }}</span>
           </div>
           <div
@@ -159,7 +157,7 @@
             class="lg:inline-block lg:mb-0 block mb-2"
             :class="{ 'ml-5': index !== 0 }"
           >
-            <span class="font-bold">{{ item.label }}:</span>
+            <span class="font-bold inline-block pr-1">{{ item.label }}:</span>
             <span>{{ item.text }}</span>
           </div>
         </div>
@@ -168,7 +166,7 @@
             v-if="commitSha != null"
             class="lg:inline-block lg:mb-0 block px-3 mb-2"
           >
-            <span class="text-gray-light font-bold">Version:</span>
+            <span class="text-gray-light font-bold inline-block pr-1">Version:</span>
             <span>{{ commitSha }}</span>
           </div>
         </div>

package/src/main.ts

@@ -6,7 +6,7 @@ import filters from './utils/filters'
 // @ts-ignore
 import vClickOutside from 'click-outside-vue3'
 import VueCompareImage from 'vue3-compare-image'
-import './assets/scss/styles.scss'
+import './assets/scss/styles-with-fonts.scss'
 import App from './App.vue'
 
 const pinia = createPinia()

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'