@explorer-1/vue 0.2.54 → 0.2.56

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@explorer-1/vue",
-  "version": "0.2.54",
+  "version": "0.2.56",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -30,7 +30,7 @@
     "vue-bind-once": "^0.2.1",
     "vue3-compare-image": "^1.2.5",
     "vue3-observe-visibility": "^1.0.1",
-    "@explorer-1/common": "1.1.13"
+    "@explorer-1/common": "1.1.14"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.4",

package/src/components/BaseImage/BaseImage.vue

@@ -53,11 +53,6 @@ export default defineComponent({
       default: 'lazy'
     }
   },
-  data() {
-    return {
-      lazyNative: true
-    }
-  },
   computed: {
     computedClass(): string {
       let classes = ''
@@ -67,31 +62,10 @@ export default defineComponent({
       if (this.objectFitClass) {
         classes = classes + ' ' + objectFitClasses[this.objectFitClass]
       }
-      if (!this.lazyNative) {
-        classes = classes + ' lazyload'
-      }
       return classes
     }
   },
-  mounted() {
-    this.featureDetectImageLazyLoad()
-  },
   methods: {
-    featureDetectImageLazyLoad() {
-      if ('loading' in HTMLImageElement.prototype) {
-        const image = this.$refs.BaseImage ? (this.$refs.BaseImage as HTMLImageElement) : null
-        this.lazyNative = true
-        // reassign dataset attributes
-        if (image && image.dataset.src) {
-          image.src = image.dataset.src
-        }
-        if (image && image.dataset.srcset) {
-          image.srcset = image.dataset.srcset
-        }
-      } else {
-        this.lazyNative = false
-      }
-    },
     imageFailed() {
       console.log('Image failed to load.')
     }
@@ -105,8 +79,8 @@ export default defineComponent({
       ref="BaseImage"
       class="BaseImage print:border print:border-gray-mid"
       :class="computedClass"
-      :data-src="src"
-      :data-srcset="srcset"
+      :src="src"
+      :srcset="srcset"
       :alt="alt"
       :width="width"
       :height="height"

package/src/components/BlockHeading/BlockHeading.vue

@@ -19,7 +19,7 @@ import BaseHeading from './../BaseHeading/BaseHeading.vue'
 
 export interface BlockHeadingObject {
   blockType?: string
-  heading: HeadingLevel
+  heading: string
   level?: HeadingLevel
   size?: string
   blockId?: string

package/src/components/BlockIframeEmbed/BlockIframeEmbed.vue

@@ -1,14 +1,13 @@
 <template>
-  <div v-if="data">
+  <div v-if="data?.url">
     <template v-if="data.height">
       <iframe
         v-if="data.url"
         ref="BlockIframeEmbed"
         loading="lazy"
         class="w-full border-none print:!border print:border-gray-dark"
-        :class="{ lazyload: !lazyNative }"
         :title="data.title"
-        :data-src="data.url"
+        :src="data.url"
         width="90%"
         :height="data.height"
         allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
@@ -28,9 +27,8 @@
             ref="BlockIframeEmbed"
             loading="lazy"
             class="w-full border-none"
-            :class="{ lazyload: !lazyNative }"
             :title="data.title"
-            :data-src="data.url"
+            :src="data.url"
             data-chromatic="ignore"
             width="90%"
             allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
@@ -60,29 +58,7 @@ export default defineComponent({
   props: {
     data: {
       type: Object,
-      required: false
-    }
-  },
-  data() {
-    return {
-      lazyNative: true
-    }
-  },
-  mounted() {
-    this.featureDetectIframeLazyLoad()
-  },
-  methods: {
-    featureDetectIframeLazyLoad() {
-      if ('loading' in HTMLIFrameElement.prototype) {
-        const iframe = this.$refs.BlockIframeEmbed as HTMLIFrameElement
-        this.lazyNative = true
-        // move data-src attribute to src
-        if (iframe.dataset.src) {
-          iframe.src = iframe.dataset.src
-        }
-      } else {
-        this.lazyNative = false
-      }
+      default: undefined
     }
   },
   computed: {

package/src/components/BlockText/BlockText.stories.js

@@ -3,13 +3,19 @@ import BlockText, { variants } from './BlockText.vue'
 export default {
   title: 'Components/Blocks/BlockText',
   component: BlockText,
+  tags: ['!autodocs'],
   argTypes: {
     variant: {
       control: { type: 'select' },
       options: Object.keys(variants)
     },
     text: { control: { type: 'text' } }
-  }
+  },
+  decorators: [
+    () => ({
+      template: '<div class="lg:w-2/3 mx-auto"><story /></div>'
+    })
+  ]
 }
 
 export const BaseStory = {
@@ -19,3 +25,26 @@ export const BaseStory = {
     text: `<p>AVIRIS is the first full spectral range imaging spectrometer and dedicated to <a href="https://en.wikipedia.org/wiki/Remote_sensing" target="_blank">Earth Remote Measurement</a>. Test <a href="#">preventlongurlsfrombreakingoutofcontainerpreventlongurlsfrombreakingoutofcontainerpreventlongurlsfrombreakingoutofcontainerpreventlongurlsfrombreakingoutofcontainer</a>. It is a unique optical sensor that continues to deliver calibrated images of the upwelling spectral radiance in 224 contiguous spectral channels (bands) with wavelengths from 380 to 2510 nanometers. AVIRIS has been flown on four aircraft platforms: NASA's high altitude ER-2 jet, Twin Otter International's turboprop, Scaled Composites' Proteus, and NASA's WB-57. The ER-2 flies at approximately 20 km above sea level, at about 730 km/hr. The Twin Otter aircraft flies at 4km above ground level at 130km/hr. AVIRIS has flown North America including Alaska, Hawaii, Europe, Brazil, and Argentina.</p><p>The objective of the AVIRIS project is to support advanced NASA science and applications research.  AVIRIS uses imaging spectroscopy to detect, identify, measure, and monitor constituents and processes of the Earth's surface and atmosphere based on measured constituent absorption and scattering signatures. Science and applications research with AVIRIS data spans a wide range of discipline across the Earth system. </p><hr /><ul><li>Lorem ipsum dolor sit amet consectatur adipscing</li><li>Lorem ipsum dolor sit amet <strong>consectatur adipscing</strong></li><li>Lorem ipsum dolor sit amet consectatur adipscing</li></ul><p>Lorem ipsum dolor sit amet paragraph text</p><ol><li>Lorem ipsum dolor sit amet consectatur adipscing</li><li>Lorem ipsum dolor sit amet consectatur adipscing</li><li>Lorem ipsum dolor <strong>sit amet</strong> consectatur adipscing</li><li>Lorem <strong>ipsum dolor</strong> sit amet consectatur adipscing</li></ol><hr /><p>Lorem ipsum dolor sit amet consectatur adipscing</p>`
   }
 }
+
+export const RichTextMedia = {
+  args: {
+    variant: 'large',
+    text: `<p data-block-key="5f55p">Description for it.</p><div class="richtext-image fullwidth"><img alt="Perseverance Looks Back at &amp;#x27;Bright Angel&amp;#x27;" height="480" loading="lazy" src="https://picsum.photos/640/480" width="640">
+                <div class="richtext-caption">
+                    <div class="caption">One of the navigation cameras aboard NASAs Perseverance Mars rover captured this view looking back at the Bright Angel area on July 30, 2024.</div>
+                    <span class="credit">Credit: NASA/JPL-Caltech</span>
+                    <a class="caption-link" href="#">Full Image Details</a>
+                </div>
+            </div><p data-block-key="89jcq">More text and another image that&#x27;s full width (above)</p><p data-block-key="6jsp"></p><div class="richtext-image right"><img alt="Carbon Mapper Coalition&amp;#x27;s Tanager Satellite" height="336" loading="lazy" src="https://picsum.photos/640/336" width="640">
+                <div class="richtext-caption">
+                    <div class="caption">This artists concept depicts one of the Carbon Mapper Coalitions Tanager satellites, the first of which launched on Aug. 16, 2024. Tanager-1 will use imaging spectrometer technology developed at JPL to measure greenhouse gas point-source emissions.</div>
+                    <span class="credit">Credit: Planet Labs PBC</span>
+                    <a class="caption-link" href="#">Full Image Details</a>
+                </div>
+            </div><p data-block-key="4409g">More text and something that&#x27;s right-aligned.</p><p data-block-key="bid36"></p><div class="richtext-image left"><img alt="Lecture Brings Galileo&amp;#x27;s Travels into Final Focus" height="350" loading="lazy" src="https://picsum.photos/640/350" width="640">
+                <div class="richtext-caption">
+                    <div class="caption">Lecture Brings Galileo's Travels into Final Focus</div>
+                </div>
+            </div><p data-block-key="1f4rd">More text and something that&#x27;s left-aligned</p>`
+  }
+}

package/src/components/BlockVideoEmbed/BlockVideoEmbed.vue

@@ -63,8 +63,6 @@ export default defineComponent({
       if (!this.data?.embed) {
         return
       }
-
-      // TODO: not using feature detect as that would require rewriting the html output from wagtail to set data-src instead of src
       // get the iframe in this component
       const iframe = this.$el.querySelector('iframe')
       if (iframe) {

package/src/components/HeroMedium/HeroMedium.vue

@@ -20,7 +20,7 @@
           media="(min-width: 420px)"
           :srcset="theImage.screenMd?.url"
         />
-        <source :data-srcset="theImage.screenSm?.url" />
+        <source :srcset="theImage.screenSm?.url" />
         <img
           class="object-cover w-full h-full"
           :src="theImage.src.url"

package/src/components/MetaPanel/MetaPanel.vue

@@ -128,7 +128,7 @@ const standardsIste = computed(() => {
       >
         <div class="col-start-container lg:col-start-indent-col-2 col-end-container">
           <div class="MetaPanel-heading lg:grid grid-cols-12 col-end-container container">
-            <div class="col-start-1 col-end-10 xl:col-end-9 pl-4 lg:pl-10 pr-6 py-6 lg:py-10">
+            <div class="col-start-1 col-end-9 xl:col-end-9 pl-4 lg:pl-10 pr-6 py-6 lg:py-10">
               <MetaPanelItems
                 :theme="theme"
                 :primary-subject="primarySubject"
@@ -138,8 +138,8 @@ const standardsIste = computed(() => {
               />
             </div>
             <div
-              v-if="button"
-              class="ThemeVariantLight col-start-10 col-end-13 pl-4 lg:pl-0 pt-4 pb-6 lg:pr-4 xl:pr-10 2xl:pr-0 lg:py-10 lg:text-right"
+              v-if="button && (standards?.length || $slots.metaInfo)"
+              class="ThemeVariantLight col-start-9 col-end-13 pl-4 lg:pl-0 pt-4 pb-6 lg:pr-4 xl:pr-10 2xl:pr-0 lg:py-10 lg:text-right"
             >
               <BaseButton
                 variant="secondary"
@@ -164,7 +164,7 @@ const standardsIste = computed(() => {
           </div>
         </div>
         <div
-          v-if="standards || $slots.metaInfo"
+          v-if="standards?.length || $slots.metaInfo"
           v-show="metaPanelOpen"
           class="MetaPanel-panel col-start-container lg:col-start-indent-col-2 col-end-bleed lg:grid grid-cols-subgrid bg-gray-light pb-3 lg:pb-6"
         >
@@ -176,11 +176,11 @@ const standardsIste = computed(() => {
                 <slot name="metaInfo" />
               </div>
               <div
-                v-if="standards"
+                v-if="standards?.length"
                 class="pt-6 lg:pt-7"
               >
                 <div
-                  class="text-subtitle mb-5"
+                  class="ThemeVariantGray text-subtitle mb-5"
                   :class="headingClass"
                 >
                   Standards

package/src/components/NavJumpMenu/NavJumpMenu.vue

@@ -19,6 +19,7 @@
           <NavJumpMenuContent
             :key="index"
             :item="item"
+            v-bind="$attrs"
           />
         </NavSecondaryDropdown>
       </template>
@@ -41,17 +42,20 @@ import NavSecondary from './../NavSecondary/NavSecondary.vue'
 import NavSecondaryDropdown from './../NavSecondary/NavSecondaryDropdown.vue'
 import NavSecondaryLink from './../NavSecondary/NavSecondaryLink.vue'
 import NavJumpMenuContent from './../NavJumpMenu/NavJumpMenuContent.vue'
+import type { BlockHeadingObject } from './../BlockHeading/BlockHeading.vue'
 import type { BlockData, BreadcrumbPathObject } from './../../interfaces'
 import { getHeadingId } from '../../utils/getHeadingId'
 
 interface NavJumpMenuProps {
   title?: string
   jumpLinks?: BreadcrumbPathObject[]
-  blocks?: BlockData[]
+  blocks?: BlockData[] | BlockHeadingObject[]
   headingLevel?: string
   invert?: boolean
   enabled?: boolean
   dropdownText?: string
+  // stepsNumbering?: boolean
+  // stepClasses?: string
 }
 
 const props = withDefaults(defineProps<NavJumpMenuProps>(), {
@@ -63,6 +67,8 @@ const props = withDefaults(defineProps<NavJumpMenuProps>(), {
   invert: true,
   hidden: false,
   dropdownText: 'Jump to…'
+  // stepsNumbering: false,
+  // stepClasses: 'text-primary'
 })
 
 const NavJumpMenuRef = ref()

package/src/components/NavJumpMenu/NavJumpMenuContent.vue

@@ -11,6 +11,12 @@
         :link-class="linkClass(child)"
       >
         <span>
+          <span
+            v-if="$attrs['steps-numbering']"
+            :class="$attrs['steps-classes']"
+            aria-hidden
+            >{{ `Step ${index + 1}:` }}</span
+          >
           {{ child.title }}
         </span>
       </BaseLink>
@@ -33,7 +39,6 @@ export default defineComponent({
     BaseLink
   },
   props: {
-    // the tertiary nav item object that includes path, title, and children
     item: {
       type: Object,
       required: true

package/src/components/SearchInput/SearchInput.vue

@@ -8,6 +8,7 @@ interface SearchInputProps {
   placeholder?: string
   autoFocus?: boolean
   defaultColors?: boolean
+  withButton?: boolean
 }
 
 // define props
@@ -16,10 +17,11 @@ const props = withDefaults(defineProps<SearchInputProps>(), {
   underlinedInputValue: undefined,
   placeholder: '',
   autoFocus: false,
-  defaultColors: true
+  defaultColors: true,
+  withButton: false
 })
 
-const emit = defineEmits(['input', 'esc'])
+const emit = defineEmits(['input', 'esc', 'submit'])
 
 const model = defineModel()
 const isFocused = ref(false)
@@ -67,20 +69,29 @@ onMounted(() => {
     <input
       ref="searchQueryRef"
       v-model="model"
-      class="pl-14 focus:ring-2 relative z-10 w-full pr-5 text-lg bg-transparent border-0"
+      class="pl-14 h-full focus:ring-2 relative z-10 w-full px-5 text-sm md:text-base lg:text-lg bg-transparent border-0"
       :class="{
         'text-gray-dark': defaultColors,
         'py-1': underlinedInput,
-        'py-4': !underlinedInput
+        'py-3.5 lg:py-5': !underlinedInput
       }"
       type="search"
       aria-label="Query"
       :placeholder="placeholder"
       @keydown.esc="emit('esc')"
+      @keydown.enter="emit('submit')"
       @input="emit('input', $event.target)"
       @focus="isFocused = true"
       @blur="isFocused = false"
     />
+    <button
+      v-if="withButton"
+      class="z-10 cursor-pointer bg-action p-4 lg:p-5 border border-white"
+      aria-label="Search resources"
+      @click="emit('submit')"
+    >
+      <IconSearch class="relative z-10 text-xl sm:text-2xl lg:text-3xl text-white" />
+    </button>
   </div>
 </template>
 <style lang="scss" scoped>

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

@@ -0,0 +1,99 @@
+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 PageEduHome from './PageEduHome.vue'
+
+export default {
+  title: 'Templates/EDU/PageEduHome',
+  component: PageEduHome,
+  tags: ['!autodocs'],
+  parameters: {
+    html: {
+      root: '#storyDecorator'
+    },
+    layout: 'fullscreen'
+  },
+  excludeStories: /.*Data$/
+}
+
+// stories
+export const BaseStory = {
+  name: 'PageEduHome',
+  args: {
+    data: {
+      __typename: 'EDUHomePage',
+      title: 'EDU Homepage',
+      slug: 'edu-home',
+      url: '/',
+      lastPublishedAt: '2024-08-22T02:33:13.507206+00:00',
+      thumbnailImage: {
+        alt: '',
+        original: 'https://picsum.photos/512/288'
+      },
+      heroImage: {
+        // beach
+        src: {
+          url: 'https://picsum.photos/id/973/1800/1200',
+          width: 1800,
+          height: 1200
+        },
+        // lake
+        srcSet:
+          'https://picsum.photos/id/865/768/548 768w, https://picsum.photos/id/865/1024/684 1024w, https://picsum.photos/id/865/1440/770 1440w,  https://picsum.photos/id/865/1800/963 1800w',
+        // jungle
+        screenMd: {
+          url: 'https://picsum.photos/id/921/800/640'
+        },
+        // desert
+        screenSm: {
+          url: 'https://picsum.photos/id/247/640/900'
+        },
+        alt: 'Robotics detail page hero image'
+      },
+      heroText: 'Discover a universe of activities & resources',
+      hotTopics: [
+        {
+          page: {
+            title: 'Psyche Asteroid',
+            url: '/topic/'
+          }
+        },
+        {
+          page: {
+            title: 'Mars Rovers',
+            url: '/topic/'
+          }
+        },
+        {
+          page: {
+            title: 'Webb Space Telescope',
+            url: '/topic/'
+          }
+        },
+        {
+          page: {
+            title: 'NASA Pi Day',
+            url: '/topic/'
+          }
+        }
+      ],
+      body: [
+        {
+          blockType: 'HeadingBlock',
+          heading: 'EDU Home',
+          level: 'h2',
+          size: 'h2'
+        },
+        {
+          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'
+        }
+      ]
+    }
+  }
+}

package/src/templates/edu/PageEduHome/PageEduHome.vue

@@ -0,0 +1,154 @@
+<script setup lang="ts">
+import { computed, reactive, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import type { ImageObject, PageObject } from '../../../interfaces'
+import SearchInput from './../../../components/SearchInput/SearchInput.vue'
+import BlockStreamfield from './../../../components/BlockStreamfield/BlockStreamfield.vue'
+import BaseLink from './../../../components/BaseLink/BaseLink.vue'
+
+const router = useRouter()
+
+interface PageEduHomeObject extends PageObject {
+  heroImage: ImageObject
+  heroText: string
+  hotTopics: {
+    page: PageObject
+  }[]
+}
+
+interface PageEduHomeProps {
+  data: PageEduHomeObject
+}
+
+// define props
+const props = withDefaults(defineProps<PageEduHomeProps>(), {
+  data: undefined
+})
+
+const { data } = reactive(props)
+
+const searchQuery = ref(undefined)
+const image = computed(() => {
+  return data?.heroImage
+})
+
+const submitSearch = () => {
+  router.push({ path: '/edu/resources/', query: { query: searchQuery.value } })
+}
+</script>
+<template>
+  <div
+    v-if="data"
+    class="PageEduHome ThemeVariantLight -nav-offset"
+  >
+    <div class="EduHero max-w-screen-3xl relative mx-auto">
+      <div class="absolute inset-0 z-10 bg-black">
+        <picture v-if="image?.src">
+          <source
+            media="(min-width: 768px)"
+            :srcset="image.srcSet"
+          />
+          <source
+            media="(min-width: 420px)"
+            :srcset="image.screenMd?.url"
+          />
+          <source :srcset="image.screenSm?.url" />
+          <img
+            class="md:object-right object-cover object-bottom w-full h-full"
+            :src="image.src.url"
+            :width="image.src.width"
+            :height="image.src.height"
+            :alt="image.alt"
+          />
+        </picture>
+      </div>
+      <div class="content-wrapper lg:flex lg:items-center relative z-20 w-full h-full">
+        <div
+          class="bg-gradient-to-b lg:bg-gradient-to-l from-transparent-w25 lg:from-transparent-w50 to-transparent-black-50 lg:to-transparent-black-50 absolute inset-0"
+        ></div>
+        <div class="text-contrast relative w-full text-white">
+          <div class="lg:py-0 pb-10 container pt-8 mx-auto">
+            <div class="lg:px-10 2xl:px-0 pt-30 lg:pt-16 lg:pb-18 px-4">
+              <h1
+                v-if="data.heroText"
+                class="lg:w-3/4 xl:w-3/4 xl:text-10xl lg:text-9xl text-7xl lg:tracking-tightest lg:leading-tighter mb-5 font-bold leading-tight"
+              >
+                {{ data.heroText }}
+              </h1>
+              <div class="md:w-4/5 lg:w-2/3 xl:w-1/2 w-full">
+                <SearchInput
+                  v-model="searchQuery"
+                  class="bg-white border-none"
+                  placeholder="Search the K-12 resource library"
+                  with-button
+                  @submit="submitSearch()"
+                />
+              </div>
+              <div
+                v-if="data.hotTopics?.length"
+                class="md:flex flex-row mt-10"
+              >
+                <h2
+                  class="text-subtitle mt-1 text-white font-semibold whitespace-nowrap mr-5 mb-3 md:mb-0 lg:mr-8"
+                >
+                  Hot Topics
+                </h2>
+                <ul class="flex flex-row flex-wrap">
+                  <li
+                    v-for="(topic, index) in data.hotTopics"
+                    :key="index"
+                    class="mr-2 mb-2"
+                  >
+                    <BaseLink
+                      variant="none"
+                      :to="`/edu/resources?query=${topic.page?.title}`"
+                      link-class="text-gray-dark whitespace-nowrap text-sm bg-[#99D1DF] font-extrabold rounded-full inline-block px-3 py-1 text-contrast-none hover:bg-action hover:text-white"
+                    >
+                      {{ topic.page?.title }}
+                    </BaseLink>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div
+      v-if="data.body?.length"
+      class="my-10 lg:my-18"
+    >
+      <BlockStreamfield
+        v-if="data.body?.length"
+        :data="data.body"
+      />
+    </div>
+  </div>
+</template>
+<style lang="scss">
+.PageEduHome {
+  .EduHero {
+    .content-wrapper {
+      @screen lg {
+        min-height: 548px; // maintains 1440x770 aspect ratio
+      }
+
+      @screen xl {
+        min-height: 684px; // maintains 1440x770 aspect ratio
+      }
+
+      @screen 2xl {
+        min-height: 770px; // 1440x770
+      }
+
+      @screen 3xl {
+        min-height: 963px; // maintains 1440x770 aspect ratio
+      }
+      input::placeholder {
+        @apply font-medium text-gray-dark opacity-80;
+      }
+    }
+  }
+}
+</style>

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

@@ -252,7 +252,8 @@ const consolidatedSections = computed((): EduLessonSectionObject[] => {
         heading: staticSectionHeadings.value ? staticSectionHeadings.value[section] : undefined,
         blocks: section !== 'materials' && section !== 'procedures' ? data[section] : undefined,
         text: section === 'materials' ? data[section] : undefined,
-        procedures: section === 'procedures' ? data[section] : undefined
+        procedures: section === 'procedures' ? data[section] : undefined,
+        image: data[`${section}Image`]
       })
     }
     // include custom "after_" sections
@@ -271,12 +272,11 @@ const consolidatedSections = computed((): EduLessonSectionObject[] => {
   return filteredSections
 })
 const computedClass = computed((): string => {
-  if (heroInline.value || heroEmpty.value) {
-    return 'pt-5 lg:pt-12'
-  } else if (!heroInline.value) {
+  if (heroTitle.value) {
     return '-nav-offset'
+  } else {
+    return 'pt-5 lg:pt-12'
   }
-  return ''
 })
 </script>
 <template>
@@ -355,7 +355,6 @@ const computedClass = computed((): string => {
       :constrain="data.heroConstrain"
     />
 
-    <!-- TODO: put this in a component (exclude layout though) -->
     <LayoutHelper
       v-if="!heroEmpty && heroInline && data.hero?.length"
       class="lg:mb-22 mb-10"