@iqual/nuxt-icms 1.1.0 → 1.2.1

package/assets/css/ckeditor.css

@@ -12,4 +12,8 @@
       @apply list-disc;
     }
   }
+
+  strong {
+    @apply font-bold;
+  }
 }

package/assets/css/components/container.css

@@ -1,6 +1,6 @@
 @layer components {
   .container {
-    @apply w-full px-4;
+    @apply max-w-full px-4;
 
     @screen md {
       @apply px-8;
@@ -11,7 +11,7 @@
     }
 
     @screen xl {
-      @apply mx-auto w-[1380px];
+      @apply mx-auto max-w-[1380px];
     }
   }
 }

package/assets/css/tailwind.css

@@ -2,8 +2,8 @@
 /* @import 'vue3-carousel/dist/carousel.css'; */
 
 /* Components */
-@import './components/container.css';
 @import './components/grid-container.css';
+@import './components/container.css';
 @import './components/ck-content.css';
 @import './components/link.css';
 @import './components/dialog.css';

package/assets/css/typography.css

@@ -48,6 +48,10 @@
   }
 
   .ck-content {
+    strong {
+      @apply font-bold;
+    }
+
     a {
       @apply underline;
     }

package/assets/symbols/download.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 16 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.66634 0.666656V3.99999C9.66634 4.44202 9.84194 4.86594 10.1545 5.1785C10.4671 5.49106 10.891 5.66666 11.333 5.66666H14.6663M10.4997 0.666656H2.99967C2.55765 0.666656 2.13372 0.842251 1.82116 1.15481C1.5086 1.46737 1.33301 1.8913 1.33301 2.33332V15.6667C1.33301 16.1087 1.5086 16.5326 1.82116 16.8452C2.13372 17.1577 2.55765 17.3333 2.99967 17.3333H12.9997C13.4417 17.3333 13.8656 17.1577 14.1782 16.8452C14.4907 16.5326 14.6663 16.1087 14.6663 15.6667V4.83332L10.4997 0.666656Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" />
+</svg>

package/bundles.ts

@@ -12,6 +12,9 @@ const ICMS_BUNDLES = [
   '@iqual/nuxt-icms-news',
   '@iqual/nuxt-icms-pressrelease',
   '@iqual/nuxt-icms-people',
+  '@iqual/nuxt-icms-product',
+  '@iqual/nuxt-icms-project',
+  '@iqual/nuxt-icms-search',
 ] as const
 
 /**
@@ -42,7 +45,7 @@ export function collectProjectDeps(): ProjectDeps {
 /**
  * Return auto-loaded ICMS bundle Nuxt Layers that
  * can be consumed by the Nuxt config of root projects.
- * 
+ *
  */
 export function buildBundleStack(): string[] {
   const deps = collectProjectDeps()

package/components/Blokkli/TextMedia/index.vue

@@ -11,12 +11,11 @@ const blokkliData = defineBlokkli({
   bundle: 'icms_layout_text_media',
   globalOptions: [
     'textWidth',
-    'textAlign',
     'spacingBottom',
     'spacingTop',
     'colorScheme',
     'buttonAlignment',
+    'reverseColumns',
   ],
 })
-
 </script>

package/components/DesignSystem/Atoms/Caption.vue

@@ -0,0 +1,15 @@
+<template>
+  <p :class="captionClass">{{ caption }}</p>
+</template>
+
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    caption?: string
+    captionClass?: string
+  }>(),
+  {
+    captionClass: 'text-gray-300 text-lg',
+  },
+)
+</script>

package/components/DesignSystem/Atoms/LinkListItem.vue

@@ -0,0 +1,21 @@
+<template>
+  <NuxtLink v-if="link"
+    class="block border-b-1 first:border-t-1 py-4"
+    :to="link"
+    :title="title"
+    :prefetch="true"
+  >
+    <span v-if="title" class="block">{{ title }}</span>
+    <span v-if="description" class="block text-sm font-light mt-2" v-html="description" />
+  </NuxtLink>
+</template>
+
+<script lang="ts" setup>
+
+const props = defineProps<{
+  title?: String
+  description?: String
+  link?: string
+}>()
+
+</script>

package/components/DesignSystem/Molecules/MediaSlider.vue

@@ -1,15 +1,14 @@
 <template>
   <div :class="cn('@container', 'my-6', sliderClass)">
-    <Carousel
-      :active="media && media?.length > 1"
-    >
+    <Carousel :active="media && media?.length > 1">
       <CarouselContent>
         <CarouselItem
           v-for="(element, index) in media"
           :key="index"
-          class="flex flex-col justify-center pl-4"
+          class="flex cursor-pointer flex-col justify-center pl-4"
+          @click="openLightbox(index)"
         >
-          <Media 
+          <Media
             v-if="element"
             :media="element"
             :showCaption="showCaption"
@@ -21,19 +20,27 @@
       </CarouselContent>
       <CarouselPrevious
         v-if="media && media?.length > 1"
-        class="left-4 @3xs:left-8 @2xs:left-10 @md:left-16"
+        class="@3xs:left-8 @2xs:left-10 @md:left-16 left-4"
         :class="carouselButton({ colorScheme })"
       >
         <ChevronLeft :size="24" :stroke-width="1" />
       </CarouselPrevious>
       <CarouselNext
         v-if="media && media?.length > 1"
-        class="right-4 @3xs:right-8 @2xs:right-10 @md:right-16"
+        class="@3xs:right-8 @2xs:right-10 @md:right-16 right-4"
         :class="carouselButton({ colorScheme })"
       >
         <ChevronRight :size="24" :stroke-width="1" />
       </CarouselNext>
     </Carousel>
+
+    <FsLightbox
+      :toggler="toggleLightbox"
+      :sources="sources"
+      :slide="currentSlide"
+      :customAttributes="customAttributes"
+      :captions="captions"
+    />
   </div>
 </template>
 
@@ -42,8 +49,9 @@ import cn from '@iqual/nuxt-icms/composables/useCn'
 import { tv } from 'tailwind-variants'
 import { ChevronLeft, ChevronRight } from 'lucide-vue-next'
 import type { MediaFragment } from '#graphql-operations'
+import FsLightbox from 'fslightbox-vue'
 
-defineProps<{
+const props = defineProps<{
   media?: (MediaFragment | null)[] | undefined
   sliderClass?: string
   mediaClass?: string
@@ -53,6 +61,15 @@ defineProps<{
   elementClass?: string
 }>()
 
+const {
+  toggleLightbox,
+  currentSlide,
+  openLightbox,
+  sources,
+  customAttributes,
+  captions,
+} = useLightbox(props.media)
+
 const carouselButton = tv({
   base: 'size-10 border-none disabled:opacity-40 @sm:size:12 @md:size:16 [&_svg]:size-auto',
   variants: {

package/components/DesignSystem/Organisms/Map.vue

@@ -0,0 +1,61 @@
+<template>
+  <div
+    class="relative"
+    :style="{ height: props.height }"
+    :class="{ 'flex items-center justify-center': props.isEditing }"
+  >
+    <ClientOnly>
+      <MglMap
+        :map-style="props.style"
+        :center="props.center"
+        :zoom="props.zoom"
+        :height="props.height"
+        >
+        <MglNavigationControl />
+
+        <mgl-marker
+          v-for="(location, index) in (locations || [])"
+          :key="index"
+          :coordinates="[location.coordinates?.lng || 0, location.coordinates?.lat || 0]"
+          :color="location.color || props.markerColor"
+        >
+          <mgl-popup>
+            <h6>{{ location.label }}</h6>
+            <div v-html="location.description"></div>
+          </mgl-popup>
+        </mgl-marker>
+      </MglMap>
+    </ClientOnly>
+  </div>
+</template>
+
+<script lang="ts" setup>
+interface Location {
+  label?: string
+  coordinates?: {
+    lat: number
+    lng: number
+  }
+  description?: string
+  color?: string
+}
+
+interface Props {
+  style?: string
+  zoom?: number
+  center?: [number, number]
+  height?: string
+  locations?: Location[]
+  colorScheme?: string
+  isEditing?: boolean
+  markerColor?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  style: 'https://tiles.openfreemap.org/styles/liberty',
+  center: () => [8.2267, 46.8011],
+  zoom: 12,
+  height: '500px',
+  markerColor: '#e95e27'
+})
+</script>

package/components/Media/Image/index.vue

@@ -20,7 +20,6 @@
       :class="elementClass"
       :loading="imageLoading"
     />
-
     <figcaption v-if="showCaption && media?.caption" 
       v-text="media?.caption" 
       :class="figcaptionClass" />
@@ -28,9 +27,6 @@
 </template>
 
 <script lang="ts" setup>
-import cn from '@iqual/nuxt-icms/composables/useCn'
-import { checkDensities, parseDensities, parseSize, parseSizes } from '/node_modules/@nuxt/image/dist/runtime/utils'
-import type { ImageOptions, ImageSizesOptions, CreateImageOptions, ResolvedImage, ImageCTX, $Img, ImageSizes, ImageSizesVariant } from '/node_modules/@nuxt/image/dist/runtime/types'
 import type { MediaImageFragment } from '#graphql-operations'
 
 const props = withDefaults(
@@ -51,165 +47,11 @@ const props = withDefaults(
   },
 )
 
-// Get the data.
-const img = useImage()
-const baseUrl = useRuntimeConfig().public.imageBaseUrl
-const sourceImage = baseUrl + props?.media?.sourceUrl?.path
-
-const placeHolderImage = computed(() => {
-  return img(sourceImage, {format: 'webp', width: 100, blur: 100})
-})
-
-const imageSources = computed(() => {
-  const sources = []
-  const imgSizes = props.imageSizes ?? Object.keys(img.options.screens).map(key => `${key}:100vw`).join(' ');
-
-  // No aspect ratios provided.
-  if (!props?.imageAspectRatios) {
-    sources.push(img.getSizes(sourceImage, {
-      sizes: imgSizes,
-      modifiers: {
-        format: 'webp'
-      }
-    }));
-    return sources
-  }
-
-  // Aspect ratios provided.
-  const parsedAspectRatios = parseSizes(props?.imageAspectRatios)
-  const parsedImageSizes = parseSizes(imgSizes)
-  const densities = img.options.densities
-  const keys = Object.keys(parsedImageSizes);
-  const lastKey = keys[keys.length - 1];
-
-  for (const keyAspectRatios in parsedAspectRatios) {
-    const [l, h]  = parsedAspectRatios[keyAspectRatios].split('/').map(Number);
-    const hwRatio = (l && h) ? h / l : 0
-    const sizeVariants = []
-    const srcsetVariants = [] 
-
-    let screenSizes = Object.keys(parsedImageSizes)
-    if (Object.keys(parsedImageSizes).includes(keyAspectRatios)) {
-      const minSizeIndex = Object.keys(parsedImageSizes).indexOf(keyAspectRatios)
-      screenSizes = Object.keys(parsedImageSizes).slice(minSizeIndex)
-    }
-
-    for (const index in screenSizes) {
-      const screenSize = screenSizes[index]
-
-      const variant = getSizesVariant(screenSize, String(parsedImageSizes[screenSize]), hwRatio)
-      if (variant === undefined) {
-        continue
-      }
-
-      // Add size variant with 'media'.
-      sizeVariants.push({
-        size: variant.size,
-        screenMaxWidth: variant.screenMaxWidth,
-        media: `(max-width: ${variant.screenMaxWidth}px)`,
-      })
-
-      // Add srcset variants and ignore densities (for current 'size' processed).
-      srcsetVariants.push({
-        width: variant._cWidth,
-        src: img(sourceImage, {
-          width: variant._cWidth ? variant._cWidth : undefined,
-          height: variant._cHeight ? variant._cHeight : undefined,
-          fit: 'cover',
-          format: 'webp'
-        }),
-      })
-
-      // Make sure to not create duplicate size variants for the same screen size.
-      if (keyAspectRatios != screenSize && Object.keys(parsedAspectRatios).includes(screenSize)) {
-        break
-      }
-    }
-
-    const media = sizeVariants.slice(-1)[0]?.media
-    finaliseSizeVariants(sizeVariants)
-    finaliseSrcsetVariants(srcsetVariants)
-
-    const sizesVal = sizeVariants.length ? sizeVariants.map(v => `${v.media ? v.media + ' ' : ''}${v.size}`).join(', ') : undefined
-    const suffix = sizesVal ? 'w' : 'x'
-    const srcsetVal = srcsetVariants.map(v => `${v.src} ${v.width}${suffix}`).join(', ')
-
-    let source = {
-      sizes: sizesVal,
-      srcset: srcsetVal,
-    }
-
-    if (keyAspectRatios != Object.keys(parsedAspectRatios).slice(-1)[0]) {
-      source.media = media
-    }
-    sources.push(source)
-  }
-  return sources
+const { placeHolderImage, imageSources } = useImageSources({
+  media: toRef(props, 'media'),
+  imageAspectRatios: toRef(props, 'imageAspectRatios'),
+  imageSizes: toRef(props, 'imageSizes'),
 })
 
-// Helper function, copied from NuxtImage.
-function getSizesVariant(key: string, size: string, hwRatio: number): ImageSizesVariant | undefined {
-  const screenMaxWidth = (img.options.screens && img.options.screens[key]) || Number.parseInt(key)
-  const isFluid = size.endsWith('vw')
-  if (!isFluid && /^\d+$/.test(size)) {
-    size = size + 'px'
-  }
-  if (!isFluid && !size.endsWith('px')) {
-    return undefined
-  }
-  let _cWidth = Number.parseInt(size)
-  if (!screenMaxWidth || !_cWidth) {
-    return undefined
-  }
-  if (isFluid) {
-    _cWidth = Math.round((_cWidth / 100) * screenMaxWidth)
-  }
-  const _cHeight = Math.round(_cWidth * hwRatio)
-  return {
-    size,
-    screenMaxWidth,
-    _cWidth,
-    _cHeight,
-  }
-}
-
-// Helper function, copied from NuxtImage.
-function finaliseSizeVariants(sizeVariants: any[]) {
-  sizeVariants.sort((v1, v2) => v1.screenMaxWidth - v2.screenMaxWidth)
-
-  // de-duplicate size variants (by key `media`)
-  let previousMedia = null
-  for (let i = sizeVariants.length - 1; i >= 0; i--) {
-    const sizeVariant = sizeVariants[i]
-    if (sizeVariant.media === previousMedia) {
-      sizeVariants.splice(i, 1)
-    }
-    previousMedia = sizeVariant.media
-  }
-
-  for (let i = 0; i < sizeVariants.length; i++) {
-    sizeVariants[i].media = sizeVariants[i + 1]?.media || ''
-  }
-}
-
-// Helper function, copied from NuxtImage.
-function finaliseSrcsetVariants(srcsetVariants: any[]) {
-  // sort by width
-  srcsetVariants.sort((v1, v2) => v1.width - v2.width)
-
-  // de-duplicate srcset variants (by key `width`)
-  let previousWidth = null
-  for (let i = srcsetVariants.length - 1; i >= 0; i--) {
-    const sizeVariant = srcsetVariants[i]
-    if (sizeVariant.width === previousWidth) {
-      srcsetVariants.splice(i, 1)
-    }
-    previousWidth = sizeVariant.width
-  }
-}
-
 </script>
 
-<style scoped>
-
-</style>

package/components/Node/Icms/Page/SearchResult/fragment.graphql

@@ -0,0 +1,8 @@
+fragment nodeIcmsPageSearchResult on NodeIcmsPage {
+  id
+  title: label
+  description: body
+  link: url {
+    path
+  }
+}

package/components/Node/Icms/Page/SearchResult/index.vue

@@ -0,0 +1,12 @@
+<template>
+  <DesignSystemAtomsLinkListItem
+    :link="link?.path"
+    :title="title"
+    :description="description"
+  />
+</template>
+
+<script lang="ts" setup>
+import type { NodeIcmsPageSearchResultFragment } from '#graphql-operations'
+const props = defineProps<NodeIcmsPageSearchResultFragment>()
+</script>

package/components/Node/Icms/Page/Teaser/fragment.graphql

@@ -0,0 +1,17 @@
+fragment nodeIcmsPageTeaser on NodeIcmsPage {
+  pretitle: fieldIcmsTeaserPretitle
+  title: fieldIcmsTeaserTitle
+  mainTitle: label
+  text: fieldIcmsTeaserText
+  mainText: body
+  image: fieldIcmsTeaserImage {
+    ...media
+  }
+  mainImage: fieldIcmsImage {
+    ...media
+  }
+  link: url {
+    path
+  }
+  linkLabel: fieldIcmsTeaserLinkLabel
+}

package/components/Node/Icms/Page/Teaser/index.vue

@@ -0,0 +1,20 @@
+<template>
+  <DesignSystemOrganismsTeaserCard
+    :image="image || mainImage"
+    :pretitle="pretitle"
+    :title="title || mainTitle"
+    :titleWeight="titleWeight"
+    :text="text || mainText"
+    :link="link?.path"
+    :link-label="linkLabel"
+    :colorScheme="colorScheme"
+  />
+</template>
+
+<script lang="ts" setup>
+import type { NodeIcmsPageTeaserFragment } from '#graphql-operations'
+const props = defineProps<NodeIcmsPageTeaserFragment>()
+const { $texts } = useNuxtApp()
+const colorScheme = inject<string>('colorScheme')
+const titleWeight = inject<string>('titleWeight')
+</script>

package/components/Node/Icms/Page/fragment.graphql

@@ -15,3 +15,21 @@ fragment nodeIcmsPage on NodeIcmsPage {
     }
   }
 }
+
+fragment nodeIcmsPageTeaser on NodeIcmsPage {
+  pretitle: fieldIcmsTeaserPretitle
+  title: fieldIcmsTeaserTitle
+  mainTitle: label
+  text: fieldIcmsTeaserText
+  mainText: body
+  image: fieldIcmsTeaserImage {
+    ...media
+  }
+  mainImage: fieldIcmsImage {
+    ...media
+  }
+  link: url {
+    path
+  }
+  linkLabel: fieldIcmsTeaserLinkLabel
+}

package/components/Paragraph/CallToAction/index.vue

@@ -9,9 +9,9 @@
         <Media
           v-if="image"
           :media="image"
-          imageSizes="xs:60px xl:320px"
+          imageSizes="xs:175px xl:350px"
           imageAspectRatios="1/1"
-          mediaClass="-mt-12 -40 xl:w-full"
+          mediaClass="-mt-12 xl:w-full"
           elementClass="size-full object-cover object-center aspect-square rounded-lg xl:rounded-none xl:rounded-t-lg"
         />
       </div>
@@ -22,12 +22,16 @@
           v-html="text"
         />
       </div>
-      <BlokkliField
-        name="field_icms_buttons"
-        :list="buttons"
-        class="col-span-12 flex items-center md:col-span-3 xl:col-span-3"
-        :class="{ droptarget: isEditing }"
-      />
+      <div
+        class="col-span-12 flex items-center justify-center md:col-span-3 xl:col-span-3"
+      >
+        <BlokkliField
+          name="field_icms_buttons"
+          :list="buttons"
+          class="flex flex-wrap items-center justify-center gap-4"
+          :class="{ droptarget: isEditing }"
+        />
+      </div>
     </DesignSystemAtomsGridRow>
   </DesignSystemAtomsContainer>
 </template>

package/components/Paragraph/Card/Layout/index.vue

@@ -1,7 +1,7 @@
 <template>
   <DesignSystemAtomsContainer :colorScheme="colorScheme" :spacing="spacing">
     <DesignSystemAtomsGridRow v-if="pretitle || title">
-      <div class="col-span-12 md:col-span-4">
+      <div class="col-span-12 md:col-span-8">
         <DesignSystemOrganismsContentBlock
           :pretitle="pretitle"
           :title="title"
@@ -11,7 +11,7 @@
           :colorScheme="colorScheme"
         />
       </div>
-      <div class="col-span-12 md:col-span-6 md:col-start-7">
+      <div class="col-span-12 md:col-span-8">
         <DesignSystemOrganismsContentBlock
           :subtitle="subtitle"
           :text="text"

package/components/Paragraph/Downloads/index.vue

@@ -30,21 +30,10 @@
               :class="download({ colorScheme })"
             >
               <div :class="downloadIcon({ colorScheme })">
-                <svg
+                <SpriteSymbol
+                  name="download"
                   class="size-5"
-                  width="auto"
-                  height="auto"
-                  viewBox="0 0 16 18"
-                  fill="none"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M9.66634 0.666656V3.99999C9.66634 4.44202 9.84194 4.86594 10.1545 5.1785C10.4671 5.49106 10.891 5.66666 11.333 5.66666H14.6663M10.4997 0.666656H2.99967C2.55765 0.666656 2.13372 0.842251 1.82116 1.15481C1.5086 1.46737 1.33301 1.8913 1.33301 2.33332V15.6667C1.33301 16.1087 1.5086 16.5326 1.82116 16.8452C2.13372 17.1577 2.55765 17.3333 2.99967 17.3333H12.9997C13.4417 17.3333 13.8656 17.1577 14.1782 16.8452C14.4907 16.5326 14.6663 16.1087 14.6663 15.6667V4.83332L10.4997 0.666656Z"
-                    stroke="currentColor"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                  />
-                </svg>
+                />
               </div>
               <DesignSystemOrganismsContentBlock :text="document.name" />
             </a>

package/components/Paragraph/FAQ/Layout/index.vue

@@ -47,7 +47,7 @@
 <script lang="ts" setup>
 import type { ParagraphIcmsLayoutFaqFragment } from '#graphql-operations'
 
-defineProps<ParagraphIcmsLayoutFaqFragment>()
+const props = defineProps<ParagraphIcmsLayoutFaqFragment>()
 
 const defaultValue = computed(() => {
   if (!isEditing) {
@@ -81,4 +81,26 @@ const buttonAlignment = computed(() => {
 })
 
 provide('colorScheme', colorScheme)
+
+const faqJsonLd = {
+  '@context': 'https://schema.org',
+  '@type': 'FAQPage',
+  mainEntity: (props.faqElements || []).map((faq) => ({
+    '@type': 'Question',
+    name: faq?.props?.question?.trim() ?? '',
+    acceptedAnswer: {
+      '@type': 'Answer',
+      text: faq?.props?.answer?.replace(/<[^>]+>/g, '').trim() ?? '',
+    },
+  })),
+}
+
+useHead({
+  script: [
+    {
+      type: 'application/ld+json',
+      innerHTML: JSON.stringify(faqJsonLd, null, 2),
+    },
+  ],
+})
 </script>

package/components/Paragraph/FlipTeasers/index.vue

@@ -1,7 +1,7 @@
 <template>
   <DesignSystemAtomsContainer :colorScheme="colorScheme" :spacing="spacing">
     <DesignSystemAtomsGridRow>
-      <div class="col-span-12 md:col-span-4">
+      <div class="col-span-12 md:col-span-8">
         <DesignSystemOrganismsContentBlock
           :pretitle="pretitle"
           :title="title"
@@ -11,7 +11,7 @@
           :colorScheme="colorScheme"
         />
       </div>
-      <div class="col-span-12 md:col-span-6 md:col-start-7">
+      <div class="col-span-12 md:col-span-8">
         <DesignSystemOrganismsContentBlock
           :subtitle="subtitle"
           :text="text"