Add logic to horizontally align items in the layout

composer.json

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

frontend/base/components/global/ParagraphImage.vue

@@ -6,6 +6,10 @@ const props = defineProps({
     type: Object as PropType<MediaImage>,
     required: true,
   },
+  align: {
+    type: String as PropType<'left' | 'right' | 'center'>,
+    default: 'left',
+  },
 })
 
 const nonce = useNonce()
@@ -14,14 +18,16 @@ const aspect = computed(() => props.image.mediaImage.width / props.image.mediaIm
 </script>
 
 <template>
-  <div>
-    <NuxtImg
-      :src="image.mediaImage.url"
-      :alt="image.mediaImage.alt ?? ''"
-      :width="Math.min(image.mediaImage.width, Math.ceil(1200))"
-      :height="Math.min(image.mediaImage.height, Math.ceil(1200 / aspect))"
-      :nonce="nonce"
-      loading="lazy"
-    />
-  </div>
+  <NuxtImg
+    :class="{
+      'ms-auto': align === 'right',
+      'mx-auto': align === 'center',
+    }"
+    :src="image.mediaImage.url"
+    :alt="image.mediaImage.alt ?? ''"
+    :width="Math.min(image.mediaImage.width, Math.ceil(1200))"
+    :height="Math.min(image.mediaImage.height, Math.ceil(1200 / aspect))"
+    :nonce="nonce"
+    loading="lazy"
+  />
 </template>

frontend/base/components/global/ParagraphSubtitle.vue

@@ -4,11 +4,21 @@ defineProps({
     type: String,
     required: true,
   },
+  align: {
+    type: String as PropType<'left' | 'right' | 'center'>,
+    default: 'left',
+  },
 })
 </script>
 
 <template>
-  <h3 class="text-2xl">
+  <h3
+    class="text-2xl"
+    :class="{
+      'text-end': align === 'right',
+      'text-center': align === 'center',
+    }"
+  >
     {{ title }}
   </h3>
 </template>

frontend/base/components/global/ParagraphTitle.vue

@@ -4,11 +4,21 @@ defineProps({
     type: String,
     required: true,
   },
+  align: {
+    type: String as PropType<'left' | 'right' | 'center'>,
+    default: 'left',
+  },
 })
 </script>
 
 <template>
-  <h2 class="text-3xl">
+  <h2
+    class="text-3xl"
+    :class="{
+      'text-end': align === 'right',
+      'text-center': align === 'center',
+    }"
+  >
     {{ title }}
   </h2>
 </template>

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

@@ -12,6 +12,7 @@ fragment paragraphImage on ParagraphImage {
       }
     }
   }
+  align
   composition {
     position {
       parentId

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

@@ -1,6 +1,7 @@
 fragment paragraphSubtitle on ParagraphSubtitle {
   __typename
   title
+  align
   composition {
     position {
       parentId

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

@@ -1,6 +1,7 @@
 fragment paragraphTitle on ParagraphTitle {
   __typename
   title
+  align
   composition {
     position {
       parentId