Feature: #97 Resource Article

packages/vue/src/components/BlockStreamfield/BlockStreamfield.stories.js

@@ -39,6 +39,25 @@ export default {
   excludeStories: /.*(Data)$/
 }
 
+export const BlockStreamfieldMinimalData = {
+  body: [
+    BlockKeyPointsData,
+    { ...BlockHeadingData, level: 'h2', size: 'h2' },
+    {
+      blockType: 'RichTextBlock',
+      value:
+        '<p>Lorem ipsum <a href="/missions/test-mission/">dolor</a> sit amet, consectetur adipiscing elit. Quisque vitae justo quis justo malesuada molestie. Cras sed tincidunt dui.</p><p>Integer imperdiet blandit neque vitae euismod. Nulla aliquet lacus nibh,  vel tincidunt urna efficitur non. In et eros vitae ex posuere maximus  quis eget urna. Suspendisse fringilla posuere velit sit amet posuere.  Morbi malesuada bibendum vehicula. Donec faucibus ut erat ut mattis.  Suspendisse ornare, quam at placerat cursus, dolor mi lacinia nunc, eget  maximus augue nulla in dolor.</p>\n'
+    },
+    BlockInlineImageData.block,
+    {
+      blockType: 'RichTextBlock',
+      value:
+        '<p>Cras sed tincidunt dui.</p><p>Integer imperdiet blandit neque vitae euismod. Nulla aliquet lacus nibh,  vel tincidunt urna efficitur non. In et eros vitae ex posuere maximus  quis eget urna. Morbi malesuada bibendum vehicula. Donec faucibus ut erat ut mattis.  Suspendisse ornare, quam at placerat cursus, dolor mi lacinia nunc, eget  maximus augue nulla in dolor.</p>\n'
+    },
+    BlockCtaData
+  ]
+}
+
 export const BlockStreamfieldData = {
   body: [
     BlockKeyPointsData,

packages/vue/src/components/DetailHeadline/DetailHeadline.vue

@@ -12,7 +12,7 @@
           variant="secondary"
           :to="topics[0].url"
           class="py-3"
-          use-primary-color
+          :use-primary-color="themeStore.theme === 'ThemeEdu'"
         >
           <span :itemprop="schema ? 'articleSection' : undefined">
             {{ topics[0].title }}
@@ -21,7 +21,7 @@
       </div>
       <span
         v-else-if="label"
-        class="text-subtitle py-3"
+        class="text-subtitle py-3 edu:text-primary"
       >
         <template v-if="!labelLink">
           {{ label }}
@@ -31,6 +31,7 @@
             variant="secondary"
             :to="labelLink"
             class="py-3"
+            :use-primary-color="themeStore.theme === 'ThemeEdu'"
           >
             {{ label }}
           </BaseLink>

packages/vue/src/templates/PageContent/PageContent.vue

@@ -1,17 +1,20 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
 import { useRoute } from 'vue-router'
-import HeroMedia from '@explorer-1/vue/src/components/HeroMedia/HeroMedia.vue'
-import NavSecondary from '@explorer-1/vue/src/components/NavSecondary/NavSecondary.vue'
-import LayoutHelper from '@explorer-1/vue/src/components/LayoutHelper/LayoutHelper.vue'
-import DetailHeadline from '@explorer-1/vue/src/components/DetailHeadline/DetailHeadline.vue'
-import BlockImageStandard from '@explorer-1/vue/src/components/BlockImage/BlockImageStandard.vue'
-import ShareButtons from '@explorer-1/vue/src/components/ShareButtons/ShareButtons.vue'
-import BlockStreamfield from '@explorer-1/vue/src/components/BlockStreamfield/BlockStreamfield.vue'
-import BlockRelatedLinks from '@explorer-1/vue/src/components/BlockRelatedLinks/BlockRelatedLinks.vue'
-import FormContact from '@explorer-1/vue/src/components/FormContact/FormContact.vue'
-import FormNewsletterSignup from '@explorer-1/vue/src/components/FormNewsletterSignup/FormNewsletterSignup.vue'
-import BlockLinkCarousel from '@explorer-1/vue/src/components/BlockLinkCarousel/BlockLinkCarousel.vue'
+import { mapStores } from 'pinia'
+import { useThemeStore } from '../../store/theme'
+import HeroMedia from './../../components/HeroMedia/HeroMedia.vue'
+import NavSecondary from './../../components/NavSecondary/NavSecondary.vue'
+import LayoutHelper from './../../components/LayoutHelper/LayoutHelper.vue'
+import DetailHeadline from './../../components/DetailHeadline/DetailHeadline.vue'
+import BlockImageStandard from './../../components/BlockImage/BlockImageStandard.vue'
+import ShareButtons from './../../components/ShareButtons/ShareButtons.vue'
+import ShareButtonsEdu from './../../components/ShareButtonsEdu/ShareButtonsEdu.vue'
+import BlockStreamfield from './../../components/BlockStreamfield/BlockStreamfield.vue'
+import BlockRelatedLinks from './../../components/BlockRelatedLinks/BlockRelatedLinks.vue'
+import FormContact from './../../components/FormContact/FormContact.vue'
+import FormNewsletterSignup from './../../components/FormNewsletterSignup/FormNewsletterSignup.vue'
+import BlockLinkCarousel from './../../components/BlockLinkCarousel/BlockLinkCarousel.vue'
 
 const route = useRoute()
 
@@ -24,6 +27,7 @@ export default defineComponent({
     DetailHeadline,
     BlockImageStandard,
     ShareButtons,
+    ShareButtonsEdu,
     BlockStreamfield,
     BlockRelatedLinks,
     FormContact,
@@ -38,6 +42,7 @@ export default defineComponent({
     }
   },
   computed: {
+    ...mapStores(useThemeStore),
     heroInline() {
       if (this.data?.heroPosition === 'inline') {
         return true
@@ -55,7 +60,7 @@ export default defineComponent({
         // We're hiding the H1 from regular browsers, so reduce the standard margin.
         return 'lg:mt-12 mt-5'
       }
-      return 'lg:mt-12 lg:mb-18 mt-5 mb-10'
+      return 'lg:mt-12 lg:mb-18 edu:lg:mb-12 mt-5 mb-10 edu:mb-8'
     }
   }
 })
@@ -92,6 +97,13 @@ export default defineComponent({
         :label="data.displayLabel"
         :class="{ 'sr-only': hideH1 }"
       />
+      <share-buttons-edu
+        v-if="data?.url && themeStore.theme === 'ThemeEdu'"
+        class="mt-6"
+        :url="data.url"
+        :title="data.title"
+        :image="data.thumbnailImage?.original"
+      />
     </LayoutHelper>
 
     <!-- inline hero -->
@@ -110,6 +122,7 @@ export default defineComponent({
 
     <!-- share buttons -->
     <LayoutHelper
+      v-if="themeStore.theme !== 'ThemeEdu'"
       indent="col-2"
       class="lg:mb-0 relative mb-8"
     >

packages/vue/src/templates/PageEventDetail/PageEventDetail.vue

@@ -287,21 +287,21 @@ import {
   mixinFormatEventTimeInHoursAndMinutes,
   mixinFormatSplitEventDates
 } from '../../utils/mixins'
-import LayoutHelper from '@explorer-1/vue/src/components/LayoutHelper/LayoutHelper.vue'
-import BaseHeading from '@explorer-1/vue/src/components/BaseHeading/BaseHeading.vue'
-import ShareButtons from '@explorer-1/vue/src/components/ShareButtons/ShareButtons.vue'
-import EventDetailHero from '@explorer-1/vue/src/components/EventDetailHero/EventDetailHero.vue'
-import IconCalendar from '@explorer-1/vue/src/components/Icons/IconCalendar.vue'
-import IconLocation from '@explorer-1/vue/src/components/Icons/IconLocation.vue'
-import IconTime from '@explorer-1/vue/src/components/Icons/IconTime.vue'
-import BaseLink from '@explorer-1/vue/src/components/BaseLink/BaseLink.vue'
-import BaseButton from '@explorer-1/vue/src/components/BaseButton/BaseButton.vue'
-import CalendarButton from '@explorer-1/vue/src/components/CalendarButton/CalendarButton.vue'
-import BlockStreamfield from '@explorer-1/vue/src/components/BlockStreamfield/BlockStreamfield.vue'
-import BaseImagePlaceholder from '@explorer-1/vue/src/components/BaseImagePlaceholder/BaseImagePlaceholder.vue'
-import BaseImage from '@explorer-1/vue/src/components/BaseImage/BaseImage.vue'
-import BlockRelatedLinks from '@explorer-1/vue/src/components/BlockRelatedLinks/BlockRelatedLinks.vue'
-import BlockLinkCarousel from '@explorer-1/vue/src/components/BlockLinkCarousel/BlockLinkCarousel.vue'
+import LayoutHelper from './../../components/LayoutHelper/LayoutHelper.vue'
+import BaseHeading from './../../components/BaseHeading/BaseHeading.vue'
+import ShareButtons from './../../components/ShareButtons/ShareButtons.vue'
+import EventDetailHero from './../../components/EventDetailHero/EventDetailHero.vue'
+import IconCalendar from './../../components/Icons/IconCalendar.vue'
+import IconLocation from './../../components/Icons/IconLocation.vue'
+import IconTime from './../../components/Icons/IconTime.vue'
+import BaseLink from './../../components/BaseLink/BaseLink.vue'
+import BaseButton from './../../components/BaseButton/BaseButton.vue'
+import CalendarButton from './../../components/CalendarButton/CalendarButton.vue'
+import BlockStreamfield from './../../components/BlockStreamfield/BlockStreamfield.vue'
+import BaseImagePlaceholder from './../../components/BaseImagePlaceholder/BaseImagePlaceholder.vue'
+import BaseImage from './../../components/BaseImage/BaseImage.vue'
+import BlockRelatedLinks from './../../components/BlockRelatedLinks/BlockRelatedLinks.vue'
+import BlockLinkCarousel from './../../components/BlockLinkCarousel/BlockLinkCarousel.vue'
 // @ts-ignore
 import PlaceholderPortrait from '@explorer-1/common/src/images/svg/placeholder-portrait.svg'
 

packages/vue/src/templates/PageNewsDetail/PageNewsDetail.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="data"
-    class="ThemeLight"
+    class="ThemeVariantLight"
     :class="computedClass"
     itemscope
     itemtype="http://schema.org/Article"
@@ -203,10 +203,9 @@ export default defineComponent({
     },
     heroInline(): boolean {
       if (!this.heroEmpty) {
-        // if (this.data.hero[0].blockType === 'VideoBlock') {
-        //   return false
-        // } else
-        if (
+        if (this.data?.hero[0].blockType === 'VideoBlock') {
+          return false
+        } else if (
           this.data?.heroPosition === 'inline' ||
           this.data?.hero[0].blockType === 'CarouselBlock'
         ) {

packages/vue/src/templates/edu/PageEduArticleDetail/PageEduArticleDetail.stories.js

@@ -0,0 +1,173 @@
+import { HeroMediaData } from './../../../components/HeroMedia/HeroMedia.stories'
+import { DetailHeadlineData } from './../../../components/DetailHeadline/DetailHeadline.stories'
+import { BlockIframeEmbedData } from './../../../components/BlockIframeEmbed/BlockIframeEmbed.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 { BlockRelatedLinksData } from './../../../components/BlockRelatedLinks/BlockRelatedLinks.stories.js'
+import { BlockLinkCardCarouselData } from './../../../components/BlockLinkCarousel/BlockLinkCarousel.stories.js'
+import { BlockStreamfieldMinimalData } from './../../../components/BlockStreamfield/BlockStreamfield.stories'
+import PageEduArticleDetail from './PageEduArticleDetail.vue'
+
+export default {
+  title: 'Templates/EDU/PageEduArticleDetail',
+  component: PageEduArticleDetail,
+  decorators: [
+    () => ({
+      template: `<div id="storyDecorator" class="disable-nav-offset"><story/></div>`
+    })
+  ],
+  parameters: {
+    html: {
+      root: '#storyDecorator'
+    }
+  },
+  excludeStories: /.*Data$/
+}
+
+export const ArticleDetail = {
+  args: {
+    data: {
+      slug: 'nasas-ingenuity-mars-helicopter-recharges-its-batteries-in-flight',
+      url: '/news/nasas-ingenuity-mars-helicopter-recharges-its-batteries-in-flight',
+      ...DetailHeadlineData,
+      displayLabel: 'Resource',
+      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'
+        }
+      ],
+      ...BlockStreamfieldMinimalData,
+      relatedLinks: [BlockRelatedLinksData.data],
+      relatedContentHeading: 'Related Activities',
+      relatedContent: [
+        // external link card, no image
+        {
+          label: 'Explore NASA',
+          thumbnailImage: {
+            src: {
+              url: 'https://picsum.photos/550/288',
+              width: 550,
+              height: 288
+            }
+          },
+          title: 'NASA website',
+          externalLink: 'https://www.nasa.gov'
+        },
+        // via page chooser
+        {
+          page: {
+            label: 'Mission',
+            thumbnailImage: {
+              src: {
+                url: 'https://picsum.photos/512/288',
+                width: 512,
+                height: 288
+              }
+            },
+            title: 'GRACE-FO',
+            url: '/mission/placeholder'
+          }
+        },
+        ...BlockLinkCardCarouselData
+      ]
+    }
+  }
+}
+export const InlineHero = {
+  args: {
+    data: {
+      ...ArticleDetail.args.data,
+      heroPosition: 'inline'
+    }
+  }
+}
+
+export const HeroCarousel = {
+  args: {
+    data: {
+      ...ArticleDetail.args.data,
+      hero: [{ blockType: 'CarouselBlock', blocks: BlockImageCarouselData }]
+    }
+  }
+}
+
+export const HeroImageComparison = {
+  args: {
+    data: {
+      ...ArticleDetail.args.data,
+      heroPosition: 'inline',
+      hero: [
+        {
+          ...BlockImageComparisonData
+        }
+      ]
+    }
+  }
+}
+
+export const HeroVideo = {
+  args: {
+    data: {
+      ...ArticleDetail.args.data,
+      hero: [
+        {
+          blockType: 'VideoBlock',
+          video: BaseVideoData,
+          caption: 'Lorem ipsum dolor sit amet',
+          credit: 'NASA/JPL'
+        }
+      ]
+    }
+  }
+}
+
+export const HeroVideoEmbed = {
+  args: {
+    data: {
+      ...ArticleDetail.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 HeroIframeEmbed = {
+  args: {
+    data: {
+      ...ArticleDetail.args.data,
+      heroPosition: 'inline',
+      hero: [
+        {
+          ...BlockIframeEmbedData
+        }
+      ]
+    }
+  }
+}
+
+export const NoHero = {
+  args: {
+    data: {
+      ...ArticleDetail.args.data,
+      hero: []
+    }
+  }
+}