Move the layouts in the frontend to a separate component

composer.json

@@ -20,7 +20,7 @@
     "require": {
         "composer/installers": "^2.0",
         "cweagans/composer-patches": "~1.0",
-        "dobefu/nuxtify_profile": "^1.0.0-alpha4",
+        "dobefu/nuxtify_profile": "^1.0.x-dev",
         "drupal/core-composer-scaffold": "^10.2",
         "drupal/core-recommended": "^10"
     },

frontend/components/base/PageLayout.vue

@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import type { NodeUnion, ParagraphUnion } from '#build/graphql-operations'
+import type { LayoutSection } from '~/types/layout-section'
+
+const props = defineProps({
+  page: {
+    type: Object as PropType<NodeUnion>,
+    required: true,
+  },
+})
+
+const layout = computed<LayoutSection[]>(() => {
+  if (!props.page.layout)
+    return []
+
+  const sections: ParagraphUnion[] = props.page.layout.filter(
+    item => item.__typename === 'ParagraphLayout',
+  )
+
+  sections.forEach((section: LayoutSection) => {
+    if (!props.page.layout)
+      return
+
+    const children = props.page.layout.filter(
+      item => item.composition?.position?.parentId === section.id,
+    )
+
+    section.children = {}
+
+    // Add the components to their respective regions.
+    for (const child of children) {
+      if (!child.composition.position?.region)
+        continue
+
+      if (!section.children[child.composition.position.region])
+        section.children[child.composition.position.region] = []
+
+      const component = { ...child } as any
+      delete component.composition
+
+      section.children[child.composition.position.region].push(component)
+    }
+
+    // Add empty regions to the layout.
+    for (const region of section.composition.layout?.regions || []) {
+      if (!section.children[region])
+        section.children[region] = []
+    }
+
+    // Sort the regions by the order they appear in the layout.
+    section.children = Object.fromEntries(
+      Object.entries(section.children).sort(([a], [b]) => {
+        const aIndex = section.composition.layout?.regions?.indexOf(a) ?? -1
+        const bIndex = section.composition.layout?.regions?.indexOf(b) ?? -1
+
+        return aIndex - bIndex
+      }),
+    )
+  })
+
+  return sections
+})
+</script>
+
+<template>
+  <div class="flex flex-col max-w-6xl gap-8 m-auto">
+    <BasePageTitle v-if="page?.showTitle">
+      {{ page?.title }}
+    </BasePageTitle>
+
+    <div
+      v-for="sections in layout"
+      :key="sections.id"
+      class="flex flex-wrap"
+    >
+      <div
+        v-for="(section, section_name) in sections.children"
+        :key="section_name"
+        class="flex-1"
+      >
+        <div
+          v-for="(component, component_name) in section"
+          :key="component_name"
+        >
+          <component
+            :is="component.__typename"
+            v-bind="component"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

frontend/nuxt.config.ts

@@ -116,7 +116,7 @@ export default defineNuxtConfig({
     },
     defaultLocale: 'en',
     detectBrowserLanguage: {
-      useCookie: true,
+      useCookie: false,
     },
     langDir: 'i18n',
     locales: [

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

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import type { NodeUnion, RouteInternal } from '#build/graphql-operations'
-import type { LayoutSection } from '~/types/layout-section'
 
 const config = useRuntimeConfig()
 
@@ -25,12 +24,9 @@ if (data.value?.data?.route === null)
   showError({ statusCode: 404, statusMessage: 'Not Found' })
 
 const page = ref<NodeUnion | undefined>(undefined)
-let layout = reactive<LayoutSection[]>([])
 
 function setPageData() {
   page.value = (data.value?.data?.route as RouteInternal)?.entity as NodeUnion || undefined
-
-  layout = formatLayout(page.value?.layout || [])
 }
 
 setPageData()
@@ -52,10 +48,10 @@ const i18nRoutes = computed(() => {
   const routes: { [key: string]: { slug: string } } = {}
 
   for (const translation of Object.values(page.value?.translations ?? {})) {
-    if (!translation.langcode.id || !translation.url)
+    if (!translation.langcode.id || !translation.path)
       continue
 
-    const slug = translation.url
+    const slug = translation.path
       .split('/')
       .filter(Boolean)
       .filter(part => part !== translation.langcode.id)
@@ -110,31 +106,8 @@ useHead({
 </script>
 
 <template>
-  <div class="flex flex-col max-w-6xl gap-8 m-auto">
-    <BasePageTitle v-if="page?.showTitle">
-      {{ page?.title }}
-    </BasePageTitle>
-
-    <div
-      v-for="sections in layout"
-      :key="sections.id"
-      class="flex flex-wrap"
-    >
-      <div
-        v-for="(section, section_name) in sections.children"
-        :key="section_name"
-        class="flex-1"
-      >
-        <div
-          v-for="(component, component_name) in section"
-          :key="component_name"
-        >
-          <component
-            :is="component.__typename"
-            v-bind="component"
-          />
-        </div>
-      </div>
-    </div>
-  </div>
+  <BasePageLayout
+    v-if="page"
+    :page="page"
+  />
 </template>

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

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import type { NodeUnion } from '#build/graphql-operations'
-import type { LayoutSection } from '~/types/layout-section'
 
 definePageMeta({
   layout: 'preview',
@@ -44,12 +43,9 @@ if (data.value?.data === null)
   showError({ statusCode: 404, statusMessage: 'Not Found' })
 
 const page = ref<NodeUnion | undefined>(undefined)
-let layout = reactive<LayoutSection[]>([])
 
 function setPageData() {
   page.value = data.value?.data?.preview as NodeUnion || undefined
-
-  layout = formatLayout(page.value?.layout || [])
 }
 
 setPageData()
@@ -69,31 +65,8 @@ onBeforeRouteLeave(() => {
 </script>
 
 <template>
-  <div class="flex flex-col max-w-6xl gap-8 m-auto">
-    <BasePageTitle v-if="page?.showTitle">
-      {{ page?.title }}
-    </BasePageTitle>
-
-    <div
-      v-for="sections in layout"
-      :key="sections.id"
-      class="flex flex-wrap"
-    >
-      <div
-        v-for="(section, section_name) in sections.children"
-        :key="section_name"
-        class="flex-1"
-      >
-        <div
-          v-for="(component, component_name) in section"
-          :key="component_name"
-        >
-          <component
-            :is="component.__typename"
-            v-bind="component"
-          />
-        </div>
-      </div>
-    </div>
-  </div>
+  <BasePageLayout
+    v-if="page"
+    :page="page"
+  />
 </template>

frontend/queries/fragments/nodes/nodeBasicPage.fragment.gql

@@ -24,7 +24,7 @@ fragment nodeBasicPage on NodeBasicPage {
     ...paragraphImage
   }
   translations {
-    url
+    path
     langcode {
       id
     }