@explorer-1/vue 0.0.0

package/src/templates/PageNewsDetail/PageNewsDetail.stories.js

@@ -0,0 +1,158 @@
+import { HeroMediaData } from './../../components/HeroMedia/HeroMedia/HeroMedia.stories'
+import { DetailHeadlineData } from './../../components/DetailHeadline/DetailHeadline/DetailHeadline.stories'
+import { BlockStreamfieldData } from './../../components/BlockStreamfield/BlockStreamfield/BlockStreamfield.stories'
+import {
+  BlockLinkCardCarouselData,
+  BlockLinkTileCarouselData
+} from './../../components/BlockLinkCarousel/BlockLinkCarousel.stories.js'
+import { BlockRelatedLinksData } from './../../components/BlockRelatedLinks/BlockRelatedLinks.stories.js'
+import { BlockImageCarouselData } from './../../components/BlockImageCarousel/BlockImageCarousel.stories'
+import { BlockImageComparisonData } from './../../components/BlockImageComparison/BlockImageComparison.stories'
+import { BaseVideoData } from './../../components/BaseVideo/BaseVideo.stories'
+import { BlockVideoEmbedData } from './../../components/BlockVideoEmbed/BlockVideoEmbed.stories'
+import PageNewsDetail from './PageNewsDetail.vue'
+
+export default {
+  title: 'Templates/PageNewsDetail',
+  component: PageNewsDetail,
+  decorators: [
+    () => ({
+      template: `<div id="storyDecorator" class="disable-nav-offset"><story/></div>`
+    })
+  ],
+  parameters: {
+    html: {
+      root: '#storyDecorator'
+    }
+  },
+  excludeStories: /.*Data$/
+}
+
+export const NewsDetail = {
+  args: {
+    data: {
+      slug: 'nasas-ingenuity-mars-helicopter-recharges-its-batteries-in-flight',
+      url: '/news/nasas-ingenuity-mars-helicopter-recharges-its-batteries-in-flight',
+      ...DetailHeadlineData,
+      getTopicsForDisplay: [
+        {
+          title: 'Mars',
+          url: 'http://localhost:3000/topics/mars'
+        }
+      ],
+      topper: '',
+      summary:
+        'Headed to the Red Planet with the Perseverance rover, the pioneering helicopter is powered up for the first time in interplanetary space as part of a systems check.',
+      thumbnailImage: {
+        original: 'https://picsum.photos/400/200'
+      },
+      heroPosition: 'full_bleed',
+      hero: [
+        {
+          ...HeroMediaData,
+          blockType: 'HeroImageBlock'
+        }
+      ],
+      ...BlockStreamfieldData,
+      releaseNumber: '2020-157',
+      relatedLinks: [BlockRelatedLinksData.data],
+      mediaContacts: [
+        {
+          contact: {
+            name: 'Test person',
+            address: 'Jet Propulsion Laboratory, Pasadena, Calif.',
+            email: 'test.person@jpl.nasa.gov',
+            phone: '818-354-1234'
+          }
+        }
+      ],
+      getRelatedOrLatestNews: BlockLinkCardCarouselData,
+      relatedPagesForMoreSection: BlockLinkTileCarouselData
+    }
+  }
+}
+
+export const InlineHero = {
+  args: {
+    data: {
+      ...NewsDetail.args.data,
+      heroPosition: 'inline'
+    }
+  }
+}
+
+export const HeroCarousel = {
+  args: {
+    data: {
+      ...NewsDetail.args.data,
+      hero: [{ blockType: 'CarouselBlock', blocks: BlockImageCarouselData }]
+    }
+  }
+}
+
+export const HeroImageComparison = {
+  args: {
+    data: {
+      ...NewsDetail.args.data,
+      heroPosition: 'inline',
+      hero: [
+        {
+          ...BlockImageComparisonData
+        }
+      ]
+    }
+  }
+}
+
+export const HeroVideo = {
+  args: {
+    data: {
+      ...NewsDetail.args.data,
+      hero: [
+        {
+          blockType: 'VideoBlock',
+          video: BaseVideoData,
+          caption: 'Lorem ipsum dolor sit amet',
+          credit: 'NASA/JPL'
+        }
+      ]
+    }
+  }
+}
+
+export const HeroVideoEmbed = {
+  args: {
+    data: {
+      ...NewsDetail.args.data,
+      heroPosition: 'inline',
+      hero: [
+        {
+          ...BlockVideoEmbedData.data,
+          embed: {
+            embed: `<iframe title="Meet NASA's Diana Trujillo - Embedded Hero" width="480" height="270" src="https://www.youtube.com/embed/vUuUyYqI83Q?feature=oembed" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>`
+          },
+          blockType: 'VideoEmbedBlock'
+        }
+      ]
+    }
+  }
+}
+
+export const NoHero = {
+  args: {
+    data: {
+      ...NewsDetail.args.data,
+      hero: []
+    }
+  }
+}
+
+export const WithTopper = {
+  args: {
+    data: {
+      ...NewsDetail.args.data,
+      topper:
+        '<p>Editor’s Note: Mars Helicopter flight delayed to no earlier than April 14.</p><p><a href="https://mars.nasa.gov/technology/helicopter/status/291/mars-helicopter-flight-delayed-to-no-earlier-than-april-14/"><i>Read here for more information</i></a><i>.</i></p><p></p><hr/><p></p>'
+    }
+  }
+}

package/src/templates/PageNewsDetail/PageNewsDetail.vue

@@ -0,0 +1,242 @@
+<template>
+  <div
+    v-if="data"
+    class="ThemeLight"
+    :class="computedClass"
+    itemscope
+    itemtype="http://schema.org/Article"
+  >
+    <!-- schema.org -->
+    <meta
+      v-if="data.thumbnailImage && data.thumbnailImage.original"
+      itemprop="image"
+      :content="data.thumbnailImage.original"
+    />
+
+    <HeroMedia
+      v-if="
+        !heroEmpty &&
+        !heroInline &&
+        (data.hero[0].blockType === 'HeroImageBlock' || data.hero[0].blockType === 'VideoBlock')
+      "
+      class="md:mb-12 lg:mb-18 mb-10"
+      :image="data.hero[0].image"
+      :video="data.hero[0].video"
+      :display-caption="data.hero[0].displayCaption"
+      :caption="data.hero[0].caption"
+      :credit="data.hero[0].credit"
+      :constrain="data.heroConstrain"
+    />
+
+    <!-- news headline and author -->
+    <LayoutHelper
+      indent="col-2"
+      class="mb-10"
+    >
+      <DetailHeadline
+        :title="data.title"
+        :publication-date="data.publicationDate"
+        :publication-time="data.publicationTime"
+        :author="data.author"
+        :topics="data.getTopicsForDisplay"
+        schema
+      />
+    </LayoutHelper>
+
+    <!-- inline hero content -->
+    <LayoutHelper
+      v-if="!heroEmpty && heroInline"
+      indent="col-2"
+      class="lg:mb-22 mt-10 mb-10"
+    >
+      <BlockImageStandard
+        v-if="data.hero[0].blockType === 'HeroImageBlock'"
+        :data="data.hero[0].imageInline"
+        :display-caption="data.hero[0].displayCaption"
+        :caption="data.hero[0].caption"
+        :constrain="data.heroConstrain"
+      />
+      <BlockImageCarousel
+        v-else-if="data.hero[0].blockType === 'CarouselBlock'"
+        :items="data.hero[0].blocks"
+        :block-id="data.hero[0].id"
+      />
+      <BlockVideo
+        v-else-if="data.hero[0].blockType === 'VideoBlock'"
+        :data="data.hero[0]"
+        autoplay
+      />
+      <BaseImagePlaceholder
+        v-else-if="data.hero[0].blockType === 'VideoEmbedBlock'"
+        aspect-ratio="16:9"
+        dark-mode
+      >
+        <div v-html="data.hero[0].embed.embed"></div>
+      </BaseImagePlaceholder>
+      <BlockImageComparison
+        v-else-if="data.hero[0].blockType === 'ImageComparisonBlock'"
+        :data="data.hero[0]"
+      />
+    </LayoutHelper>
+
+    <!-- share buttons -->
+    <LayoutHelper
+      indent="col-2"
+      class="lg:mb-0 relative mb-8"
+    >
+      <ShareButtons
+        :title="data.title"
+        :url="data.url"
+      />
+    </LayoutHelper>
+
+    <!-- summary and topper -->
+    <LayoutHelper
+      indent="col-3"
+      class="lg:mb-8 mb-5"
+      :class="{ 'lg:min-h-28': socialAdjustment }"
+    >
+      <BlockText
+        v-if="data.topper && data.topper.length > 2"
+        class="lg:mb-8 mb-5"
+        :text="data.topper"
+      />
+      <p
+        class="text-body-lg font-semibold"
+        itemprop="abstract"
+      >
+        {{ data.summary }}
+      </p>
+    </LayoutHelper>
+
+    <!-- streamfield blocks -->
+    <BlockStreamfield
+      itemprop="articleBody"
+      :data="data.body"
+    />
+
+    <!-- related links -->
+    <LayoutHelper
+      v-if="data.relatedLinks && data.relatedLinks.length"
+      indent="col-3"
+      class="lg:my-18 my-10"
+    >
+      <BlockRelatedLinks :data="data.relatedLinks[0]" />
+    </LayoutHelper>
+
+    <!-- media contacts and release number -->
+    <LayoutHelper
+      v-if="(data.mediaContacts && data.mediaContacts.length > 0) || data.releaseNumber"
+      indent="col-3"
+      class="lg:my-18 my-10"
+    >
+      <NewsDetailMediaContact :contacts="data.mediaContacts" />
+      <p
+        v-if="data.releaseNumber"
+        class="text-body-sm text-gray-mid-dark"
+      >
+        {{ data.releaseNumber }}
+      </p>
+    </LayoutHelper>
+
+    <!-- extras -->
+    <BlockLinkCarousel
+      item-type="cards"
+      class="mt-24"
+      :heading="data.hasRelatedNews ? 'Related News' : 'Latest News'"
+      :items="data.getRelatedOrLatestNews"
+    />
+    <div
+      v-if="data.relatedPagesForMoreSection && data.relatedPagesForMoreSection.length"
+      class="bg-gray-light lg:py-24 lg:mt-24 py-12 mt-12"
+    >
+      <BlockLinkCarousel
+        item-type="tiles"
+        heading="Explore More"
+        :items="data.relatedPagesForMoreSection"
+      />
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue'
+import LayoutHelper from './../../components/LayoutHelper/LayoutHelper.vue'
+import HeroMedia from './../../components/HeroMedia/HeroMedia.vue'
+import DetailHeadline from './../../components/DetailHeadline/DetailHeadline.vue'
+import BaseImagePlaceholder from './../../components/BaseImagePlaceholder/BaseImagePlaceholder.vue'
+import BlockStreamfield from './../../components/BlockStreamfield/BlockStreamfield.vue'
+import NewsDetailMediaContact from './../../components/NewsDetailMediaContact/NewsDetailMediaContact.vue'
+import BlockRelatedLinks from './../../components/BlockRelatedLinks/BlockRelatedLinks.vue'
+import BlockImageCarousel from './../../components/BlockImageCarousel/BlockImageCarousel.vue'
+import BlockImageComparison from './../../components/BlockImageComparison/BlockImageComparison.vue'
+import BlockImageStandard from './../../components/BlockImage/BlockImageStandard.vue'
+import BlockLinkCarousel from './../../components/BlockLinkCarousel/BlockLinkCarousel.vue'
+import ShareButtons from './../../components/ShareButtons/ShareButtons.vue'
+import BlockText from './../../components/BlockText/BlockText.vue'
+
+export default defineComponent({
+  name: 'PageNewsDetail',
+  components: {
+    LayoutHelper,
+    HeroMedia,
+    DetailHeadline,
+    BaseImagePlaceholder,
+    BlockStreamfield,
+    NewsDetailMediaContact,
+    BlockRelatedLinks,
+    BlockImageCarousel,
+    BlockImageComparison,
+    BlockImageStandard,
+    BlockLinkCarousel,
+    ShareButtons,
+    BlockText
+  },
+  props: {
+    data: {
+      type: Object,
+      required: false
+    }
+  },
+  computed: {
+    heroEmpty(): boolean {
+      return (this.data?.hero || []).length === 0
+    },
+    heroInline(): boolean {
+      if (!this.heroEmpty) {
+        // if (this.data.hero[0].blockType === 'VideoBlock') {
+        //   return false
+        // } else
+        if (
+          this.data?.heroPosition === 'inline' ||
+          this.data?.hero[0].blockType === 'CarouselBlock'
+        ) {
+          return true
+        }
+      }
+      return false
+    },
+    computedClass(): string {
+      if (this.heroInline || this.heroEmpty) {
+        return 'pt-5 lg:pt-12'
+      } else if (!this.heroInline) {
+        return '-nav-offset'
+      }
+      return ''
+    },
+    socialAdjustment() {
+      if (this.data?.body && this.data.body[0]) {
+        const block = this.data.body[0].blockType
+        if (
+          block === 'CarouselBlock' ||
+          block === 'FullBleedImageBlock' ||
+          block === 'TeaserBlock' ||
+          block === 'VideoEmbedBlock'
+        ) {
+          return true
+        }
+      }
+      return false
+    }
+  }
+})
+</script>

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

@@ -0,0 +1,64 @@
+import { HeroMediaData } from './../../components/HeroMedia/HeroMedia.stories'
+import { BlockStreamfieldData } from './../../components/BlockStreamfield/BlockStreamfield.stories'
+import PageEduNewsDetail from './PageEduNewsDetail.vue'
+
+export default {
+  title: 'Templates/EDU/PageEduNewsDetail',
+  component: PageEduNewsDetail,
+  decorators: [
+    () => ({
+      template: `<div id="storyDecorator" class="disable-nav-offset"><story/></div>`
+    })
+  ],
+  parameters: {
+    html: {
+      root: '#storyDecorator'
+    }
+  },
+  excludeStories: /.*Data$/
+}
+
+export const EduNewsDetail = {
+  args: {
+    data: {
+      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',
+      getTopicsForDisplay: [
+        {
+          title: 'Mars',
+          url: 'http://localhost:3000/topics/mars'
+        }
+      ],
+      topper: '',
+      summary:
+        'Headed to the Red Planet with the Perseverance rover, the pioneering helicopter is powered up for the first time in interplanetary space as part of a systems check.',
+      thumbnailImage: {
+        original: 'https://picsum.photos/400/200'
+      },
+      heroPosition: 'full_bleed',
+      heroImage: HeroMediaData.image,
+      heroImageInline: HeroMediaData.imageInline,
+      ...BlockStreamfieldData
+    }
+  }
+}
+
+export const InlineHero = {
+  args: {
+    data: {
+      ...EduNewsDetail.args.data,
+      heroPosition: 'inline'
+    }
+  }
+}
+
+export const NoHero = {
+  args: {
+    data: {
+      ...EduNewsDetail.args.data,
+      hero: []
+    }
+  }
+}

package/src/templates/edu/PageEduNewsDetail.vue

@@ -0,0 +1,155 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { StreamfieldBlockData } from '../../components/BlockStreamfield/BlockStreamfield.vue'
+import type {
+  ImageObject,
+  PageResponseObject,
+  RelatedLinkObject,
+  Topic,
+  ThumbnailObject
+} from './../../interfaces'
+import isEmpty from 'lodash/isEmpty'
+
+interface PageEduNewsDetailObject extends PageResponseObject {
+  heroImage: ImageObject
+  thumbnailImage: ThumbnailObject
+  heroPosition: string
+  heroConstrain: boolean
+  heroImageCaption: string
+  firstPublishedAt: string
+  lastPublishedAt: string
+  title: string
+  getTopicsForDisplay: Topic[]
+  summary: string
+  topper: string
+  relatedLinks: RelatedLinkObject[]
+  body: StreamfieldBlockData[]
+}
+
+interface PageEduNewsDetailProps {
+  data: PageEduNewsDetailObject
+}
+
+// define props
+const props = defineProps<PageEduNewsDetailProps>()
+
+const heroEmpty = computed(() => {
+  return isEmpty(props.data?.heroImage)
+})
+
+const heroInline = computed(() => {
+  if (props.data?.heroPosition === 'inline') {
+    return true
+  }
+  return false
+})
+
+const computedClass = computed(() => {
+  if (heroInline.value || heroEmpty.value) {
+    return 'pt-5 lg:pt-12'
+  } else if (!heroInline.value) {
+    return '-nav-offset'
+  }
+  return ''
+})
+
+const dateTimeArray = computed(() => {
+  return props.data.firstPublishedAt.split('T')
+})
+</script>
+<template>
+  <div
+    v-if="data"
+    class="ThemeVariantLight"
+    :class="computedClass"
+    itemscope
+    itemtype="http://schema.org/Article"
+  >
+    <!-- schema.org -->
+    <meta
+      v-if="data.thumbnailImage && data.thumbnailImage.original"
+      itemprop="image"
+      :content="data.thumbnailImage.original"
+    />
+
+    <HeroMedia
+      v-if="!heroEmpty && !heroInline"
+      class="md:mb-12 lg:mb-18 mb-10"
+      :image="data.heroImage"
+      :display-caption="data.heroImage.displayCaption"
+      :caption="data.heroImage.caption"
+      :credit="data.heroImage.credit"
+      :constrain="data.heroConstrain"
+    />
+
+    <!-- news headline -->
+    <LayoutHelper
+      indent="col-2"
+      class="mb-10"
+    >
+      <DetailHeadline
+        :title="data.title"
+        :publication-date="dateTimeArray?.length ? dateTimeArray[0] : undefined"
+        :publication-time="dateTimeArray?.length ? dateTimeArray[1] : undefined"
+        :topics="data.getTopicsForDisplay"
+        schema
+      />
+      <share-buttons-edu
+        class="mt-4"
+        :url="data.url"
+        :title="data.title"
+        :image="data.thumbnailImage?.original"
+      />
+    </LayoutHelper>
+
+    <!-- inline hero content -->
+    <LayoutHelper
+      v-if="!heroEmpty && heroInline"
+      indent="col-2"
+      class="lg:mb-22 mt-10 mb-10"
+    >
+      <BlockImageStandard
+        :data="data.heroImage"
+        :display-caption="data.heroImage.displayCaption"
+        :caption="data.heroImage.caption"
+        :constrain="data.heroConstrain"
+      />
+    </LayoutHelper>
+
+    <!-- summary and topper -->
+    <LayoutHelper
+      indent="col-3"
+      class="lg:mb-8 mb-5"
+    >
+      <BlockText
+        v-if="data.topper && data.topper.length > 2"
+        class="lg:mb-8 mb-5"
+        :text="data.topper"
+      />
+      <p
+        class="text-body-lg font-semibold"
+        itemprop="abstract"
+      >
+        {{ data.summary }}
+      </p>
+    </LayoutHelper>
+
+    <!-- streamfield blocks -->
+    <BlockStreamfield
+      itemprop="articleBody"
+      :data="data.body"
+    />
+    <div class="bg-stars bg-primary-darker">
+      <div class="py-10 text-center text-white">
+        <strong>Related News goes here</strong>
+      </div>
+      <!-- extras -->
+      <!-- <BlockLinkCarousel
+        item-type="cards"
+        class="mt-24"
+        heading="Explore more"
+        :items="data.getRelatedOrLatestNews"
+      /> -->
+    </div>
+  </div>
+</template>

package/src/templates/www/HomePage/HomePage.vue

@@ -0,0 +1,30 @@
+<template>
+  <div>
+    <pre>
+      {{ data }}
+    </pre>
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue'
+export default defineComponent({
+  name: 'HomePage',
+  props: {
+    data: {
+      type: Object,
+      required: false
+    }
+  },
+  computed: {
+    theNews(): object | false {
+      // check first for featured news
+      if (this.data?.featuredNews && this.data.featuredNews.length) {
+        return this.data.featuredNews
+      } else if (this.data?.latestNews && this.data.latestNews.length) {
+        return this.data.latestNews
+      }
+      return false
+    }
+  }
+})
+</script>

package/src/utils/dayjs.js

@@ -0,0 +1,32 @@
+import dayjs from 'dayjs'
+import updateLocale from 'dayjs/plugin/updateLocale'
+import localizedFormat from 'dayjs/plugin/localizedFormat'
+import timezone from 'dayjs/plugin/timezone'
+import advancedFormat from 'dayjs/plugin/advancedFormat'
+
+// Locales must be imported manually
+// see https://github.com/iamkun/dayjs/tree/dev/src/locale
+import 'dayjs/locale/en-gb'
+
+dayjs.extend(localizedFormat)
+dayjs.extend(updateLocale)
+dayjs.updateLocale('en', {
+  monthsShort: [
+    'Jan.',
+    'Feb.',
+    'March',
+    'April',
+    'May',
+    'June',
+    'July',
+    'Aug.',
+    'Sept.',
+    'Oct.',
+    'Nov.',
+    'Dec.'
+  ]
+})
+dayjs.extend(timezone)
+dayjs.extend(advancedFormat)
+
+export default dayjs