From 9b39776c9240e6faebdcb9e4987d01a745908f7f Mon Sep 17 00:00:00 2001
From: Stephanie Smith <stephiescastle@users.noreply.github.com>
Date: Thu, 29 Aug 2024 13:28:22 -0700
Subject: [PATCH] feature: EDU Multimedia and Gallery templates (#583)

* adding PageEduMultimediaDetail template

* adjusting alighment of step number on edu lesson page

* adding PageEduGalleryDetail and tweaking PageEduMultimediaDetail

* tweaking jump menu on PageEduGalleryDetail

* updating constants to reflect all edu resource types

* fixing vue build error
---
 .../BlockStreamfield/BlockStreamfield.vue     |   3 +
 .../NavSecondary/NavSecondaryDropdown.vue     |   4 +-
 packages/vue/src/constants.ts                 |  40 +-
 .../PageEduGalleryDetail.stories.js           | 106 +++++
 .../PageEduGalleryDetail.vue                  | 238 ++++++++++
 .../PageEduLesson/PageEduLesson.stories.js    |  14 +
 .../PageEduLesson/PageEduLessonSection.vue    |  13 +-
 .../PageEduMultimediaDetail.stories.js        | 176 +++++++
 .../PageEduMultimediaDetail.vue               | 434 ++++++++++++++++++
 packages/vue/src/utils/getHeadingId.ts        |   3 +-
 10 files changed, 1021 insertions(+), 10 deletions(-)
 create mode 100644 packages/vue/src/templates/edu/PageEduGalleryDetail/PageEduGalleryDetail.stories.js
 create mode 100644 packages/vue/src/templates/edu/PageEduGalleryDetail/PageEduGalleryDetail.vue
 create mode 100644 packages/vue/src/templates/edu/PageEduMultimediaDetail/PageEduMultimediaDetail.stories.js
 create mode 100644 packages/vue/src/templates/edu/PageEduMultimediaDetail/PageEduMultimediaDetail.vue

diff --git a/packages/vue/src/components/BlockStreamfield/BlockStreamfield.vue b/packages/vue/src/components/BlockStreamfield/BlockStreamfield.vue
index a26cc6cc..74da17e7 100644
--- a/packages/vue/src/components/BlockStreamfield/BlockStreamfield.vue
+++ b/packages/vue/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 {
diff --git a/packages/vue/src/components/NavSecondary/NavSecondaryDropdown.vue b/packages/vue/src/components/NavSecondary/NavSecondaryDropdown.vue
index 38eb7236..72734221 100644
--- a/packages/vue/src/components/NavSecondary/NavSecondaryDropdown.vue
+++ b/packages/vue/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
           }
     },
diff --git a/packages/vue/src/constants.ts b/packages/vue/src/constants.ts
index 37a637f6..c8dc3905 100644
--- a/packages/vue/src/constants.ts
+++ b/packages/vue/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'
   }
 }
 
diff --git a/packages/vue/src/templates/edu/PageEduGalleryDetail/PageEduGalleryDetail.stories.js b/packages/vue/src/templates/edu/PageEduGalleryDetail/PageEduGalleryDetail.stories.js
new file mode 100644
index 00000000..db1a764a
--- /dev/null
+++ b/packages/vue/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]
+        }
+      ]
+    }
+  }
+}
diff --git a/packages/vue/src/templates/edu/PageEduGalleryDetail/PageEduGalleryDetail.vue b/packages/vue/src/templates/edu/PageEduGalleryDetail/PageEduGalleryDetail.vue
new file mode 100644
index 00000000..d07ddf32
--- /dev/null
+++ b/packages/vue/src/templates/edu/PageEduGalleryDetail/PageEduGalleryDetail.vue
@@ -0,0 +1,238 @@
+<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" />
+            </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>
diff --git a/packages/vue/src/templates/edu/PageEduLesson/PageEduLesson.stories.js b/packages/vue/src/templates/edu/PageEduLesson/PageEduLesson.stories.js
index 28b3cf70..e5e47988 100644
--- a/packages/vue/src/templates/edu/PageEduLesson/PageEduLesson.stories.js
+++ b/packages/vue/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',
diff --git a/packages/vue/src/templates/edu/PageEduLesson/PageEduLessonSection.vue b/packages/vue/src/templates/edu/PageEduLesson/PageEduLessonSection.vue
index cf704009..a0035766 100644
--- a/packages/vue/src/templates/edu/PageEduLesson/PageEduLessonSection.vue
+++ b/packages/vue/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];
+        }
+      }
     }
   }
 }
diff --git a/packages/vue/src/templates/edu/PageEduMultimediaDetail/PageEduMultimediaDetail.stories.js b/packages/vue/src/templates/edu/PageEduMultimediaDetail/PageEduMultimediaDetail.stories.js
new file mode 100644
index 00000000..1040ff9f
--- /dev/null
+++ b/packages/vue/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
+    }
+  }
+}
diff --git a/packages/vue/src/templates/edu/PageEduMultimediaDetail/PageEduMultimediaDetail.vue b/packages/vue/src/templates/edu/PageEduMultimediaDetail/PageEduMultimediaDetail.vue
new file mode 100644
index 00000000..c793586c
--- /dev/null
+++ b/packages/vue/src/templates/edu/PageEduMultimediaDetail/PageEduMultimediaDetail.vue
@@ -0,0 +1,434 @@
+<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 BaseVideo from './../../../components/BaseVideo/BaseVideo.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?.caption
+    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">
+          <BaseVideo
+            :data="videoBlock.video"
+            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">
+        <!-- inline hero content -->
+        <LayoutHelper
+          v-if="heroImage"
+          indent="col-2"
+          class="lg:mb-22 mt-10 mb-10"
+        >
+          <BlockImageStandard
+            :data="heroImage"
+            :caption="data.heroImageCaption"
+          />
+        </LayoutHelper>
+      </div>
+    </template>
+
+    <!-- !Gallery body -->
+
+    <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;
+  }
+}
+</style>
diff --git a/packages/vue/src/utils/getHeadingId.ts b/packages/vue/src/utils/getHeadingId.ts
index f34f940b..7c3f70ab 100644
--- a/packages/vue/src/utils/getHeadingId.ts
+++ b/packages/vue/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) : '')
 }