fix: student projects template feedback

packages/vue/src/components/BlockHeading/BlockHeading.vue

@@ -6,7 +6,9 @@
     class="BlockHeading"
     :class="{ 'has-anchor': generateId }"
   >
-    {{ data.heading }}
+    <slot>
+      {{ data.heading }}
+    </slot>
   </BaseHeading>
 </template>
 

packages/vue/src/components/NavMobile/NavMobile.vue

@@ -111,7 +111,7 @@
           </nav>
           <div class="pl-8">
             <nav
-              v-if="data.footerMoreFromJpl && data.footerMoreFromJpl.length > 0"
+              v-if="data.footerMoreFromJpl?.length"
               aria-label="Other JPL Sites"
               class="mt-6"
             >
@@ -133,7 +133,6 @@
   </transition>
 </template>
 <script lang="ts">
-// @ts-nocheck
 import { defineComponent } from 'vue'
 import { mapStores } from 'pinia'
 import { eventBus } from './../../utils/eventBus'
@@ -256,27 +255,27 @@ export default defineComponent({
       if (this.menuVisible) {
         this.menuVisible = false
         this.$emit('closeMobileMenu')
-        document.body.classList.remove('overflow-hidden')
+        if (document.body) document.body.classList.remove('overflow-hidden')
       }
     },
     openMenu() {
       if (!this.menuVisible) {
         this.menuVisible = true
         this.$emit('openMobileMenu')
-        document.body.classList.add('overflow-hidden')
+        if (document.body) document.body.classList.add('overflow-hidden')
       }
     },
     // safe way to retrieve url key from nav items. used with breadcrumb to determine active class.
     getUrlKey(item: LinkObject): string | null {
-      if (item.linkPage) {
+      if (item?.linkPage) {
         return item.linkPage.url
       }
       return null
     },
     // to determine active class on menu links and 'more' menu links
     checkActive(item: LinkObject) {
       const urlKey = this.getUrlKey(item)
-      if (urlKey && this.breadcrumb && this.breadcrumb.menu_links) {
+      if (urlKey && this.breadcrumb?.menu_links) {
         // key into the breadcrumbs for each section
         const objArray = this.breadcrumb.menu_links[urlKey]
         // check if any of the paths contained in the array are active

packages/vue/src/templates/edu/PageEduExplainerArticle/PageEduExplainerArticle.vue

@@ -87,7 +87,7 @@ export default defineComponent({
 <template>
   <div
     v-if="data"
-    class="ThemeVariantLight"
+    class="ThemeVariantLight PageEduExplainerArticle"
     :class="computedClass"
     itemscope
     itemtype="http://schema.org/Article"
@@ -226,3 +226,16 @@ export default defineComponent({
     </LayoutHelper>
   </div>
 </template>
+<style lang="scss">
+.PageEduExplainerArticle {
+  .BlockText {
+    ul {
+      li {
+        &::before {
+          @apply bg-secondary;
+        }
+      }
+    }
+  }
+}
+</style>

packages/vue/src/templates/edu/PageEduGalleryDetail/PageEduGalleryDetail.vue

@@ -257,5 +257,14 @@ const { data } = reactive(props)
       }
     }
   }
+  .BlockText {
+    ul {
+      li {
+        &::before {
+          @apply bg-secondary;
+        }
+      }
+    }
+  }
 }
 </style>

packages/vue/src/templates/edu/PageEduStudentProject/PageEduStudentProject.vue

@@ -240,7 +240,7 @@ const computedClass = computed((): string => {
 <template>
   <div
     v-if="data"
-    class="ThemeVariantLight"
+    class="ThemeVariantLight PageEduStudentProject"
     :class="computedClass"
   >
     <!-- hero title -->
@@ -446,3 +446,16 @@ const computedClass = computed((): string => {
     </LayoutHelper>
   </div>
 </template>
+<style lang="scss">
+.PageEduStudentProject {
+  .BlockText {
+    ul {
+      li {
+        &::before {
+          @apply bg-secondary;
+        }
+      }
+    }
+  }
+}
+</style>

packages/vue/src/templates/edu/PageEduStudentProject/PageEduStudentProjectSection.vue

@@ -1,16 +1,17 @@
 <script setup lang="ts">
 import { reactive } from 'vue'
 import type { ImageObject, StreamfieldBlockData } from './../../../interfaces'
+import BaseHeading from './../../../components/BaseHeading/BaseHeading.vue'
 import BlockHeading, {
   type BlockHeadingObject
 } from './../../../components/BlockHeading/BlockHeading.vue'
 import type { EduStudentProjectStep } from './PageEduStudentProject.vue'
-import BaseHeading from './../../../components/BaseHeading/BaseHeading.vue'
 import HeroInlineMedia from './../../../components/HeroInlineMedia/HeroInlineMedia.vue'
-import BlockText from './../../../components/BlockText/BlockText.vue'
 import LayoutHelper from './../../../components/LayoutHelper/LayoutHelper.vue'
+import BlockInlineImage from './../../../components/BlockInlineImage/BlockInlineImage.vue'
 import BlockImageStandard from './../../../components/BlockImage/BlockImageStandard.vue'
 import BlockStreamfield from './../../../components/BlockStreamfield/BlockStreamfield.vue'
+import { getHeadingId } from './../../../utils/getHeadingId'
 
 export interface PageEduStudentProjectSectionProps {
   heading?: BlockHeadingObject
@@ -48,8 +49,19 @@ const { heading, blocks, image, steps, stepsNumbering, text } = reactive(props)
       />
     </LayoutHelper>
 
+    <!-- simple richtext -->
+    <BlockInlineImage
+      v-if="text"
+      :data="{
+        text: text,
+        image: image,
+        alignTo: 'right'
+      }"
+      class="lg:mb-18 mb-10"
+    />
+
     <LayoutHelper
-      v-if="image"
+      v-else-if="image"
       indent="col-2"
       class="lg:mb-8 mb-5"
     >
@@ -71,6 +83,7 @@ const { heading, blocks, image, steps, stepsNumbering, text } = reactive(props)
       <li
         v-for="(step, index) in steps"
         :key="index"
+        v-bind-once="{ id: step.heading ? getHeadingId(step.heading) : undefined }"
         class="PageEduStudentProjectStep lg:mb-12 mb-10 px-4 lg:px-0"
       >
         <LayoutHelper
@@ -149,15 +162,6 @@ const { heading, blocks, image, steps, stepsNumbering, text } = reactive(props)
         </LayoutHelper>
       </li>
     </component>
-
-    <!-- simple richtext -->
-    <LayoutHelper
-      v-else-if="text"
-      indent="col-3"
-      class="lg:mb-18 mb-10"
-    >
-      <BlockText :text="text" />
-    </LayoutHelper>
   </section>
 </template>
 <style lang="scss">
@@ -167,6 +171,9 @@ const { heading, blocks, image, steps, stepsNumbering, text } = reactive(props)
   @return math.div($pxValue, 16) * 1rem;
 }
 .PageEduStudentProjectStep {
+  &:target {
+    @apply scroll-mt-14;
+  }
   .BlockStreamfield {
     div:last-child {
       @apply mb-0 #{!important};
@@ -179,7 +186,6 @@ const { heading, blocks, image, steps, stepsNumbering, text } = reactive(props)
     // intentionally overriding correction that occurs within ThemeVariantGray
     @apply text-jpl-red;
   }
-
   .PageEduStudentProjectStep__fullWidth {
     .LayoutHelper > div > .BlockText {
       @screen lg {