Update the Nuxtify installation profile

composer.json

@@ -80,6 +80,11 @@
             "web/themes/custom/{$name}": [
                 "type:drupal-custom-theme"
             ]
+        },
+        "patches": {
+            "drupal/layout_paragraphs": {
+                "3397222 - Widget is hidden if untranslatable fields are hidden": "https://git.drupalcode.org/project/layout_paragraphs/-/merge_requests/145.diff"
+            }
         }
     }
 }

frontend/base/layouts/preview.vue

@@ -1,8 +1,13 @@
 <script setup lang="ts">
+useHead({
+  bodyAttrs: {
+    class: '!static',
+  },
+})
 </script>
 
 <template>
-  <div class="flex flex-col justify-between flex-1 gap-8 px-4 py-8 md:px-8">
+  <div class="flex flex-col justify-between flex-1 gap-8 px-4 pb-8 md:px-8">
     <main class="flex-1 w-full mx-auto">
       <slot />
     </main>

frontend/base/nuxt.config.ts

@@ -35,11 +35,6 @@ export default defineNuxtConfig({
   },
 
   routeRules: {
-    '/**': {
-      cache: {
-        maxAge: process.env.NODE_ENV === 'development' ? 0 : 60,
-      },
-    },
     '/api/**': {
       robots: false,
       sitemap: false,

frontend/base/pages/preview/[...slug].vue

@@ -1,11 +1,13 @@
 <script setup lang="ts">
-import type { NodeUnion } from '#build/graphql-operations'
+import type { NodeUnion, RouteInternal, RoutePreviewQuery, RouteQuery } from '#build/graphql-operations'
 
 const { finalizePendingLocaleChange } = useI18n()
 
 // Finalize the pending locale change before fetching the route data.
 await finalizePendingLocaleChange()
 
+const { locale } = useI18n()
+
 definePageMeta({
   layout: 'preview',
 })
@@ -18,6 +20,9 @@ if (process.client) {
   watch(
     windowHeight,
     () => {
+      if (windowHeight.value <= 0)
+        return
+
       window.parent.postMessage(
         { name: 'setFrameHeight', height: windowHeight.value },
         config.public.backendUrl,
@@ -33,24 +38,46 @@ const slug = route.params.slug
 const path = ref<string>(slug[0] || '' as string)
 const token = ref<string>(slug[1] || '' as string)
 
-const { data } = await useAsyncData(
-  'routePreview',
-  async () => await useGraphqlQuery(
+const data = ref<NodeUnion | undefined>(undefined)
+
+if (path.value && token.value && path.value !== 'node') {
+  const { data: previewData } = await useAsyncData(
     'routePreview',
-    {
-      id: `${path.value}`,
-      token: token.value,
-    },
-  ),
-)
+    async () => await useGraphqlQuery(
+      'routePreview',
+      {
+        id: `${path.value}`,
+        token: token.value,
+      },
+    ),
+  )
+
+  data.value = previewData.value?.data.preview as NodeUnion
+}
+else {
+  path.value = Array.isArray(route.params.slug) ? route.params.slug.join('/') : ''
+
+  const { data: pageData } = await useAsyncData(
+    'routePreview',
+    async () => await useGraphqlQuery(
+      'route',
+      {
+        path: `/${path.value}`,
+        langcode: locale.value,
+      },
+    ),
+  )
+
+  data.value = (pageData.value?.data.route as RouteInternal)?.entity as NodeUnion
+}
 
-if (data.value?.data === null)
+if (data.value === null)
   showError({ statusCode: 404, statusMessage: 'Not Found' })
 
 const page = ref<NodeUnion | undefined>(undefined)
 
 function setPageData() {
-  page.value = data.value?.data?.preview as NodeUnion || undefined
+  page.value = data.value || undefined
 }
 
 setPageData()