@explorer-1/vue 0.2.85 → 0.2.86

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@explorer-1/vue",
-  "version": "0.2.85",
+  "version": "0.2.86",
   "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.21"
+    "@explorer-1/common": "1.1.23"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.4",

package/src/components/BlockStreamfield/BlockStreamfield.stories.js

@@ -44,7 +44,7 @@ export const BlockStreamfieldMinimalData = {
     {
       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>\n'
+        '<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><h2 data-block-key="cba9u">A heading in BlockText</h2><p>Lorem ipsum <a href="/missions/test-mission/">dolor</a> sit amet, consectetur adipiscing elit.</p><h3 data-block-key="ujfka8">A heading in BlockText</h3><p>Quisque vitae justo quis justo malesuada molestie.</p><h2 data-block-key="ujfka8">A heading in BlockText</h2><p>Cras sed tincidunt dui.</p>\n'
     },
     {
       blockType: 'RichTextBlock',
@@ -59,7 +59,7 @@ export const BlockStreamfieldTruncatedData = {
     {
       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'
+        '<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><h2 data-block-key="cba9u">A heading in BlockText</h2><p>Lorem ipsum <a href="/missions/test-mission/">dolor</a> sit amet, consectetur adipiscing elit.</p><h3 data-block-key="ujfka8">A heading in BlockText</h3><p>Quisque vitae justo quis justo malesuada molestie.</p><h2 data-block-key="ujfka8">A heading in BlockText</h2><p>Cras sed tincidunt dui.</p>\n'
     },
     { ...BlockHeadingData, blockId: Math.random().toString(36).slice(2) },
     {

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

@@ -19,13 +19,13 @@ export default {
   excludeStories: /.*Data$/
 }
 
-export const RichTextMediaData = `<h2>A heading in BlockText</h2><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">
+export const RichTextMediaData = `<h2 data-block-key="cba9u">A heading in BlockText</h2><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><h3>Subheading in BlockText</h3><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 left"><img alt="Carbon Mapper Coalition&amp;#x27;s Tanager Satellite" height="336" loading="lazy" src="https://picsum.photos/640/336" width="640">
+</div><h3 data-block-key="ois8du">Subheading in BlockText</h3><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 left"><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>

package/src/components/BlockText/BlockText.vue

@@ -12,6 +12,10 @@ interface Variants {
   [key: string]: string
 }
 
+export interface BlockTextObject {
+  blockType?: string
+  value: string
+}
 export const variants: Variants = {
   small: 'text-body-sm -small',
   medium: 'text-body-md -medium',

package/src/components/NavJumpMenu/NavJumpMenu.vue

@@ -45,19 +45,18 @@ 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 type { BlockTextObject } from './../BlockText/BlockText.vue'
+import type { BlockData, BreadcrumbPathObject, StreamfieldBlockData } from './../../interfaces'
 import { getHeadingId } from '../../utils/getHeadingId'
 
 interface NavJumpMenuProps {
   title?: string
   jumpLinks?: BreadcrumbPathObject[]
-  blocks?: BlockData[] | BlockHeadingObject[]
+  blocks?: (StreamfieldBlockData | BlockData | BlockHeadingObject | BlockTextObject)[]
   headingLevel?: string
   invert?: boolean
   enabled?: boolean
   dropdownText?: string
-  // stepsNumbering?: boolean
-  // stepClasses?: string
 }
 
 const props = withDefaults(defineProps<NavJumpMenuProps>(), {
@@ -69,8 +68,6 @@ const props = withDefaults(defineProps<NavJumpMenuProps>(), {
   invert: true,
   hidden: false,
   dropdownText: 'Jump to…'
-  // stepsNumbering: false,
-  // stepClasses: 'text-primary'
 })
 
 const initialized = ref(false)
@@ -88,17 +85,47 @@ const theJumpLinks = computed(() => {
       }
     })
     const filteredBlocks = indexedBlocks.filter((b) => {
-      return b.blockType === 'HeadingBlock' && b.level === props.headingLevel
+      return (
+        (b.blockType === 'HeadingBlock' &&
+          (b as BlockHeadingObject).level === props.headingLevel) ||
+        (b.blockType === 'RichTextBlock' &&
+          (b as BlockTextObject).value.includes(`<${props.headingLevel}`))
+      )
     })
     // map to the correct data shape
-    const links: BreadcrumbPathObject[] = filteredBlocks.map((h) => {
-      return {
-        // @ts-expect-error using parameter that was added to BlockData
-        path: '#' + getHeadingId(h.heading, h.blockId),
-        title: h.heading
-      } as BreadcrumbPathObject
+    const links: (BreadcrumbPathObject | BreadcrumbPathObject[])[] = filteredBlocks.map((h) => {
+      let block = h
+      let blocks = []
+      if (h.blockType === 'HeadingBlock') {
+        block = {
+          // @ts-expect-error using parameter that was added to BlockData
+          path: '#' + getHeadingId(h.heading, h.blockId),
+          title: (h as BlockHeadingObject).heading
+        }
+      } else if (h.blockType === 'RichTextBlock') {
+        let text = (h as BlockTextObject).value
+        if (text) {
+          const regex = new RegExp(
+            `<${props.headingLevel} id="(.*?)">(.*?)</${props.headingLevel}>`,
+            'g'
+          )
+          const matches = text.matchAll(regex)
+          const headings = [...matches]
+          for (let arr of headings) {
+            const [_match, g1, g2] = arr
+            const block = {
+              path: '#' + g1,
+              title: g2
+            }
+            blocks.push(block)
+          }
+        }
+      }
+      return blocks.length
+        ? (blocks as unknown as BreadcrumbPathObject[])
+        : (block as unknown as BreadcrumbPathObject)
     })
-    return links
+    return links ? links.flat() : undefined
   }
   return []
 })

package/src/templates/edu/PageEduCollectionsDetail/PageEduCollectionsDetail.vue

@@ -12,6 +12,7 @@ import NavJumpMenu from './../../../components/NavJumpMenu/NavJumpMenu.vue'
 import NavSecondary from './../../../components/NavSecondary/NavSecondary.vue'
 import MetaPanel from '../../../components/MetaPanel/MetaPanel.vue'
 import ShareButtonsEdu from '../../../components/ShareButtonsEdu/ShareButtonsEdu.vue'
+import { anchorizeStreamfield } from './../../../utils/anchorizeStreamfield'
 
 interface PageEduCollectionsDetail extends PageEduResourcesObject {
   heroImage: ImageObject
@@ -39,6 +40,11 @@ const heroInline = computed((): boolean => {
   return data?.heroPosition === 'inline'
 })
 
+const filteredBody = computed(() => {
+  // adds anchors to headings within RichTextBlock
+  return anchorizeStreamfield(data?.body)
+})
+
 const computedClass = computed((): string => {
   if ((heroInline.value || !data?.heroImage) && !data?.breadcrumb) {
     return 'pt-5 lg:pt-12'
@@ -58,7 +64,7 @@ const computedClass = computed((): string => {
       v-if="data.showJumpMenu && !data.breadcrumb"
       ref="PageEduCollectionsDetailJumpMenu"
       :title="data.title"
-      :blocks="data.body"
+      :blocks="filteredBody"
       dropdown-text="In this collection"
     />
 
@@ -69,7 +75,7 @@ const computedClass = computed((): string => {
       :image="data.heroImage"
       :summary="data.heroSummary"
       :custom-pill-type="data.__typename"
-      :class="!data.showMetaPanel ? 'mb-10' : ''"
+      :class="!data.showMetaPanel && !data.breadcrumb ? 'mb-10' : ''"
     />
 
     <!-- secondary nav -->
@@ -137,7 +143,7 @@ const computedClass = computed((): string => {
     </LayoutHelper>
 
     <!-- streamfield blocks -->
-    <BlockStreamfield :data="data.body" />
+    <BlockStreamfield :data="filteredBody" />
 
     <!-- related links -->
     <LayoutHelper

package/src/templates/edu/PageEduExplainerArticle/PageEduExplainerArticle.vue

@@ -12,6 +12,7 @@ import BlockRelatedLinks from '../../../components/BlockRelatedLinks/BlockRelate
 import NavJumpMenu from './../../../components/NavJumpMenu/NavJumpMenu.vue'
 import HeroInlineMedia from './../../../components/HeroInlineMedia/HeroInlineMedia.vue'
 import AboutTheAuthor from './../../../components/AboutTheAuthor/AboutTheAuthor.vue'
+import { anchorizeStreamfield } from './../../../utils/anchorizeStreamfield'
 
 export default defineComponent({
   name: 'PageEduExplainerArticle',
@@ -71,6 +72,10 @@ export default defineComponent({
       }
       return false
     },
+    filteredBody() {
+      // adds anchors to headings within RichTextBlock
+      return anchorizeStreamfield(this.data?.body)
+    },
     computedClass(): string {
       if (this.heroInline || this.heroEmpty) {
         return 'pt-5 lg:pt-12'
@@ -100,7 +105,7 @@ export default defineComponent({
     <NavJumpMenu
       v-if="data.showJumpMenu"
       :title="data.title"
-      :blocks="data.body"
+      :blocks="filteredBody"
       dropdown-text="In this article"
     />
 
@@ -182,7 +187,7 @@ export default defineComponent({
     <!-- streamfield blocks -->
     <BlockStreamfield
       itemprop="articleBody"
-      :data="data.body"
+      :data="filteredBody"
     />
 
     <!-- related links -->

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

@@ -20,6 +20,7 @@ import BlockStreamfield from './../../../components/BlockStreamfield/BlockStream
 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?: {

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

@@ -20,8 +20,8 @@ import PageEduLessonSection, { type PageEduLessonSectionProps } from './PageEduL
 import NavJumpMenu from './../../../components/NavJumpMenu/NavJumpMenu.vue'
 import HeroInlineMedia from './../../../components/HeroInlineMedia/HeroInlineMedia.vue'
 import AboutTheAuthor from './../../../components/AboutTheAuthor/AboutTheAuthor.vue'
-
 import { HeadingLevel } from '../../../components/BaseHeading/BaseHeading.vue'
+import { anchorizeStreamfield } from '../../../utils/anchorizeStreamfield'
 
 interface EduLessonSectionObject extends PageEduLessonSectionProps {
   type?: string
@@ -143,6 +143,10 @@ const sectionOrder = [
   'bottom'
 ]
 
+const filteredBody = computed(() => {
+  return anchorizeStreamfield(data?.body) || []
+})
+
 // mimic HeadingBlock data shape for defined section headings
 const staticSectionHeadings = computed((): { [key: string]: BlockHeadingObject } | undefined => {
   if (data) {
@@ -184,8 +188,9 @@ const keyedCustomSections = computed(
           if (!acc[position]) {
             acc[position] = []
           }
+          const filteredContent = anchorizeStreamfield(section.content) || []
           acc[position].push(section.heading)
-          acc[position].push(...section.content)
+          acc[position].push(...filteredContent)
           return acc
         },
         {}
@@ -210,7 +215,8 @@ const consolidatedBlocks = computed(() => {
         blocks.push(staticSectionHeadings.value[section])
       }
       if (section !== 'materials' && section !== 'procedures') {
-        blocks.push(...data[section])
+        const filteredBlocks = anchorizeStreamfield(data[section]) || []
+        blocks.push(...filteredBlocks)
       } else if (section === 'procedures' && data.procedures?.length) {
         // get blocks in nested procedures
         data.procedures.forEach((item) => {
@@ -230,8 +236,8 @@ const consolidatedBlocks = computed(() => {
     blocks.push(...keyedCustomSections.value['bottom'])
   }
   // include body blocks
-  if (data?.body?.length) {
-    blocks.push(...data.body)
+  if (filteredBody.value) {
+    blocks.push(...filteredBody.value)
   }
 
   return blocks
@@ -248,7 +254,10 @@ const consolidatedSections = computed((): EduLessonSectionObject[] => {
     if (data && data[section]) {
       sections.push({
         heading: staticSectionHeadings.value ? staticSectionHeadings.value[section] : undefined,
-        blocks: section !== 'materials' && section !== 'procedures' ? data[section] : undefined,
+        blocks:
+          section !== 'materials' && section !== 'procedures'
+            ? anchorizeStreamfield(data[section])
+            : undefined,
         text: section === 'materials' ? data[section] : undefined,
         procedures: section === 'procedures' ? data[section] : undefined,
         image: data[`${section}Image`]
@@ -269,6 +278,7 @@ const consolidatedSections = computed((): EduLessonSectionObject[] => {
 
   return filteredSections
 })
+
 const computedClass = computed((): string => {
   if (heroTitle.value) {
     return '-nav-offset'
@@ -390,8 +400,8 @@ const computedClass = computed((): string => {
 
     <!-- streamfield blocks -->
     <BlockStreamfield
-      v-if="data.body?.length"
-      :data="data.body"
+      v-if="filteredBody?.length"
+      :data="filteredBody"
     />
 
     <!-- related links -->

package/src/templates/edu/PageEduNewsDetail/PageEduNewsDetail.vue

@@ -11,6 +11,7 @@ import BlockText from './../../../components/BlockText/BlockText.vue'
 import BlockStreamfield from './../../../components/BlockStreamfield/BlockStreamfield.vue'
 import NavJumpMenu from './../../../components/NavJumpMenu/NavJumpMenu.vue'
 import AboutTheAuthor from './../../../components/AboutTheAuthor/AboutTheAuthor.vue'
+import { anchorizeStreamfield } from './../../../utils/anchorizeStreamfield'
 
 interface PageEduNewsDetailObject extends PageObject {
   readTime: string
@@ -43,6 +44,11 @@ const heroInline = computed(() => {
   return false
 })
 
+const filteredBody = computed(() => {
+  // adds anchors to headings within RichTextBlock
+  return anchorizeStreamfield(props.data?.body)
+})
+
 const computedClass = computed(() => {
   if (heroInline.value || heroEmpty.value) {
     return 'pt-5 lg:pt-12'
@@ -72,7 +78,7 @@ defineExpose({
       v-if="data.showJumpMenu"
       ref="PageEduNewsDetailJumpMenu"
       :title="data.title"
-      :blocks="data.body"
+      :blocks="filteredBody"
       dropdown-text="In this news article"
     />
 
@@ -150,7 +156,7 @@ defineExpose({
     <!-- streamfield blocks -->
     <BlockStreamfield
       itemprop="articleBody"
-      :data="data.body"
+      :data="filteredBody"
     />
 
     <LayoutHelper

package/src/templates/edu/PageEduStudentProject/PageEduStudentProject.vue

@@ -24,9 +24,9 @@ import PageEduStudentProjectSection, {
 import NavJumpMenu from './../../../components/NavJumpMenu/NavJumpMenu.vue'
 import HeroInlineMedia from './../../../components/HeroInlineMedia/HeroInlineMedia.vue'
 import AboutTheAuthor from './../../../components/AboutTheAuthor/AboutTheAuthor.vue'
-
 import { HeadingLevel } from '../../../components/BaseHeading/BaseHeading.vue'
 import StudentProjectBadge from '@explorer-1/common/src/images/svg/student-project-badge.svg'
+
 const route = useRoute()
 interface EduStudentProjectSectionObject extends PageEduStudentProjectSectionProps {
   type?: string

package/src/templates/edu/PageEduTeachableMoment/PageEduTeachableMoment.vue

@@ -13,6 +13,7 @@ import BlockRelatedLinks from '../../../components/BlockRelatedLinks/BlockRelate
 import NavJumpMenu from './../../../components/NavJumpMenu/NavJumpMenu.vue'
 import HeroInlineMedia from './../../../components/HeroInlineMedia/HeroInlineMedia.vue'
 import AboutTheAuthor from './../../../components/AboutTheAuthor/AboutTheAuthor.vue'
+import { anchorizeStreamfield } from './../../../utils/anchorizeStreamfield'
 
 interface PageEduTeachableMomentProps {
   data?: PageEduResourcesObject
@@ -68,6 +69,11 @@ const heroInline = computed((): boolean => {
   return false
 })
 
+const filteredBody = computed(() => {
+  // adds anchors to headings within RichTextBlock
+  return anchorizeStreamfield(data?.body)
+})
+
 const computedClass = computed((): string => {
   if (heroInline.value || heroEmpty.value) {
     return 'pt-5 lg:pt-12'
@@ -87,7 +93,7 @@ const computedClass = computed((): string => {
       v-if="data.showJumpMenu"
       ref="PageEduTeachableMomentJumpMenu"
       :title="data.title"
-      :blocks="data.body"
+      :blocks="filteredBody"
       dropdown-text="In this Teachable Moment"
     />
 
@@ -160,7 +166,7 @@ const computedClass = computed((): string => {
     </LayoutHelper>
 
     <!-- streamfield blocks -->
-    <BlockStreamfield :data="data.body" />
+    <BlockStreamfield :data="filteredBody" />
 
     <!-- related links -->
     <LayoutHelper

package/src/utils/anchorizeBlock.ts

@@ -0,0 +1,20 @@
+import type { BlockTextObject } from './../components/BlockText/BlockText.vue'
+import { getHeadingId } from './getHeadingId'
+
+export const anchorizeBlock = (block: BlockTextObject, headingLevel = 'h2') => {
+  if (block?.blockType === 'RichTextBlock') {
+    const regex = new RegExp(`<${headingLevel} data-block-key="(.*?)">(.*?)</${headingLevel}>`, 'g')
+    let text = block?.value
+    if (text) {
+      text = text.replaceAll(regex, (_match, g1, g2) => {
+        const headingId = getHeadingId(g2, g1)
+        return `<${headingLevel} id="${headingId}">${g2}</${headingLevel}>`
+      })
+    }
+    return {
+      ...block,
+      value: text
+    }
+  }
+  return block
+}

package/src/utils/anchorizeStreamfield.ts

@@ -0,0 +1,15 @@
+import { anchorizeBlock } from './anchorizeBlock'
+import { StreamfieldBlockData } from '../interfaces'
+export const anchorizeStreamfield = (blocks?: StreamfieldBlockData[], headingLevel = 'h2') => {
+  if (blocks?.length) {
+    // @ts-expect-error
+    const filteredBlocks = []
+    blocks.forEach((block) => {
+      // @ts-expect-error
+      filteredBlocks.push(anchorizeBlock(block, headingLevel))
+    })
+    // @ts-expect-error
+    return filteredBlocks
+  }
+  return blocks
+}