@explorer-1/vue 0.2.9 → 0.2.11

package/package.json

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

package/src/components/BaseTimer/BaseTimer.vue

@@ -51,9 +51,10 @@
 <script lang="ts">
 import type { PropType } from 'vue'
 import { defineComponent } from 'vue'
-import dayjs, { Dayjs } from 'dayjs'
-import duration, { type Duration } from 'dayjs/plugin/duration'
-import minMax from 'dayjs/plugin/minMax'
+import dayjs from './../../utils/dayjs'
+import { type Dayjs } from 'dayjs'
+import duration, { type Duration } from 'dayjs/plugin/duration.js'
+import minMax from 'dayjs/plugin/minMax.js'
 
 dayjs.extend(duration)
 dayjs.extend(minMax)

package/src/components/HeroLarge/HeroLarge.stories.js

@@ -32,6 +32,26 @@ export const HeroLargeData = {
       url: 'https://picsum.photos/id/247/640/900'
     },
     alt: 'Robotics detail page hero image'
+  },
+  listingPageHeroImage: {
+    // beach
+    src: {
+      url: 'https://picsum.photos/id/973/1800/1200',
+      width: 1800,
+      height: 1200
+    },
+    // lake
+    srcSet:
+      'https://picsum.photos/id/865/768/548 768w, https://picsum.photos/id/865/1024/684 1024w, https://picsum.photos/id/865/1440/770 1440w,  https://picsum.photos/id/865/1800/963 1800w',
+    // jungle
+    screenMd: {
+      url: 'https://picsum.photos/id/921/800/640'
+    },
+    // desert
+    screenSm: {
+      url: 'https://picsum.photos/id/247/640/900'
+    },
+    alt: 'Robotics detail page hero image'
   }
 }
 

package/src/components/HomepageCarouselItem/HomepageCarouselItem.stories.js

@@ -28,7 +28,7 @@ export const HomepageCarouselItemData = {
     externalLink: 'https://mars.nasa.gov',
     slideTitle: 'Creating Robots to go Where Humans Can’t',
     video: BaseVideoData,
-    image: {
+    listingPageHeroImage: {
       src: {
         url: 'https://picsum.photos/id/973/1800/1200',
         width: 1800,

package/src/components/HomepageCarouselItem/HomepageCarouselItem.vue

@@ -29,21 +29,21 @@
         />
       </video>
       <!-- change to v-if if image should load as fallback until video loads -->
-      <picture v-else-if="item.image && item.image.src">
+      <picture v-else-if="item.listingPageHeroImage && item.listingPageHeroImage.src">
         <source
           media="(min-width: 768px)"
-          :srcset="item.image.srcSet"
+          :srcset="item.listingPageHeroImage.srcSet"
         />
         <source
           media="(min-width: 420px)"
-          :srcset="item.image.screenMd?.url"
+          :srcset="item.listingPageHeroImage.screenMd?.url"
         />
-        <source :srcset="item.image.screenSm?.url" />
+        <source :srcset="item.listingPageHeroImage.screenSm?.url" />
         <img
           class="md:object-right object-cover object-bottom w-full h-full"
-          :src="item.image.src.url"
-          :width="item.image.src.width"
-          :height="item.image.src.height"
+          :src="item.listingPageHeroImage.src.url"
+          :width="item.listingPageHeroImage.src.width"
+          :height="item.listingPageHeroImage.src.height"
           alt=""
           loading="lazy"
           data-chromatic="ignore"
@@ -116,7 +116,7 @@ export interface Slide {
     fileOgg: string
     fileWebm: string
   }
-  image: Partial<ImageObject>
+  listingPageHeroImage: Partial<ImageObject>
 }
 
 export default defineComponent({

package/src/components/NavSearchForm/NavSearchForm.vue

@@ -1,3 +1,29 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import SearchInput from './../SearchInput/SearchInput.vue'
+const router = useRouter()
+
+interface NavSearchFormProps {
+  mobile?: boolean
+}
+const props = withDefaults(defineProps<NavSearchFormProps>(), {
+  mobile: false
+})
+const emit = defineEmits(['clearSearch', 'submitForm'])
+
+const searchQuery = ref()
+
+const clearSearch = () => {
+  searchQuery.value = undefined
+  emit('clearSearch')
+}
+const submitSearch = () => {
+  emit('submitForm')
+  console.log(searchQuery.value)
+  router.push({ path: '/search', query: searchQuery.value })
+}
+</script>
 <template>
   <form
     class="NavSearchForm"
@@ -6,11 +32,11 @@
     <SearchInput
       v-model="searchQuery"
       placeholder="Search JPL"
-      :underlined-input="!mobile"
+      :underlined-input="!props.mobile"
       :underlined-input-value="searchQuery"
-      :auto-focus="!mobile"
-      :inline="!mobile"
-      :default-colors="mobile"
+      :auto-focus="!props.mobile"
+      :inline="!props.mobile"
+      :default-colors="props.mobile"
       @esc="clearSearch()"
     />
     <button
@@ -22,43 +48,6 @@
     </button>
   </form>
 </template>
-<script lang="ts">
-import { defineComponent } from 'vue'
-import SearchInput from './../SearchInput/SearchInput.vue'
-
-export default defineComponent({
-  name: 'NavSearchForm',
-  components: {
-    SearchInput
-  },
-  props: {
-    mobile: {
-      type: Boolean,
-      default: false
-    }
-  },
-  data() {
-    return {
-      searchQuery: undefined
-    }
-  },
-  methods: {
-    clearSearch() {
-      this.searchQuery = undefined
-      this.$emit('clearSearch')
-    },
-    submitSearch() {
-      this.$emit('submitForm')
-      if (this.$router) {
-        this.$router.push({
-          name: 'search',
-          query: { query: this.searchQuery }
-        })
-      }
-    }
-  }
-})
-</script>
 <style lang="scss">
 .NavSearchForm {
   ::placeholder {

package/src/components/PastEventsCarousel/PastEventsCarousel.vue

@@ -4,7 +4,7 @@
     heading="Past Events"
     variant="cards"
     :link="{
-      path: '/events',
+      // path: 'events',
       query: {
         event_status: 'Past events',
         sortBy: 'eventStartDateLatest',
@@ -28,7 +28,7 @@
   </MixinCarousel>
 </template>
 <script lang="ts">
-// @ts-nocheck
+// relative link to view past events assumes that this component will only be used on an events index page.
 import { defineComponent } from 'vue'
 import type { ElasticSearchPage } from '../../interfaces'
 import MixinCarousel from './../MixinCarousel/MixinCarousel.vue'

package/src/templates/PageVideoDetail/PageVideoDetail.stories.js

@@ -17,7 +17,8 @@ export const BaseStory = {
   args: {
     data: {
       block: [],
-      body: 'How Earth satellites including the JPL-managed Topex/Poseidon are helping researchers track the movements and behaviors of sea lions and seals to keep them from extinction.',
+      videoDetailBody:
+        'How Earth satellites including the JPL-managed Topex/Poseidon are helping researchers track the movements and behaviors of sea lions and seals to keep them from extinction.',
       firstPublishedAt: '2001-12-03T08:00:00+00:00',
       id: '6723',
       label: 'Video',

package/src/templates/PageVideoDetail/PageVideoDetail.vue

@@ -22,9 +22,9 @@
       :content="data.thumbnailImage.original"
     />
     <meta
-      v-if="data.summary || data.body"
+      v-if="data.summary || data.videoDetailBody"
       itemprop="description"
-      :content="data.summary || data.body"
+      :content="data.summary || data.videoDetailBody"
     />
     <div class="lg:container 3xl:px-0 lg:mt-12 px-5 mx-auto mt-5">
       <DetailHeadline
@@ -58,10 +58,10 @@
     <LayoutHelper indent="col-2">
       <div class="lg:grid grid-cols-10">
         <div
-          v-if="data.body"
+          v-if="data.videoDetailBody"
           class="col-span-7"
         >
-          <BlockText :text="data.body" />
+          <BlockText :text="data.videoDetailBody" />
           <hr class="border-gray-light-mid lg:my-8 my-5" />
           <div
             v-if="data.transcript"

package/src/templates/www/PageAsteroidWatchIndex/PageAsteroidWatchIndex.stories.js

@@ -25,7 +25,28 @@ export const BaseStory = {
   name: 'PageAsteroidWatchIndex',
   args: {
     data: {
-      ...HeroLargeData,
+      description:
+        'Crawl, walk and even climb rock walls, this robot was designed to operate in extreme terrains.',
+      listingPageHeroImage: {
+        // beach
+        src: {
+          url: 'https://picsum.photos/id/973/1800/1200',
+          width: 1800,
+          height: 1200
+        },
+        // lake
+        srcSet:
+          'https://picsum.photos/id/865/768/548 768w, https://picsum.photos/id/865/1024/684 1024w, https://picsum.photos/id/865/1440/770 1440w,  https://picsum.photos/id/865/1800/963 1800w',
+        // jungle
+        screenMd: {
+          url: 'https://picsum.photos/id/921/800/640'
+        },
+        // desert
+        screenSm: {
+          url: 'https://picsum.photos/id/247/640/900'
+        },
+        alt: 'Robotics detail page hero image'
+      },
       title: 'Asteroid Watch',
       body: BlockStreamfieldData.body,
       latestAsteroidNews: BlockLinkCardCarouselData

package/src/templates/www/PageAsteroidWatchIndex/PageAsteroidWatchIndex.vue

@@ -5,7 +5,7 @@
   >
     <HeroLarge
       :title="data.title"
-      :image="data.heroImage"
+      :image="data.listingPageHeroImage"
       has-overlay
     />
 

package/src/templates/www/PageInfographicDetail/PageInfographicDetail.stories.js

@@ -39,7 +39,7 @@ export const BaseStory = {
       publicationDate: '2012-07-05T20:04:21+00:00',
       title: 'Milky Way',
       topicLabel: 'Stars and Galaxies',
-      description:
+      descriptionString:
         '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lobortis lorem non purus consequat rutrum. Nulla vel convallis urna, eu porta purus. In hendrerit odio id diam volutpat auctor. Curabitur imperdiet dolor ipsum, quis luctus quam hendrerit eu. Quisque gravida lacus velit, a tempor dolor facilisis interdum. Sed pharetra mi eget feugiat bibendum. Donec vel nisi non nisi ultrices pellentesque eget non massa. Proin hendrerit sodales auctor. Phasellus egestas tortor eget ullamcorper tempor. Cras quis mauris erat. Curabitur tempor quam eget tellus aliquam semper. Morbi fringilla sodales dapibus. Proin pellentesque turpis eu neque pretium, in sodales sem auctor.</p>'
     }
   }

package/src/templates/www/PageInfographicDetail/PageInfographicDetail.vue

@@ -42,10 +42,10 @@
     >
       <div class="lg:grid grid-cols-10">
         <div
-          v-if="data.description"
+          v-if="data.descriptionString"
           class="col-span-7"
         >
-          <BlockText :text="data.description" />
+          <BlockText :text="data.descriptionString" />
         </div>
         <aside class="col-start-9 col-end-11">
           <div class="lg:pt-0 pt-8 mb-12">

package/src/templates/www/PagePodcastSeason/PagePodcastSeason.stories.js

@@ -29,7 +29,7 @@ export const PagePodcastSeasonData = {
   summary:
     'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas in nibh mauris. Praesent vel tempus enim, a ultricies justo. Cras nec lorem quis lorem ullamcorper accumsan. Aliquam lacus tortor, vulputate sit amet purus vitae, accumsan maximus diam. Vivamus ac dui non sapien hendrerit elementum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis porttitor ac quam sed eleifend.',
   featuredEpisode: HeroMediumData.feature,
-  heroImage: {
+  listingPageHeroImage: {
     // same dimensions used for HeroMedium
     src: {
       url: 'https://picsum.photos/id/247/1800/1200',

package/src/templates/www/PagePodcastSeason/PagePodcastSeason.vue

@@ -10,7 +10,7 @@
         v-if="data.featuredEpisode"
         :custom-label="data.label"
         :feature="data.featuredEpisode"
-        :custom-image="data.heroImage"
+        :custom-image="data.listingPageHeroImage"
         cta="Listen Now"
       />
     </div>

package/src/templates/www/PageRoboticsDetail/PageRoboticsDetail.vue

@@ -7,7 +7,7 @@
       eyebrow="Robotics at JPL"
       :title="data.title"
       :summary="data.description"
-      :image="data.heroImage"
+      :image="data.listingPageHeroImage"
     />
     <RoboticsDetailStats
       :mass="data.mass"

package/src/templates/www/PageTopicDetail/PageTopicDetail.stories.js

@@ -32,7 +32,7 @@ export const TopicDetailData = {
   parentDisplayTitle: 'Solar System Exploration at JPL',
   strapline:
     'Robotic orbiters, landers and mobile laboratories explore Mars and communicate with Earth via the Deep Space Network.',
-  heroImage: {
+  listingPageHeroImage: {
     src: {
       url: 'https://picsum.photos/1800/1200',
       width: 1800,

package/src/templates/www/PageTopicDetail/PageTopicDetail.vue

@@ -9,7 +9,7 @@
         :eyebrow="data.parentDisplayTitle"
         :title="data.displayTitle"
         :summary="data.strapline"
-        :image="data.heroImage"
+        :image="data.listingPageHeroImage"
       />
       <TopicDetailMissionCarousel
         v-if="data.title || data.featuredMissions"