Add a container paragraph type

frontend/base/components/base/BasePageLayout.vue

@@ -59,6 +59,36 @@ const layout = computed<LayoutSection[]>(() => {
 
   return sections
 })
+
+const instance = getCurrentInstance()
+const defaultComponent = resolveComponent('ParagraphNotImplemented')
+
+function doesComponentExist(component: ParagraphUnion) {
+  return !!instance?.appContext.components[component.__typename ?? '']
+}
+
+function getDynamicComponent(component: ParagraphUnion) {
+  if (component.__typename === 'ParagraphFromLibrary')
+    return component.reusableParagraph.paragraphs.__typename
+
+  if (!doesComponentExist(component))
+    return defaultComponent
+
+  return component.__typename || 'ParagraphNotImplemented'
+}
+
+function getComponentProps(component: ParagraphUnion) {
+  if (component.__typename === 'ParagraphFromLibrary') {
+    const { __typename, composition, ...sanitisedComponent } = component.reusableParagraph.paragraphs
+    return sanitisedComponent
+  }
+
+  if (!doesComponentExist(component))
+    return { props: { type: component } }
+
+  const { __typename, composition, ...sanitisedComponent } = component
+  return sanitisedComponent
+}
 </script>
 
 <template>
@@ -82,15 +112,8 @@ const layout = computed<LayoutSection[]>(() => {
           :key="component_name"
         >
           <component
-            :is="component.__typename"
-            v-if="component.__typename !== 'ParagraphFromLibrary'"
-            v-bind="component"
-          />
-
-          <component
-            :is="component.reusableParagraph.paragraphs.__typename"
-            v-else-if="component.__typename === 'ParagraphFromLibrary'"
-            v-bind="component.reusableParagraph.paragraphs"
+            :is="getDynamicComponent(component)"
+            v-bind="getComponentProps(component)"
           />
         </template>
       </div>

frontend/base/components/paragraph/ParagraphContainer.global.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { ParagraphUnion } from '#build/graphql-operations'
+
+defineProps({
+  paragraphs: {
+    type: Object as PropType<ParagraphUnion[]>,
+    required: false,
+  },
+})
+</script>
+
+<template>
+  <div
+    v-for="{ __typename, ...paragraph } in paragraphs"
+    :key="paragraph.id"
+  >
+    <component
+      :is="__typename"
+      v-bind="paragraph"
+    />
+  </div>
+</template>

frontend/base/components/paragraph/ParagraphNotImplemented.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+defineProps({
+  props: {
+    type: Object,
+    default: () => ({}),
+  },
+})
+</script>
+
+<template>
+  <div>
+    <div class="flex items-center gap-2">
+      <Icon name="mdi:warning" />
+      <span>Not implemented yet</span>
+    </div>
+
+    <details>
+      <summary>Props</summary>
+      <pre>{{ props }}</pre>
+    </details>
+  </div>
+</template>

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

@@ -4,6 +4,7 @@
 
 #import "~/base/queries/fragments/paragraphs/paragraphUnion.fragment.gql"
 #import "~/base/queries/fragments/paragraphs/paragraphFromLibrary.fragment.gql"
+#import "~/base/queries/fragments/paragraphs/paragraphContainer.fragment.gql"
 
 fragment nodeBasicPage on NodeBasicPage {
   title
@@ -16,6 +17,7 @@ fragment nodeBasicPage on NodeBasicPage {
   layout {
     ...ParagraphUnion
     ...paragraphFromLibrary
+    ...paragraphContainer
   }
   translations {
     path

frontend/base/queries/fragments/paragraphs/paragraphContainer.fragment.gql

@@ -0,0 +1,14 @@
+#import "~/base/queries/fragments/paragraphs/paragraphUnion.fragment.gql"
+
+fragment paragraphContainer on ParagraphContainer {
+  __typename
+  paragraphs {
+    ...ParagraphUnion
+  }
+  composition {
+    position {
+      parentId
+      region
+    }
+  }
+}