@explorer-1/vue 0.1.4 → 0.1.5

package/src/templates/www/PagePodcastSeason/PagePodcastSeason.vue

@@ -0,0 +1,191 @@
+<template>
+  <div
+    v-if="data"
+    class="ThemeVariantLight"
+    :class="{ '-nav-offset': data.featuredEpisode }"
+  >
+    <!-- hero image -->
+    <div class="max-w-screen-3xl md:mb-12 lg:mb-18 mx-auto mb-10">
+      <HeroMedium
+        v-if="data.featuredEpisode"
+        :custom-label="data.label"
+        :feature="data.featuredEpisode"
+        :custom-image="data.heroImage"
+        cta="Listen Now"
+      />
+    </div>
+
+    <!-- page headline -->
+    <LayoutHelper
+      indent="col-1"
+      class="3xl:px-0 lg:mt-12 px-5 mx-auto mt-5 mb-5 lg:mb-10"
+    >
+      <DetailHeadline
+        :title="data.title"
+        :publication-date="data.publicationDate"
+        label="Podcast Season"
+        schema
+      />
+      <BlockText
+        v-if="data.summary"
+        :text="data.summary"
+        variant="medium"
+        class="lg:w-2/3 mt-5"
+      />
+    </LayoutHelper>
+
+    <LayoutHelper>
+      <div class="col-span-12 pb-2 justify-end flex flex-row pr-0.5">
+        <!-- toggle gallery view -->
+        <div
+          v-if="allowGridView"
+          class="align-end flex text-2xl font-secondary font-semibold tracking-wider"
+        >
+          <button
+            class="lg:ml-6"
+            :class="
+              showGridView
+                ? 'text-theme-red cursor-default'
+                : 'text-gray-mid can-hover:hover:text-theme-red-hover cursor-pointer'
+            "
+            :aria-label="showGridView ? 'Grid View (enabled)' : 'Grid View'"
+            :disabled="showGridView"
+            @click="
+              isGallery
+                ? searchStore.updateGridViewForPodcasts(true)
+                : searchStore.updateGridView(true)
+            "
+          >
+            <span class="flex items-center">
+              <IconGrid />
+            </span>
+          </button>
+          <button
+            class="ml-3"
+            :class="
+              !showGridView
+                ? 'text-theme-red cursor-default'
+                : 'text-gray-mid can-hover:hover:text-theme-red-hover cursor-pointer'
+            "
+            :aria-label="!showGridView ? 'List View (enabled)' : 'List View'"
+            :disabled="!showGridView"
+            @click="
+              isGallery
+                ? searchStore.updateGridViewForPodcasts(false)
+                : searchStore.updateGridView(false)
+            "
+          >
+            <span class="flex items-center flip-horizontal">
+              <IconList />
+            </span>
+          </button>
+        </div>
+      </div>
+    </LayoutHelper>
+
+    <LayoutHelper
+      v-if="data.episodes && data.episodes.length"
+      indent="col-2"
+      class="border-gray-mid lg:mb-24 pt-10 mb-12 border-t"
+    >
+      <section aria-label="Podcast Episodes">
+        <template v-if="!showGridView">
+          <SearchResultCard
+            v-for="episode of data.episodes"
+            :key="episode.id"
+            :type="episode.series.title"
+            :topic="data.title"
+            :url="episode.url"
+            :image="episode.thumbnailImage"
+            :title="episode.title"
+            :summary="episode.summary"
+            :media="episode.uploadedMedia ? episode.uploadedMedia.file : null"
+            :date="$filters.displayDate(episode.publicationDate)"
+            :is-podcast-season="isPodcastSeason"
+            heading-level="h2"
+          />
+        </template>
+        <template v-else>
+          <div class="md:grid grid-cols-12 gap-10">
+            <div
+              v-for="episode of data.episodes"
+              :key="episode.id"
+              class="col-span-6 lg:col-span-4"
+            >
+              <SearchResultGridItem
+                :type="episode.title"
+                :url="episode.url"
+                :image="episode.thumbnailImage"
+                :title="episode.title"
+                :summary="episode.summary"
+                :date="$filters.displayDate(episode.firstPublishedAt)"
+                heading-level="h2"
+              />
+            </div>
+          </div>
+        </template>
+      </section>
+    </LayoutHelper>
+  </div>
+</template>
+<script>
+import { defineComponent } from 'vue'
+import { mapStores } from 'pinia'
+import { useSearchStore } from '../../../store/search'
+import HeroMedium from './../../../components/HeroMedium/HeroMedium.vue'
+import IconGrid from './../../../components/Icons/IconGrid.vue'
+import IconList from './../../../components/Icons/IconList.vue'
+import SearchResultGridItem from './../../../components/SearchResultGridItem/SearchResultGridItem.vue'
+import SearchResultCard from './../../../components/SearchResultCard/SearchResultCard.vue'
+import LayoutHelper from './../../../components/LayoutHelper/LayoutHelper.vue'
+import BlockText from './../../../components/BlockText/BlockText.vue'
+import DetailHeadline from './../../../components/DetailHeadline/DetailHeadline.vue'
+
+export default defineComponent({
+  name: 'PagePodcastSeason',
+  components: {
+    HeroMedium,
+    SearchResultCard,
+    SearchResultGridItem,
+    IconGrid,
+    IconList,
+    LayoutHelper,
+    BlockText,
+    DetailHeadline
+  },
+  props: {
+    data: {
+      type: Object,
+      required: false
+    }
+  },
+  data() {
+    return {
+      allowGridView: true,
+      defaultShowGridView: false,
+      isGallery: false,
+      isPodcastSeason: true
+    }
+  },
+  computed: {
+    ...mapStores(useSearchStore),
+    showGridView() {
+      if (this.isGallery) {
+        if (this.searchStore.showGridViewForPodcasts !== undefined) {
+          return this.searchStore.showGridViewForPodcasts
+        }
+      } else if (this.searchStore.showGridView !== undefined) {
+        return this.searchStore.showGridView
+      }
+      return this.defaultShowGridView
+    }
+  }
+})
+</script>
+
+<style scoped>
+.flip-horizontal > svg {
+  display: block;
+  transform: scale(-1, 1);
+}
+</style>

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

@@ -0,0 +1,72 @@
+import PagePressKitIndex from './PagePressKitIndex.vue'
+
+export default {
+  title: 'Templates/WWW/PagePressKitIndex',
+  component: PagePressKitIndex,
+  decorators: [
+    () => ({
+      template: `<div id="storyDecorator" class="disable-nav-offset"><story/></div>`
+    })
+  ],
+  tags: ['!autodocs'],
+  parameters: {
+    layout: 'fullscreen',
+    html: {
+      root: '#storyDecorator'
+    }
+  },
+  excludeStories: /.*(Data)$/
+}
+
+// stories
+export const BaseStory = {
+  name: 'PagePressKitIndex', // single story hoisting
+  args: {
+    data: {
+      title: 'Press Kits',
+      summary: `Cras at velit semper, pulvinar odio eu, aliquet orci. Fusce pretium, lectus ut ultricies finibus, dui mi fermentum sapien, non accumsan lectus turpis ac nunc.`,
+      callToAction: [
+        {
+          heading: 'View all other press kits',
+          text: 'Legacy Press Kits',
+          page: {
+            url: '/who-we-are/media-information/legacy-press-kits'
+          },
+          externalLink: ''
+        }
+      ],
+      children: [
+        {
+          id: 1,
+          label: 'Label',
+          topicLabel: 'Topic Label',
+          url: '/press-kits/placeholder',
+          title: 'Title of the press kit homepage',
+          summary:
+            'Maecenas tristique tortor non ornare lobortis. Nam sollicitudin sapien sit amet enim vulputate laoreet. Sed mattis dui metus, sit amet faucibus arcu volutpat ut. Vestibulum sit amet felis sem. Duis interdum risus nulla, sed varius enim viverra vitae.',
+          thumbnailImage: {
+            src: {
+              url: 'https://picsum.photos/560/560',
+              width: '560',
+              height: '560'
+            }
+          }
+        },
+        {
+          id: 2,
+          label: 'Label',
+          topicLabel: null,
+          url: '/press-kits/placeholder',
+          title: 'Title of the press kit homepage',
+          thumbnailImage: {
+            src: {
+              url: 'https://picsum.photos/560/560',
+              width: '560',
+              height: '560'
+            }
+          }
+        }
+      ]
+    }
+  }
+}

package/src/templates/www/PagePressKitIndex/PagePressKitIndex.vue

@@ -0,0 +1,76 @@
+<template>
+  <div v-if="data">
+    <!-- page headline -->
+    <LayoutHelper
+      indent="col-2"
+      class="lg:mt-12 mt-5 mb-10"
+    >
+      <DetailHeadline :title="data.title" />
+    </LayoutHelper>
+
+    <div
+      v-if="data.summary"
+      class="lg:BaseGrid lg:mb-18 container mx-auto mb-10"
+    >
+      <div class="lg:px-0 lg:col-end-10 xl:col-end-8 relative col-start-2 px-4">
+        <BlockText :text="data.summary" />
+      </div>
+    </div>
+
+    <!-- press kits listing -->
+    <section
+      v-if="data.children && data.children.length"
+      aria-label="Directory Listing"
+      class="lg:my-18 my-10"
+    >
+      <LayoutHelper indent="col-2">
+        <SearchResultCard
+          v-for="item of data.children"
+          :key="item.id"
+          :type="item.label"
+          :topic="item.topicLabel"
+          :url="item.url"
+          :image="item.thumbnailImage"
+          :title="item.title"
+          :summary="item.summary"
+          heading-level="h2"
+        />
+        <LayoutHelper
+          v-if="data.callToAction && data.callToAction.length > 0"
+          indent="col-4"
+        >
+          <BlockCta :data="data.callToAction[0]" />
+        </LayoutHelper>
+      </LayoutHelper>
+    </section>
+  </div>
+</template>
+<script lang="ts">
+/* PressKitIndex template. Similar to the Asteroid Watch Index page
+ ** TODO: once we have a lot of press kits, we can easily convert this to use the search mixin
+ */
+
+import { defineComponent } from 'vue'
+import LayoutHelper from './../../../components/LayoutHelper/LayoutHelper.vue'
+import BlockCta from './../../../components/BlockCta/BlockCta.vue'
+import BlockText from './../../../components/BlockText/BlockText.vue'
+import SearchResultCard from './../../../components/SearchResultCard/SearchResultCard.vue'
+import DetailHeadline from './../../../components/DetailHeadline/DetailHeadline.vue'
+
+export default defineComponent({
+  name: 'PagePressKitIndex',
+  components: {
+    LayoutHelper,
+    BlockCta,
+    BlockText,
+    SearchResultCard,
+    DetailHeadline
+  },
+  props: {
+    data: {
+      type: Object,
+      required: false
+    }
+  }
+})
+</script>

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

@@ -0,0 +1,76 @@
+import { NavSecondaryData } from './../../../components/NavSecondary/NavSecondary.stories.js'
+import PageProfileDetail from './PageProfileDetail.vue'
+
+export default {
+  title: 'Templates/WWW/PageProfileDetail',
+  component: PageProfileDetail,
+  tags: ['!autodocs'],
+  decorators: [
+    () => ({
+      template: `<div id="storyDecorator" class="disable-nav-offset"><story/></div>`
+    })
+  ],
+  parameters: {
+    layout: 'fullscreen',
+    html: {
+      root: '#storyDecorator'
+    }
+  },
+  excludeStories: /.*(Data)$/
+}
+
+export const PageProfileDetailData = {
+  url: '/people/dariush-divsalar/',
+  breadcrumb: NavSecondaryData.breadcrumb,
+  displayLabel: 'Communications, Tracking & Radar',
+  title: 'Dariush Divsalar',
+  jobTitle: 'Electrical engineer',
+  email: 'dariush.divsalar@jpl.nasa.gov',
+  image: {
+    original: 'https://picsum.photos/312/390',
+    screenSm: {
+      url: 'https://picsum.photos/156/195',
+      width: '156'
+    },
+    screenMd: {
+      url: 'https://picsum.photos/232/290',
+      width: '232'
+    },
+    src: {
+      url: 'https://picsum.photos/312/390',
+      width: '312',
+      height: '390'
+    }
+  },
+  biography:
+    '<p>Dariush Divsalar received his Ph.D. degree in electrical engineering from the University of California, Los Angeles (UCLA) in 1978.</p>',
+  education: '<p>Ph.D. Electrical Engineering, University of California, Los Angeles (UCLA)</p>',
+  researchInterests:
+    '<p>Involved in research, development, study and analysis of various aspects of coding, modulations, communication theory and applications for Deep Space Communication System Techniques for Future Space Exploration Missions, Satellite Communications.</p>',
+  professionalExperience:
+    '<p>Over 40 years at JPL, contributed in areas of digital communication systems, wireless communication systems both over AWGN and Fading channels, bandwidth efficient combined coding modulation techniques, digital signal processing, satellite communications, mobile communications.</p>',
+  communityService:
+    '<p>Contributed to professional Societies such as IEEE. Journal Referee for IEEE societies of Communication and Information Theory. Member of technical committees for of IEEE communication theory and information theory societies conferences. Technical Program Chairman of Communication Theory Mini-Conference Globecom 93. Technical Program Chairman of IEEE Communication Theory workshop, Santa Cruz, April 1995. Organizer and chairman of many IEEE conference sessions in the past ten years.</p>',
+  selectedAwards: `
+    <ul>
+      <li>NASA Exceptional Engineering Achievement Medal in 1996.</li>
+      <li>IEEE Alexander Graham Bell Medal in 2014.</li>
+      <li>Several IEEE Journal, conference, workshop, best paper awards</li>
+    </ul>
+  `,
+  publications: `
+    <p>Total of 21593 citations for all publications. Only journal publications are provided below.</p>
+    <ol>
+      <li>D. Divsalar and M. K. Simon, "Spectral Characteristics of Convolutionally Coded Digital Signals," IEEE Trans. on Communications, February 1980.</li>
+      <li>D. Divsalar and M. K. Simon, "The Power Spectral Density of Digital Modulations Transmitted Over Nonlinear Channels," IEEE Trans. on Communications, Vol. COM-30, January 1982.</li>
+    </ol>
+  `
+}
+
+// stories
+export const BaseStory = {
+  name: 'PageProfileDetail',
+  args: {
+    data: PageProfileDetailData
+  }
+}

package/src/templates/www/PageProfileDetail/PageProfileDetail.vue

@@ -0,0 +1,178 @@
+<template>
+  <div
+    v-if="data"
+    class="ThemeVariantLight text-gray-dark mb-20 md:mb-40"
+    itemscope
+    itemtype="http://schema.org/Person"
+  >
+    <NavSecondary :breadcrumb="data.breadcrumb" />
+
+    <div class="BaseGrid container mx-auto lg:px-0 px-4 lg:my-20 my-10 gap-y-0">
+      <div class="col-start-1 col-end-13 md:hidden">
+        <BaseHeading
+          level="h1"
+          size="h2"
+          class="mb-5"
+          itemprop="name"
+          >{{ data.title }}</BaseHeading
+        >
+        <p
+          class="text-body-lg mb-5"
+          itemprop="jobTitle"
+        >
+          {{ data.jobTitle }}
+        </p>
+      </div>
+      <BaseImagePlaceholder
+        aspect-ratio="portrait"
+        class="col-start-1 col-end-6 lg:col-start-3 lg:col-end-6 mb-10 md:mb-0"
+      >
+        <BaseImage
+          v-if="data.image && data.image.src"
+          :src="data.image.src.url"
+          :srcset="getPortraitSrcset(data.image)"
+          :width="data.image.src.width"
+          :height="data.image.src.height"
+          image-class="w-full h-auto"
+          loading="eager"
+          alt=""
+        />
+      </BaseImagePlaceholder>
+
+      <div class="col-start-1 col-end-13 md:col-start-6 md:col-end-13 lg:col-start-6 lg:col-end-11">
+        <div class="hidden md:block">
+          <BaseHeading
+            level="h1"
+            size="h2"
+            class="mb-5 md:mb-7 lg:mb-10"
+            itemprop="name"
+            >{{ data.title }}</BaseHeading
+          >
+          <p
+            class="text-body-lg mb-5 md:mb-7 lg:mb-10"
+            itemprop="jobTitle"
+          >
+            {{ data.jobTitle }}
+          </p>
+        </div>
+        <template v-if="data.email">
+          <BaseHeading
+            level="h2"
+            size="h4"
+            class="mb-2"
+          >
+            <IconEnvelope class="inline relative -top-0.5" />
+            Email
+          </BaseHeading>
+          <p class="text-h6">
+            <a
+              class="font-normal underline break-all"
+              itemprop="email"
+              :href="`mailto:${data.email}`"
+            >
+              {{ data.email }}
+            </a>
+          </p>
+        </template>
+      </div>
+    </div>
+
+    <LayoutHelper indent="col-3">
+      <ProfileDetailSectionGroup
+        v-for="section in topLevel"
+        :key="section.id"
+        :section="section"
+        :data="data"
+      />
+    </LayoutHelper>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from 'vue'
+import LayoutHelper from './../../../components/LayoutHelper/LayoutHelper.vue'
+import NavSecondary from './../../../components/NavSecondary/NavSecondary.vue'
+import BaseHeading from './../../../components/BaseHeading/BaseHeading.vue'
+import BaseImagePlaceholder from './../../../components/BaseImagePlaceholder/BaseImagePlaceholder.vue'
+import BaseImage from './../../../components/BaseImage/BaseImage.vue'
+import IconEnvelope from './../../../components/Icons/IconEnvelope.vue'
+import ProfileDetailSectionGroup from './../../../components/ProfileDetailSectionGroup/ProfileDetailSectionGroup.vue'
+
+export default defineComponent({
+  name: 'PageProfileDetail',
+  components: {
+    LayoutHelper,
+    NavSecondary,
+    BaseHeading,
+    BaseImagePlaceholder,
+    BaseImage,
+    IconEnvelope,
+    ProfileDetailSectionGroup
+  },
+  props: {
+    data: {
+      type: Object,
+      required: false
+    }
+  },
+
+  data() {
+    return {
+      topLevel: [
+        {
+          title: 'About',
+          id: 'about',
+          subsections: [
+            {
+              title: 'Biography',
+              prop: 'biography',
+              icon: 'IconBookUser'
+            },
+            { title: 'Education', prop: 'education', icon: 'IconUniversity' },
+            {
+              title: 'Research Interests',
+              prop: 'researchInterests',
+              icon: 'IconMagnifyingGlass'
+            }
+          ]
+        },
+        {
+          title: 'Experience',
+          id: 'experience',
+          subsections: [
+            {
+              title: 'Professional Experience',
+              prop: 'professionalExperience',
+              icon: 'IconBriefcase'
+            },
+            {
+              title: 'Community Service',
+              prop: 'communityService',
+              icon: 'IconHand'
+            }
+          ]
+        },
+        {
+          title: 'Achievements',
+          id: 'achievements',
+          subsections: [
+            {
+              title: 'Selected Awards',
+              prop: 'selectedAwards',
+              icon: 'IconMedal'
+            },
+            { title: 'Publications', prop: 'publications', icon: 'IconBook' }
+          ]
+        }
+      ]
+    }
+  },
+
+  methods: {
+    // Generate the srcset manually as the image renditions use a portrait aspect ratio.
+    getPortraitSrcset(image) {
+      return `${image.screenSm.url} ${image.screenSm.width}w, ${image.screenMd.url} ${image.screenMd.width}w, ${image.src.url} ${image.src.width}w`
+    }
+  }
+})
+</script>

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

@@ -0,0 +1,43 @@
+import { HeroLargeData } from './../../../components/HeroLarge/HeroLarge.stories.js'
+import { RoboticsDetailStatsData } from './../../../components/RoboticsDetailStats/RoboticsDetailStats.stories.js'
+import { BlockCardGroupData } from './../../../components/BlockCardGroup/BlockCardGroup.stories.js'
+import { BlockLinkTileCarouselData } from './../../../components/BlockLinkCarousel/BlockLinkCarousel.stories.js'
+import { BlockRelatedLinksData } from './../../../components/BlockRelatedLinks/BlockRelatedLinks.stories.js'
+import { BlockStreamfieldTruncatedData } from './../../../components/BlockStreamfield/BlockStreamfield.stories'
+
+import PageRoboticsDetail from './PageRoboticsDetail.vue'
+
+export default {
+  title: 'Templates/WWW/PageRoboticsDetail',
+  component: PageRoboticsDetail,
+  tags: ['!autodocs'],
+  decorators: [
+    () => ({
+      template: `<div id="storyDecorator" class="disable-nav-offset"><story/></div>`
+    })
+  ],
+  parameters: {
+    layout: 'fullscreen',
+    html: {
+      root: '#storyDecorator'
+    }
+  },
+  excludeStories: /.*(Data)$/
+}
+
+// stories
+export const Template = {
+  name: 'PageRoboticsDetail',
+  args: {
+    data: {
+      ...HeroLargeData,
+      ...RoboticsDetailStatsData,
+      introduction:
+        'FreeClimber: LEMUR 3 belongs to a new generation of robots being built at JPL that can crawl, walk and even climb rock walls. This robot was designed to operate in extreme terrains, demonstrating the applicability of its systems for possible missions to Mars, the Moon, and small bodies. It was developed under sponsorship of NASA Science Mission Directorate.',
+      ...BlockStreamfieldTruncatedData,
+      relatedLinks: [BlockRelatedLinksData.data],
+      moreRobots: BlockLinkTileCarouselData,
+      facts: BlockCardGroupData
+    }
+  }
+}