From 74e1ce6922c4f745eb4df2e5919cbb0c31b6c72a Mon Sep 17 00:00:00 2001
From: Arthur Lorenz <arthur@utor.at>
Date: Thu, 12 Dec 2024 11:54:32 +0100
Subject: [PATCH 1/3] feat: LDP-2673 Make compatible with Drupal CMS blog
 recipe.

---
 assets/css/tailwind.css                | 58 ++++++++++++++++----------
 components/global/drupal-layout.vue    |  4 +-
 components/global/node--default.vue    |  2 +-
 components/global/node-blog-teaser.vue | 14 +++++++
 4 files changed, 52 insertions(+), 26 deletions(-)
 create mode 100644 components/global/node-blog-teaser.vue

diff --git a/assets/css/tailwind.css b/assets/css/tailwind.css
index f8b695a..e427e09 100644
--- a/assets/css/tailwind.css
+++ b/assets/css/tailwind.css
@@ -1,73 +1,73 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
- 
+
 @layer base {
   :root {
     --background: 0 0% 100%;
     --foreground: 224 71.4% 4.1%;
- 
+
     --muted: 220 14.3% 95.9%;
     --muted-foreground: 220 8.9% 46.1%;
- 
+
     --popover: 0 0% 100%;
     --popover-foreground: 224 71.4% 4.1%;
- 
+
     --card: 0 0% 100%;
     --card-foreground: 224 71.4% 4.1%;
- 
+
     --border: 220 13% 91%;
     --input: 220 13% 91%;
- 
+
     --primary: 220.9 39.3% 11%;
     --primary-foreground: 210 20% 98%;
- 
+
     --secondary: 220 14.3% 95.9%;
     --secondary-foreground: 220.9 39.3% 11%;
- 
+
     --accent: 220 14.3% 95.9%;
     --accent-foreground: 220.9 39.3% 11%;
- 
+
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 210 20% 98%;
- 
+
     --ring: 224 71.4% 4.1%;
- 
+
     --radius: 0.5rem;
   }
- 
+
   .dark {
     --background: 224 71.4% 4.1%;
     --foreground: 210 20% 98%;
- 
+
     --muted: 215 27.9% 16.9%;
     --muted-foreground: 217.9 10.6% 64.9%;
- 
+
     --popover: 224 71.4% 4.1%;
     --popover-foreground: 210 20% 98%;
- 
+
     --card: 224 71.4% 4.1%;
     --card-foreground: 210 20% 98%;
- 
+
     --border: 215 27.9% 16.9%;
     --input: 215 27.9% 16.9%;
- 
+
     --primary: 210 20% 98%;
     --primary-foreground: 220.9 39.3% 11%;
- 
+
     --secondary: 215 27.9% 16.9%;
     --secondary-foreground: 210 20% 98%;
- 
+
     --accent: 215 27.9% 16.9%;
     --accent-foreground: 210 20% 98%;
- 
+
     --destructive: 0 62.8% 30.6%;
     --destructive-foreground: 210 20% 98%;
- 
+
     --ring: 216 12.2% 83.9%;
   }
 }
- 
+
 @layer base {
   * {
     @apply border-border;
@@ -75,4 +75,16 @@
   body {
     @apply bg-background text-foreground;
   }
-}
\ No newline at end of file
+}
+
+.visually-hidden {
+   @apply hidden;
+ }
+
+.align-right {
+  @apply float-right ml-4;
+}
+
+.align-left {
+  @apply float-left mr-4;
+}
diff --git a/components/global/drupal-layout.vue b/components/global/drupal-layout.vue
index f6956c8..940ad6b 100644
--- a/components/global/drupal-layout.vue
+++ b/components/global/drupal-layout.vue
@@ -2,8 +2,8 @@
   <div
     class="layout-section"
   >
-    <div v-if="content">
-      <component :is="renderCustomElements(content)" />
+    <div v-for="element in content">
+      <component :is="renderCustomElements(element)" />
     </div>
     <div v-if="first">
       <component :is="renderCustomElements(first)" />
diff --git a/components/global/node--default.vue b/components/global/node--default.vue
index 846ad69..aecde4c 100644
--- a/components/global/node--default.vue
+++ b/components/global/node--default.vue
@@ -4,7 +4,7 @@
     <div v-if="image" class="prose max-w-none" v-html="image.content" />
     <div v-if="body" class="prose dark:prose-invert max-w-none" v-html="body" />
     <div v-if="sections">
-      <component :is="useDrupalCe().renderCustomElements(sections)" />
+      <component v-for="section in sections" :is="useDrupalCe().renderCustomElements(section)" />
     </div>
   </div>
 </template>
diff --git a/components/global/node-blog-teaser.vue b/components/global/node-blog-teaser.vue
new file mode 100644
index 0000000..8f62d55
--- /dev/null
+++ b/components/global/node-blog-teaser.vue
@@ -0,0 +1,14 @@
+<template>
+  <nuxt-link class="node" :to="path.pathAlias">
+    <h2 v-if="title" class="mb-2 text-3xl font-semibold">{{ title }}</h2>
+    <div v-if="featuredImage" class="prose max-w-none" v-html="featuredImage.mediaImage.content" />
+  </nuxt-link>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  title?: string;
+  featuredImage?: object;
+  path?: object;
+}>()
+</script>

From b691708425a8d4a326f70ac84b76b47f3575a8fa Mon Sep 17 00:00:00 2001
From: Alexandru <videoloss3@gmail.com>
Date: Mon, 23 Dec 2024 13:38:58 +0200
Subject: [PATCH 2/3] LDP-2673: Small fixes

---
 assets/css/tailwind.css                | 4 ++--
 components/global/node-blog-teaser.vue | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/assets/css/tailwind.css b/assets/css/tailwind.css
index e427e09..ce790b2 100644
--- a/assets/css/tailwind.css
+++ b/assets/css/tailwind.css
@@ -78,8 +78,8 @@
 }
 
 .visually-hidden {
-   @apply hidden;
- }
+  @apply sr-only;
+}
 
 .align-right {
   @apply float-right ml-4;
diff --git a/components/global/node-blog-teaser.vue b/components/global/node-blog-teaser.vue
index 8f62d55..a71d34d 100644
--- a/components/global/node-blog-teaser.vue
+++ b/components/global/node-blog-teaser.vue
@@ -1,7 +1,7 @@
 <template>
   <nuxt-link class="node" :to="path.pathAlias">
     <h2 v-if="title" class="mb-2 text-3xl font-semibold">{{ title }}</h2>
-    <div v-if="featuredImage" class="prose max-w-none" v-html="featuredImage.mediaImage.content" />
+    <div v-if="featuredImage && featuredImage.mediaImage" class="prose max-w-none" v-html="featuredImage.mediaImage.content" />
   </nuxt-link>
 </template>
 

From 422eb748ea958e4e8eb11deaf81e5c82cf19c962 Mon Sep 17 00:00:00 2001
From: Alexandru <videoloss3@gmail.com>
Date: Mon, 23 Dec 2024 14:06:50 +0200
Subject: [PATCH 3/3] LDP-2673: Update code

---
 components/global/drupal-layout.vue | 4 ++--
 components/global/node--default.vue | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/global/drupal-layout.vue b/components/global/drupal-layout.vue
index 940ad6b..88e9835 100644
--- a/components/global/drupal-layout.vue
+++ b/components/global/drupal-layout.vue
@@ -2,8 +2,8 @@
   <div
     class="layout-section"
   >
-    <div v-for="element in content">
-      <component :is="renderCustomElements(element)" />
+    <div v-if="content">
+      <component :is="renderCustomElements(element)" v-for="(element, index) in content" :key="index" />
     </div>
     <div v-if="first">
       <component :is="renderCustomElements(first)" />
diff --git a/components/global/node--default.vue b/components/global/node--default.vue
index aecde4c..647dece 100644
--- a/components/global/node--default.vue
+++ b/components/global/node--default.vue
@@ -4,7 +4,7 @@
     <div v-if="image" class="prose max-w-none" v-html="image.content" />
     <div v-if="body" class="prose dark:prose-invert max-w-none" v-html="body" />
     <div v-if="sections">
-      <component v-for="section in sections" :is="useDrupalCe().renderCustomElements(section)" />
+      <component :is="useDrupalCe().renderCustomElements(section)" v-for="(section, index) in sections" :key="index" />
     </div>
   </div>
 </template>