@explorer-1/vue 0.2.43 → 0.2.45

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@explorer-1/vue",
-  "version": "0.2.43",
+  "version": "0.2.45",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -28,7 +28,6 @@
     "twitter-widgets": "^2.0.0",
     "vue": "^3.4.21",
     "vue-bind-once": "^0.2.1",
-    "vue-observe-visibility": "^1.0.0",
     "vue3-compare-image": "^1.2.5",
     "vue3-observe-visibility": "^1.0.1",
     "@explorer-1/common": "1.1.12"

package/src/components/BlockImageComparison/BlockImageComparison.vue

@@ -1,13 +1,15 @@
 <template>
   <div v-if="data">
-    <VueCompareImage
-      v-if="theBeforeImageSrc && theAfterImageSrc"
-      class="h-full animate-fadeIn"
-      :left-image="theBeforeImageSrc.url"
-      left-image-alt="Left image"
-      :right-image="theAfterImageSrc.url"
-      right-image-alt="Right image"
-    />
+    <ClientOnly>
+      <VueCompareImage
+        v-if="theBeforeImageSrc && theAfterImageSrc"
+        class="h-full animate-fadeIn"
+        :left-image="theBeforeImageSrc.url"
+        left-image-alt="Left image"
+        :right-image="theAfterImageSrc.url"
+        right-image-alt="Right image"
+      />
+    </ClientOnly>
     <div
       v-if="data.caption || customDetailUrl"
       class="lg:px-0 p-4 pb-0 print:pl-0"

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

@@ -152,7 +152,7 @@ export const BaseStory = {
         }
       ],
 
-      overview: BlockStreamfieldMinimalData.body,
+      overview: [],
       overviewHeading: 'Custom Overview heading',
       overviewImage: BlockImageData.image,
 

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

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { computed, reactive, ref } from 'vue'
 import type {
-  BlockData,
   ImageObject,
   PageEduResourcesObject,
   StreamfieldBlockData
@@ -24,13 +23,15 @@ import AboutTheAuthor from './../../../components/AboutTheAuthor/AboutTheAuthor.
 import { HeadingLevel } from '../../../components/BaseHeading/BaseHeading.vue'
 
 interface EduLessonSectionObject extends PageEduLessonSectionProps {
-  type?: 'streamfield'
+  type?: string
 }
 interface EduLessonProcedureBlocks {
   blocks: StreamfieldBlockData[]
 }
-interface EduLessonProcedure {
-  procedure: EduLessonProcedureBlocks
+export interface EduLessonProcedure {
+  sectionHeading?: string
+  steps?: EduLessonProcedureBlocks[]
+  stepsNumbering?: boolean
 }
 
 interface PageEduLessonObject extends PageEduResourcesObject {
@@ -129,13 +130,16 @@ const sectionOrder = [
 const staticSectionHeadings = computed((): { [key: string]: BlockHeadingObject } | undefined => {
   if (data) {
     const result = sectionOrder.reduce<Record<string, BlockHeadingObject>>((acc, section) => {
-      const headingText =
-        section === 'techAddons'
-          ? 'Tech Add-ons'
-          : section.charAt(0).toUpperCase() + section.slice(1)
-      acc[section] = stringAsHeadingBlockData(
-        (data[`${section}Heading`] as HeadingLevel) || headingText
-      )
+      // only include the heading if the section has content
+      if (data[section]?.length) {
+        const headingText =
+          section === 'techAddons'
+            ? 'Tech Add-ons'
+            : section.charAt(0).toUpperCase() + section.slice(1)
+        acc[section] = stringAsHeadingBlockData(
+          (data[`${section}Heading`] as HeadingLevel) || headingText
+        )
+      }
       return acc
     }, {})
     return result
@@ -193,8 +197,8 @@ const consolidatedBlocks = computed(() => {
       } else if (section === 'procedures' && data.procedures?.length) {
         // get blocks in nested procedures
         data.procedures.forEach((item) => {
-          if (item.procedure?.blocks?.length) {
-            blocks.push(...item.procedure.blocks)
+          if (item.steps?.length) {
+            blocks.push(...item.steps)
           }
         })
       }
@@ -218,7 +222,7 @@ const consolidatedBlocks = computed(() => {
 
 // organize data to render with PageEduLessonSection component
 const consolidatedSections = computed((): EduLessonSectionObject[] => {
-  const sections = []
+  const sections: EduLessonSectionObject[] = []
   // include custom top section
   if (keyedCustomSections.value && keyedCustomSections.value['top']) {
     sections.push({ type: 'streamfield', blocks: keyedCustomSections.value['top'] })
@@ -226,9 +230,7 @@ const consolidatedSections = computed((): EduLessonSectionObject[] => {
   sectionOrder.forEach((section) => {
     if (data && data[section]) {
       sections.push({
-        heading: staticSectionHeadings.value
-          ? (staticSectionHeadings.value[section] as BlockData)
-          : undefined,
+        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
@@ -243,7 +245,11 @@ const consolidatedSections = computed((): EduLessonSectionObject[] => {
   if (keyedCustomSections.value && keyedCustomSections.value['bottom']) {
     sections.push({ type: 'streamfield', blocks: keyedCustomSections.value['bottom'] })
   }
-  return sections as EduLessonSectionObject[]
+  const filteredSections = sections.filter(
+    (item) => item.text || item.blocks?.length || item.procedures?.length
+  )
+
+  return filteredSections
 })
 </script>
 <template>
@@ -332,20 +338,18 @@ const consolidatedSections = computed((): EduLessonSectionObject[] => {
       v-for="(value, _key) in consolidatedSections"
       :key="_key"
     >
-      <template v-if="value.blocks?.length || value.procedures?.length">
-        <BlockStreamfield
-          v-if="value.type === 'streamfield'"
-          :data="value.blocks"
-        />
-        <PageEduLessonSection
-          v-else
-          :heading="value.heading"
-          :blocks="value.blocks"
-          :procedures="value.procedures"
-          :text="value.text"
-          :image="value.image"
-        />
-      </template>
+      <BlockStreamfield
+        v-if="value.type === 'streamfield'"
+        :data="value.blocks"
+      />
+      <PageEduLessonSection
+        v-else
+        :heading="value.heading"
+        :blocks="value.blocks"
+        :procedures="value.procedures"
+        :text="value.text"
+        :image="value.image"
+      />
     </template>
 
     <!-- streamfield blocks -->

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

@@ -5,6 +5,7 @@ import type { ImageObject, StreamfieldBlockData } from './../../../interfaces'
 import BlockHeading, {
   type BlockHeadingObject
 } from './../../../components/BlockHeading/BlockHeading.vue'
+import type { EduLessonProcedure } from './PageEduLesson.vue'
 import BaseHeading from './../../../components/BaseHeading/BaseHeading.vue'
 import BlockText from './../../../components/BlockText/BlockText.vue'
 import LayoutHelper from './../../../components/LayoutHelper/LayoutHelper.vue'
@@ -12,15 +13,9 @@ import BlockImageStandard from './../../../components/BlockImage/BlockImageStand
 import BlockStreamfield from './../../../components/BlockStreamfield/BlockStreamfield.vue'
 
 export interface PageEduLessonSectionProps {
-  heading: BlockHeadingObject
+  heading?: BlockHeadingObject
   blocks?: StreamfieldBlockData[]
-  procedures?: {
-    sectionHeading: string
-    stepsNumbering: boolean
-    steps: {
-      blocks: StreamfieldBlockData[]
-    }[]
-  }[]
+  procedures?: EduLessonProcedure[]
   text?: string
   image?: ImageObject
 }
@@ -36,14 +31,14 @@ const props = withDefaults(defineProps<PageEduLessonSectionProps>(), {
 const { heading, blocks, image } = reactive(props)
 
 const anchorId = computed(() => {
-  return 'lesson_' + camelCase(heading.heading)
+  return 'lesson_' + camelCase(heading?.heading)
 })
 </script>
 <template>
   <section
     :id="anchorId"
     class="PageEduLessonSection"
-    :aria-label="heading.heading"
+    :aria-label="heading?.heading"
   >
     <LayoutHelper
       indent="col-3"

package/src/utils/generateHash.ts

@@ -0,0 +1,9 @@
+export function generateHash(str: string): number {
+  let hash = 0
+  for (let i = 0, len = str.length; i < len; i++) {
+    let chr = str.charCodeAt(i)
+    hash = (hash << 5) - hash + chr
+    hash |= 0 // Convert to 32bit integer
+  }
+  return hash
+}