@explorer-1/vue 0.1.3 → 0.1.5

package/src/templates/www/PageHomepage/PageHomepage.vue

@@ -0,0 +1,136 @@
+<template>
+  <div
+    v-if="data"
+    class="-nav-offset"
+  >
+    <!-- the visible rendition of this occurs further down the page, after other headings. The h1 needs to be the first heading -->
+    <h1 class="sr-only">Jet Propulsion Laboratory</h1>
+
+    <!-- main carousel -->
+    <HomepageCarousel
+      :duration="data.carouselSlideSpeed"
+      :items="data.heroCarousel"
+    />
+
+    <!-- homepage stats -->
+    <HomepageStats
+      :statistics="data.statistics"
+      :mission-count="data.statisticsMissionCount"
+      :dsn="data.dsnWidget"
+      :asteroid-watch="data.asteroidWatchWidget"
+      :featured-embed="data.featuredEmbed"
+    />
+
+    <!-- featured video -->
+    <HomepageEmbedBlock
+      :data="data.featuredEmbed"
+      class="lg:pt-8 lg:mt-12 pt-4 mt-16 -mb-5"
+    />
+
+    <!-- latest news // TODO: changed to Related Stories for EDL, need to change back to Latest News -->
+    <BlockLinkCarousel
+      v-if="theNews"
+      item-type="cards"
+      :heading="data.featuredNewsHeading || 'Latest News'"
+      :items="theNews"
+      class="lg:-mb-8 mt-20 -mb-3"
+    />
+
+    <!-- about JPL -->
+    <template v-for="(block, index) in data.body">
+      <template v-if="block.blockType == 'HomePageTeaserBlock'">
+        <!-- text with optional card and cover image -->
+        <HomepageTeaserBlock
+          :key="index"
+          class="lg:my-18 my-10"
+          :data="block"
+        />
+      </template>
+      <template v-else-if="block.blockType == 'QuoteBlock'">
+        <LayoutHelper
+          :key="index"
+          indent="col-2"
+          class="lg:my-18 my-10"
+        >
+          <BlockQuote :data="block" />
+        </LayoutHelper>
+      </template>
+      <!-- blockquote -->
+    </template>
+
+    <!-- mission carousel -->
+    <HomepageMissionsCarousel
+      v-if="data?.missionsCarousel?.targets?.length"
+      :data="data.missionsCarousel"
+      class="lg:my-18 my-10"
+    />
+
+    <!-- featured robot -->
+    <HomepageFeaturedRobot
+      v-if="data?.featuredRobots?.length"
+      class="lg:my-24 my-12"
+      :data="data.featuredRobots[0].page"
+    />
+
+    <!-- engage -->
+    <div
+      v-if="data.relatedContent && data.relatedContent.length"
+      class="bg-gray-light lg:py-24 lg:mt-24 py-12 mt-12"
+    >
+      <BlockLinkCarousel
+        item-type="tiles"
+        :heading="data.relatedContentHeading"
+        :items="data.relatedContent"
+      />
+    </div>
+    <!-- swimlane -->
+    <SwimlaneCTA />
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue'
+import HomepageCarousel from './../../../components/HomepageCarousel/HomepageCarousel.vue'
+import HomepageFeaturedRobot from './../../../components/HomepageFeaturedRobot/HomepageFeaturedRobot.vue'
+import HomepageTeaserBlock from './../../../components/HomepageTeaserBlock/HomepageTeaserBlock.vue'
+import BlockLinkCarousel from './../../../components/BlockLinkCarousel/BlockLinkCarousel.vue'
+import BlockQuote from './../../../components/BlockQuote/BlockQuote.vue'
+import LayoutHelper from './../../../components/LayoutHelper/LayoutHelper.vue'
+import SwimlaneCTA from './../../../components/SwimlaneCTA/SwimlaneCTA.vue'
+import HomepageMissionsCarousel from './../../../components/HomepageMissionsCarousel/HomepageMissionsCarousel.vue'
+import HomepageStats from './../../../components/HomepageStats/HomepageStats.vue'
+import HomepageEmbedBlock from './../../../components/HomepageEmbedBlock/HomepageEmbedBlock.vue'
+
+export default defineComponent({
+  name: 'PageHomepage',
+  components: {
+    HomepageCarousel,
+    HomepageFeaturedRobot,
+    HomepageTeaserBlock,
+    BlockLinkCarousel,
+    BlockQuote,
+    LayoutHelper,
+    SwimlaneCTA,
+    HomepageMissionsCarousel,
+    HomepageStats,
+    HomepageEmbedBlock
+  },
+  props: {
+    data: {
+      type: Object,
+      required: false,
+      default: undefined
+    }
+  },
+  computed: {
+    theNews(): any[] | undefined {
+      // check first for featured news
+      if (this.data?.featuredNews?.length) {
+        return this.data.featuredNews
+      } else if (this.data?.latestNews?.length) {
+        return this.data.latestNews
+      }
+      return undefined
+    }
+  }
+})
+</script>

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

@@ -0,0 +1,46 @@
+import PageInfographicDetail from './PageInfographicDetail.vue'
+
+export default {
+  title: 'Templates/WWW/PageInfographicDetail',
+  component: PageInfographicDetail,
+  tags: ['!autodocs'],
+  excludeStories: /.*Data$/,
+  parameters: {
+    layout: 'fullscreen'
+  }
+}
+
+// stories
+export const BaseStory = {
+  name: 'PageInfographicDetail',
+  args: {
+    data: {
+      getTopicsForDisplay: [
+        {
+          title: 'Stars and Galaxies',
+          url: '/topics/stars-and-galaxies/'
+        }
+      ],
+      image: {
+        alt: 'Milky Way',
+        caption: 'An infographic image.\n',
+        credit: '',
+        detailUrl: null,
+        original: 'https://picsum.photos/1920/1080',
+        src: {
+          height: '1080',
+          url: 'https://picsum.photos/1920/1080',
+          width: '1920'
+        },
+        srcSet:
+          'https://picsum.photos/1400/787 320w, https://picsum.photos/1400/787 1024w,  https://picsum.photos/1920/1080 1400w'
+      },
+      label: 'Infographic',
+      publicationDate: '2012-07-05T20:04:21+00:00',
+      title: 'Milky Way',
+      topicLabel: 'Stars and Galaxies',
+      description:
+        '<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

@@ -0,0 +1,125 @@
+<template>
+  <div
+    v-if="data"
+    class="PageInfographicDetail ThemeVariantLight"
+  >
+    <div class="lg:container 3xl:px-0 lg:mt-12 px-5 mx-auto mt-5">
+      <DetailHeadline
+        :title="data.title"
+        :publication-date="data.publicationDate"
+        :topics="data.getTopicsForDisplay"
+      />
+    </div>
+    <div class="max-w-screen-3xl lg:mb-24 mx-auto mt-10 mb-8">
+      <MixinFancybox
+        v-if="data.image"
+        :src="data.image.original"
+        :caption="data.image.caption"
+        :credit="data.image.credit"
+        :detail-url="data.image.detailUrl"
+      >
+        <BaseImagePlaceholder
+          class="relative bg-black border border-black"
+          aspect-ratio="21:9"
+        >
+          <BaseImage
+            v-if="data.image.src"
+            :id="data.image.id"
+            :src="data.image.src.url"
+            :srcset="data.image.srcSet"
+            :alt="data.image.alt"
+            :width="data.image.src.width"
+            :height="data.image.src.height"
+            object-fit-class="scaleDown"
+            loading="eager"
+          />
+        </BaseImagePlaceholder>
+      </MixinFancybox>
+    </div>
+    <LayoutHelper
+      indent="col-2"
+      class="lg:pb-24 pb-10"
+    >
+      <div class="lg:grid grid-cols-10">
+        <div
+          v-if="data.description"
+          class="col-span-7"
+        >
+          <BlockText :text="data.description" />
+        </div>
+        <aside class="col-start-9 col-end-11">
+          <div class="lg:pt-0 pt-8 mb-12">
+            <div class="lg:w-auto w-full">
+              <BaseButton
+                v-if="data.image && data.image.original"
+                :href="data.image.original"
+                class="w-full mb-5"
+                variant="primary"
+                compact
+              >
+                Download JPG
+              </BaseButton>
+            </div>
+          </div>
+
+          <div
+            v-if="data.image.credit"
+            class="lg:mb-16 mb-8"
+          >
+            <span class="font-secondary w-full text-base tracking-wider uppercase"> Credit </span>
+            <BlockText :text="data.image.credit" />
+          </div>
+        </aside>
+      </div>
+    </LayoutHelper>
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue'
+import BaseButton from './../../../components/BaseButton/BaseButton.vue'
+import MixinFancybox from './../../../components/MixinFancybox/MixinFancybox.vue'
+import BaseImage from './../../../components/BaseImage/BaseImage.vue'
+import BaseImagePlaceholder from './../../../components/BaseImagePlaceholder/BaseImagePlaceholder.vue'
+import BlockText from './../../../components/BlockText/BlockText.vue'
+import DetailHeadline from './../../../components/DetailHeadline/DetailHeadline.vue'
+import LayoutHelper from './../../../components/LayoutHelper/LayoutHelper.vue'
+
+export default defineComponent({
+  name: 'PageInfographicDetail',
+  components: {
+    BaseButton,
+    MixinFancybox,
+    BaseImage,
+    BaseImagePlaceholder,
+    BlockText,
+    DetailHeadline,
+    LayoutHelper
+  },
+  props: {
+    data: {
+      type: Object,
+      required: false
+    }
+  }
+})
+</script>
+
+<style lang="scss">
+.PageInfographicDetail {
+  .BaseImagePlaceholder {
+    @apply select-none;
+
+    min-height: 400px;
+  }
+
+  aside {
+    .BaseButton {
+      max-width: 200px;
+    }
+
+    .BlockText {
+      @apply text-lg;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,14 @@
+import PageMaintenanceMode from './PageMaintenanceMode.vue'
+
+export default {
+  title: 'Templates/WWW/PageMaintenanceMode',
+  component: PageMaintenanceMode,
+  tags: ['!autodocs'],
+  excludeStories: /.*Data$/,
+  parameters: {
+    layout: 'fullscreen'
+  }
+}
+
+// stories
+export const BaseStory = { name: 'PageMaintenanceMode' }

package/src/templates/www/PageMaintenanceMode/PageMaintenanceMode.vue

@@ -0,0 +1,94 @@
+<template>
+  <div class="PageMaintenanceMode bg-white border border-white">
+    <div class="max-w-screen-3xl min-h-100 mx-auto bg-white">
+      <div
+        class="BaseGrid text-gray-dark font-primary animate-fadeInSlow container mx-auto transition-all duration-150"
+      >
+        <div class="mb-12 lg:mb-24 lg:pl-0 lg:col-start-2 col-start-1 col-end-13 px-4 py-10">
+          <div class="w-full text-center">
+            <img
+              loading="lazy"
+              class="max-w-full mx-auto mt-10 lg:mt-20 px-10 lg:px-0"
+              :src="gearsImage"
+              width="283"
+              height="227"
+              alt=""
+            />
+            <h1 class="lg:text-7xl mt-10 text-4xl font-bold leading-normal tracking-normal">
+              {{ heading || 'Houston, we have an&nbsp;update.' }}
+            </h1>
+
+            <p
+              class="lg:text-xl text-base py-5 max-w-2xl mx-auto lg:mb-10 mb-6 font-semibold leading-normal tracking-normal"
+            >
+              {{
+                description ||
+                'The JPL website is undergoing planned maintenance and will be back online when the update is complete in a few&nbsp;minutes.'
+              }}
+            </p>
+            <NavSocial class="justify-center" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import gearsImage from '@explorer-1/common/src/images/jpg/pages/maintenance/maintenance-gears.jpg'
+import NavSocial from './../../../components/NavSocial/NavSocial.vue'
+
+export default defineComponent({
+  name: 'PageMaintenanceMode',
+  components: {
+    NavSocial
+  },
+  props: {
+    heading: {
+      type: String,
+      required: false,
+      default: undefined
+    },
+    description: {
+      type: String,
+      required: false,
+      default: undefined
+    }
+  },
+  data() {
+    return {
+      gearsImage
+    }
+  }
+})
+</script>
+<style lang="scss">
+.PageMaintenanceMode {
+  .NavSocial {
+    @apply -ml-2; // visually centered due to narrow facebook icon
+    .BaseButton.-social {
+      @apply border-0 bg-none text-gray-dark;
+      &:hover {
+        @apply bg-none bg-transparent;
+
+        &.-facebook {
+          @apply text-facebook;
+        }
+
+        &.-twitter {
+          @apply text-twitter;
+        }
+
+        &.-instagram {
+          @apply text-instagram;
+        }
+
+        &.-youtube {
+          @apply text-youtube;
+        }
+      }
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,246 @@
+import { MissionDetailHighlightsData } from './../../../components/MissionDetailHighlights/MissionDetailHighlights.stories.js'
+import { MissionDetailStatsData } from './../../../components/MissionDetailStats/MissionDetailStats.stories.js'
+import { MissionDetailAboutData } from './../../../components/MissionDetailAbout/MissionDetailAbout.stories.js'
+import { MissionDetailStreamfieldData } from './../../../components/MissionDetailStreamfield/MissionDetailStreamfield.stories.js'
+import {
+  BlockLinkCardCarouselData,
+  BlockLinkTileCarouselData
+} from './../../../components/BlockLinkCarousel/BlockLinkCarousel.stories.js'
+import { BlockRelatedLinksData } from './../../../components/BlockRelatedLinks/BlockRelatedLinks.stories.js'
+import PageMissionDetail from './PageMissionDetail.vue'
+
+export default {
+  title: 'Templates/WWW/PageMissionDetail',
+  component: PageMissionDetail,
+  tags: ['!autodocs'],
+  decorators: [
+    () => ({
+      template: `<div id="storyDecorator" class="disable-nav-offset"><story/></div>`
+    })
+  ],
+  parameters: {
+    layout: 'fullscreen',
+    html: {
+      root: '#storyDecorator'
+    }
+  },
+  excludeStories: /.*(Data)$/
+}
+
+// stories
+export const BaseStory = {
+  name: 'Dark Template',
+  args: {
+    data: {
+      ...MissionDetailStatsData,
+      ...MissionDetailHighlightsData,
+      ...MissionDetailStreamfieldData,
+      ...MissionDetailAboutData,
+      relatedLinks: [BlockRelatedLinksData.data],
+      relatedPages: BlockLinkCardCarouselData,
+      otherMissions: BlockLinkTileCarouselData,
+      slug: 'oco-2',
+      templateStyle: 'dark',
+      title: 'OCO-2',
+      subtitle: 'Orbiting Carbon Observatory 2',
+      summary:
+        'OCO-2 is an Earth satellite mission designed to study the sources and sinks of carbon dioxide globally and provide scientists with a better idea of how carbon is contributing to climate change. ',
+      thumbnailImage: 'https://picsum.photos/400/200',
+      missionWebsiteUrl: 'http://oco.jpl.nasa.gov/',
+      topicLabels: ['Stars and Galaxies', 'Exoplanets'],
+      heroImage: {
+        srcSet: 'https://https://picsum.photos/320/200 320w, https://picsum.photos/1920/1200 1440w',
+        src: {
+          url: 'https://picsum.photos/1920/1200',
+          width: 1920,
+          height: 1200
+        },
+        alt: 'OCO-2 hero image'
+      },
+      instrumentImage: {
+        webp: {
+          url: '/public/images/mission-oco2.webp'
+        },
+        src: {
+          url: '/public/images/mission-grace-fo-75.webp',
+          width: 1597,
+          height: 700
+        },
+        alt: 'The instrument'
+      },
+      instrumentBackground: {
+        image: {
+          srcSet: '/public/images/bg-earth-1440x810.jpg' + ' 1440w',
+          src: {
+            url: '/public/images/bg-earth-1440x810.jpg',
+            width: 1440,
+            height: 810
+          }
+        }
+      }
+    }
+  }
+}
+
+export const LightTemplateWithHero = {
+  args: {
+    data: {
+      ...MissionDetailStatsData,
+      ...MissionDetailHighlightsData,
+      ...MissionDetailStreamfieldData,
+      ...MissionDetailAboutData,
+      relatedLinks: [BlockRelatedLinksData.data],
+      relatedPages: BlockLinkCardCarouselData,
+      otherMissions: BlockLinkTileCarouselData,
+      slug: 'oco-2',
+      templateStyle: 'light',
+      title: 'OCO-2',
+      subtitle: 'Orbiting Carbon Observatory 2',
+      summary:
+        'OCO-2 is an Earth satellite mission designed to study the sources and sinks of carbon dioxide globally and provide scientists with a better idea of how carbon is contributing to climate change. ',
+      missionWebsiteUrl: 'http://oco.jpl.nasa.gov/',
+      heroImage: {
+        srcSet: 'https://picsum.photos/320/320 320w, https://picsum.photos/1920/1200 1440w',
+        src: {
+          url: 'https://picsum.photos/1920/1200',
+          width: 1920,
+          height: 1200
+        },
+        alt: 'The hero image'
+      },
+      instrumentImage: null,
+      instrumentBackground: null
+    }
+  }
+}
+
+export const LightTemplateNoBackground = {
+  args: {
+    data: {
+      ...MissionDetailStatsData,
+      ...MissionDetailHighlightsData,
+      ...MissionDetailStreamfieldData,
+      ...MissionDetailAboutData,
+      relatedLinks: [BlockRelatedLinksData.data],
+      relatedPages: BlockLinkCardCarouselData,
+      otherMissions: BlockLinkTileCarouselData,
+      slug: 'oco-2',
+      templateStyle: 'light',
+      title: 'OCO-2',
+      subtitle: 'Orbiting Carbon Observatory 2',
+      summary:
+        'OCO-2 is an Earth satellite mission designed to study the sources and sinks of carbon dioxide globally and provide scientists with a better idea of how carbon is contributing to climate change. ',
+      missionWebsiteUrl: 'http://oco.jpl.nasa.gov/',
+      heroImage: {
+        srcSet: 'https://picsum.photos/320/320 320w, https://picsum.photos/1920/1200 1440w',
+        src: {
+          url: 'https://picsum.photos/1920/1200',
+          width: 1920,
+          height: 1200
+        },
+        alt: 'The hero image'
+      },
+      instrumentImage: {
+        webp: {
+          url: '/public/images/mission-oco2.webp'
+        },
+        src: {
+          url: '/public/images/mission-grace-fo-75.webp',
+          width: 1597,
+          height: 700
+        },
+        alt: 'The instrument'
+      },
+      instrumentBackground: null
+    }
+  }
+}
+
+// stories
+export const GraceFO = {
+  args: {
+    data: {
+      showClock: true,
+      showDistance: false,
+      clockType: 'time_in_orbit',
+      startDateTime: '2018-10-22 10:04:21+01:00',
+      distanceType: 'earth',
+      distanceValue: 4986444,
+      distanceApiUrls: '',
+      displayDate: 'Oct. 22, 2018',
+      missionTypes: [{ missionType: 'Orbiters' }],
+      missionTargets: [{ target: 'Earth' }],
+      status: 'current',
+      ...MissionDetailHighlightsData,
+      highlightsHeading: 'Mission Highlights',
+      highlights: [
+        {
+          date: '2018-11-01',
+          heading: 'GRACE-FO Resumes Data Collection',
+          summary:
+            'Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam sagittis orci purus, in luctus ex volutpat sit amet. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam sagittis orci purus, in luctus ex volutpat sit amet.'
+        }
+      ],
+      feature: [
+        {
+          blockType: 'QuoteBlock',
+          quote:
+            "“A nice thing about it is it doesn't shatter. If impacted, it bends rather than breaks and still has good optical properties”",
+          attribution: 'Amy Ross, Spacesuit Designer'
+        }
+      ],
+      relatedLinks: [
+        {
+          links: [
+            {
+              text: 'Mission Website',
+              document: '',
+              page: '',
+              externalLink: 'http://gracefo.jpl.nasa.gov/'
+            }
+          ]
+        }
+      ],
+      relatedPages: BlockLinkCardCarouselData,
+      otherMissions: BlockLinkTileCarouselData,
+      slug: 'grace-fo',
+      templateStyle: 'dark',
+      title: 'GRACE-FO',
+      subtitle: 'Gravity Recovery and Climate Experiment Follow-On',
+      summary:
+        'The Gravity Recovery and Climate Experiment Follow-on (GRACE-FO) mission is a partnership between NASA and the German Research Centre for Geosciences (GFZ).',
+      thumbnailImage: 'https://picsum.photos/400/200',
+      missionWebsiteUrl: 'http://gracefo.jpl.nasa.gov/',
+      heroImage: {
+        srcSet: 'https://picsum.photos/320/320 320w, https://picsum.photos/1920/1200 1440w',
+        src: {
+          url: 'https://picsum.photos/1920/1200',
+          width: 1920,
+          height: 1200
+        },
+        alt: 'GRACE-FO hero image'
+      },
+      instrumentImage: {
+        webp: {
+          url: '/public/images/mission-grace-fo-75.webp'
+        },
+        src: {
+          url: '/public/images/mission-grace-fo.png',
+          width: 1597,
+          height: 700
+        },
+        alt: 'The instrument'
+      },
+      instrumentBackground: {
+        image: {
+          srcSet: '/public/images/bg-earth-1440x810.jpg' + ' 1440w',
+          src: {
+            url: '/public/images/bg-earth-1440x810.jpg',
+            width: 1440,
+            height: 810
+          }
+        }
+      }
+    }
+  }
+}