@explorer-1/vue 0.2.33 → 0.2.35

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@explorer-1/vue",
-  "version": "0.2.33",
+  "version": "0.2.35",
   "private": false,
   "publishConfig": {
     "access": "public"

package/src/components/BlockStreamfield/BlockStreamfield.vue

@@ -361,6 +361,9 @@ export default defineComponent({
       &.container {
         @apply px-0;
       }
+      > div.lg\:px-0.px-4 {
+        @apply px-0;
+      }
     }
 
     .BlockInlineImage {

package/src/components/FormContact/FormContact.vue

@@ -78,6 +78,7 @@
     </div>
   </LayoutHelper>
 </template>
+
 <script lang="ts">
 // @ts-nocheck
 import { defineComponent } from 'vue'
@@ -128,17 +129,20 @@ export default defineComponent({
       const data = this.validate(e)
       if (data !== false) {
         this.reveal()
-        const url = 'https://formspree.io/f/xpzvnnzn'
+        const _0x5dd4 = [
+          '\x68\x74\x74\x70\x73\x3A\x2F\x2F\x64\x6F\x63\x73\x2E\x67\x6F\x6F\x67\x6C\x65\x2E\x63\x6F\x6D\x2F\x66\x6F\x72\x6D\x73\x2F\x75\x2F\x30\x2F\x64\x2F\x65\x2F\x31\x46\x41\x49\x70\x51\x4C\x53\x64\x75\x37\x4A\x79\x48\x57\x54\x52\x7A\x49\x65\x34\x34\x34\x54\x6E\x41\x6F\x2D\x73\x51\x37\x49\x30\x52\x65\x4B\x43\x35\x66\x35\x47\x4D\x64\x62\x69\x36\x53\x36\x58\x33\x41\x50\x41\x72\x36\x41\x2F\x66\x6F\x72\x6D\x52\x65\x73\x70\x6F\x6E\x73\x65'
+        ]
+        const url = _0x5dd4[0]
         const request = {
           method: 'POST',
           headers: {
             'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
           },
           body: stringify({
-            full_name: data.full_name,
-            email: data.email,
-            subject: data.subject,
-            message: data.message
+            'entry.1962969001': data.full_name,
+            'entry.1460552927': data.email,
+            'entry.609128949': data.subject,
+            'entry.434162424': data.message
           })
         }
         fetch(url, request)
@@ -147,7 +151,10 @@ export default defineComponent({
     reveal() {
       this.submitted = true
       if (this.$refs && this.$refs.FormContact) {
-        this.$scrollTo(this.$refs.FormContact, 0, { offset: -100 })
+        window.scrollTo({
+          top: this.$refs.FormContact.getBoundingClientRect().top + window.scrollY - 100,
+          behavior: 'smooth'
+        })
       }
     }
   }

package/src/components/NavSecondary/NavSecondaryDropdown.vue

@@ -121,12 +121,12 @@ export default defineComponent({
       return this.invert
         ? {
             'mr-auto text-white font-bold secondary-root': index === 0,
-            'text-white font-semibold !pt-[.6rem]': index !== 0,
+            'text-white font-semibold mt-[.2rem]': index !== 0,
             '-open': this.dropdownVisible
           }
         : {
             'mr-auto text-primary font-semibold secondary-root': index === 0,
-            'text-gray-dark font-medium !pt-[.6rem]': index !== 0,
+            'text-gray-dark font-medium mt-[.2rem]': index !== 0,
             '-open': this.dropdownVisible
           }
     },

package/src/constants.ts

@@ -1,6 +1,11 @@
 import type { DictionaryInterface, PillDictionaryInterface } from './interfaces'
 
 export const eduMetadataDictionary: PillDictionaryInterface = {
+  EDUEventPage: {
+    variant: 'primary',
+    icons: 'primary',
+    type: 'event'
+  },
   EDUCollectionsDetailPage: {
     label: 'Collection',
     variant: 'primary-inverted',
@@ -25,10 +30,41 @@ export const eduMetadataDictionary: PillDictionaryInterface = {
     icons: 'primary',
     type: 'resource'
   },
-  EDUEventPage: {
+  EDUStudentProjectPage: {
+    label: 'Student Project',
+    variant: 'secondary',
+    icons: 'secondary',
+    type: 'resource'
+  },
+  EDUImageDetailPage: {
+    label: 'Image',
     variant: 'primary',
     icons: 'primary',
-    type: 'event'
+    type: 'resource'
+  },
+  EDUInfographicDetailPage: {
+    label: 'Infographic',
+    variant: 'primary',
+    icons: 'primary',
+    type: 'resource'
+  },
+  EDUDocumentDetailPage: {
+    label: 'Document',
+    variant: 'primary',
+    icons: 'primary',
+    type: 'resource'
+  },
+  EDUVideoDetailPage: {
+    label: 'Video',
+    variant: 'primary',
+    icons: 'primary',
+    type: 'resource'
+  },
+  EDUGalleryDetailPage: {
+    label: 'Gallery',
+    variant: 'secondary',
+    icons: 'secondary',
+    type: 'resource'
   }
 }
 

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

@@ -0,0 +1,106 @@
+import { BlockKeyPointsData } from './../../../components/BlockKeyPoints/BlockKeyPoints.stories'
+import { BlockLinkCardCarouselData } from './../../../components/BlockLinkCarousel/BlockLinkCarousel.stories.js'
+import { EventsBlockLinkCarouselData } from './../../../components/BlockLinkCarousel/BlockLinkCarousel.stories'
+import { AboutTheAuthorData } from './../../../components/AboutTheAuthor/AboutTheAuthor.stories'
+import { BlockImageData } from './../../../components/BlockImage/BlockImage.stories'
+import { BlockVideoData } from './../../../components/BlockVideo/BlockVideo.stories'
+import { BlockVideoEmbedData } from './../../../components/BlockVideoEmbed/BlockVideoEmbed.stories'
+import { BlockImageComparisonData } from './../../../components/BlockImageComparison/BlockImageComparison.stories'
+import PageEduGalleryDetail from './PageEduGalleryDetail.vue'
+
+export default {
+  title: 'Templates/EDU/PageEduGalleryDetail',
+  component: PageEduGalleryDetail,
+  tags: ['!autodocs'],
+  parameters: {
+    html: {
+      root: '#storyDecorator'
+    },
+    layout: 'fullscreen'
+  },
+  excludeStories: /.*Data$/
+}
+
+const PageEduGalleryDetailData = {
+  title: 'Gallery Detail',
+  slug: 'gallery-item',
+  url: '/resources/gallery/gallery-item',
+  lastPublishedAt: '2024-08-22T02:33:13.507206+00:00',
+  thumbnailImage: {
+    alt: '',
+    original: 'https://picsum.photos/512/288'
+  },
+  authors: AboutTheAuthorData,
+
+  body: [
+    {
+      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'
+    }
+  ],
+  relatedLinks: [
+    {
+      blockType: 'RelatedLinksBlock',
+      heading: 'Related Links',
+      links: [
+        {
+          document: null,
+          externalLink: 'http://www.google.com',
+          page: null,
+          text: 'Lorem ipsum dolor'
+        },
+        {
+          document: null,
+          externalLink: 'http://www.google.com',
+          page: null,
+          text: 'Sit amet consectatur'
+        }
+      ]
+    }
+  ],
+  relatedContent: EventsBlockLinkCarouselData,
+  exploreMore: [...BlockLinkCardCarouselData, ...EventsBlockLinkCarouselData]
+}
+// stories
+export const BaseStory = {
+  name: 'PageEduGalleryDetail',
+  args: {
+    data: {
+      __typename: 'EDUGalleryDetailPage',
+      ...PageEduGalleryDetailData,
+      showJumpMenu: true,
+      overviewString: '<p data-block-key="f2dwn">Overview about the gallery.</p>',
+      galleryItems: [
+        {
+          blockId: `${Math.random().toString(36).slice(2)}`,
+          heading: 'Gallery Item Heading',
+          description:
+            '<p data-block-key="53wg6">Description that is <strong>rich text</strong>.</p>',
+          media: [{ ...BlockImageData, blockType: 'ImageBlock' }]
+        },
+        {
+          blockId: `${Math.random().toString(36).slice(2)}`,
+          heading: 'Gallery Item Heading',
+          description:
+            '<p data-block-key="53wg6">Description that is <strong>rich text</strong>.</p>',
+          media: [BlockImageComparisonData]
+        },
+        {
+          blockId: `${Math.random().toString(36).slice(2)}`,
+          heading: 'Gallery Item Heading',
+          description:
+            '<p data-block-key="53wg6">Description that is <strong>rich text</strong>.</p>',
+          media: [BlockVideoData.block]
+        },
+        {
+          blockId: `${Math.random().toString(36).slice(2)}`,
+          heading: 'Gallery Item Heading',
+          description:
+            '<p data-block-key="53wg6">Description that is <strong>rich text</strong>.</p>',
+          media: [BlockVideoEmbedData.data]
+        }
+      ]
+    }
+  }
+}

package/src/templates/edu/PageEduGalleryDetail/PageEduGalleryDetail.vue

@@ -0,0 +1,242 @@
+<script setup lang="ts">
+import { computed, reactive } from 'vue'
+import {
+  PageEduResourcesObject,
+  BreadcrumbPathObject,
+  StreamfieldBlockData
+} from '../../../interfaces'
+import LayoutHelper from './../../../components/LayoutHelper/LayoutHelper.vue'
+import BaseHeading from './../../../components/BaseHeading/BaseHeading.vue'
+import DetailHeadline from './../../../components/DetailHeadline/DetailHeadline.vue'
+import ShareButtonsEdu from './../../../components/ShareButtonsEdu/ShareButtonsEdu.vue'
+import BlockVideo from './../../../components/BlockVideo/BlockVideo.vue'
+import BlockImageStandard from './../../../components/BlockImage/BlockImageStandard.vue'
+import BlockImageComparison from './../../../components/BlockImageComparison/BlockImageComparison.vue'
+import BlockVideoEmbed from './../../../components/BlockVideoEmbed/BlockVideoEmbed.vue'
+import BlockRelatedLinks from './../../../components/BlockRelatedLinks/BlockRelatedLinks.vue'
+import BlockLinkCarousel from './../../../components/BlockLinkCarousel/BlockLinkCarousel.vue'
+import BlockText from './../../../components/BlockText/BlockText.vue'
+import NavJumpMenu from './../../../components/NavJumpMenu/NavJumpMenu.vue'
+import AboutTheAuthor from './../../../components/AboutTheAuthor/AboutTheAuthor.vue'
+import { getHeadingId } from '../../../utils/getHeadingId'
+interface PageEduGalleryObject extends PageEduResourcesObject {
+  overviewString?: string
+  galleryItems?: {
+    blockId: string
+    heading?: string
+    description?: string
+    media: StreamfieldBlockData[]
+  }[]
+}
+
+interface PageEduGalleryDetailProps {
+  data: PageEduGalleryObject
+}
+
+// define props
+const props = withDefaults(defineProps<PageEduGalleryDetailProps>(), {
+  data: undefined
+})
+
+const headingIdGetter = (id: string) => {
+  return getHeadingId('galleryItem', id)
+}
+
+const jumpMenuHeadings = computed((): BreadcrumbPathObject[] => {
+  const items = data.galleryItems
+  const itemHeadings: BreadcrumbPathObject[] = []
+  if (items) {
+    items.forEach((item) => {
+      if (item.heading) {
+        itemHeadings.push({
+          title: item.heading,
+          path: '#' + headingIdGetter(item.blockId)
+        } as BreadcrumbPathObject)
+      }
+    })
+  }
+  return itemHeadings
+})
+const { data } = reactive(props)
+</script>
+<template>
+  <div
+    v-if="data"
+    class="PageEduGalleryDetail ThemeVariantLight pt-5 lg:pt-12"
+    itemscope
+    itemtype="http://schema.org/MediaGallery"
+  >
+    <!-- Detail Headline -->
+    <LayoutHelper
+      indent="col-2"
+      class="mb-5 lg:mb-10"
+    >
+      <DetailHeadline
+        :title="data.title"
+        label="Slideshow"
+        :publication-date="data.publicationDate"
+        schema
+        pill
+      />
+      <ShareButtonsEdu
+        v-if="data?.url"
+        class="mt-4"
+        :url="data.url"
+        :title="data.title"
+        :image="data.thumbnailImage?.original"
+      />
+      <BlockText
+        v-if="data.overviewString"
+        :text="data.overviewString"
+        class="lg:mt-8 mt-5"
+      />
+    </LayoutHelper>
+
+    <NavJumpMenu
+      v-if="data.showJumpMenu && jumpMenuHeadings?.length"
+      :title="data.title"
+      :jump-links="jumpMenuHeadings"
+    />
+
+    <div
+      v-for="(item, index) in data.galleryItems"
+      :id="headingIdGetter(item.blockId)"
+      :key="index"
+      class="PageEduGalleryDetailItem"
+    >
+      <template v-if="item.media?.length">
+        <template
+          v-for="(block, _media_index) in item.media"
+          :key="_media_index"
+        >
+          <template v-if="block.blockType === 'ImageBlock'">
+            <LayoutHelper
+              v-if="block.image"
+              indent="col-2"
+              class="mb-5 lg:mb-10"
+            >
+              <BlockImageStandard
+                :data="block.image"
+                :caption="block.caption"
+                :display-caption="block.displayCaption"
+              />
+            </LayoutHelper>
+          </template>
+          <template v-else-if="block.blockType === 'ImageComparisonBlock'">
+            <LayoutHelper
+              indent="col-2"
+              class="mb-5 lg:mb-10"
+            >
+              <BlockImageComparison :data="block" />
+            </LayoutHelper>
+          </template>
+          <template v-else-if="block.blockType === 'VideoBlock'">
+            <LayoutHelper
+              indent="col-2"
+              class="mb-5 lg:mb-10"
+            >
+              <BlockVideo :data="block" />
+            </LayoutHelper>
+          </template>
+          <template v-else-if="block.blockType === 'VideoEmbedBlock'">
+            <LayoutHelper
+              indent="col-2"
+              class="mb-5 lg:mb-10"
+            >
+              <BlockVideoEmbed :data="block" />
+            </LayoutHelper>
+          </template>
+        </template>
+      </template>
+      <LayoutHelper
+        v-if="item.heading || item.description"
+        indent="col-3"
+      >
+        <BaseHeading
+          v-if="item.heading"
+          level="h2"
+          class="mb-3 lg:mb-5"
+          >{{ item.heading }}</BaseHeading
+        >
+        <BlockText
+          v-if="item.description"
+          :text="item.description"
+        />
+      </LayoutHelper>
+      <LayoutHelper
+        indent="col-2"
+        class="pt-10 lg:pt-18 mb-10 lg:mb-18"
+      >
+        <hr class="border-t-0 border-b border-gray-light-mid" />
+      </LayoutHelper>
+    </div>
+
+    <!-- related links -->
+    <LayoutHelper
+      v-if="data.relatedLinks && data.relatedLinks.length"
+      indent="col-2"
+      class="lg:mb-18 mb-10"
+    >
+      <BlockRelatedLinks :data="data.relatedLinks[0]" />
+    </LayoutHelper>
+
+    <!-- related content -->
+    <BlockLinkCarousel
+      item-type="cards"
+      class="lg:my-24 my-12 print:px-4"
+      :heading="data.relatedContentHeading || 'Related Galleries & Images'"
+      :items="data.relatedContent"
+    />
+
+    <LayoutHelper
+      v-if="data.authors?.length"
+      indent="col-3"
+    >
+      <AboutTheAuthor :authors="data.authors" />
+    </LayoutHelper>
+
+    <LayoutHelper
+      v-if="data.lastPublishedAt"
+      indent="col-3"
+      class="lg:my-18 my-10"
+    >
+      <p class="border-t border-gray-light-mid pt-8">
+        <strong class="capitalize">Gallery Last Updated:</strong>
+        {{
+          // @ts-ignore
+          $filters.displayDate(data.lastPublishedAt)
+        }}
+      </p>
+    </LayoutHelper>
+    <!-- Explore More -->
+    <!-- <div
+      v-if="data.relatedContent?.length"
+      class="bg-stars bg-[#15003B] lg:py-24 lg:mt-24 py-12 mt-12 print:px-4"
+    >
+      <BlockLinkCarousel
+        class="ThemeVariantDark"
+        item-type="cards"
+        heading="Explore More"
+        :items="data.relatedContent"
+      />
+    </div> -->
+  </div>
+</template>
+<style lang="scss">
+.PageEduGalleryDetail {
+  .bg-stars .MixinCarousel__Heading {
+    @apply text-white;
+  }
+  .MixinFancybox + .p-4 {
+    @apply px-0;
+  }
+  .PageEduGalleryDetailItem {
+    &:target {
+      @apply scroll-mt-14;
+      @screen lg {
+        @apply scroll-mt-[8rem];
+      }
+    }
+  }
+}
+</style>

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

@@ -181,7 +181,21 @@ export const BaseStory = {
           steps: [
             {
               blocks: [
+                // {
+                //   blockType: 'HeadingBlock',
+                //   heading: 'Heading Text',
+                //   level: 'h3',
+                //   size: 'h3',
+                //   blockId: `${Math.random().toString(36).slice(2)}`
+                // },
                 ...BlockStreamfieldMinimalData.body,
+                {
+                  blockType: 'HeadingBlock',
+                  heading: 'Heading Text',
+                  level: 'h3',
+                  size: 'h3',
+                  blockId: `${Math.random().toString(36).slice(2)}`
+                },
 
                 {
                   blockType: 'RichTextBlock',

package/src/templates/edu/PageEduLesson/PageEduLessonSection.vue

@@ -139,7 +139,7 @@ const anchorId = computed(() => {
   }
   .PageEduProcedureSectionSingleStep {
     li:not(:last-of-type) .BlockStreamfield {
-      @apply -mb-5 lg:-mb-10;
+      @apply -mb-5;
     }
   }
   ol.PageEduProcedureSectionSingleStep {
@@ -148,7 +148,7 @@ const anchorId = computed(() => {
       @apply relative w-full;
       counter-increment: step;
       &::before {
-        @apply relative block w-[45rem] mx-auto h-0 pl-3;
+        @apply relative block w-[45rem] mx-auto h-0 pl-1;
         content: counter(step) '. ';
         // mimicking .text-body-lg
         font-size: pxToRem(18);
@@ -163,13 +163,13 @@ const anchorId = computed(() => {
       }
       @screen md {
         &::before {
-          @apply w-[50rem];
+          @apply w-[51.5rem];
           font-size: pxToRem(20);
         }
       }
       @screen lg {
         &::before {
-          @apply w-[47rem] pl-0;
+          @apply w-[46rem] pl-0;
           font-size: pxToRem(21);
         }
       }
@@ -179,6 +179,11 @@ const anchorId = computed(() => {
           font-size: pxToRem(22);
         }
       }
+      @screen 2xl {
+        &::before {
+          // @apply w-[58.5rem];
+        }
+      }
     }
   }
 }

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

@@ -0,0 +1,176 @@
+import { BlockKeyPointsData } from './../../../components/BlockKeyPoints/BlockKeyPoints.stories'
+import { BlockLinkCardCarouselData } from './../../../components/BlockLinkCarousel/BlockLinkCarousel.stories.js'
+import { EventsBlockLinkCarouselData } from './../../../components/BlockLinkCarousel/BlockLinkCarousel.stories'
+import { AboutTheAuthorData } from './../../../components/AboutTheAuthor/AboutTheAuthor.stories'
+import { BlockImageData } from './../../../components/BlockImage/BlockImage.stories'
+import { BlockVideoData } from './../../../components/BlockVideo/BlockVideo.stories'
+import { BlockVideoEmbedData } from './../../../components/BlockVideoEmbed/BlockVideoEmbed.stories'
+import { BlockImageComparisonData } from './../../../components/BlockImageComparison/BlockImageComparison.stories'
+import PageEduMultimediaDetail from './PageEduMultimediaDetail.vue'
+
+export default {
+  title: 'Templates/EDU/PageEduMultimediaDetail',
+  component: PageEduMultimediaDetail,
+  tags: ['!autodocs'],
+  parameters: {
+    html: {
+      root: '#storyDecorator'
+    },
+    layout: 'fullscreen'
+  },
+  excludeStories: /.*Data$/
+}
+
+const PageEduMultimediaDetailData = {
+  title: 'Media Item',
+  slug: 'media-item',
+  url: '/resources/media/media-item',
+  lastPublishedAt: '2024-08-22T02:33:13.507206+00:00',
+  thumbnailImage: {
+    alt: '',
+    original: 'https://picsum.photos/512/288'
+  },
+  authors: AboutTheAuthorData,
+
+  body: [
+    {
+      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'
+    }
+  ],
+  relatedLinks: [
+    {
+      blockType: 'RelatedLinksBlock',
+      heading: 'Related Links',
+      links: [
+        {
+          document: null,
+          externalLink: 'http://www.google.com',
+          page: null,
+          text: 'Lorem ipsum dolor'
+        },
+        {
+          document: null,
+          externalLink: 'http://www.google.com',
+          page: null,
+          text: 'Sit amet consectatur'
+        }
+      ]
+    }
+  ],
+  relatedContent: EventsBlockLinkCarouselData,
+  exploreMore: [...BlockLinkCardCarouselData, ...EventsBlockLinkCarouselData]
+}
+// stories
+export const BaseStory = {
+  name: 'Image',
+  args: {
+    data: {
+      __typename: 'EDUImageDetailPage',
+      ...PageEduMultimediaDetailData,
+      imageAsHero: BlockImageData.image,
+      heroImageCaption: 'This is the hero image caption'
+    }
+  }
+}
+
+export const Infographic = {
+  args: {
+    data: {
+      __typename: 'EDUInfographicDetailPage',
+      ...PageEduMultimediaDetailData,
+      imageAsHero: BlockImageData.image,
+      heroImageCaption: 'This is the hero image caption for the infographic'
+    }
+  }
+}
+
+export const Video = {
+  args: {
+    data: {
+      __typename: 'EDUVideoDetailPage',
+      ...PageEduMultimediaDetailData,
+      video: [BlockVideoData.block],
+      transcript: `<p>Preparing to Land Perseverance</p>
+      <p>The following tests, conducted from 2017-2020, helped prepare NASA's Perseverance rover for its landing on Mars.</p>
+      <p>[music]</p>
+      <p>Centrifuge Spin Test</p>`
+    }
+  }
+}
+
+export const VideoEmbed = {
+  args: {
+    data: {
+      __typename: 'EDUVideoDetailPage',
+      ...PageEduMultimediaDetailData,
+      video: [BlockVideoEmbedData.data],
+      transcript: `<p>Preparing to Land Perseverance</p>
+      <p>The following tests, conducted from 2017-2020, helped prepare NASA's Perseverance rover for its landing on Mars.</p>
+      <p>[music]</p>
+      <p>Centrifuge Spin Test</p>
+      <p>Santa Clarita, CA June 2019</p>
+      <p>[music]</p>
+      <p>Parachute Firing Test</p>
+      <p>Moses Lake, WA May 2019</p>
+      <p>[music]</p>
+      <p>[mortar firing]</p>
+      <p>[mortar firing]</p>
+      <p>[clapping]</p>`
+    }
+  }
+}
+
+export const Document = {
+  args: {
+    data: {
+      __typename: 'EDUDocumentDetailPage',
+      ...PageEduMultimediaDetailData,
+      heroImage: {
+        ...BlockImageData.image
+      },
+      heroImageCaption: 'This is the hero image caption for the document',
+      document: {
+        url: 'https://jpl.nasa.gov'
+      },
+      credit: '<p>Document credit attribution</p>'
+    }
+  }
+}
+
+export const Gallery = {
+  args: {
+    data: {
+      __typename: 'EDUGalleryDetailPage',
+      ...PageEduMultimediaDetailData,
+      galleryItems: [
+        {
+          heading: 'Gallery Item Heading',
+          description:
+            '<p data-block-key="53wg6">Description that is <strong>rich text</strong>.</p>',
+          media: [BlockImageData.image]
+        },
+        {
+          heading: 'Gallery Item Heading',
+          description:
+            '<p data-block-key="53wg6">Description that is <strong>rich text</strong>.</p>',
+          media: [BlockImageComparisonData]
+        },
+        {
+          heading: 'Gallery Item Heading',
+          description:
+            '<p data-block-key="53wg6">Description that is <strong>rich text</strong>.</p>',
+          media: [BlockVideoData.block]
+        },
+        {
+          heading: 'Gallery Item Heading',
+          description:
+            '<p data-block-key="53wg6">Description that is <strong>rich text</strong>.</p>',
+          media: [BlockVideoEmbedData.data]
+        }
+      ],
+      showJumpMenu: true
+    }
+  }
+}

package/src/templates/edu/PageEduMultimediaDetail/PageEduMultimediaDetail.vue

@@ -0,0 +1,440 @@
+<script setup lang="ts">
+import { computed, reactive } from 'vue'
+import { PageEduResourcesObject, ImageObject } from '../../../interfaces'
+import LayoutHelper from './../../../components/LayoutHelper/LayoutHelper.vue'
+import BaseHeading from './../../../components/BaseHeading/BaseHeading.vue'
+import DetailHeadline from './../../../components/DetailHeadline/DetailHeadline.vue'
+import ShareButtonsEdu from './../../../components/ShareButtonsEdu/ShareButtonsEdu.vue'
+import BlockVideo from './../../../components/BlockVideo/BlockVideo.vue'
+import BlockImageStandard from './../../../components/BlockImage/BlockImageStandard.vue'
+import BlockVideoEmbed from './../../../components/BlockVideoEmbed/BlockVideoEmbed.vue'
+import BaseButton from './../../../components/BaseButton/BaseButton.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'
+import BlockText from './../../../components/BlockText/BlockText.vue'
+import MixinFancybox from './../../../components/MixinFancybox/MixinFancybox.vue'
+import AboutTheAuthor from './../../../components/AboutTheAuthor/AboutTheAuthor.vue'
+
+interface PageEduMultimediaObject extends PageEduResourcesObject {
+  heroImage?: ImageObject
+  imageAsHero?: ImageObject
+  heroImageCaption?: string
+  video?: any
+  document?: {
+    url: string
+  }
+  galleryItems?: {
+    heading?: string
+    description?: string
+    media: any[]
+  }[]
+  credit?: string
+  transcript?: string
+}
+
+interface PageEduMultimediaDetailProps {
+  data: PageEduMultimediaObject
+}
+
+// define props
+const props = withDefaults(defineProps<PageEduMultimediaDetailProps>(), {
+  data: undefined
+})
+
+const typeMapping: {
+  [key: string]: {
+    type: string
+    label: string
+    schema: string
+    relatedContentHeading: string
+  }
+} = {
+  EDUImageDetailPage: {
+    type: 'image',
+    label: 'image',
+    schema: 'http://schema.org/ImageObject',
+    relatedContentHeading: 'Related Images & Galleries'
+  },
+  EDUInfographicDetailPage: {
+    type: 'image',
+    label: 'infographic',
+    schema: 'http://schema.org/ImageObject',
+    relatedContentHeading: 'Related Images & Galleries'
+  },
+  EDUVideoDetailPage: {
+    type: 'video',
+    label: 'video',
+    schema: 'http://schema.org/VideoObject',
+    relatedContentHeading: 'Related Videos'
+  },
+  EDUGalleryDetailPage: {
+    type: 'gallery',
+    label: 'gallery',
+    schema: 'http://schema.org/ImageGallery',
+    relatedContentHeading: ''
+  },
+  EDUDocumentDetailPage: {
+    type: 'document',
+    label: 'document',
+    schema: 'http://schema.org/DigitalDocument',
+    relatedContentHeading: 'Related Documents'
+  }
+}
+const mediaType = computed(() => {
+  const type = data.__typename
+  if (type) {
+    return typeMapping[type]?.type
+  }
+  return undefined
+})
+
+const mediaLabel = computed(() => {
+  const type = data.__typename
+  if (type) {
+    return typeMapping[type]?.label
+  }
+  return undefined
+})
+
+const schemaType = computed(() => {
+  const type = data.__typename
+  if (type) {
+    return typeMapping[type]?.schema
+  }
+  return undefined
+})
+
+const heroImage = computed(() => {
+  switch (mediaType.value) {
+    case 'image':
+      return data.imageAsHero
+    case 'document':
+      return data.heroImage
+    default:
+      return undefined
+  }
+})
+
+const videoBlock = computed(() => {
+  if (mediaType.value === 'video' && data.video?.length) {
+    return data.video[0]
+  }
+  return undefined
+})
+
+const downloadUrl = computed(() => {
+  switch (mediaType.value) {
+    case 'image':
+      return heroImage.value?.original
+    case 'video':
+      return videoBlock.value?.video?.file
+    case 'document':
+      return data.document?.url
+    default:
+      return undefined
+  }
+})
+
+const creditText = computed(() => {
+  switch (mediaType.value) {
+    case 'image':
+      return heroImage.value?.credit
+    case 'video':
+      return videoBlock.value?.credit
+    case 'document':
+      return data.credit
+    default:
+      return undefined
+  }
+})
+
+const relatedContentHeading = computed(() => {
+  const type = data.__typename
+  let text = data.relatedContentHeading
+  if (type && !text) {
+    text = typeMapping[type]?.relatedContentHeading
+  }
+  return text
+})
+
+const { data } = reactive(props)
+</script>
+<template>
+  <div
+    v-if="data && mediaType"
+    class="PageEduMultimediaDetail ThemeVariantLight pt-5 lg:pt-12"
+    itemscope
+    :itemtype="schemaType"
+  >
+    <!-- Detail Headline -->
+    <LayoutHelper
+      indent="col-2"
+      class="mb-10"
+    >
+      <DetailHeadline
+        :title="data.title"
+        :label="mediaLabel"
+        :publication-date="data.publicationDate"
+        schema
+        pill
+      />
+      <ShareButtonsEdu
+        v-if="data?.url"
+        class="mt-4"
+        :url="data.url"
+        :title="data.title"
+        :image="data.thumbnailImage?.original"
+      />
+    </LayoutHelper>
+
+    <!-- Media-specific content -->
+    <template v-if="mediaType === 'image'">
+      <!-- schema.org -->
+      <meta
+        v-if="heroImage?.original"
+        itemprop="contentUrl"
+        :content="heroImage.original"
+      />
+      <meta
+        v-if="heroImage?.src"
+        itemprop="thumbnailUrl"
+        :content="heroImage.src?.url"
+      />
+      <meta
+        v-if="heroImage?.credit"
+        itemprop="creditText"
+        :content="heroImage.credit"
+      />
+
+      <div class="max-w-screen-3xl lg:mb-24 mx-auto mt-10 mb-8">
+        <MixinFancybox
+          v-if="heroImage"
+          :src="heroImage.original || heroImage.src?.url"
+          :caption="data.heroImageCaption"
+          :credit="heroImage.credit"
+          :detail-url="heroImage.detailUrl"
+        >
+          <BaseImagePlaceholder
+            class="relative bg-black border border-black"
+            aspect-ratio="21:9"
+          >
+            <BaseImage
+              v-if="heroImage.src"
+              :src="heroImage.src.url"
+              :srcset="heroImage.srcSet"
+              :alt="heroImage.alt"
+              :width="heroImage.src.width"
+              :height="heroImage.src.height"
+              object-fit-class="scaleDown"
+              loading="eager"
+            />
+          </BaseImagePlaceholder>
+        </MixinFancybox>
+      </div>
+    </template>
+    <template v-else-if="mediaType === 'video' && data.video?.length">
+      <meta
+        v-if="videoBlock.video?.file"
+        itemprop="contentUrl"
+        :content="videoBlock.video.file"
+      />
+      <meta
+        v-if="videoBlock.video?.duration"
+        itemprop="duration"
+        :content="videoBlock.video.duration"
+      />
+      <meta
+        v-if="data.thumbnailImage && data.thumbnailImage.original"
+        itemprop="thumbnailUrl"
+        :content="data.thumbnailImage.original"
+      />
+      <meta
+        v-if="videoBlock.caption"
+        itemprop="description"
+        :content="videoBlock.caption"
+      />
+      <meta
+        v-if="videoBlock.credit"
+        itemprop="creditText"
+        :content="videoBlock.credit"
+      />
+      <template v-if="videoBlock.blockType === 'VideoBlock' && videoBlock.video">
+        <div class="max-w-screen-2xl lg:mb-24 mx-auto mt-10 mb-8">
+          <BlockVideo
+            :data="videoBlock"
+            schema
+          />
+        </div>
+      </template>
+      <template v-else-if="videoBlock.blockType === 'VideoEmbedBlock'">
+        <div
+          v-if="videoBlock.embed"
+          class="max-w-screen-2xl lg:mb-24 mx-auto mt-10 mb-8"
+        >
+          <BlockVideoEmbed :data="videoBlock" />
+        </div>
+      </template>
+    </template>
+    <template v-if="mediaType === 'document'">
+      <!-- schema.org -->
+      <meta
+        v-if="data.document?.url"
+        itemprop="contentUrl"
+        :content="data.document.url"
+      />
+      <meta
+        v-if="data.thumbnailImage?.original"
+        itemprop="thumbnailUrl"
+        :content="data.thumbnailImage.original"
+      />
+      <meta
+        v-if="data?.credit"
+        itemprop="creditText"
+        :content="data.credit"
+      />
+
+      <div class="max-w-screen-3xl lg:mb-24 mx-auto mt-10 mb-8">
+        <LayoutHelper
+          v-if="heroImage"
+          indent="col-2"
+          class="lg:mb-22 mt-10 mb-10"
+        >
+          <BlockImageStandard
+            :data="heroImage"
+            :caption="data.heroImageCaption"
+          />
+        </LayoutHelper>
+      </div>
+    </template>
+
+    <LayoutHelper indent="col-2">
+      <div class="lg:grid grid-cols-12">
+        <div
+          v-if="data.body?.length || data.transcript"
+          class="col-span-8"
+        >
+          <BlockStreamfield
+            v-if="data.body?.length"
+            variant="fluid"
+            :data="data.body"
+          />
+          <hr
+            v-if="data.body?.length && data.transcript"
+            class="border-gray-light-mid lg:mb-8 mb-5"
+          />
+          <div
+            v-if="data.transcript"
+            class="lg:mb-22 mb-10"
+          >
+            <BaseHeading
+              level="h2"
+              class="mb-5"
+              >Transcript</BaseHeading
+            >
+            <BlockText
+              :text="data.transcript"
+              variant="medium"
+              class="audio-transcript"
+              itemprop="transcript"
+            />
+          </div>
+        </div>
+        <aside class="col-start-10 col-end-13">
+          <div class="lg:pt-0 pt-8 mb-12">
+            <div
+              v-if="downloadUrl"
+              class="lg:w-auto w-full"
+            >
+              <BaseButton
+                :href="downloadUrl"
+                class="w-full mb-5"
+                variant="primary"
+                compact
+              >
+                Download {{ mediaLabel }}
+              </BaseButton>
+            </div>
+          </div>
+
+          <div
+            v-if="creditText"
+            class="lg:mb-16 mb-8"
+          >
+            <span class="font-secondary w-full text-base tracking-wider uppercase"> Credit </span>
+            <BlockText :text="creditText" />
+          </div>
+        </aside>
+      </div>
+    </LayoutHelper>
+
+    <!-- UNIVERSAL -->
+    <!-- related links -->
+    <LayoutHelper
+      v-if="data.relatedLinks && data.relatedLinks.length"
+      indent="col-2"
+      class="lg:mb-18 mb-10"
+    >
+      <BlockRelatedLinks :data="data.relatedLinks[0]" />
+    </LayoutHelper>
+
+    <!-- related content -->
+    <BlockLinkCarousel
+      item-type="cards"
+      class="lg:my-24 my-12 print:px-4"
+      :heading="relatedContentHeading"
+      :items="data.relatedContent"
+    />
+
+    <LayoutHelper
+      v-if="data.authors?.length"
+      indent="col-3"
+    >
+      <AboutTheAuthor :authors="data.authors" />
+    </LayoutHelper>
+
+    <LayoutHelper
+      v-if="data.lastPublishedAt"
+      indent="col-3"
+      class="lg:my-18 my-10"
+    >
+      <p class="border-t border-gray-light-mid pt-8">
+        <strong class="capitalize">{{ mediaLabel }} Last Updated:</strong>
+        {{
+          // @ts-ignore
+          $filters.displayDate(data.lastPublishedAt)
+        }}
+      </p>
+    </LayoutHelper>
+    <!-- Explore More -->
+    <!-- <div
+      v-if="data.relatedContent?.length"
+      class="bg-stars bg-[#15003B] lg:py-24 lg:mt-24 py-12 mt-12 print:px-4"
+    >
+      <BlockLinkCarousel
+        class="ThemeVariantDark"
+        item-type="cards"
+        heading="Explore More"
+        :items="data.relatedContent"
+      />
+    </div> -->
+  </div>
+</template>
+<style lang="scss">
+.PageEduMultimediaDetail {
+  .bg-stars .MixinCarousel__Heading {
+    @apply text-white;
+  }
+  .BlockVideo,
+  .BlockVideoEmbed {
+    .BaseImageCaption {
+      @apply px-4 sm:px-5;
+      @screen 3xl {
+        @apply px-0;
+      }
+    }
+  }
+}
+</style>

package/src/utils/getHeadingId.ts

@@ -1,5 +1,4 @@
 import { camelCase } from 'lodash'
-import { type HeadingLevel } from '../components/BaseHeading/BaseHeading.vue'
-export const getHeadingId = (heading: HeadingLevel, blockId?: string) => {
+export const getHeadingId = (heading: string, blockId?: string) => {
   return 'anchor_' + camelCase(heading) + (blockId ? '_' + camelCase(blockId) : '')
 }