@explorer-1/vue 0.2.40 → 0.2.41

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@explorer-1/vue",
-  "version": "0.2.40",
+  "version": "0.2.41",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -30,7 +30,7 @@
     "vue-bind-once": "^0.2.1",
     "vue-observe-visibility": "^1.0.0",
     "vue3-compare-image": "^1.2.5",
-    "@explorer-1/common": "1.1.11"
+    "@explorer-1/common": "1.1.12"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.4",

package/src/components/BaseButton/BaseButton.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { defineComponent, resolveComponent } from 'vue'
 
 interface Variants {
   [key: string]: string
@@ -54,11 +54,11 @@ export default defineComponent({
   },
   emits: ['click'],
   computed: {
-    tag(): string {
+    tag() {
       if (this.disabled) {
         return 'button'
       } else if (this.to) {
-        return 'nuxt-link'
+        return resolveComponent('NuxtLink')
       } else if (this.href) {
         return 'a'
       } else {

package/src/components/BaseImageCaption/BaseImageCaption.vue

@@ -31,7 +31,10 @@ export default defineComponent({
     v-if="data"
     class="BaseImageCaption text-body-sm"
   >
-    <div class="inline mr-2">
+    <div
+      v-if="data.caption || data.credit"
+      class="inline mr-2"
+    >
       <div
         class="the-caption-text inline"
         v-html="data.caption"
@@ -44,20 +47,20 @@ export default defineComponent({
       </span>
     </div>
     <BaseLink
-      v-if="data.detailUrl"
+      v-if="customLink"
       class="inline-block"
       variant="default"
-      :to="data.detailUrl"
+      :to="customLink"
     >
-      Full Image Details
+      {{ customLinkText }}
     </BaseLink>
     <BaseLink
-      v-else-if="customLink"
+      v-else-if="data.detailUrl"
       class="inline-block"
       variant="default"
-      :to="customLink"
+      :to="data.detailUrl"
     >
-      {{ customLinkText }}
+      Full Image Details
     </BaseLink>
   </div>
 </template>

package/src/components/BlockImage/BlockImageFullBleed.vue

@@ -1,6 +1,9 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
 import type { PropType } from 'vue'
+import { mapStores } from 'pinia'
+import { useThemeStore } from '../../store/theme'
+
 import MixinFancybox from './../MixinFancybox/MixinFancybox.vue'
 import BaseImage from './../BaseImage/BaseImage.vue'
 import BaseImagePlaceholder from './../BaseImagePlaceholder/BaseImagePlaceholder.vue'
@@ -19,7 +22,7 @@ export default defineComponent({
   props: {
     data: {
       type: Object as PropType<ImageObject>,
-      required: false
+      default: undefined
     },
     // if a caption should even be visible
     displayCaption: {
@@ -29,7 +32,12 @@ export default defineComponent({
     // overrides caption provided with image model
     caption: {
       type: String,
-      required: false
+      default: undefined
+    },
+    // overrides detail url provided with image model. Also forces hasCaption to be true
+    customDetailUrl: {
+      type: String,
+      default: undefined
     },
     // if the image should be constrained to a fixed aspect ratio (21:9 on smaller screens, 2:1 on larger screens)
     constrain: {
@@ -43,6 +51,7 @@ export default defineComponent({
     }
   },
   computed: {
+    ...mapStores(useThemeStore),
     theCaption(): string | undefined {
       if (this.caption && this.caption.length > 2 && this.displayCaption) {
         return this.caption
@@ -59,19 +68,36 @@ export default defineComponent({
     theSrcSet(): string | undefined {
       return this.theData ? mixinGetSrcSet(this.theData) : undefined
     },
+    theCredit() {
+      if (this.themeStore.isEdu && !this.displayCaption) {
+        return undefined
+      }
+      return this.data?.credit
+    },
     // reform the data object with the computed caption
     theData(): ImageObject | undefined {
       if (this.data) {
         return {
           ...this.data,
-          caption: this.theCaption
+          caption: this.theCaption,
+          credit: this.theCredit,
+          detailUrl: this.customDetailUrl
         }
       }
       return undefined
     },
     hasCaptionArea(): boolean {
-      if (this.data && (this.theCaption || this.data.credit || this.data.detailUrl)) {
-        return true
+      if (this.data) {
+        if (this.themeStore.isEdu) {
+          return this.theData?.caption || this.customDetailUrl ? true : false
+        } else if (
+          this.theData?.caption ||
+          this.theData?.credit ||
+          this.theData?.detailUrl ||
+          this.customDetailUrl
+        ) {
+          return true
+        }
       }
       return false
     }
@@ -87,7 +113,7 @@ export default defineComponent({
           :src="theData.original || theData.src?.url"
           :caption="theData.caption"
           :credit="theData.credit"
-          :detail-url="theData.detailUrl"
+          :detail-url="customDetailUrl || theData.detailUrl"
         >
           <BaseImagePlaceholder
             :aspect-ratio="constrain ? '16:9' : 'none'"
@@ -113,7 +139,11 @@ export default defineComponent({
       v-if="data && hasCaptionArea"
       class="max-w-screen-3xl p-4 pb-0 mx-auto"
     >
-      <BaseImageCaption :data="theData" />
+      <BaseImageCaption
+        :data="theData"
+        :custom-link="customDetailUrl"
+        custom-link-text="Full Image Details"
+      />
     </div>
   </div>
 </template>

package/src/components/BlockImage/BlockImageStandard.vue

@@ -1,7 +1,8 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
 import type { PropType } from 'vue'
-
+import { mapStores } from 'pinia'
+import { useThemeStore } from '../../store/theme'
 import type { ImageObject } from './../../interfaces'
 import MixinFancybox from './../MixinFancybox/MixinFancybox.vue'
 import BaseImage from './../BaseImage/BaseImage.vue'
@@ -19,7 +20,7 @@ export default defineComponent({
   props: {
     data: {
       type: Object as PropType<ImageObject>,
-      required: false
+      default: undefined
     },
     // if a caption should even be visible
     displayCaption: {
@@ -29,7 +30,12 @@ export default defineComponent({
     // overrides caption provided with image model
     caption: {
       type: String,
-      required: false
+      default: undefined
+    },
+    // overrides detail url provided with image model. Also forces hasCaption to be true
+    customDetailUrl: {
+      type: String,
+      default: undefined
     },
     // if the image should be constrained to a 16:9 aspect ratio
     constrain: {
@@ -38,6 +44,7 @@ export default defineComponent({
     }
   },
   computed: {
+    ...mapStores(useThemeStore),
     theCaption(): string | undefined {
       if (this.caption && this.caption.length > 2 && this.displayCaption) {
         return this.caption
@@ -51,19 +58,36 @@ export default defineComponent({
       }
       return undefined
     },
+    theCredit() {
+      if (this.themeStore.isEdu && !this.displayCaption) {
+        return undefined
+      }
+      return this.data?.credit
+    },
     // reform the data object with the computed caption
     theData(): ImageObject | undefined {
       if (this.data) {
         return {
           ...this.data,
-          caption: this.theCaption
+          caption: this.theCaption,
+          credit: this.theCredit,
+          detailUrl: this.customDetailUrl
         }
       }
       return undefined
     },
     hasCaptionArea(): boolean {
-      if (this.data && (this.theCaption || this.data.credit || this.data.detailUrl)) {
-        return true
+      if (this.theData) {
+        if (this.themeStore.isEdu) {
+          return this.theData.caption || this.customDetailUrl ? true : false
+        } else if (
+          this.theData.caption ||
+          this.theData.credit ||
+          this.theData.detailUrl ||
+          this.customDetailUrl
+        ) {
+          return true
+        }
       }
       return false
     }
@@ -77,7 +101,7 @@ export default defineComponent({
       :src="theData.original || theData.src?.url"
       :caption="theData.caption"
       :credit="theData.credit"
-      :detail-url="theData.detailUrl"
+      :detail-url="customDetailUrl || theData.detailUrl"
     >
       <BaseImagePlaceholder
         :aspect-ratio="constrain ? '16:9' : 'none'"
@@ -100,7 +124,11 @@ export default defineComponent({
       v-if="theData && hasCaptionArea"
       class="lg:px-0 p-4 pb-0 print:pl-0"
     >
-      <BaseImageCaption :data="theData" />
+      <BaseImageCaption
+        :data="theData"
+        :custom-link="customDetailUrl"
+        custom-link-text="Full Image Details"
+      />
     </div>
   </div>
 </template>

package/src/components/BlockImageComparison/BlockImageComparison.vue

@@ -1,38 +1,41 @@
 <template>
   <div v-if="data">
-    <client-only placeholder="Loading Image Comparison...">
-      <VueCompareImage
-        v-if="theBeforeImageSrc && theAfterImageSrc"
-        class="h-full animate-fadeIn"
-        :left-image="theBeforeImageSrc.url"
-        left-image-alt="Left image"
-        :right-image="theAfterImageSrc.url"
-        right-image-alt="Right image"
-      />
-    </client-only>
+    <VueCompareImage
+      v-if="theBeforeImageSrc && theAfterImageSrc"
+      class="h-full animate-fadeIn"
+      :left-image="theBeforeImageSrc.url"
+      left-image-alt="Left image"
+      :right-image="theAfterImageSrc.url"
+      right-image-alt="Right image"
+    />
     <div
-      v-if="data.caption && data.caption.length > 2"
-      class="text-gray-mid-dark mt-3"
-      v-html="data.caption"
-    ></div>
+      v-if="data.caption || customDetailUrl"
+      class="lg:px-0 p-4 pb-0 print:pl-0"
+    >
+      <BaseImageCaption
+        :data="{ caption: data.caption }"
+        :custom-link="customDetailUrl"
+        custom-link-text="Full Image Details"
+      />
+    </div>
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue'
-// import VueCompareImage from 'vue3-compare-image'
-
-// const VueCompareImage = process.browser ? require('vue3-compare-image') : null
+import BaseImageCaption from './../BaseImageCaption/BaseImageCaption.vue'
 
 export default defineComponent({
   name: 'BlockImageComparison',
-  // components: {
-  //   VueCompareImage,
-  // },
+  components: { BaseImageCaption },
   props: {
     data: {
       type: Object,
       required: true
+    },
+    customDetailUrl: {
+      type: String,
+      default: undefined
     }
   },
   computed: {

package/src/components/BlockRelatedLinks/RelatedLink.vue

@@ -18,7 +18,7 @@
   </component>
 </template>
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { defineComponent, resolveComponent } from 'vue'
 import IconArrow from './../Icons/IconArrow.vue'
 import IconDownload from './../Icons/IconDownload.vue'
 import IconExternal from './../Icons/IconExternal.vue'
@@ -59,7 +59,7 @@ export default defineComponent({
   computed: {
     tag() {
       if (this.to) {
-        return 'nuxt-link'
+        return resolveComponent('NuxtLink')
       } else {
         return 'a'
       }

package/src/components/BlockVideo/BlockVideo.vue

@@ -9,15 +9,21 @@
     />
 
     <div
-      v-if="(data.caption && data.caption.length > 2) || data.credit"
+      v-if="hasCaption"
       class="lg:px-0 p-4 pb-0 print:pl-0"
     >
-      <BaseImageCaption :data="data" />
+      <BaseImageCaption
+        :data="data"
+        :custom-link="customDetailUrl"
+        custom-link-text="Full Video Details"
+      />
     </div>
   </div>
 </template>
 <script lang="ts">
 import { defineComponent } from 'vue'
+import { mapStores } from 'pinia'
+import { useThemeStore } from '../../store/theme'
 import BaseVideo from './../BaseVideo/BaseVideo.vue'
 import BaseImageCaption from './../BaseImageCaption/BaseImageCaption.vue'
 
@@ -35,6 +41,20 @@ export default defineComponent({
     autoplay: {
       type: Boolean,
       default: false
+    },
+    customDetailUrl: {
+      type: String,
+      default: undefined
+    }
+  },
+  computed: {
+    ...mapStores(useThemeStore),
+    hasCaption() {
+      if (this.themeStore.isEdu) {
+        return this.data?.caption || this.customDetailUrl
+      } else {
+        return this.data?.caption || this.data?.credit || this.customDetailUrl
+      }
     }
   }
 })

package/src/components/BlockVideoEmbed/BlockVideoEmbed.vue

@@ -10,10 +10,14 @@
       <div v-html="data.embed.embed"></div>
     </BaseImagePlaceholder>
     <div
-      v-if="data.caption"
+      v-if="data.caption || customDetailUrl"
       class="lg:px-0 p-4 print:pl-0"
     >
-      <BaseImageCaption :data="data" />
+      <BaseImageCaption
+        :data="data"
+        :custom-link="customDetailUrl"
+        custom-link-text="Full Video Details"
+      />
     </div>
   </div>
 </template>
@@ -45,6 +49,10 @@ export default defineComponent({
       type: Object as PropType<Partial<BlockData>>,
       required: false,
       default: undefined
+    },
+    customDetailUrl: {
+      type: String,
+      default: undefined
     }
   },
   mounted() {

package/src/components/DetailHeadline/DetailHeadline.vue

@@ -100,12 +100,13 @@
         <span :itemprop="schema ? 'name' : undefined"> Jet Propulsion Laboratory </span>
         <span :itemprop="schema ? 'url' : undefined"> https://www.jpl.nasa.gov/ </span>
       </span>
-      <span v-if="publicationDate">
-        <meta
-          v-if="schema"
-          itemprop="datePublished"
-          :content="pubDatetime"
-        />
+      <meta
+        v-if="schema && publicationDate"
+        itemprop="datePublished"
+        :content="pubDatetime"
+      />
+
+      <span v-if="publicationDate && !hideDate">
         {{
           // @ts-ignore
           $filters.displayDate(publicationDate)
@@ -186,6 +187,10 @@ export default defineComponent({
     schema: {
       type: Boolean,
       default: false
+    },
+    hideDate: {
+      type: Boolean,
+      default: false
     }
   },
   computed: {

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

@@ -1,4 +1,3 @@
-import { BlockKeyPointsData } from './../../../components/BlockKeyPoints/BlockKeyPoints.stories'
 import { BlockLinkCardCarouselData } from './../../../components/BlockLinkCarousel/BlockLinkCarousel.stories.js'
 import { EventsBlockLinkCarouselData } from './../../../components/BlockLinkCarousel/BlockLinkCarousel.stories'
 import { AboutTheAuthorData } from './../../../components/AboutTheAuthor/AboutTheAuthor.stories'
@@ -33,6 +32,12 @@ const PageEduGalleryDetailData = {
   authors: AboutTheAuthorData,
 
   body: [
+    {
+      blockType: 'HeadingBlock',
+      heading: 'Gallery Body',
+      level: 'h2',
+      size: 'h2'
+    },
     {
       blockType: 'RichTextBlock',
       value:
@@ -75,6 +80,7 @@ export const BaseStory = {
         {
           blockId: `${Math.random().toString(36).slice(2)}`,
           heading: 'Gallery Item Heading',
+          externalLink: 'https://nasa.gov',
           description:
             '<p data-block-key="53wg6">Description that is <strong>rich text</strong>.</p>',
           media: [{ ...BlockImageData, blockType: 'ImageBlock' }]
@@ -82,22 +88,25 @@ export const BaseStory = {
         {
           blockId: `${Math.random().toString(36).slice(2)}`,
           heading: 'Gallery Item Heading',
+          externalLink: 'https://nasa.gov',
           description:
-            '<p data-block-key="53wg6">Description that is <strong>rich text</strong>.</p>',
+            '<p data-block-key="5f55p">Description with richtext images.</p><img alt="Perseverance Looks Back at &amp;#x27;Bright Angel&amp;#x27;" class="richtext-image full-width" height="600" src="https://picsum.photos/800/600" width="800"><p data-block-key="89jcq">More text and an image that&#x27;s full width (above)</p><p data-block-key="6jsp"></p><img alt="Carbon Mapper Coalition&amp;#x27;s Tanager Satellite" class="richtext-image right" height="263" src="https://picsum.photos/500/263" width="500"><p data-block-key="4409g">More text and an image that&#x27;s right-aligned. Morbi mollis magna erat, a tristique libero laoreet ut. Curabitur sit amet arcu laoreet, aliquet nibh at, dictum sapien. Duis a tempus nibh. Phasellus porta felis id diam fringilla tincidunt. Curabitur eget gravida leo. Vestibulum sapien nibh, pharetra eget ornare eu, tristique at purus.</p><p data-block-key="bid36"></p><img alt="Lecture Brings Galileo&amp;#x27;s Travels into Final Focus" class="richtext-image left" height="273" src="https://picsum.photos/500/273" width="500"><p data-block-key="1f4rd">More text and an image that&#x27;s left-aligned. Morbi mollis magna erat, a tristique libero laoreet ut. Curabitur sit amet arcu laoreet, aliquet nibh at, dictum sapien. Duis a tempus nibh. Phasellus porta felis id diam fringilla tincidunt. Curabitur eget gravida leo. Vestibulum sapien nibh, pharetra eget ornare eu, tristique at purus. Duis id risus sit amet est maximus placerat a quis sem. Donec lacus sem, cursus at quam sit amet, consequat vestibulum nulla. </p>',
           media: [BlockImageComparisonData]
         },
         {
           blockId: `${Math.random().toString(36).slice(2)}`,
           heading: 'Gallery Item Heading',
+          externalLink: 'https://nasa.gov',
           description:
-            '<p data-block-key="53wg6">Description that is <strong>rich text</strong>.</p>',
+            '<p data-block-key="5f55p">Description with a richtext embedded video below it.</p><div>\n    <iframe width="200" height="113" src="https://www.youtube.com/embed/C5aC-U9jHDE?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen title="How Do We Know Where Faraway Spacecraft Are?"></iframe>\n</div>\n<p data-block-key="4t2tv">More text below the embedded video.</p>',
           media: [BlockVideoData.block]
         },
         {
           blockId: `${Math.random().toString(36).slice(2)}`,
           heading: 'Gallery Item Heading',
+          externalLink: 'https://nasa.gov',
           description:
-            '<p data-block-key="53wg6">Description that is <strong>rich text</strong>.</p>',
+            '<p data-block-key="5f55p">Description with richtext images.</p><img alt="Perseverance Looks Back at &amp;#x27;Bright Angel&amp;#x27;" class="richtext-image full-width" height="600" src="https://picsum.photos/800/600" width="800"><p data-block-key="89jcq">More text and another image that&#x27;s full width (above)</p><p data-block-key="6jsp"></p><img alt="Carbon Mapper Coalition&amp;#x27;s Tanager Satellite" class="richtext-image right" height="263" src="https://picsum.photos/500/263" width="500"><p data-block-key="4409g">Short text in-between two floating images.</p><p data-block-key="bid36"></p><img alt="Lecture Brings Galileo&amp;#x27;s Travels into Final Focus" class="richtext-image left" height="273" src="https://picsum.photos/500/273" width="500"><p data-block-key="1f4rd">More text and something that&#x27;s left-aligned. Morbi mollis magna erat, a tristique libero laoreet ut. Curabitur sit amet arcu laoreet, aliquet nibh at, dictum sapien. Duis a tempus nibh. Phasellus porta felis id diam fringilla tincidunt. Curabitur eget gravida leo. Vestibulum sapien nibh, pharetra eget ornare eu, tristique at purus.</p>',
           media: [BlockVideoEmbedData.data]
         }
       ]

package/src/templates/edu/PageEduGalleryDetail/PageEduGalleryDetail.vue

@@ -16,6 +16,7 @@ import BlockVideoEmbed from './../../../components/BlockVideoEmbed/BlockVideoEmb
 import BlockRelatedLinks from './../../../components/BlockRelatedLinks/BlockRelatedLinks.vue'
 import BlockLinkCarousel from './../../../components/BlockLinkCarousel/BlockLinkCarousel.vue'
 import BlockText from './../../../components/BlockText/BlockText.vue'
+import BlockStreamfield from './../../../components/BlockStreamfield/BlockStreamfield.vue'
 import NavJumpMenu from './../../../components/NavJumpMenu/NavJumpMenu.vue'
 import AboutTheAuthor from './../../../components/AboutTheAuthor/AboutTheAuthor.vue'
 import { getHeadingId } from '../../../utils/getHeadingId'
@@ -25,6 +26,7 @@ interface PageEduGalleryObject extends PageEduResourcesObject {
     blockId: string
     heading?: string
     description?: string
+    externalLink?: string
     media: StreamfieldBlockData[]
   }[]
 }
@@ -57,6 +59,7 @@ const jumpMenuHeadings = computed((): BreadcrumbPathObject[] => {
   }
   return itemHeadings
 })
+
 const { data } = reactive(props)
 </script>
 <template>
@@ -77,6 +80,7 @@ const { data } = reactive(props)
         :publication-date="data.publicationDate"
         schema
         pill
+        hide-date
       />
       <ShareButtonsEdu
         v-if="data?.url"
@@ -104,7 +108,10 @@ const { data } = reactive(props)
       :key="index"
       class="PageEduGalleryDetailItem"
     >
-      <template v-if="item.media?.length">
+      <div
+        v-if="item.media?.length"
+        class="PageEduGalleryDetailItem__media mb-5 lg:mb-12"
+      >
         <template
           v-for="(block, _media_index) in item.media"
           :key="_media_index"
@@ -113,41 +120,41 @@ const { data } = reactive(props)
             <LayoutHelper
               v-if="block.image"
               indent="col-2"
-              class="mb-5 lg:mb-10"
             >
               <BlockImageStandard
                 :data="block.image"
                 :caption="block.caption"
                 :display-caption="block.displayCaption"
+                :custom-detail-url="item.externalLink"
               />
             </LayoutHelper>
           </template>
           <template v-else-if="block.blockType === 'ImageComparisonBlock'">
-            <LayoutHelper
-              indent="col-2"
-              class="mb-5 lg:mb-10"
-            >
-              <BlockImageComparison :data="block" />
+            <LayoutHelper indent="col-2">
+              <BlockImageComparison
+                :data="block"
+                :custom-detail-url="item.externalLink"
+              />
             </LayoutHelper>
           </template>
           <template v-else-if="block.blockType === 'VideoBlock'">
-            <LayoutHelper
-              indent="col-2"
-              class="mb-5 lg:mb-10"
-            >
-              <BlockVideo :data="block" />
+            <LayoutHelper indent="col-2">
+              <BlockVideo
+                :data="block"
+                :custom-detail-url="item.externalLink"
+              />
             </LayoutHelper>
           </template>
           <template v-else-if="block.blockType === 'VideoEmbedBlock'">
-            <LayoutHelper
-              indent="col-2"
-              class="mb-5 lg:mb-10"
-            >
-              <BlockVideoEmbed :data="block" />
+            <LayoutHelper indent="col-2">
+              <BlockVideoEmbed
+                :data="block"
+                :custom-detail-url="item.externalLink"
+              />
             </LayoutHelper>
           </template>
         </template>
-      </template>
+      </div>
       <LayoutHelper
         v-if="item.heading || item.description"
         indent="col-3"
@@ -164,6 +171,7 @@ const { data } = reactive(props)
         />
       </LayoutHelper>
       <LayoutHelper
+        v-if="index + 1 !== data.galleryItems?.length"
         indent="col-2"
         class="pt-10 lg:pt-18 mb-10 lg:mb-18"
       >
@@ -171,6 +179,16 @@ const { data } = reactive(props)
       </LayoutHelper>
     </div>
 
+    <div
+      v-if="data.body?.length"
+      class="my-10 lg:my-18"
+    >
+      <BlockStreamfield
+        v-if="data.body?.length"
+        :data="data.body"
+      />
+    </div>
+
     <!-- related links -->
     <LayoutHelper
       v-if="data.relatedLinks && data.relatedLinks.length"

package/src/templates/edu/PageEduMultimediaDetail/PageEduMultimediaDetail.vue

@@ -180,6 +180,7 @@ const { data } = reactive(props)
         :publication-date="data.publicationDate"
         schema
         pill
+        hide-date
       />
       <ShareButtonsEdu
         v-if="data?.url"