@explorer-1/vue 0.2.90 → 0.2.92

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @explorer-1/vue
 
+## 0.2.91
+
+### Patch Changes
+
+- fac37c6: Fixing hero title options on Content Pages
+
 ## 0.2.90
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@explorer-1/vue",
-  "version": "0.2.90",
+  "version": "0.2.92",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -18,13 +18,13 @@
     "animejs": "^3.2.2",
     "click-outside-vue3": "^4.0.1",
     "datebook": "^8.0.1",
-    "dayjs": "^1.11.13",
+    "dayjs": "^1.11.11",
     "fast-qs": "^2.0.3",
     "lodash": "^4.17.21",
     "mitt": "^3.0.1",
     "sass": "^1.77.4",
     "swiper": "^11.1.3",
-    "tailwindcss": "^3.4.14",
+    "tailwindcss": "^3.4.3",
     "twitter-widgets": "^2.0.0",
     "vue": "^3.5.3",
     "vue-bind-once": "^0.2.1",
@@ -38,7 +38,7 @@
     "autoprefixer": "^10.4.19",
     "postcss": "^8.4.38",
     "postcss-import": "^16.1.0",
-    "typescript": "^5.6.3",
+    "typescript": "^5.4.5",
     "unplugin-vue-components": "^0.27.0",
     "vite": "^5.3.1",
     "vite-plugin-dts": "^3.9.1",

package/src/components/MixinFancybox/MixinFancybox.vue

@@ -1,12 +1,9 @@
-<!-- eslint-disable vue/require-explicit-emits -->
-<!-- eslint-disable vue/require-default-prop -->
 <script lang="ts">
-// MixinFancybox.vue
 // @ts-nocheck
+import { defineComponent } from 'vue'
 import { Fancybox } from '@fancyapps/ui'
-import '@fancyapps/ui/dist/fancybox.css'
 import { Fullscreen } from '@fancyapps/ui/src/shared/utils/Fullscreen.js'
-import { defineComponent } from 'vue'
+import '@fancyapps/ui/dist/fancybox.css'
 import MixinFancyboxOpenButton from './MixinFancyboxOpenButton.vue'
 
 export const fancyboxThemes = {

package/src/templates/PageContent/PageContent.vue

@@ -3,6 +3,7 @@ import { defineComponent } from 'vue'
 import { useRoute } from 'vue-router'
 import { mapStores } from 'pinia'
 import { useThemeStore } from '../../store/theme'
+import HeroLarge from './../../components/HeroLarge/HeroLarge.vue'
 import HeroMedia from './../../components/HeroMedia/HeroMedia.vue'
 import NavSecondary from './../../components/NavSecondary/NavSecondary.vue'
 import LayoutHelper from './../../components/LayoutHelper/LayoutHelper.vue'
@@ -21,6 +22,7 @@ const route = useRoute()
 export default defineComponent({
   name: 'PageContent',
   components: {
+    HeroLarge,
     HeroMedia,
     NavSecondary,
     LayoutHelper,
@@ -54,6 +56,9 @@ export default defineComponent({
       }
       return false
     },
+    heroTitle() {
+      return this.data?.heroImage && !this.heroInline && this.data?.displayTitleInHero
+    },
     hideH1() {
       if (route?.path === '/a-plan-for-jpl') {
         return true
@@ -77,8 +82,14 @@ export default defineComponent({
     :class="{ '-nav-offset': !heroInline && data.heroImage }"
   >
     <!-- hero image -->
+    <HeroLarge
+      v-if="heroTitle"
+      :title="data.title"
+      :image="data.heroImage"
+      :summary="data.heroSummary"
+    />
     <HeroMedia
-      v-if="data.heroImage && !heroInline"
+      v-else-if="!heroTitle && data.heroImage && !heroInline"
       class="md:mb-0 mb-10"
       :image="data.heroImage"
       :caption="data.heroImageCaption"
@@ -98,13 +109,14 @@ export default defineComponent({
       :class="h1LayoutHelperClasses"
     >
       <DetailHeadline
+        v-if="!heroTitle"
         :title="data.title"
         :label="displayLabel"
         :class="{ 'sr-only': hideH1 }"
       />
       <ShareButtonsEdu
         v-if="themeStore.isEdu && data?.url"
-        class="mt-4"
+        :class="{ 'mt-4': !heroTitle }"
         :url="data.url"
         :title="data.title"
         :image="data.thumbnailImage?.original"

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

@@ -28,6 +28,22 @@ export default {
 export const BaseStory = {
   name: 'PageContent',
   args: {
-    data: { ...ContentPageData, displayLabel: undefined, parent: { title: 'Parent Page' } }
+    data: {
+      ...ContentPageData,
+      displayLabel: undefined,
+      parent: { title: 'Parent Page' }
+    }
+  }
+}
+export const HeroTitle = {
+  args: {
+    data: {
+      ...ContentPageData,
+      displayLabel: undefined,
+      parent: { title: 'Parent Page' },
+      displayTitleInHero: true,
+      heroSummary: 'Text appears below the title',
+      heroPosition: 'full'
+    }
   }
 }

package/vite.config.ts

@@ -1,8 +1,8 @@
-import { defineConfig } from 'vite'
-import { resolve } from 'node:path'
 import vue from '@vitejs/plugin-vue'
-import dts from 'vite-plugin-dts'
+import { resolve } from 'node:path'
 import Components from 'unplugin-vue-components/vite'
+import { defineConfig } from 'vite'
+import dts from 'vite-plugin-dts'
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -15,6 +15,20 @@ export default defineConfig({
       dirs: ['./src/components', './src/templates']
     })
   ],
+  css: {
+    preprocessorOptions: {
+      scss: {
+        silenceDeprecations: [
+          // Deprecation Warning: https://sass-lang.com/d/mixed-decls
+          'mixed-decls',
+          // Deprecation Warning: https://sass-lang.com/d/import
+          'import',
+          // Deprecation Warning: https://sass-lang.com/d/legacy-js-api
+          'legacy-js-api'
+        ]
+      }
+    }
+  },
   build: {
     lib: {
       // Could also be a dictionary or array of multiple entry points