Skip to content

Commit

Permalink
Feature: #97 Resource Article (#492)
Browse files Browse the repository at this point in the history
* adding article detail template, fixing imports in other page templates

* fixing share buttons for edu content pages

* renaming component to align with content type

* final cleanup

* fixing build errors
  • Loading branch information
stephiescastle authored Jul 23, 2024
1 parent 05dd9a6 commit 98a9e83
Show file tree
Hide file tree
Showing 7 changed files with 426 additions and 41 deletions.
2 changes: 1 addition & 1 deletion packages/vue/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@explorer-1/vue",
"version": "0.1.5",
"version": "0.1.6",
"private": false,
"publishConfig": {
"access": "public"
Expand Down
5 changes: 3 additions & 2 deletions packages/vue/src/components/DetailHeadline/DetailHeadline.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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 }}
Expand All @@ -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 }}
Expand All @@ -31,6 +31,7 @@
variant="secondary"
:to="labelLink"
class="py-3"
:use-primary-color="themeStore.theme === 'ThemeEdu'"
>
{{ label }}
</BaseLink>
Expand Down
35 changes: 16 additions & 19 deletions packages/vue/src/templates/PageContent/PageContent.vue
Original file line number Diff line number Diff line change
Expand Up @@ -3,19 +3,18 @@ import { defineComponent } from 'vue'
import { useRoute } from 'vue-router'
import { mapStores } from 'pinia'
import { useThemeStore } from '../../store/theme'
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 ShareButtonsEdu from '@explorer-1/vue/src/components/ShareButtonsEdu/ShareButtonsEdu.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 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()
Expand Down Expand Up @@ -44,9 +43,6 @@ export default defineComponent({
},
computed: {
...mapStores(useThemeStore),
isEdu() {
return this.themeStore.theme === 'ThemeEdu'
},
heroInline() {
if (this.data?.heroPosition === 'inline') {
return true
Expand All @@ -64,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'
}
}
})
Expand Down Expand Up @@ -102,7 +98,7 @@ export default defineComponent({
:class="{ 'sr-only': hideH1 }"
/>
<ShareButtonsEdu
v-if="isEdu && data?.url"
v-if="themeStore.isEdu && data?.url"
class="mt-4"
:url="data.url"
:title="data.title"
Expand All @@ -126,11 +122,12 @@ export default defineComponent({
<!-- share buttons -->
<LayoutHelper
v-if="themeStore.theme !== 'ThemeEdu'"
indent="col-2"
class="lg:mb-0 relative mb-8"
>
<ShareButtons
v-if="data.title && data.url && !isEdu"
v-if="data.title && data.url && !themeStore.isEdu"
:title="data.title"
:url="data.url"
/>
Expand Down
30 changes: 15 additions & 15 deletions packages/vue/src/templates/PageEventDetail/PageEventDetail.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down
7 changes: 3 additions & 4 deletions packages/vue/src/templates/PageNewsDetail/PageNewsDetail.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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'
) {
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,192 @@
import { HeroMediaData } from './../../../components/HeroMedia/HeroMedia.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 { BlockStreamfieldTruncatedData } from './../../../components/BlockStreamfield/BlockStreamfield.stories'
import PageEduResourceArticle from './PageEduResourceArticle.vue'

export default {
title: 'Templates/EDU/PageEduResourceArticle',
component: PageEduResourceArticle,
decorators: [
() => ({
template: `<div id="storyDecorator" class="disable-nav-offset"><story/></div>`
})
],
parameters: {
html: {
root: '#storyDecorator'
}
},
excludeStories: /.*Data$/
}

export const BaseStory = {
args: {
data: {
__typename: 'EDUResourceArticlePage',
pageType: 'EDUResourceArticlePage',
contentType: 'edu_resources.EDUResourceArticlePage',
seoTitle: 'Test Resource',
searchDescription: '',
slug: 'test-resource',
url: 'http://localhost:3000/edu/resources/test-resource',
title: 'Test Resource',
heroConstrain: true,
heroPosition: 'full_bleed',
hero: [
{
...HeroMediaData,
blockType: 'HeroImageBlock'
}
],
...BlockStreamfieldTruncatedData,
publicationDate: '2024-07-09',
summary: 'Summary of resource article',
getTopicsForDisplay: [
{
__typename: 'TopicPage',
title: 'Asteroids',
url: 'http://localhost:3000/topics/asteroids'
}
],
topicLabel: 'Asteroids',
primarySubject: {
__typename: 'EDUPrimarySubject',
id: '2',
subject: 'Engineering'
},
additionalSubjects: [
{
__typename: 'EDUPrimarySubject',
id: '1',
subject: 'Art'
}
],
gradeLevels: [
{
__typename: 'EDUGradeLevel',
id: '2',
gradeLevel: 'K'
},
{
__typename: 'EDUGradeLevel',
id: '3',
gradeLevel: '1'
},
{
__typename: 'EDUGradeLevel',
id: '4',
gradeLevel: '2'
},
{
__typename: 'EDUGradeLevel',
id: '13',
gradeLevel: '11'
}
],
body: BlockStreamfieldTruncatedData.body,
thumbnailImage: {
__typename: 'CustomImage',
original: 'http://127.0.0.1:9000/media/original_images/imagessirtfsirtf-090303-16.jpg',
alt: ''
},
relatedLinks: BlockRelatedLinksData.data,
relatedContentHeading: 'Related Content',
relatedContent: BlockLinkCardCarouselData
}
}
}
export const InlineHero = {
args: {
data: {
...BaseStory.args.data,
heroPosition: 'inline'
}
}
}

export const HeroCarousel = {
args: {
data: {
...BaseStory.args.data,
hero: [{ blockType: 'CarouselBlock', blocks: BlockImageCarouselData }]
}
}
}

export const HeroImageComparison = {
args: {
data: {
...BaseStory.args.data,
heroPosition: 'inline',
hero: [
{
...BlockImageComparisonData
}
]
}
}
}

export const HeroVideo = {
args: {
data: {
...BaseStory.args.data,
hero: [
{
blockType: 'VideoBlock',
video: BaseVideoData,
caption: 'Lorem ipsum dolor sit amet',
credit: 'NASA/JPL'
}
]
}
}
}

export const HeroVideoEmbed = {
args: {
data: {
...BaseStory.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: {
...BaseStory.args.data,
heroPosition: 'inline',
hero: [
{
...BlockIframeEmbedData
}
]
}
}
}

export const NoHero = {
args: {
data: {
...BaseStory.args.data,
hero: []
}
}
}
Loading

0 comments on commit 98a9e83

Please sign in to comment.