feat: LDP-2673 Make compatible with Drupal CMS blog recipe.

assets/css/tailwind.css

@@ -1,78 +1,90 @@
 @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;
   }
   body {
     @apply bg-background text-foreground;
   }
-}
+}
+
+.visually-hidden {
+   @apply hidden;
+ }
+
+.align-right {
+  @apply float-right ml-4;
+}
+
+.align-left {
+  @apply float-left mr-4;
+}

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)" />

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>

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>