@explorer-1/vue 0.2.76 → 0.2.77

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@explorer-1/vue",
-  "version": "0.2.76",
+  "version": "0.2.77",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -30,7 +30,7 @@
     "vue-bind-once": "^0.2.1",
     "vue3-compare-image": "^1.2.5",
     "vue3-observe-visibility": "^1.0.1",
-    "@explorer-1/common": "1.1.19"
+    "@explorer-1/common": "1.1.20"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.4",

package/src/components/BaseLink/BaseLink.vue

@@ -1,7 +1,10 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
+import { mapStores } from 'pinia'
+import { useThemeStore } from '../../store/theme'
 import { eventBus } from './../../utils/eventBus'
 import MixinAnimationCaret from './../MixinAnimationCaret/MixinAnimationCaret.vue'
+import { isEduExternalLink } from './../../utils/isEduExternalLink'
 
 interface Variants {
   [key: string]: string
@@ -111,6 +114,7 @@ export default defineComponent({
   },
   emits: ['linkClicked', 'specificLinkClicked'],
   computed: {
+    ...mapStores(useThemeStore),
     computedVariants(): Variants {
       if (this.usePrimaryColor) {
         return primaryColorVariants
@@ -127,10 +131,27 @@ export default defineComponent({
       }
       return classes
     },
+    isEduExternal(): boolean | string {
+      if (this.href) {
+        return isEduExternalLink(this.href)
+      }
+      return ''
+    },
+    isExternal(): boolean {
+      if (this.href) {
+        if (this.themeStore.isEdu && isEduExternalLink(this.href)) {
+          return true
+        } else if (!this.themeStore.isEdu) {
+          return true
+        }
+        return false
+      }
+      return false
+    },
     theTarget(): string | undefined {
       if (this.target) {
         return this.target
-      } else if (this.href && this.externalTargetBlank) {
+      } else if (this.isExternal && this.externalTargetBlank) {
         return '_blank'
       }
       return undefined

package/src/components/BlockLinkCard/BlockLinkCard.vue

@@ -105,7 +105,13 @@
                 </span>
                 <span class="sr-only">.</span>
               </p>
-              <template v-if="theItem.externalLink && themeStore.isEdu">
+              <template
+                v-if="
+                  theItem.externalLink &&
+                  themeStore.isEdu &&
+                  isEduExternalLink(theItem.externalLink)
+                "
+              >
                 <IconExternal
                   class="text-primary ml-2"
                   :class="{ 'text-sm mt-1px': small, '-mt-1px': medium, '-mt-.5': large }"
@@ -188,6 +194,7 @@ import { defineComponent } from 'vue'
 import { mapStores } from 'pinia'
 import { useThemeStore } from '../../store/theme'
 import { mixinFormatEventDates } from './../../utils/mixins'
+import { isEduExternalLink } from './../../utils/isEduExternalLink'
 import type { HeadingLevel } from './../BaseHeading/BaseHeading.vue'
 import IconArrow from './../Icons/IconArrow.vue'
 import IconExternal from './../Icons/IconExternal.vue'
@@ -389,6 +396,11 @@ export default defineComponent({
           )
         : undefined
     }
+  },
+  methods: {
+    isEduExternalLink(url: string): boolean {
+      return isEduExternalLink(url)
+    }
   }
 })
 </script>

package/src/components/BlockText/BlockText.stories.js

@@ -19,13 +19,13 @@ export default {
   excludeStories: /.*Data$/
 }
 
-export const RichTextMediaData = `<p data-block-key="5f55p">Description for it.</p><div class="richtext-image fullwidth"><img alt="Perseverance Looks Back at &amp;#x27;Bright Angel&amp;#x27;" height="480" loading="lazy" src="https://picsum.photos/640/480" width="640">
+export const RichTextMediaData = `<h2>A heading in BlockText</h2><p data-block-key="5f55p">Description for it.</p><div class="richtext-image fullwidth"><img alt="Perseverance Looks Back at &amp;#x27;Bright Angel&amp;#x27;" height="480" loading="lazy" src="https://picsum.photos/640/480" width="640">
   <div class="richtext-caption">
       <div class="caption">One of the navigation cameras aboard NASAs Perseverance Mars rover captured this view looking back at the Bright Angel area on July 30, 2024.</div>
       <span class="credit">Credit: NASA/JPL-Caltech</span>
       <a class="caption-link" href="#">Full Image Details</a>
   </div>
-</div><p data-block-key="89jcq">More text and another image that&#x27;s full width (above)</p><p data-block-key="6jsp"></p><div class="richtext-image left"><img alt="Carbon Mapper Coalition&amp;#x27;s Tanager Satellite" height="336" loading="lazy" src="https://picsum.photos/640/336" width="640">
+</div><h3>Subheading in BlockText</h3><p data-block-key="89jcq">More text and another image that&#x27;s full width (above)</p><p data-block-key="6jsp"></p><div class="richtext-image left"><img alt="Carbon Mapper Coalition&amp;#x27;s Tanager Satellite" height="336" loading="lazy" src="https://picsum.photos/640/336" width="640">
     <div class="richtext-caption">
         <div class="caption">This artists concept depicts one of the Carbon Mapper Coalitions Tanager satellites, the first of which launched on Aug. 16, 2024. Tanager-1 will use imaging spectrometer technology developed at JPL to measure greenhouse gas point-source emissions.</div>
         <span class="credit">Credit: Planet Labs PBC</span>

package/src/components/NavSecondary/NavSecondary.vue

@@ -10,7 +10,7 @@
     }"
   >
     <div
-      class="max-w-screen-3xl mx-auto"
+      class="w-full mx-auto"
       :class="{ 'bg-gradient-to-r from-black to-primary bg-transparent to-90% text-white': invert }"
     >
       <div

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

@@ -1,6 +1,7 @@
 import { BlockRelatedLinksData } from './../../../components/BlockRelatedLinks/BlockRelatedLinks.stories.js'
 import { BlockLinkCardCarouselData } from './../../../components/BlockLinkCarousel/BlockLinkCarousel.stories.js'
 import { BlockStreamfieldMinimalData } from './../../../components/BlockStreamfield/BlockStreamfield.stories'
+import { NavSecondaryData } from './../../../components/NavSecondary/NavSecondary.stories.js'
 import PageEduCollectionsDetail from './PageEduCollectionsDetail.vue'
 
 export default {
@@ -102,3 +103,39 @@ export const NoMetaPanel = {
     }
   }
 }
+
+export const NoHero = {
+  args: {
+    data: {
+      ...BaseStory.args.data,
+      heroImage: undefined
+    }
+  }
+}
+
+export const SecondaryNav = {
+  args: {
+    data: {
+      ...BaseStory.args.data,
+      breadcrumb: NavSecondaryData.breadcrumb
+    }
+  }
+}
+export const SecondaryNavHeroInline = {
+  args: {
+    data: {
+      ...BaseStory.args.data,
+      breadcrumb: NavSecondaryData.breadcrumb,
+      heroPosition: 'inline'
+    }
+  }
+}
+export const SecondaryNavNoHero = {
+  args: {
+    data: {
+      ...BaseStory.args.data,
+      breadcrumb: NavSecondaryData.breadcrumb,
+      heroImage: undefined
+    }
+  }
+}

package/src/templates/edu/PageEduCollectionsDetail/PageEduCollectionsDetail.vue

@@ -9,6 +9,7 @@ import BlockStreamfield from './../../../components/BlockStreamfield/BlockStream
 import BlockRelatedLinks from '../../../components/BlockRelatedLinks/BlockRelatedLinks.vue'
 import HeroLarge from './../../../components/HeroLarge/HeroLarge.vue'
 import NavJumpMenu from './../../../components/NavJumpMenu/NavJumpMenu.vue'
+import NavSecondary from './../../../components/NavSecondary/NavSecondary.vue'
 import MetaPanel from '../../../components/MetaPanel/MetaPanel.vue'
 import ShareButtonsEdu from '../../../components/ShareButtonsEdu/ShareButtonsEdu.vue'
 
@@ -39,9 +40,9 @@ const heroInline = computed((): boolean => {
 })
 
 const computedClass = computed((): string => {
-  if (heroInline.value || !data?.heroImage) {
+  if ((heroInline.value || !data?.heroImage) && !data?.breadcrumb) {
     return 'pt-5 lg:pt-12'
-  } else if (!heroInline.value) {
+  } else if (!heroInline.value || data?.breadcrumb) {
     return '-nav-offset'
   }
   return ''
@@ -63,8 +64,16 @@ const computedClass = computed((): string => {
       :class="!data.showMetaPanel ? 'mb-10' : ''"
     />
 
+    <!-- secondary nav -->
+    <NavSecondary
+      v-if="data.breadcrumb"
+      class="mb-10"
+      :breadcrumb="data.breadcrumb"
+      :has-intro="data.heroImage && !heroInline ? true : false"
+    />
+
     <NavJumpMenu
-      v-if="data.showJumpMenu"
+      v-if="data.showJumpMenu && !data.breadcrumb"
       ref="PageEduCollectionsDetailJumpMenu"
       :title="data.title"
       :blocks="data.body"
@@ -97,8 +106,8 @@ const computedClass = computed((): string => {
       :primary-subject="data.primarySubject"
       :additional-subjects="data.additionalSubjects"
       :grade-levels="data.gradeLevels"
-      :negative-top="!heroInline"
-      :negative-bottom="heroInline"
+      :negative-top="!heroInline && !data.breadcrumb && data.heroImage ? true : false"
+      :negative-bottom="heroInline && !data.breadcrumb"
     />
 
     <!-- TODO: put this in a component (exclude layout though) -->
@@ -115,7 +124,7 @@ const computedClass = computed((): string => {
     </LayoutHelper>
 
     <LayoutHelper
-      v-if="!heroInline"
+      v-if="!heroInline && data.heroImage"
       indent="col-2"
       class="mb-6 lg:mb-12"
       :class="{ '-mt-4': data.showMetaPanel }"

package/src/templates/edu/PageEduStudentProject/PageEduStudentProjectSection.vue

@@ -208,16 +208,16 @@ const { heading, blocks, image, steps, stepsNumbering, text } = reactive(props)
       p,
       li {
         @screen lg {
-          @apply mr-[10rem];
+          @apply pr-[9rem];
         }
         @screen xl {
-          @apply mr-[14rem];
+          @apply pr-[13rem];
         }
       }
       table {
         p,
         li {
-          @apply mr-0;
+          @apply pr-0;
         }
       }
     }

package/src/utils/isEduExternalLink.ts

@@ -0,0 +1,12 @@
+export const isEduExternalLink = (url: string): boolean => {
+  if (
+    url &&
+    (url.startsWith('/edu/') ||
+      url.startsWith('/edubeta/') ||
+      url.startsWith('https://www.jpl.nasa.gov/edu/') ||
+      url.startsWith('https://jpl.nasa.gov/edu/'))
+  ) {
+    return false
+  }
+  return true
+}