feat: Support Lupus Decoupled Drupal recipes.

layers/base/components/global/drupal-view--default.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="view">
+    <h1 class="text-4xl font-bold mb-8 text-center tracking-tight">{{ title }}</h1>
+    <div class="lg:flex lg:justify-around">
+      <component
+        :is="renderCustomElements(row)"
+        v-for="(row, index) in rows"
+        :key="index"
+        class="w-full mb-8 lg:w-[33%]"
+      />
+    </div>
+    <div class="text-center">
+      <DrupalViewsPagination
+        :total-pages="pager.totalPages"
+        :current="pager.current"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  title: string
+  rows?: object[]
+  pager?: object
+}>()
+
+const {renderCustomElements} = useDrupalCe()
+</script>

layers/base/components/global/media-image--default.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="relative">
+    <img
+      :src="image.url"
+      :title="image.title"
+      :alt="image.alt"
+      :width="image.width"
+      :height="image.height"
+    >
+    <div v-if="copyright" class="absolute bottom-0 right-0 bg-black/50 text-white text-xs px-2 py-1">
+      {{ copyright }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  image?: object
+  copyright?: string
+}>()
+</script>

layers/base/components/global/node--default.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="max-w-4xl mx-auto px-4 py-8">
+    <div class="mb-8">
+      <component :is="useDrupalCe().renderCustomElements(featuredImage)" class="w-full h-auto rounded-lg shadow-lg mb-6" />
+      <h1 v-if="title" class="text-4xl font-bold mb-4">{{ title }}</h1>
+    </div>
+    <div class="prose max-w-none mb-8 dark:prose-invert" v-html="content"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  // Layout-builder support.
+  sections?: object;
+  title?: string;
+  featuredImage?: object;
+  content?: string;
+}>();
+</script>

layers/base/nuxt.config.ts

@@ -0,0 +1,5 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+
+})
+

layers/blog/components/global/node-blog-card.vue

@@ -0,0 +1,52 @@
+<template>
+  <nuxt-link :to="path.pathAlias" class="block">
+    <article class="rounded-lg border border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600 transition-all duration-200 bg-white dark:bg-gray-800 shadow-sm hover:shadow-md dark:shadow-gray-900/50 overflow-hidden">
+      <div class="overflow-hidden">
+        <component
+          :is="renderCustomElements(featuredImage)"
+          class="w-full h-full object-cover transition-transform duration-300 hover:scale-105"
+        />
+      </div>
+      <div class="p-4">
+        <h2 v-if="title" class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2">
+          {{ title }}
+        </h2>
+        <div v-if="author || created" class="flex items-center gap-3 text-xs text-gray-600 dark:text-gray-400">
+          <span v-if="author" class="flex items-center gap-1">
+            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
+            </svg>
+            {{ author }}
+          </span>
+          <span v-if="created" class="flex items-center gap-1">
+            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
+            </svg>
+            {{ formatDate(created) }}
+          </span>
+        </div>
+      </div>
+    </article>
+  </nuxt-link>
+</template>
+
+<script setup lang="ts">
+const { renderCustomElements } = useDrupalCe()
+defineProps<{
+  title?: String;
+  path?: object;
+  featuredImage?: CustomElementContent;
+  author?: string;
+  created?: string;
+}>()
+
+const formatDate = (dateString: string) => {
+  if (!dateString) return '';
+  const date = new Date(dateString);
+  return new Intl.DateTimeFormat('en-US', {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric'
+  }).format(date);
+}
+</script>

layers/blog/components/global/node-blog-full.vue

@@ -1,25 +1,45 @@
 <template>
-    <div class="node">
-      <h2 v-if="title">Blog: {{ title }}</h2>
-      <slot name="image">
-        <component :is="useDrupalCe().renderCustomElements($attrs.image)" />
-      </slot>
-      <slot name="body">
-        <component :is="useDrupalCe().renderCustomElements($attrs.body)" />
-      </slot>
+  <div class="max-w-4xl mx-auto px-4 py-8">
+    <div class="mb-8">
+      <component :is="useDrupalCe().renderCustomElements(featuredImage)" class="w-full h-auto rounded-lg shadow-lg mb-6" />
+      <h1 v-if="title" class="text-4xl font-bold mb-4">{{ title }}</h1>
+      <div v-if="author || created" class="flex items-center gap-4 text-sm text-gray-600 dark:text-gray-400">
+        <span v-if="author" class="flex items-center gap-1">
+          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
+          </svg>
+          {{ author }}
+        </span>
+        <span v-if="created" class="flex items-center gap-1">
+          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
+          </svg>
+          {{ formatDate(created) }}
+        </span>
+      </div>
     </div>
-  </template>
-
-  <script setup lang="ts">
-  defineSlots<{
-    body();
-    image();
-  }>()
-  defineProps<{
-    title?: string;
-    type?: string;
-    created?: number | string;
-    // Layout-builder support.
-    sections?: object;
-  }>()
-  </script>
+    <div class="prose max-w-none mb-8 dark:prose-invert" v-html="content"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  // Layout-builder support.
+  sections?: object;
+  title?: string;
+  featuredImage?: object;
+  content?: string;
+  author?: string;
+  created?: string;
+}>();
+
+const formatDate = (dateString: string) => {
+  if (!dateString) return '';
+  const date = new Date(dateString);
+  return new Intl.DateTimeFormat('en-US', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric'
+  }).format(date);
+};
+</script>

layers/case-studies/components/global/node-case-study-card.vue

@@ -0,0 +1,26 @@
+<template>
+  <nuxt-link :to="path.pathAlias" class="block">
+    <article class="rounded-lg border border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600 transition-all duration-200 bg-white dark:bg-gray-800 shadow-sm hover:shadow-md dark:shadow-gray-900/50 overflow-hidden">
+      <div class="overflow-hidden">
+        <component
+          :is="renderCustomElements(featuredImage)"
+          class="w-full h-full object-cover transition-transform duration-300 hover:scale-105"
+        />
+      </div>
+      <div class="p-4">
+        <h2 v-if="title" class="text-lg font-semibold text-gray-900 dark:text-gray-100">
+          {{ title }}
+        </h2>
+      </div>
+    </article>
+  </nuxt-link>
+</template>
+
+<script setup lang="ts">
+const { renderCustomElements } = useDrupalCe()
+defineProps<{
+  title?: String;
+  path?: object;
+  featuredImage?: CustomElementContent;
+}>()
+</script>

layers/case-studies/components/global/node-case-study-full.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="max-w-4xl mx-auto px-4 py-8">
+    <div class="mb-8">
+      <component :is="useDrupalCe().renderCustomElements(featuredImage)" class="w-full h-auto rounded-lg shadow-lg mb-6" />
+      <component :is="useDrupalCe().renderCustomElements(clientLogo)" class="w-80 mb-6" />
+      <h1 v-if="title" class="text-4xl font-bold mb-4">{{ title }}</h1>
+    </div>
+    <div class="prose max-w-none mb-8 dark:prose-invert" v-html="content"></div>
+    <a v-if="clientLink" :href="clientLink.clientLinkUri" target="_blank" class="inline-block px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg shadow-md transition-colors duration-200">Visit website</a>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  // Layout-builder support.
+  sections?: object;
+  title?: string;
+  featuredImage?: object;
+  clientLogo?: object;
+  clientLink?: object;
+  content?: string;
+}>();
+</script>

layers/case-studies/nuxt.config.ts

@@ -0,0 +1,3 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+})

layers/events/components/global/node-event-card.vue

@@ -0,0 +1,26 @@
+<template>
+  <nuxt-link :to="path.pathAlias" class="block">
+    <article class="rounded-lg border border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600 transition-all duration-200 bg-white dark:bg-gray-800 shadow-sm hover:shadow-md dark:shadow-gray-900/50 overflow-hidden">
+      <div class="overflow-hidden">
+        <component
+          :is="renderCustomElements(featuredImage)"
+          class="w-full h-full object-cover transition-transform duration-300 hover:scale-105"
+        />
+      </div>
+      <div class="p-4">
+        <h2 v-if="title" class="text-lg font-semibold text-gray-900 dark:text-gray-100">
+          {{ title }}
+        </h2>
+      </div>
+    </article>
+  </nuxt-link>
+</template>
+
+<script setup lang="ts">
+const { renderCustomElements } = useDrupalCe()
+defineProps<{
+  title?: String;
+  path?: object;
+  featuredImage?: CustomElementContent;
+}>()
+</script>

layers/events/components/global/node-event-full.vue

@@ -0,0 +1,99 @@
+<template>
+  <div class="max-w-4xl mx-auto px-4 py-8">
+    <div class="mb-8">
+      <component :is="useDrupalCe().renderCustomElements(featuredImage)" class="w-full h-auto rounded-lg shadow-lg mb-6" />
+      <h1 v-if="title" class="text-4xl font-bold mb-4">{{ title }}</h1>
+    </div>
+    <div class="bg-white rounded-lg shadow-md p-6 mb-8">
+      <div v-if="date" class="mb-4">
+        <h3 class="text-lg font-semibold mb-2">Date:</h3>
+        <p>{{ formatDate(date.value) }} - {{ formatDate(date.endValue) }}</p>
+      </div>
+      <div v-if="locationName" class="mb-4">
+        <h3 class="text-lg font-semibold mb-2">Venue:</h3>
+        <p>{{ locationName }}</p>
+      </div>
+      <div v-if="locationAddress" class="mb-4">
+        <p>{{ locationAddress.addressLine1 }}</p>
+        <p>{{ locationAddress.locality }},
+          {{ locationAddress.administrativeArea }} {{ locationAddress.postalCode }}</p>
+      </div>
+      <div v-if="link" class="mb-4">
+        <a :href="link.uri" target="_blank">{{ link.title }}</a>
+      </div>
+    </div>
+    <div class="prose max-w-none mb-8 dark:prose-invert" v-html="content"></div>
+    <div v-if="geofield" class="rounded-lg overflow-hidden shadow-lg">
+      <div class="h-[400px]">
+        <LMap
+          ref="map"
+          :zoom="zoom"
+          :center="latlng"
+          :use-global-leaflet="false"
+          class="h-full w-full"
+        >
+          <LTileLayer
+            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+            attribution="&copy; <a href='https://www.openstreetmap.org/'>OpenStreetMap</a> contributors"
+            layer-type="base"
+            name="OpenStreetMap"
+          />
+          <LMarker :lat-lng="latlng" />
+        </LMap>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { LatLngExpression } from 'leaflet';
+
+const props = defineProps<{
+  // Layout-builder support.
+  sections?: object;
+  title?: string;
+  featuredImage?: object;
+  content?: string;
+  geofield?: {
+    lat: number;
+    lon: number;
+  };
+  date?: {
+    value: string;
+    endValue: string;
+    duration: string;
+    rrule: string;
+    rruleIndex: string;
+    timezone: string;
+  };
+  locationName?: string;
+  locationAddress?: {
+    addressLine1: string;
+    locality: string;
+    administrativeArea: string;
+    postalCode: string;
+  };
+  link?: {
+    uri: string;
+    title: string;
+  };
+}>();
+
+const zoom = ref(13);
+const latlng = computed<LatLngExpression>(() => {
+  if (props.geofield) {
+    return [props.geofield.lat, props.geofield.lon];
+  }
+  return [0, 0];
+});
+
+const formatDate = (timestamp: string) => {
+  if (!timestamp) return '';
+  const date = new Date(Number(timestamp) * 1000);
+  return new Intl.DateTimeFormat('en-US', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric'
+  }).format(date);
+};
+</script>

layers/events/nuxt.config.ts

@@ -0,0 +1,4 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  modules: ['@nuxtjs/leaflet']
+})