@iqual/nuxt-icms 1.0.14 → 1.2.1

package/composables/useImageSources.ts

@@ -0,0 +1,208 @@
+import type { ImageSizesVariant } from '@nuxt/image'
+import type { MediaImageFragment } from '#graphql-operations'
+
+interface ImageSource {
+  sizes?: string
+  srcset: string
+  media?: string
+}
+
+interface UseImageSourcesOptions {
+  media: Ref<MediaImageFragment> | MediaImageFragment
+  imageAspectRatios?: Ref<string | undefined> | string | undefined
+  imageSizes?: Ref<string | undefined> | string | undefined
+}
+
+// Local implementation of parseSizes from @nuxt/image
+function parseSizes(input: Record<string, string | number> | string): Record<string, string> {
+  const sizes: Record<string, string> = {}
+  if (typeof input === "string") {
+    for (const entry of input.split(/[\s,]+/).filter((e) => e)) {
+      const s = entry.split(":")
+      if (s.length !== 2) {
+        sizes["1px"] = s[0].trim()
+      } else {
+        sizes[s[0].trim()] = s[1].trim()
+      }
+    }
+  } else {
+    Object.assign(sizes, input)
+  }
+  return sizes
+}
+
+// Helper function, copied from NuxtImage.
+function getSizesVariant(key: string, size: string, hwRatio: number, img: any): 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
+  }
+}
+
+export function useImageSources(options: UseImageSourcesOptions) {
+  const img = useImage()
+  const baseUrl = useRuntimeConfig().public.imageBaseUrl
+
+  // Convert props to refs if they aren't already
+  const mediaRef = toRef(options.media)
+  const imageAspectRatiosRef = toRef(options.imageAspectRatios)
+  const imageSizesRef = toRef(options.imageSizes)
+
+  const placeHolderImage = computed(() => {
+    const sourceImage = baseUrl + mediaRef.value?.sourceUrl?.path
+    if (!sourceImage || sourceImage === baseUrl) return ''
+    return img(sourceImage, { format: 'webp', width: 100, blur: 100 })
+  })
+
+  const imageSources = computed((): ImageSource[] => {
+    const sourceImage = baseUrl + mediaRef.value?.sourceUrl?.path
+    if (!sourceImage || sourceImage === baseUrl) return []
+
+    const sources: ImageSource[] = []
+    const imgSizes = imageSizesRef.value ?? Object.keys(img.options.screens).map(key => `${key}:100vw`).join(' ')
+
+    // No aspect ratios provided.
+    if (!imageAspectRatiosRef.value) {
+      const imageSize = img.getSizes(sourceImage, {
+        sizes: imgSizes,
+        modifiers: {
+          format: 'webp'
+        }
+      })
+      // Cast the ImageSizes result to our ImageSource interface
+      sources.push(imageSize as ImageSource)
+      return sources
+    }
+
+    // Aspect ratios provided.
+    const parsedAspectRatios = parseSizes(imageAspectRatiosRef.value)
+    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, img)
+        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(', ')
+
+      const source: ImageSource = {
+        sizes: sizesVal,
+        srcset: srcsetVal,
+      }
+
+      if (keyAspectRatios != Object.keys(parsedAspectRatios).slice(-1)[0]) {
+        source.media = media
+      }
+      sources.push(source)
+    }
+    return sources
+  })
+
+  return {
+    placeHolderImage,
+    imageSources
+  }
+}
+
+export type { ImageSource }

package/composables/useLightbox.ts

@@ -0,0 +1,81 @@
+import type { MediaFragment } from '#graphql-operations'
+import { DesignSystemAtomsCaption } from '#components'
+
+export function useLightbox(media: (MediaFragment | null)[] | undefined) {
+  const toggleLightbox = ref(false)
+  const currentSlide = ref(1)
+
+  const openLightbox = (index: number) => {
+    currentSlide.value = index + 1 // fsLightbox uses 1-based indexing
+    toggleLightbox.value = !toggleLightbox.value
+  }
+
+  // https://fslightbox.com/vue/documentation/sources
+  const computedMedia = computed(() =>
+    media?.map(item => {
+      if (!item) return ''
+      switch (item.type) {
+        case 'MediaImage':
+          return item.sourceUrl?.path || ''
+        case 'MediaVideo':
+          return item.url?.path || ''
+        case 'MediaRemoteVideo':
+          return item.link || ''
+        default:
+          return ''
+      }
+    }).filter(Boolean) || []
+  )
+
+  // https://fslightbox.com/vue/documentation/custom-attributes
+  const computedCustomAttributes = computed(() =>
+    media?.map(item => {
+      if (!item) return {}
+
+      switch (item.type) {
+        case 'MediaImage':
+          return {
+            alt: item.alt?.alt || '',
+            title: item.title || ''
+          }
+
+        case 'MediaVideo':
+          return {
+            alt: (item.thumbnailOverride || item.thumbnail)?.alt || '',
+            title: item.title || '',
+            poster: (item.thumbnailOverride || item.thumbnail)?.entity?.uri?.first?.url || '',
+            controls: true
+          }
+
+        case 'MediaRemoteVideo':
+          return {
+            alt: (item.thumbnailOverride || item.thumbnail)?.alt || '',
+            title: item.title || '',
+            poster: (item.thumbnailOverride || item.thumbnail)?.entity?.uri?.first?.url || ''
+          }
+
+        default:
+          return {}
+      }
+    }) || []
+  )
+
+  // https://fslightbox.com/vue/documentation/captions
+  const computedCaptions = computed(() =>
+    media?.map(item => ({
+      component: DesignSystemAtomsCaption,
+      props: {
+        caption: item?.caption || ''
+      }
+    })) || []
+  )
+
+  return {
+    toggleLightbox,
+    currentSlide,
+    openLightbox,
+    sources: computedMedia,
+    customAttributes: computedCustomAttributes,
+    captions: computedCaptions
+  }
+}

package/composables/useMainMenuLinks.ts

@@ -1,4 +1,4 @@
-import type { InitData } from '~/composables/useInitData'
+import type { InitData } from './useInitData'
 import type { MenuLinkTreeFragment } from '#graphql-operations'
 
 function isLinkTreeActive(

package/composables/useMessageBus.ts

@@ -0,0 +1,74 @@
+/**
+ * Message Bus Composable
+ *
+ * This composable provides a simple in-memory message bus for communication between components.
+ *
+ * Usage:
+ *   import { useMessageBus } from '#imports'
+ *   const { bus, send, receive } = useMessageBus()
+ *
+ *   // Send a message
+ *   send('Hello World', 'receiverId', 'typeId')
+ *
+ *   // Receive messages
+ *   const messages = receive('receiverId', 'typeId')
+ *
+ * API:
+ *   - bus: Ref<Array<BusMessage>>
+ *   - send(message, receiver?, type?)
+ *   - receive(receiver?, type?): BusMessage[]
+ *
+ * BusMessage:
+ *   - receiver?: string
+ *   - type?: string
+ *   - message: any
+ */
+
+/**
+ * Represents a message sent through the message bus.
+ */
+export type BusMessage = {
+  receiver?: string
+  type?: string
+  message?: any
+}
+
+const messageBus: Ref<Array<BusMessage>> = ref([]);
+
+/**
+ * Sends a message to the message bus.
+ *
+ * @param message - The message payload to send.
+ * @param receiver - Optional receiver identifier.
+ * @param type - Optional message type identifier.
+ */
+function send(message: any, receiver?: string, type?: string) {
+  messageBus.value.push({ receiver, type, message });
+}
+
+/**
+ * Retrieves messages from the message bus matching the given receiver and type.
+ * Returns a deep clone of the matched messages.
+ *
+ * @param receiver - Optional receiver identifier to filter messages.
+ * @param type - Optional type identifier to filter messages.
+ * @returns Array of matching BusMessage objects (deep cloned).
+ */
+function receive(receiver?: string, type?: string): BusMessage[] {
+  return messageBus.value.filter(
+    msg => (receiver === undefined || msg.receiver === receiver) && (type === undefined || msg.type === type)
+  ).map(msg => ({ ...msg, message: JSON.parse(JSON.stringify(msg.message)) }));
+}
+
+/**
+ * Provides access to the message bus, including send and receive functions.
+ *
+ * @returns An object containing the bus ref, send, and receive functions.
+ */
+export function useMessageBus() {
+  return {
+    bus: messageBus,
+    send,
+    receive,
+  };
+}

package/composables/useMetaMenuLinks.ts

@@ -1,4 +1,4 @@
-import type { InitData } from '~/composables/useInitData'
+import type { InitData } from './useInitData'
 import type { MenuLinkTreeFragment } from '#graphql-operations'
 
 function isLinkTreeActive(

package/composables/useNavigationOffset.ts

@@ -1,4 +1,4 @@
-import { useIsMobile } from '@/composables/useIsMobile'
+import { useIsMobile } from './useIsMobile'
 
 const mobileNavHeight: number = 73
 const desktopNavHeight: number = 114

package/layouts/default.vue

@@ -6,9 +6,9 @@
       @menu:close:finished="menuCloseFinish"
     />
 
-    <NuxtPageDependency>
+    <!-- <NuxtPageDependency>
       <DrupalBreadcrumb v-if="showBreadcrumb" :links="breadcrumb" />
-    </NuxtPageDependency>
+    </NuxtPageDependency> -->
 
     <div>
       <ClientOnly>

package/layouts/error.vue

@@ -6,16 +6,15 @@
       @menu:close:finished="menuCloseFinish"
     />
 
-    <NuxtPageDependency>
+    <!-- <NuxtPageDependency>
       <DrupalBreadcrumb v-if="showBreadcrumb" :links="breadcrumb" />
-    </NuxtPageDependency>
+    </NuxtPageDependency> -->
 
     <div>
       <ClientOnly>
         <DrupalMessages v-if="!isEditing" />
       </ClientOnly>
 
-
       <div class="container mx-auto grid grid-cols-1 gap-6 py-12">
         <div class="ck-editor text-center">
           <h1>Whooops!</h1>
@@ -24,10 +23,10 @@
             class="mt-8 inline-block underline"
             :to="`/${currentLanguage}`"
             prefetch
-            >Go back to home</NuxtLink>
+            >Go back to home</NuxtLink
+          >
         </div>
       </div>
-
     </div>
     <SectionFooter />
   </div>
@@ -57,7 +56,7 @@ const error = useError()
 const errorCode = error.value?.statusCode || 'Unknown error'
 
 const errorMessages = {
-  404: 'We can\'t find the page \nyou are looking for.',
+  404: "We can't find the page \nyou are looking for.",
   500: 'An error occurred on the server. Please try again later.',
   'Unknown error': 'An unknown error occurred.',
 }
@@ -67,10 +66,10 @@ const errorMessage = computed(() => {
     return errorMessages[errorCode]
   }
   return errorMessages['Unknown error']
-});
+})
 
 useHead({
-  title: errorMessage
+  title: errorMessage,
 })
 
 const isMenuOpen = ref(false)
@@ -94,5 +93,4 @@ function menuCloseFinish() {
     hasMenuFinishedClosing.value = true
   }
 }
-
-</script>
+</script>

package/modules/dynamicEntityComponentResolver.ts

@@ -0,0 +1,182 @@
+/**
+ * Nuxt Layer Module: dynamicEntityComponentResolver
+ *
+ * Dynamically imports all Node components from every enabled Nuxt layer (including the main app),
+ * supports both single-file and index.vue conventions, and injects a dynamic resolver with
+ * proper override priority (main app overrides layers).
+ */
+
+import { defineNuxtModule, addPlugin, addTemplate, createResolver } from '@nuxt/kit'
+import { join } from 'pathe'
+
+export default defineNuxtModule({
+  meta: { name: 'dynamicEntityComponentResolver' },
+  setup(_options, nuxt) {
+    const { resolve } = createResolver(import.meta.url)
+
+    // Gather all layer root directories (main app is always first)
+    const appRoot = nuxt.options.rootDir
+    const layerDirs = nuxt.options._layers
+      .map(layer => layer.cwd.replace(appRoot, '').length ? layer.cwd.replace(appRoot, '') : '/')
+
+    // Helper to get icms config from a layer
+    function getLayerPageComponentTypes(layer) {
+      return (layer.config && layer.config.icms && Array.isArray(layer.config.icms.pageComponentTypes))
+        ? layer.config.icms.pageComponentTypes
+        : [];
+    }
+
+    // Gather pageComponentTypes from all layers and main app
+    // @ts-ignore: allow access to icms
+    const allTypes = [Array.isArray(nuxt.options.icms?.pageComponentTypes) ? nuxt.options.icms.pageComponentTypes : []]
+      .concat(nuxt.options._layers.map(getLayerPageComponentTypes))
+      .flat()
+      .filter((v, i, arr) => arr.indexOf(v) === i); // dedupe
+
+    // Generate import.meta.glob for each layer's components for each type
+    const imports = layerDirs.map((dir, i) => {
+      return allTypes.map(type => {
+        const componentsPath = join(dir, `components/${type}/**/*.vue`)
+        return `const modules${i}_${type} = import.meta.glob(${JSON.stringify(componentsPath)});`;
+      }).join('\n');
+    }).join('\n');
+
+    // Merge logic (reverse order so main app overrides layers)
+    const mergeLogic = layerDirs
+      .map((_, i) => {
+        return allTypes.map(type => `
+          for (const path in modules${i}_${type}) {
+            const name = getComponentNameFromPath(path, "${type}");
+            if (name) componentMap[name] = defineAsyncComponent(modules${i}_${type}[path]);
+          }
+        `).join('\n');
+      })
+      .reverse()
+      .join('\n');
+
+    // Create the plugin template
+    addTemplate({
+      filename: 'dynamic-entity-component-resolver.plugin.mjs',
+      getContents: () => `
+        import { defineNuxtPlugin } from '#app'
+        import { defineAsyncComponent } from 'vue'
+
+        /**
+         * Extracts a normalized component name from a file path for dynamic component mapping.
+         *
+         * Supports both single-file and directory-based Vue component structures:
+         *   - /components/Type/Foo.vue                       -> TypeFoo
+         *   - /components/Type/Foo/index.vue                 -> TypeFoo
+         *   - /components/Type/Bar/Baz.vue                   -> TypeBarBaz
+         *   - /components/Type/Bar/Baz/index.vue             -> TypeBarBaz
+         *
+         * @param {string} path - The absolute or relative file path to the Vue component.
+         * @param {string} type - The entity type (e.g., 'Node', 'TaxonomyTerm').
+         * @returns {string|null} The normalized component name (e.g., 'NodeFoo' or 'TaxonomyTermBarBaz'), or null if the path does not match.
+         */
+        function getComponentNameFromPath(path, type) {
+          // Escape type for RegExp
+          var escType = type.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
+          var re = new RegExp('/' + escType + '/(.+?)/?(index)?\\.vue$');
+          var match = path.match(re);
+          if (match) {
+            var parts = match[1].split('/').map(function(part) {
+              return part.charAt(0).toUpperCase() + part.slice(1);
+            });
+            return type + parts.join('');
+          }
+          return null;
+        }
+
+        export default defineNuxtPlugin(() => {
+          ${imports}
+          var componentMap = {};
+          ${mergeLogic}
+          return {
+            provide: {
+              resolveDynamicEntityComponent: function(name) { return componentMap[name] || null; }
+            }
+          };
+        });
+      `
+    })
+
+    // Register the generated plugin
+    addPlugin({
+      src: resolve(nuxt.options.buildDir, 'dynamic-entity-component-resolver.plugin.mjs')
+    })
+
+    // Collect all page teaser fragments from the Nuxt layers.
+    const paragraphFragments = nuxt.options._layers
+      .map(layer => layer.config?.icms?.components?.fragments)
+      .filter(Boolean)
+      .flat()
+      .map((fragmentName) => {
+        return `...${fragmentName}`
+      })
+
+    const fragment = `
+fragment paragraph on Paragraph {
+  id
+  parentId
+  ${paragraphFragments.join('\n  ')}
+}
+    `
+    nuxt.hooks.hookOnce('nuxt-graphql-middleware:init', (context) => {
+      context.addDocument('fragment.paragraph.graphql', fragment)
+    })
+
+    // Private helper to extract unique fragment values from any routeQueries object
+    function extractFragments(routeQueries: any): string[] {
+      const fragments = new Set<string>();
+
+      function traverse(obj: any) {
+        if (Array.isArray(obj)) {
+          obj.forEach(item => traverse(item));
+        } else if (obj && typeof obj === 'object') {
+          for (const key in obj) {
+            if (key === 'fragments' && Array.isArray(obj[key])) {
+              obj[key].forEach(frag => {
+                if (typeof frag === 'string') fragments.add(frag);
+              });
+            } else {
+              traverse(obj[key]);
+            }
+          }
+        }
+      }
+
+      traverse(routeQueries);
+      return Array.from(fragments);
+    }
+
+    const entityFragments = nuxt.options._layers
+      .map((layer, idx) => {
+        const queries = layer.config?.vuepal?.drupalRoute?.routeQueries;
+        const fragments = extractFragments(queries);
+        return fragments;
+      })
+      .filter(arr => Array.isArray(arr) && arr.length)
+      .flat()
+      .filter(Boolean);
+
+    const entityTeaserFagment = `
+fragment entityTeaser on Entity {
+  __typename
+  ${entityFragments.map((fragmentName) => fragmentName ? `...${fragmentName}Teaser` : '').join('\n  ')}
+}
+    `
+    const entitySearchResultFagment = `
+fragment entitySearchResult on Entity {
+  __typename
+  ${entityFragments.map((fragmentName) => fragmentName ? `...${fragmentName}SearchResult` : '').join('\n  ')}
+}
+    `
+    nuxt.hooks.hookOnce('nuxt-graphql-middleware:init', (context) => {
+      context.addDocument('fragment.entityTeaser.graphql', entityTeaserFagment)
+      context.addDocument('fragment.entitySearchResult.graphql', entitySearchResultFagment)
+    })
+  } 
+})
+
+

package/modules/dynamicParagraphResolver.ts

@@ -43,7 +43,7 @@ import { defineNuxtModule } from 'nuxt/kit'
  */
 export default defineNuxtModule({
   meta: {
-    name: 'nuxt-graphql-middleware-playground',
+    name: 'dynamicParagraphResolver',
   },
   setup(_options, nuxt) {
     // Collect all paragraph fragments from the Nuxt layers.