@explorer-1/vue 0.0.0

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

@@ -0,0 +1,21 @@
+import BlockText, { variants } from './BlockText.vue'
+
+export default {
+  title: 'Components/Blocks/BlockText',
+  component: BlockText,
+  argTypes: {
+    variant: {
+      control: { type: 'select' },
+      options: Object.keys(variants)
+    },
+    text: { control: { type: 'text' } }
+  }
+}
+
+export const Default = {
+  name: 'BlockText',
+  args: {
+    variant: 'large',
+    text: `<p>AVIRIS is the first full spectral range imaging spectrometer and dedicated to <a href="https://en.wikipedia.org/wiki/Remote_sensing" target="_blank">Earth Remote Measurement</a>. Test <a href="#">preventlongurlsfrombreakingoutofcontainerpreventlongurlsfrombreakingoutofcontainerpreventlongurlsfrombreakingoutofcontainerpreventlongurlsfrombreakingoutofcontainer</a>. It is a unique optical sensor that continues to deliver calibrated images of the upwelling spectral radiance in 224 contiguous spectral channels (bands) with wavelengths from 380 to 2510 nanometers. AVIRIS has been flown on four aircraft platforms: NASA's high altitude ER-2 jet, Twin Otter International's turboprop, Scaled Composites' Proteus, and NASA's WB-57. The ER-2 flies at approximately 20 km above sea level, at about 730 km/hr. The Twin Otter aircraft flies at 4km above ground level at 130km/hr. AVIRIS has flown North America including Alaska, Hawaii, Europe, Brazil, and Argentina.</p><p>The objective of the AVIRIS project is to support advanced NASA science and applications research.  AVIRIS uses imaging spectroscopy to detect, identify, measure, and monitor constituents and processes of the Earth's surface and atmosphere based on measured constituent absorption and scattering signatures. Science and applications research with AVIRIS data spans a wide range of discipline across the Earth system. </p><hr /><ul><li>Lorem ipsum dolor sit amet consectatur adipscing</li><li>Lorem ipsum dolor sit amet <strong>consectatur adipscing</strong></li><li>Lorem ipsum dolor sit amet consectatur adipscing</li></ul><p>Lorem ipsum dolor sit amet paragraph text</p><ol><li>Lorem ipsum dolor sit amet consectatur adipscing</li><li>Lorem ipsum dolor sit amet consectatur adipscing</li><li>Lorem ipsum dolor <strong>sit amet</strong> consectatur adipscing</li><li>Lorem <strong>ipsum dolor</strong> sit amet consectatur adipscing</li></ol><hr /><p>Lorem ipsum dolor sit amet consectatur adipscing</p>`
+  }
+}

package/src/components/BlockText/BlockText.vue

@@ -0,0 +1,44 @@
+<template>
+  <div
+    class="BlockText"
+    :class="computedClass"
+    v-html="text"
+  ></div>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+interface Variants {
+  [name: string]: string
+}
+
+export const variants: Variants = {
+  small: 'text-body-sm',
+  medium: 'text-body-md',
+  large: 'text-body-lg'
+}
+
+export default defineComponent({
+  name: 'BlockText',
+  props: {
+    text: {
+      type: String,
+      required: false
+    },
+    variant: {
+      type: String,
+      required: false,
+      default: 'large',
+      validator: (prop: string): boolean => Object.keys(variants).includes(prop)
+    }
+  },
+  computed: {
+    computedClass(): string {
+      return variants[this.variant]
+    }
+  }
+})
+</script>
+<style lang="scss">
+@import '@explorer-1/common/src/scss/components/BlockText';
+</style>

package/src/components/BlockTwitterEmbed/BlockTwitterEmbed.stories.js

@@ -0,0 +1,19 @@
+import BlockTwitterEmbed from './BlockTwitterEmbed.vue'
+
+export default {
+  title: 'Components/Blocks/BlockTwitterEmbed',
+  component: BlockTwitterEmbed,
+  excludeStories: /.*Data$/
+}
+
+export const BlockTwitterEmbedData = {
+  blockType: 'TwitterEmbedBlock',
+  username: 'NASAJPL'
+}
+
+export const List = {
+  name: 'BlockTwitterEmbed',
+  args: {
+    data: BlockTwitterEmbedData
+  }
+}

package/src/components/BlockTwitterEmbed/BlockTwitterEmbed.vue

@@ -0,0 +1,61 @@
+<template>
+  <div
+    v-if="data"
+    class="BlockTwitterEmbed lg:px-0 px-8"
+  >
+    <div
+      ref="timeline"
+      class="border-gray-light-mid mx-auto border"
+    ></div>
+  </div>
+</template>
+
+<script lang="ts">
+// @ts-nocheck
+export default {
+  name: 'BlockTwitterEmbed',
+  props: {
+    data: {
+      type: Object,
+      required: false
+    }
+  },
+  mounted() {
+    this.render()
+  },
+  methods: {
+    render() {
+      // TODO: VUE3 -- find another way to make this client-only
+      if (typeof require !== 'undefined') {
+        require('twitter-widgets').load((err, twttr) => {
+          if (err) {
+            console.log('[twitter-widgets] Error: ' + err)
+            return
+          }
+          twttr.widgets.createTimeline(
+            {
+              sourceType: 'profile',
+              screenName: this.data.username
+            },
+            this.$refs.timeline
+          )
+        })
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.BlockTwitterEmbed {
+  > div {
+    height: 400px;
+    max-height: 60vh;
+    @apply overflow-y-auto;
+    @screen md {
+      height: 600px;
+      @apply w-xl max-h-none;
+    }
+  }
+}
+</style>

package/src/components/BlockVideo/BlockVideo.stories.js

@@ -0,0 +1,23 @@
+import { BaseVideoData } from './../BaseVideo/BaseVideo.stories'
+import BlockVideo from './BlockVideo.vue'
+
+export default {
+  title: 'Components/Blocks/BlockVideo',
+  component: BlockVideo,
+  excludeStories: /.*Data$/
+}
+
+// shared data
+export const BlockVideoData = {
+  block: {
+    blockType: 'VideoBlock',
+    video: BaseVideoData,
+    caption: 'Lorem ipsum dolor sit amet consectatur',
+    credit: 'Credit'
+  }
+}
+
+export const Default = {
+  name: 'BlockVideo',
+  args: { data: BlockVideoData.block }
+}

package/src/components/BlockVideo/BlockVideo.vue

@@ -0,0 +1,41 @@
+<template>
+  <div
+    v-if="data"
+    class="BlockVideo"
+  >
+    <BaseVideo
+      :data="data.video"
+      :autoplay="autoplay"
+    />
+
+    <div
+      v-if="(data.caption && data.caption.length > 2) || data.credit"
+      class="lg:px-0 p-4 pb-0"
+    >
+      <BaseImageCaption :data="data" />
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue'
+import BaseVideo from './../BaseVideo/BaseVideo.vue'
+import BaseImageCaption from './../BaseImageCaption/BaseImageCaption.vue'
+
+export default defineComponent({
+  name: 'BlockVideo',
+  components: {
+    BaseVideo,
+    BaseImageCaption
+  },
+  props: {
+    data: {
+      type: Object,
+      required: false
+    },
+    autoplay: {
+      type: Boolean,
+      default: false
+    }
+  }
+})
+</script>

package/src/components/BlockVideoEmbed/BlockVideoEmbed.stories.js

@@ -0,0 +1,20 @@
+import BlockVideoEmbed from './BlockVideoEmbed.vue'
+
+export default {
+  title: 'Components/Blocks/BlockVideoEmbed',
+  component: BlockVideoEmbed,
+  excludeStories: /.*Data$/
+}
+
+// shared data
+export const BlockVideoEmbedData = {
+  data: {
+    embed: {
+      embed: `<iframe title="Meet NASA's Diana Trujillo" 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>`
+    },
+    caption: `<p>Get to know some of the diverse team of engineers and scientists working on NASA's next Mars rover, Perseverance.</p>`,
+    credit: 'ISRO/NASA/JPL-Caltech/Brown University/USGS'
+  }
+}
+
+export const Default = { name: 'BlockVideoEmbed', args: { data: BlockVideoEmbedData.data } }

package/src/components/BlockVideoEmbed/BlockVideoEmbed.vue

@@ -0,0 +1,71 @@
+<template>
+  <div
+    v-if="data && data.embed"
+    class="BlockVideoEmbed"
+  >
+    <BaseImagePlaceholder
+      aspect-ratio="16:9"
+      dark-mode
+    >
+      <div v-html="data.embed.embed"></div>
+    </BaseImagePlaceholder>
+    <div
+      v-if="data.caption"
+      class="lg:px-0 p-4"
+    >
+      <BaseImageCaption :data="data" />
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import type { PropType } from 'vue'
+import { defineComponent } from 'vue'
+import BaseImagePlaceholder from './../BaseImagePlaceholder/BaseImagePlaceholder.vue'
+import BaseImageCaption from './../BaseImageCaption/BaseImageCaption.vue'
+
+export interface BlockData {
+  heading: string
+  display?: boolean
+  embed: {
+    // HTML for the iframe, generated by OEmbed.
+    embed: string
+  }
+  caption: string
+  credit?: string
+}
+
+export default defineComponent({
+  name: 'BlockVideoEmbed',
+  components: {
+    BaseImagePlaceholder,
+    BaseImageCaption
+  },
+  props: {
+    data: {
+      type: Object as PropType<BlockData>,
+      required: false
+    }
+  },
+  mounted() {
+    this.addIframeLazyLoad()
+  },
+  methods: {
+    addIframeLazyLoad() {
+      if (!this.data?.embed) {
+        return
+      }
+
+      // TODO: not using feature detect as that would require rewriting the html output from wagtail to set data-src instead of src
+      // get the iframe in this component
+      const iframe = this.$el.querySelector('iframe')
+      if (iframe) {
+        iframe.setAttribute('loading', 'lazy')
+      }
+    }
+  }
+})
+</script>
+
+<style lang="scss">
+@import '@explorer-1/common/src/scss/components/BlockVideoEmbed';
+</style>

package/src/components/CalendarButton/CalendarButton.stories.js

@@ -0,0 +1,36 @@
+import CalendarButton from './CalendarButton.vue'
+
+export default {
+  title: 'Components/CalendarButton',
+  component: CalendarButton,
+  excludeStories: /.*Data$/
+}
+
+// data
+export const CalendarButtonData = {
+  title: 'Event title',
+  location: 'Location',
+  isAllDay: false,
+  startDatetime: '2021-11-11T00:00:00-08:00',
+  endDatetime: '2021-11-11T23:59:59.999999-08:00'
+}
+
+// template
+const CalendarButtonTemplate = (args) => ({
+  props: Object.keys(args),
+  components: { CalendarButton },
+  template: `
+  <CalendarButton
+    :is-all-day="isAllDay"
+    :start-datetime="startDatetime"
+    :end-datetime="endDatetime"
+    :title="title"
+    :location="location"
+    />
+  `
+})
+
+export const Default = CalendarButtonTemplate.bind({})
+Default.args = {
+  ...CalendarButtonData
+}

package/src/components/CalendarButton/CalendarButton.vue

@@ -0,0 +1,86 @@
+<template>
+  <BaseButton
+    class="w-full"
+    variant="secondary"
+    compact
+    @click="
+      // @ts-ignore
+      icalendar.download()
+    "
+  >
+    Add to calendar
+  </BaseButton>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { ICalendar } from 'datebook'
+import type { CalendarOptions } from 'datebook'
+// @ts-ignore
+import dayjs from './../../utils/dayjs'
+import BaseButton from './../BaseButton/BaseButton.vue'
+
+export default defineComponent({
+  name: 'CalendarButton',
+  components: {
+    BaseButton
+  },
+  props: {
+    isAllDay: {
+      type: Boolean,
+      required: true
+    },
+    startDatetime: {
+      type: String,
+      required: true
+    },
+    endDatetime: {
+      type: String,
+      required: false
+    },
+    title: {
+      type: String,
+      required: false
+    },
+    location: {
+      type: String,
+      required: false
+    },
+    description: {
+      type: String,
+      required: false
+    }
+  },
+  computed: {
+    icalendar(): ICalendar {
+      let recurrence = {}
+      if (this.endDatetime && this.isAllDay) {
+        // Calculate how many full days
+        const startDateDayjs = dayjs(this.startDatetime)
+        const endDateDayjs = dayjs(this.endDatetime)
+        const difference = endDateDayjs.diff(startDateDayjs, 'day') + 1
+        recurrence = { frequency: 'DAILY', interval: 1, count: difference }
+      }
+
+      const options: CalendarOptions = {
+        title: this.title ? this.title : undefined,
+        location: this.location ? this.addSlashes(this.location) : undefined,
+        description: this.description ? this.description : undefined,
+        start: new Date(this.startDatetime),
+        end: !this.isAllDay && this.endDatetime ? new Date(this.endDatetime) : undefined,
+        recurrence
+      }
+
+      return new ICalendar(options)
+    }
+  },
+  methods: {
+    addSlashes(string: string): string {
+      // Escape special characters COMMA, SEMI-COLON and BACKSLASH
+      // as temporary fix for this issue https://github.com/jshor/datebook/issues/179
+      // regex based of https://stackoverflow.com/a/770533
+      // eslint-disable-next-line
+      return string.replace(/[,;\\]/g, '\\$&').replace(/\u0000/g, '\\0')
+    }
+  }
+})
+</script>

package/src/components/DetailHeadline/DetailHeadline.stories.js

@@ -0,0 +1,48 @@
+import DetailHeadline from './DetailHeadline.vue'
+
+export default {
+  title: 'Components/DetailHeadline',
+  component: DetailHeadline,
+  excludeStories: /.*Data$/
+}
+
+export const DetailHeadlineData = {
+  title: "NASA's Ingenuity Mars Helicopter Recharges Its Batteries in Flight",
+  publicationDate: '2020-08-13',
+  author: {
+    name: 'Jane Platt',
+    organization: 'JPL'
+  },
+  topics: [
+    {
+      title: 'Mars',
+      url: '/topics/mars'
+    },
+    {
+      title: 'Rover',
+      url: '/topics/rover'
+    }
+  ]
+}
+
+// stories
+export const Default = {
+  args: DetailHeadlineData
+}
+
+export const NoAuthor = {
+  args: {
+    title: "NASA's Ingenuity Mars Helicopter Recharges Its Batteries in Flight",
+    publicationDate: '2020-08-13',
+    topics: [
+      {
+        title: 'Mars',
+        url: '/topics/mars'
+      },
+      {
+        title: 'Rover',
+        url: '/topics/rover'
+      }
+    ]
+  }
+}

package/src/components/DetailHeadline/DetailHeadline.vue

@@ -0,0 +1,143 @@
+<template>
+  <div v-if="title || label || topics || publicationDate || author">
+    <div
+      v-if="label || (topics && topics.length)"
+      class="flex flex-wrap items-start mb-3"
+    >
+      <div
+        v-if="topics && topics.length"
+        class="inline"
+      >
+        <BaseLink
+          variant="secondary"
+          :to="topics[0].url"
+          class="py-3"
+          use-primary-color
+        >
+          <span :itemprop="schema ? 'articleSection' : undefined">
+            {{ topics[0].title }}
+          </span>
+        </BaseLink>
+      </div>
+      <span
+        v-else-if="label"
+        class="text-subtitle py-3"
+      >
+        <template v-if="!labelLink">
+          {{ label }}
+        </template>
+        <template v-else>
+          <BaseLink
+            variant="secondary"
+            :to="labelLink"
+            class="py-3"
+          >
+            {{ label }}
+          </BaseLink>
+        </template>
+      </span>
+      <span class="sr-only">.</span>
+    </div>
+    <BaseHeading
+      level="h1"
+      :size="themeStore.theme === 'ThemeEdu' ? 'h1' : 'h2'"
+      :itemprop="schema ? 'headline' : undefined"
+      >{{ title }}
+    </BaseHeading>
+    <div
+      v-if="author || publicationDate"
+      class="lg:text-base text-gray-mid-dark divide-gray-mid-dark px-3 mt-5 -ml-3 text-sm leading-normal"
+    >
+      <span
+        v-if="author"
+        :itemprop="schema ? 'author' : undefined"
+        itemscope
+        itemtype="https://schema.org/Person"
+        class="pr-3 border-r mr-2"
+      >
+        Written by
+        <span :itemprop="schema ? 'name' : undefined">{{ author.name }}</span>
+      </span>
+      <span
+        v-else
+        :itemprop="schema ? 'author' : undefined"
+        itemscope
+        itemtype="https://schema.org/Organization"
+        class="hidden"
+      >
+        <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"
+        />
+        {{
+          // @ts-ignore
+          $filters.displayDate(publicationDate)
+        }}
+      </span>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent, type PropType } from 'vue'
+import { mapStores } from 'pinia'
+import { useThemeStore } from '../../store/theme'
+import type { Topic } from './../../interfaces'
+import BaseLink from './../BaseLink/BaseLink.vue'
+import BaseHeading from './../BaseHeading/BaseHeading.vue'
+
+export default defineComponent({
+  name: 'DetailHeadline',
+  components: {
+    BaseLink,
+    BaseHeading
+  },
+  props: {
+    title: {
+      type: String,
+      required: false
+    },
+    author: {
+      type: Object,
+      required: false
+    },
+    publicationDate: {
+      type: String,
+      required: false
+    },
+    publicationTime: {
+      type: String,
+      required: false
+    },
+    topics: {
+      type: Array as PropType<Topic[]>,
+      required: false
+    },
+    // if topics array isn't available
+    label: {
+      type: String,
+      required: false
+    },
+    labelLink: {
+      type: String,
+      required: false
+    },
+    schema: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    ...mapStores(useThemeStore),
+    pubDatetime(): string | undefined {
+      const currentTime = this.publicationTime || '00:00:00'
+      const returnDate = new Date(this.publicationDate + ' ' + currentTime)
+      return returnDate.toISOString()
+    }
+  }
+})
+</script>

package/src/components/DsnWidget/DsnWidget.stories.js

@@ -0,0 +1,29 @@
+import DsnWidget from './DsnWidget.vue'
+
+export default {
+  title: 'Components/DsnWidget',
+  component: DsnWidget,
+  excludeStories: /.*Data$/,
+  argTypes: {
+    status: {
+      control: { type: 'text' }
+    }
+  }
+}
+
+export const DsnWidgetData = {
+  heading: 'DEEP SPACE NETWORK',
+  link: 'https://eyes.nasa.gov/dsn/dsn.html',
+  linkTarget: true,
+  transmitTitle: 'Currently transmitting',
+  transmitStatus: 'receiving',
+  spacecraftName: 'Parker Solar Probe',
+  location: 'Canberra',
+  __typename: 'DeepSpaceNetworkWidget'
+}
+
+export const Base = {
+  args: {
+    data: DsnWidgetData
+  }
+}