@explorer-1/vue 0.1.4 → 0.1.6

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
+    }
+  }
+}

package/src/templates/www/PageCuratedGallery/PageCuratedGallery.vue

@@ -0,0 +1,345 @@
+<template>
+  <div
+    v-if="data"
+    id="galleryTop"
+    class="PageCuratedGallery ThemeVariantLight"
+  >
+    <!-- page headline -->
+
+    <LayoutHelper class="lg:mt-8 lg:mb-4 mt-5 mb-0">
+      <div class="mr-auto max-w-sm hidden relative lg:block mt-4 -mb-2">
+        <ShareButtons
+          v-if="data.title && data.url"
+          class="mx-4 lg:mx-1.5"
+          :title="data.title"
+          :url="data.url"
+        />
+      </div>
+      <LayoutHelper
+        indent="col-2"
+        :class="data.firstPublishedAt && data.firstPublishedAt.length > 2 ? '' : 'py-4 mb-2'"
+      >
+        <div
+          class="justify-start flex flex-row items-center py-3 divide-x-2 divide-gray-light-mid space-x-2"
+        >
+          <nuxt-link
+            v-if="data.label"
+            class="group nuxt-link-active text-subtitle text-theme-red can-hover:hover:text-theme-red-hover cursor-pointer"
+            to="/galleries"
+          >
+            Curated Gallery
+          </nuxt-link>
+          <template v-if="data.galleryType">
+            <span class="pl-2 text-subtitle"> {{ data.galleryType }}S </span>
+          </template>
+        </div>
+        <DetailHeadline
+          :title="data.title"
+          :publication-date="data.firstPublishedAt"
+        />
+        <div class="flex lg:hidden">
+          <ShareButtons
+            v-if="data.title && data.url"
+            inline
+            class="my-4"
+            :class="data.firstPublishedAt && data.firstPublishedAt.length > 2 ? '' : 'mb-0'"
+            :title="data.title"
+            :url="data.url"
+          />
+        </div>
+      </LayoutHelper>
+    </LayoutHelper>
+    <LayoutHelper>
+      <div
+        class="lg:-mt-6 lg:border-gray-light-mid lg:flex items-center justify-between px-4 lg:px-0 py-1.5 lg:mb-4 align-middle lg:border-b"
+      >
+        <div class="flex flex-row ml-auto py-3 lg:py-0 justify-between">
+          <!-- 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="curatedGalleryStore.updateView(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 ? 'Slideshow View (enabled)' : 'Slideshow View'"
+              :disabled="!showGridView"
+              @click="curatedGalleryStore.updateView(false)"
+            >
+              <span class="flex items-center mb-0.5">
+                <IconSlideshow />
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </LayoutHelper>
+    <!-- <template v-if="data.galleryType === 'installations'"> -->
+    <template v-if="data.galleryType">
+      <div
+        :class="'gallery-' + data.galleryType"
+        class="mx-auto bg-white"
+      >
+        <div
+          v-if="data.galleryItems"
+          class="container mx-auto"
+        >
+          <div
+            v-if="showGridView"
+            class="CuratedGallery-thumbnails"
+          >
+            <div class="BaseGrid container mx-auto">
+              <div
+                v-for="(galleryItem, index) in data.galleryItems"
+                :key="index"
+                class="BaseGalleryImage"
+              >
+                <MixinFancybox
+                  v-if="galleryItem.image.src"
+                  :caption="galleryItem.image.caption"
+                  :title="galleryItem.image.title"
+                  :gallery-name="`grid-${data.id}`"
+                  :src="galleryItem.image.src.url"
+                  :detail-url="galleryItem.image.detailUrl"
+                  animated
+                  show-thumbnails
+                >
+                  <BaseImagePlaceholder
+                    v-if="galleryItem.image"
+                    dark-mode
+                    :aspect-ratio="data.galleryAspectRatio || '2:3'"
+                  >
+                    <BaseImage
+                      v-if="galleryItem.image.src"
+                      :src="galleryItem.image.src.url"
+                      :srcset="galleryItem.image.srcSet"
+                      :alt="galleryItem.image.caption"
+                      :width="galleryItem.image.src.width"
+                      :height="galleryItem.image.src.height"
+                      :object-fit-class="data.galleryObjectFit || 'contain'"
+                    />
+                  </BaseImagePlaceholder>
+                  <BlockText
+                    class="the-caption-text"
+                    :text="galleryItem.image.title"
+                  />
+                </MixinFancybox>
+              </div>
+            </div>
+          </div>
+          <div
+            v-else
+            class="CuratedGallery-carousel"
+          >
+            <div class="mx-auto max-h-screen">
+              <BlockImageCarousel
+                key="CuratedGalleryCarousel"
+                :items="data.galleryItems"
+                :slide="slide"
+                :block-id="data.id"
+                show-title
+              />
+            </div>
+          </div>
+          <LayoutHelper indent="col-2">
+            <div
+              class="RelatedLinks lg:mb-10 mb-16 mt-16"
+              :class="{ 'lg:mt-10': showGridView }"
+            >
+              <template v-if="data.galleryDownloadLink && data.galleryDownloadLink.length">
+                <div class="sm:w-3/4 md:w-2/3 lg:w-3/4 xl:w-2/3 mb-2">
+                  <RelatedLink
+                    variant="document"
+                    :href="data.galleryDownloadLink"
+                  >
+                    Download the {{ data.title }} gallery
+                  </RelatedLink>
+                </div>
+              </template>
+            </div>
+          </LayoutHelper>
+          <!-- Body Streamfield -->
+          <template v-if="data.body">
+            <BlockStreamfield
+              class="lg:mb-10 mb-4"
+              :data="data.body"
+            />
+          </template>
+          <LayoutHelper indent="col-2">
+            <!-- related links -->
+            <template v-if="data.relatedLinks && data.relatedLinks.length">
+              <BlockRelatedLinks
+                class="mt-10 mb-20 lg:mb-25"
+                :data="data.relatedLinks[0]"
+              />
+            </template>
+          </LayoutHelper>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from 'vue'
+import { mapStores } from 'pinia'
+import { useCuratedGalleryStore } from '../../../store/curatedGallery'
+import LayoutHelper from './../../../components/LayoutHelper/LayoutHelper.vue'
+import DetailHeadline from './../../../components/DetailHeadline/DetailHeadline.vue'
+import BaseImage from './../../../components/BaseImage/BaseImage.vue'
+import MixinFancybox from './../../../components/MixinFancybox/MixinFancybox.vue'
+import RelatedLink from './../../../components/BlockRelatedLinks/RelatedLink.vue'
+import BlockRelatedLinks from './../../../components/BlockRelatedLinks/BlockRelatedLinks.vue'
+import BlockText from './../../../components/BlockText/BlockText.vue'
+import BlockImageCarousel from './../../../components/BlockImageCarousel/BlockImageCarousel.vue'
+import BaseImagePlaceholder from './../../../components/BaseImagePlaceholder/BaseImagePlaceholder.vue'
+import BlockStreamfield from './../../../components/BlockStreamfield/BlockStreamfield.vue'
+import IconGrid from './../../../components/Icons/IconGrid.vue'
+import IconSlideshow from './../../../components/Icons/IconSlideshow.vue'
+import ShareButtons from './../../../components/ShareButtons/ShareButtons.vue'
+
+export default defineComponent({
+  name: 'PageCuratedGallery',
+  components: {
+    LayoutHelper,
+    BaseImage,
+    BlockText,
+    MixinFancybox,
+    BaseImagePlaceholder,
+    RelatedLink,
+    BlockRelatedLinks,
+    BlockImageCarousel,
+    BlockStreamfield,
+    DetailHeadline,
+    IconGrid,
+    IconSlideshow,
+    ShareButtons
+  },
+  props: {
+    data: {
+      type: Object || String,
+      required: false
+    }
+  },
+  data() {
+    return {
+      // defaults to first slide
+      galleryTitle: 'curated-gallery',
+      slide: 0,
+      inCarousel: false,
+      // if grid view should be allowed
+      allowGridView: true,
+      defaultShowGridView: true
+    }
+  },
+  computed: {
+    ...mapStores(useCuratedGalleryStore),
+    showGridView() {
+      if (this.curatedGalleryStore.showGridView !== undefined) {
+        return this.curatedGalleryStore.showGridView
+      }
+      return this.defaultShowGridView
+    }
+  }
+})
+</script>
+
+<style lang="scss">
+.PageCuratedGallery {
+  .CuratedGallery-thumbnails,
+  .CuratedGallery-carousel {
+    @apply block;
+
+    &.hidden {
+      @apply h-0 overflow-hidden;
+    }
+
+    &.shown {
+      @apply relative;
+    }
+  }
+
+  .BaseGalleryImage {
+    .MixinFancybox {
+      img {
+        @apply can-hover:hover:opacity-95 transition-opacity duration-75;
+      }
+    }
+
+    @apply text-gray-mid-dark col-span-12 mx-5;
+    @screen md {
+      @apply col-span-6 mx-3;
+    }
+    @screen lg {
+      @apply col-span-6 mx-0;
+
+      .BaseImagePlaceholder {
+        @apply transition-shadow duration-200 rounded-sm;
+      }
+      &:hover {
+        .BaseImagePlaceholder {
+          @apply duration-300 shadow-md;
+        }
+
+        .the-caption-text {
+          @apply text-jpl-red-light transition-colors duration-200;
+        }
+      }
+    }
+    @screen lg {
+      @apply col-span-4 mx-1.5;
+    }
+    @screen xl {
+      @apply mx-0;
+    }
+
+    .the-caption-text {
+      @apply cursor-pointer text-gray-mid-dark text-lg my-3 leading-tight inline-block h-auto mb-14 transition-colors duration-150;
+      &:hover {
+        @apply text-jpl-red-dark transition-colors duration-200;
+      }
+
+      .ThemeVariantDark & {
+        @apply text-gray-light-mid;
+        &:hover {
+          @apply text-jpl-red-dark;
+        }
+      }
+    }
+
+    .ThemeVariantLight & {
+      @apply text-gray-mid;
+    }
+
+    .ThemeVariantDark & {
+      @apply text-gray-mid;
+    }
+  }
+
+  .StreamField {
+    @apply pb-4;
+    @screen lg {
+      @apply pb-12;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,61 @@
+import PageGoDirectory from './PageGoDirectory.vue'
+
+export default {
+  title: 'Templates/WWW/PageGoDirectory',
+  component: PageGoDirectory,
+  tags: ['!autodocs'],
+  decorators: [
+    () => ({
+      template: `<div id="storyDecorator" class="disable-nav-offset"><story/></div>`
+    })
+  ],
+  parameters: {
+    layout: 'fullscreen',
+    html: {
+      root: '#storyDecorator'
+    }
+  },
+  excludeStories: /.*(Data)$/
+}
+// stories
+export const BaseStory = {
+  name: 'PageGoDirectory',
+  args: {
+    data: {
+      title: 'Go Sites',
+      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.`,
+      children: [
+        {
+          id: 1,
+          label: 'Label',
+          topicLabel: 'Topic Label',
+          url: '/go/placeholder',
+          title: 'Title of the go site 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: '/go/placeholder',
+          title: 'Title of the go site homepage',
+          thumbnailImage: {
+            src: {
+              url: 'https://picsum.photos/560/560',
+              width: '560',
+              height: '560'
+            }
+          }
+        }
+      ]
+    }
+  }
+}