@explorer-1/vue 0.1.4 → 0.1.5

package/src/templates/PageVideoDetail/PageVideoDetail.vue

@@ -0,0 +1,173 @@
+<template>
+  <div
+    v-if="data"
+    class="PageVideoDetail ThemeVariantLight"
+    itemscope
+    itemtype="http://schema.org/VideoObject"
+  >
+    <!-- schema.org -->
+    <meta
+      v-if="data.uploadedMedia && data.uploadedMedia.file"
+      itemprop="contentUrl"
+      :content="data.uploadedMedia.file"
+    />
+    <meta
+      v-if="data.uploadedMedia && data.uploadedMedia.duration"
+      itemprop="duration"
+      :content="data.uploadedMedia.duration"
+    />
+    <meta
+      v-if="data.thumbnailImage && data.thumbnailImage.original"
+      itemprop="thumbnailUrl"
+      :content="data.thumbnailImage.original"
+    />
+    <meta
+      v-if="data.summary || data.body"
+      itemprop="description"
+      :content="data.summary || data.body"
+    />
+    <div class="lg:container 3xl:px-0 lg:mt-12 px-5 mx-auto mt-5">
+      <DetailHeadline
+        v-if="data.title"
+        :title="data.title"
+        :publication-date="data.publicationDate"
+        :label="data.topicLabel"
+        schema
+      />
+    </div>
+    <div
+      v-if="data.block.length"
+      class="max-w-screen-2xl lg:mb-24 mx-auto mt-10 mb-8"
+    >
+      <div
+        v-for="(block, index) in data.block"
+        :key="index"
+      >
+        <BlockVideoEmbed :data="block" />
+      </div>
+    </div>
+    <div
+      v-else-if="data.uploadedMedia"
+      class="max-w-screen-2xl lg:mb-24 mx-auto mt-10 mb-8"
+    >
+      <BaseVideo
+        :data="data.uploadedMedia"
+        schema
+      />
+    </div>
+    <LayoutHelper indent="col-2">
+      <div class="lg:grid grid-cols-10">
+        <div
+          v-if="data.body"
+          class="col-span-7"
+        >
+          <BlockText :text="data.body" />
+          <hr class="border-gray-light-mid lg:my-8 my-5" />
+          <div
+            v-if="data.transcript"
+            class="col-span-7 my-5"
+          >
+            <BaseHeading
+              level="h2"
+              class="mb-5"
+              >Transcript</BaseHeading
+            >
+            <BlockText
+              :text="data.transcript"
+              variant="medium"
+              class="video-transcript"
+              itemprop="transcript"
+            />
+          </div>
+        </div>
+
+        <aside class="video-aside col-start-9 col-end-11">
+          <div class="lg:pt-0 lg:mb-12 pt-8">
+            <div class="lg:w-auto w-full">
+              <BaseButton
+                v-if="data.uploadedMedia && data.uploadedMedia.file"
+                :href="data.uploadedMedia.file"
+                class="w-full mb-5"
+                variant="primary"
+                compact
+                >Download {{ data.uploadedMedia.fileExtension || 'Video' }}</BaseButton
+              >
+            </div>
+          </div>
+        </aside>
+      </div>
+    </LayoutHelper>
+    <div
+      v-if="data.relatedPages && data.relatedPages.length"
+      class="bg-gray-light lg:py-24 lg:mt-24 py-12 mt-12"
+    >
+      <BlockLinkCarousel
+        item-type="tiles"
+        heading="Related Pages"
+        :items="data.relatedPages"
+      />
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue'
+import LayoutHelper from './../../components/LayoutHelper/LayoutHelper.vue'
+import DetailHeadline from './../../components/DetailHeadline/DetailHeadline.vue'
+import BaseButton from './../../components/BaseButton/BaseButton.vue'
+import BlockText from './../../components/BlockText/BlockText.vue'
+import BaseVideo from './../../components/BaseVideo/BaseVideo.vue'
+import BlockVideoEmbed from './../../components/BlockVideoEmbed/BlockVideoEmbed.vue'
+import BlockLinkCarousel from './../../components/BlockLinkCarousel/BlockLinkCarousel.vue'
+import BaseHeading from './../../components/BaseHeading/BaseHeading.vue'
+
+export default defineComponent({
+  name: 'PageVideoDetail',
+  components: {
+    LayoutHelper,
+    DetailHeadline,
+    BlockText,
+    BaseButton,
+    BaseVideo,
+    BlockVideoEmbed,
+    BlockLinkCarousel,
+    BaseHeading
+  },
+  props: {
+    data: {
+      type: Object,
+      required: false
+    }
+  },
+  data() {
+    return {
+      openTab: 1
+    }
+  }
+})
+</script>
+
+<style lang="scss">
+.PageVideoDetail {
+  .BaseImagePlaceholder {
+    @apply select-none;
+
+    min-height: 400px;
+  }
+
+  .video-aside {
+    .BaseButton {
+      max-width: 200px;
+    }
+
+    .BlockText {
+      @apply text-lg;
+    }
+  }
+
+  .video-transcript {
+    p {
+      @apply mb-4;
+    }
+  }
+}
+</style>

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

@@ -4,6 +4,7 @@ import PageContent from './../PageContent/PageContent.vue'
 export default {
   title: 'Templates/EDU/PageContent',
   component: PageContent,
+  tags: ['!autodocs'],
   decorators: [
     () => ({
       template: `<div id="storyDecorator" class="ThemeEdu"><story/></div>`

package/src/templates/edu/{PageEduNewsDetail.stories.js → PageEduNewsDetail/PageEduNewsDetail.stories.js}

@@ -1,16 +1,18 @@
-import { HeroMediaData } from './../../components/HeroMedia/HeroMedia.stories'
-import { BlockStreamfieldData } from './../../components/BlockStreamfield/BlockStreamfield.stories'
+import { HeroMediaData } from './../../../components/HeroMedia/HeroMedia.stories'
+import { BlockStreamfieldTruncatedData } from './../../../components/BlockStreamfield/BlockStreamfield.stories'
 import PageEduNewsDetail from './PageEduNewsDetail.vue'
 
 export default {
   title: 'Templates/EDU/PageEduNewsDetail',
   component: PageEduNewsDetail,
+  tags: ['!autodocs'],
   decorators: [
     () => ({
       template: `<div id="storyDecorator" class="disable-nav-offset"><story/></div>`
     })
   ],
   parameters: {
+    layout: 'fullscreen',
     html: {
       root: '#storyDecorator'
     },
@@ -45,7 +47,7 @@ export const BaseStory = {
       heroPosition: 'full_bleed',
       heroImage: HeroMediaData.image,
       heroImageInline: HeroMediaData.imageInline,
-      ...BlockStreamfieldData
+      ...BlockStreamfieldTruncatedData
     }
   }
 }

package/src/templates/edu/{PageEduNewsDetail.vue → PageEduNewsDetail/PageEduNewsDetail.vue}

@@ -1,14 +1,14 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import isEmpty from 'lodash/isEmpty.js'
-import type { StreamfieldBlockData } from '../../components/BlockStreamfield/BlockStreamfield.vue'
+import type { StreamfieldBlockData } from './../../../components/BlockStreamfield/BlockStreamfield.vue'
 import type {
   ImageObject,
   PageResponseObject,
   RelatedLinkObject,
   Topic,
   ThumbnailObject
-} from './../../interfaces'
+} from './../../../interfaces'
 import HeroMedia from '@explorer-1/vue/src/components/HeroMedia/HeroMedia.vue'
 import LayoutHelper from '@explorer-1/vue/src/components/LayoutHelper/LayoutHelper.vue'
 import DetailHeadline from '@explorer-1/vue/src/components/DetailHeadline/DetailHeadline.vue'
@@ -18,6 +18,7 @@ import BlockText from '@explorer-1/vue/src/components/BlockText/BlockText.vue'
 import BlockStreamfield from '@explorer-1/vue/src/components/BlockStreamfield/BlockStreamfield.vue'
 
 interface PageEduNewsDetailObject extends PageResponseObject {
+  url: string
   heroImage: ImageObject
   thumbnailImage: ThumbnailObject
   heroPosition: string

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

@@ -0,0 +1,54 @@
+import { HeroMediaData } from './../../../components/HeroMedia/HeroMedia.stories'
+import { AsteroidWatchWidgetData } from './../../../components/AsteroidWatchWidget/AsteroidWatchWidget.stories'
+import PageAsteroidWatchContent from './PageAsteroidWatchContent.vue'
+
+export default {
+  title: 'Templates/WWW/PageAsteroidWatchContent',
+  component: PageAsteroidWatchContent,
+  decorators: [
+    () => ({
+      template: `<div id="storyDecorator" class="disable-nav-offset"><story/></div>`
+    })
+  ],
+  tags: ['!autodocs'],
+  parameters: {
+    layout: 'fullscreen',
+    html: {
+      root: '#storyDecorator'
+    }
+  },
+  excludeStories: /.*(Data)$/
+}
+
+// data
+export const PageAsteroidWatchContentData = {
+  url: '/asteroid-watch/next-five-approaches',
+  slug: 'next-five-approaches',
+  breadcrumb:
+    '[{"path": "/parent/", "title": "Overview"}, {"path": "/parent/placeholder-1/", "title": "Sibling Item 1"}, {"path": "/parent/placeholder-2/", "title": "Sibling Item 2"}, {"path": "/parent/placeholder-3/", "title": "Sibling Item 3"}]',
+  title: 'Next Five approaches',
+  label: 'Asteroid Watch',
+  heroImage: HeroMediaData.image,
+  nextCloseApproaches: AsteroidWatchWidgetData.nextCloseApproaches,
+  body: [
+    {
+      blockType: 'RichTextBlock',
+      value: `<p>The Asteroid Watch dashboard tracks asteroids and comets that will make relatively close approaches to Earth. The dashboard displays the date of closest approach, approximate object diameter, relative size and distance from Earth for each encounter. The object's name is displayed by hovering over its encounter date. Clicking on the encounter date will display a Web page with details about that object.</p>`
+    }
+  ]
+}
+
+// template
+const PageAsteroidWatchContentTemplate = (args) => ({
+  props: Object.keys(args),
+  components: { PageAsteroidWatchContent },
+  template: `<PageAsteroidWatchContent :data="contentPage"/>`
+})
+
+// stories
+export const BaseStory = {
+  name: 'PageAsteroidWatchContent',
+  args: {
+    data: PageAsteroidWatchContentData
+  }
+}

package/src/templates/www/PageAsteroidWatchContent/PageAsteroidWatchContent.vue

@@ -0,0 +1,79 @@
+<template>
+  <div
+    v-if="data"
+    class="ThemeVariantLight"
+    :class="{ '-nav-offset': data.heroImage }"
+  >
+    <HeroMedia
+      v-if="data.heroImage"
+      class="md:mb-0 mb-10"
+      :image="data.heroImage"
+      :caption="data.heroImageCaption"
+      :display-caption="!data.heroImageCaption ? false : true"
+    />
+
+    <!-- secondary nav -->
+    <NavSecondary
+      :breadcrumb="data.breadcrumb"
+      :has-intro="data.heroImage ? true : false"
+    />
+
+    <!-- page headline -->
+    <LayoutHelper
+      indent="col-2"
+      class="md:my-12 lg:my-18 my-10"
+    >
+      <DetailHeadline
+        :title="data.title"
+        :label="data.displayLabel"
+      />
+    </LayoutHelper>
+
+    <template v-if="data.slug === 'next-five-approaches'">
+      <AsteroidWatchWidget class="lg:mb-18 mb-10" />
+    </template>
+
+    <!-- share buttons -->
+    <LayoutHelper
+      indent="col-2"
+      class="lg:mb-0 relative mb-8"
+    >
+      <ShareButtons
+        :title="data.title"
+        :url="data.url"
+      />
+    </LayoutHelper>
+
+    <!-- Body Streamfield -->
+    <BlockStreamfield :data="data.body" />
+  </div>
+</template>
+<script>
+import { defineComponent } from 'vue'
+import NavSecondary from './../../../components/NavSecondary/NavSecondary.vue'
+import LayoutHelper from './../../../components/LayoutHelper/LayoutHelper.vue'
+import DetailHeadline from './../../../components/DetailHeadline/DetailHeadline.vue'
+import HeroMedia from './../../../components/HeroMedia/HeroMedia.vue'
+import ShareButtons from './../../../components/ShareButtons/ShareButtons.vue'
+import BlockStreamfield from './../../../components/BlockStreamfield/BlockStreamfield.vue'
+import AsteroidWatchWidget from './../../../components/AsteroidWatchWidget/AsteroidWatchWidget.vue'
+
+export default defineComponent({
+  name: 'PageAsteroidWatchContent',
+  components: {
+    NavSecondary,
+    LayoutHelper,
+    HeroMedia,
+    ShareButtons,
+    BlockStreamfield,
+    DetailHeadline,
+    AsteroidWatchWidget
+  },
+  props: {
+    data: {
+      type: Object,
+      required: false
+    }
+  }
+})
+</script>

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

@@ -0,0 +1,34 @@
+import { HeroLargeData } from './../../../components/HeroLarge/HeroLarge.stories.js'
+import { BlockStreamfieldData } from './../../../components/BlockStreamfield/BlockStreamfield.stories'
+import { BlockLinkCardCarouselData } from './../../../components/BlockLinkCarousel/BlockLinkCarousel.stories.js'
+import PageAsteroidWatchIndex from './PageAsteroidWatchIndex.vue'
+
+export default {
+  title: 'Templates/WWW/PageAsteroidWatchIndex',
+  component: PageAsteroidWatchIndex,
+  tags: ['!autodocs'],
+  decorators: [
+    () => ({
+      template: `<div id="storyDecorator" class="disable-nav-offset"><story/></div>`
+    })
+  ],
+  parameters: {
+    layout: 'fullscreen',
+    html: {
+      root: '#storyDecorator'
+    }
+  },
+  excludeStories: /.*(Data)$/
+}
+
+export const BaseStory = {
+  name: 'PageAsteroidWatchIndex',
+  args: {
+    data: {
+      ...HeroLargeData,
+      title: 'Asteroid Watch',
+      body: BlockStreamfieldData.body,
+      latestAsteroidNews: BlockLinkCardCarouselData
+    }
+  }
+}

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

@@ -0,0 +1,56 @@
+<template>
+  <div
+    v-if="data"
+    class="-nav-offset"
+  >
+    <HeroLarge
+      :title="data.title"
+      :image="data.heroImage"
+      has-overlay
+    />
+
+    <!-- secondary nav -->
+    <NavSecondary
+      :breadcrumb="data.breadcrumb"
+      class="z-30"
+      has-intro
+    />
+
+    <!-- Body Streamfield -->
+    <BlockStreamfield
+      class="lg:mt-24 mt-18"
+      :data="data.body"
+    />
+
+    <!-- Related News -->
+    <BlockLinkCarousel
+      item-type="cards"
+      class="lg:my-24 my-12"
+      heading="Latest News"
+      :items="data.latestAsteroidNews"
+    />
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue'
+import NavSecondary from './../../../components/NavSecondary/NavSecondary.vue'
+import HeroLarge from './../../../components/HeroLarge/HeroLarge.vue'
+import BlockStreamfield from './../../../components/BlockStreamfield/BlockStreamfield.vue'
+import BlockLinkCarousel from './../../../components/BlockLinkCarousel/BlockLinkCarousel.vue'
+
+export default defineComponent({
+  name: 'PageAsteroidWatchIndex',
+  components: {
+    NavSecondary,
+    HeroLarge,
+    BlockStreamfield,
+    BlockLinkCarousel
+  },
+  props: {
+    data: {
+      type: Object,
+      required: false
+    }
+  }
+})
+</script>

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

@@ -0,0 +1,110 @@
+import { BlockStreamfieldTruncatedData } from './../../../components/BlockStreamfield/BlockStreamfield.stories.js'
+
+import PageCuratedGallery from './PageCuratedGallery.vue'
+
+export default {
+  title: 'Templates/WWW/PageCuratedGallery',
+  component: PageCuratedGallery,
+  tags: ['!autodocs'],
+  excludeStories: /.*Data$/,
+  parameters: {
+    layout: 'fullscreen'
+  }
+}
+
+// stories
+export const BaseStory = {
+  name: 'PageCuratedGallery',
+  args: {
+    data: {
+      galleryItems: [
+        {
+          image: {
+            caption:
+              "NASA's Perseverance rover fires up its descent stage engines as it nears the Martian surface in this illustration.\n",
+            alt: 'alt text',
+            detailUrl: '/images/powered-descent-for-perseverance-illustration/',
+            src: {
+              url: 'https://d2pn8kiwq2w21t.cloudfront.net/images/grand_tour.width-1024.jpg',
+              width: '1024',
+              height: '1024'
+            },
+            width: '1024',
+            height: '1024'
+          },
+          title: 'Powered Descent for Perseverance (Illustration)'
+        },
+        {
+          image: {
+            caption:
+              "NASA's Perseverance rover deploys a supersonic parachute from its aeroshell as it slows down before landing, in this artist's illustration.\n",
+            alt: 'alt text',
+            detailUrl: '/images/perseverance-deploys-its-parachute-illustration/',
+            src: {
+              url: 'https://d2pn8kiwq2w21t.cloudfront.net/images/mars.width-1024.jpg',
+              width: '1024',
+              height: '1024'
+            }
+          },
+          title: 'Perseverance Deploys its Parachute (Illustration)'
+        },
+        {
+          image: {
+            caption:
+              "In this illustration of its descent to Mars, the spacecraft containing NASA's Perseverance rover slows down using the drag generated by its motion in the Martian atmosphere.\n",
+            alt: 'alt text',
+            detailUrl:
+              '/images/perseverance-rover-decelerates-in-the-martian-atmosphere-illustration/',
+            src: {
+              url: 'https://d2pn8kiwq2w21t.cloudfront.net/images/earth.width-1024.jpg',
+              width: '1024',
+              height: '1024'
+            }
+          },
+          title: 'Perseverance Rover Decelerates in the Martian Atmosphere (Illustration)'
+        },
+        {
+          image: {
+            caption:
+              "This illustration shows NASA's Mars 2020 spacecraft carrying the Perseverance rover as it approaches Mars. Hundreds of critical events must execute perfectly and exactly on time for the rover to land on Mars safely on Feb. 18, 2021.\n",
+            alt: 'alt text',
+            detailUrl: '/images/perseverance-rover-approaches-mars-illustration/',
+            src: {
+              url: 'https://d2pn8kiwq2w21t.cloudfront.net/images/venus.width-1024.jpg',
+              width: '1024',
+              height: '1024'
+            }
+          },
+          title: 'Perseverance Rover Approaches Mars (Illustration)'
+        },
+        {
+          image: {
+            caption:
+              "NASA's Terra spacecraft shows a strong eruptive episode began, starting December 13, 2020, at Mt. Etna's New SE summit crater.\n",
+            alt: 'alt text',
+            detailUrl: '/images/mt-etna-italy/',
+            src: {
+              url: 'https://d2pn8kiwq2w21t.cloudfront.net/images/ceres.width-1024.jpg',
+              width: '1024',
+              height: '1024'
+            }
+          },
+          title: 'Mt. Etna, Italy'
+        }
+      ],
+      galleryType: 'poster',
+      id: '29',
+      label: 'Galleries',
+      firstPublishedAt: '',
+      relatedGalleries: [],
+      galleryAspectRatio: '2:3',
+      galleryObjectFit: 'cover',
+      galleryDownloadLink: '',
+      slug: 'visions-of-the-future',
+      title: 'Visions of the Future',
+      topicLabel: null,
+      url: '/visions-of-the-future/',
+      ...BlockStreamfieldTruncatedData
+    }
+  }
+}