feat: APPS-2904

app.vue

@@ -3,7 +3,7 @@ import { useLayoutState } from './composables/useLayoutState'
 
 provide('theme', computed(() => ''))
 const { enabled, state } = usePreviewMode()
-// console.log('App.vue', enabled.value, state.token)
+console.log('App.vue', enabled.value, state.token)
 const route = useRoute()
 
 const globalStore = useGlobalStore()
@@ -40,6 +40,7 @@ const { $alerts } = useNuxtApp()
 const { $layoutData } = useNuxtApp()
 watch(globalStore.header, (newVal, oldVal) => {
   console.log('Global store changed for draft previews', newVal, oldVal)
+  setLayoutData(globalStore)
 })
 
 onMounted(async () => {
@@ -48,8 +49,6 @@ onMounted(async () => {
   if (process.env.NODE_ENV !== 'development' && (route.query?.preview === 'true' || enabled.value) && (route.query?.token !== undefined || state?.token !== undefined)) {
     await $layoutData()
   }
-  classes.value.push({ 'has-scrolled': globalStore.sTop })
-  classes.value.push({ 'has-scrolled-past-header': globalStore.sTop >= 150 })
   await $alerts()
 })
 

layouts/default.vue

@@ -2,6 +2,7 @@
 // components need to be imported for nitro crawling in static mode
 import { HeaderSmart, SectionWrapper, SiteNotificationAlert, FooterPrimary, FooterSock } from 'ucla-library-website-components'
 
+provide('theme', computed(() => ''))
 const shouldIncludeExtraScript = computed(() => {
   if (useRuntimeConfig().public.hostName.includes('stage'))
     return true
@@ -40,7 +41,7 @@ useHead({
       : [])
   ]
 })
-
+const { enabled, state } = usePreviewMode()
 const layoutCustomProps = useAttrs()
 const globalStore = useGlobalStore()
 // console.log('In default layout:', globalStore.header)
@@ -80,7 +81,7 @@ watch(globalStore.header, (newVal, oldVal) => {
 })
 
 onMounted(async () => {
-  // console.log('onMounted in Default layout')
+  console.log('In default layout', enabled.value, state?.token)
   /* document.addEventListener('visibilitychange', async () => {
     if (document.visibilityState === 'visible') {
       const data = await $graphql.default.request(Globals)
@@ -102,8 +103,6 @@ onMounted(async () => {
     console.log('In SSG refresh layout data as state is not maintained after an error response')
     await $layoutData()
   }
-  classes.value.push({ 'has-scrolled': globalStore.sTop })
-  classes.value.push({ 'has-scrolled-past-header': globalStore.sTop >= 150 })
   await $alerts()
 })
 </script>

package.json

@@ -14,8 +14,7 @@
 		"lint": "eslint . --ext .vue,.js,.ts --ignore-path .gitignore",
 		"lint:fix": "eslint --fix . --ext .vue,.js,.ts --ignore-path .gitignore",
 		"typecheck": "nuxi typecheck",
-		"test": "pnpm lint && pnpm typecheck",
-		"library": ""
+		"test": "pnpm lint && pnpm typecheck"
 	},
 	"dependencies": {
 		"@nuxtjs/sitemap": "^5.1.1",
@@ -41,6 +40,6 @@
 		"nuxt-graphql-request": "^7.0.5",
 		"sass": "^1.66.1",
 		"ucla-library-design-tokens": "^5.22.0",
-		"ucla-library-website-components": "^3.14.1"
+		"ucla-library-website-components": "^3.24.0"
 	}
 }