@iqual/nuxt-icms 1.4.10 → 1.5.0

package/eslint.config.mjs

@@ -97,7 +97,6 @@ export default withNuxt([
             'paragraph-expand-section',
             'search-input',
             'pagination-buttons',
-            'formkit-.*',
             'breadcrumb',
             'editor_image',
             'close-icon-.*',

package/layouts/default.vue

@@ -22,10 +22,23 @@ const route = useRoute()
 const drupalUser = useDrupalUser()
 const language = useCurrentLanguage()
 
+const { entity: node } = await useDrupalRouteQuery('nodeCanonical')
+
 useHead({
   htmlAttrs: {
     lang: language.value,
   },
+  meta: [
+    {
+      name: 'robots',
+      content: computed(() => {
+        const robotsTag = node.value?.metatag?.find(
+          (t: any) => t.attributes?.name === 'robots',
+        )
+        return robotsTag ? robotsTag.attributes.content : undefined
+      }),
+    },
+  ],
 })
 
 const isEditing = computed(

package/layouts/error.vue

@@ -18,9 +18,9 @@
           <NuxtLink
             class="mt-8 inline-block underline"
             :to="`/${currentLanguage}`"
-            prefetch
-            >Go back to home</NuxtLink
           >
+            Go back to home
+          </NuxtLink>
         </div>
       </div>
     </div>

package/modules/dynamicEntityComponentResolver.ts

@@ -7,106 +7,12 @@
  */
 
 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')
-    })
-
-    // Private helper to extract unique fragment values from any routeQueries object
+    // Private helper to extract unique fragment values from any routeQueries object.
     function extractFragments(routeQueries: any): string[] {
       const fragments = new Set<string>();
 
@@ -130,6 +36,7 @@ export default defineNuxtModule({
       return Array.from(fragments);
     }
 
+    // Creates graphQL fragments for all reoute queries.
     const entityFragments = nuxt.options._layers
       .map((layer, idx) => {
         const queries = layer.config?.vuepal?.drupalRoute?.routeQueries;
@@ -140,23 +47,59 @@ export default defineNuxtModule({
       .flat()
       .filter(Boolean);
 
+    // Extend entity fragments (index)
+    const entityFragmentsExtend = nuxt.options._layers
+      .map((layer, idx) => {
+        return layer.config?.icms?.extendFragments?.entity;
+      })
+      .filter(arr => Array.isArray(arr) && arr.length)
+      .flat()
+      .filter(Boolean);
+
+    // Extend entity fragments (Teaser)
+    const entityTeaserFragmentsExtend = nuxt.options._layers
+      .map((layer, idx) => {
+        return layer.config?.icms?.extendFragments?.teaser;
+      })
+      .filter(arr => Array.isArray(arr) && arr.length)
+      .flat()
+      .filter(Boolean);
+
+    // Extend entity fragments (SearchResult)
+    const entitySearchResultFragmentsExtend = nuxt.options._layers
+      .map((layer, idx) => {
+        return layer.config?.icms?.extendFragments?.searchResult;
+      })
+      .filter(arr => Array.isArray(arr) && arr.length)
+      .flat()
+      .filter(Boolean);
+
+    const entityFagment = `
+fragment entity on Entity {
+  __typename
+  ${entityFragments.map((fragmentName) => fragmentName ? `...${fragmentName}` : '').join('\n  ')}
+  ${entityFragmentsExtend.map((fragmentName) => fragmentName ? `...${fragmentName}` : '').join('\n  ')}
+}
+    `
     const entityTeaserFagment = `
 fragment entityTeaser on Entity {
   __typename
   ${entityFragments.map((fragmentName) => fragmentName ? `...${fragmentName}Teaser` : '').join('\n  ')}
+  ${entityTeaserFragmentsExtend.map((fragmentName) => fragmentName ? `...${fragmentName}` : '').join('\n  ')}
 }
     `
     const entitySearchResultFagment = `
 fragment entitySearchResult on Entity {
   __typename
   ${entityFragments.map((fragmentName) => fragmentName ? `...${fragmentName}SearchResult` : '').join('\n  ')}
+  ${entitySearchResultFragmentsExtend.map((fragmentName) => fragmentName ? `...${fragmentName}` : '').join('\n  ')}
 }
     `
     nuxt.hooks.hookOnce('nuxt-graphql-middleware:init', (context) => {
+      context.addDocument('fragment.entity.graphql', entityFagment)
       context.addDocument('fragment.entityTeaser.graphql', entityTeaserFagment)
       context.addDocument('fragment.entitySearchResult.graphql', entitySearchResultFagment)
     })
   } 
 })
 
-

package/modules/dynamicParagraphResolver.ts

@@ -2,7 +2,8 @@
  * Dynamic Paragraph Resolver Module for Nuxt
  *
  * This module collects and consolidates paragraph fragments from all layers
- * in a Nuxt application and builds a unified GraphQL fragment for paragraphs.
+ * in a Nuxt application and builds unified GraphQL fragments for paragraphs
+ * including full, teaser, and search result variants.
  *
  * @module dynamicParagraphResolver
  *
@@ -16,7 +17,9 @@
  *   // Optional configuration for a layer
  *   icms: {
  *     components: {
- *       fragments: ['ParagraphText', 'ParagraphImage']
+ *       fragments: ['paragraphIcmsLayoutText', 'paragraphIcmsLayoutImage'],
+ *       teaserFragments: ['paragraphIcmsEventOccurrence'],
+ *       searchResultFragments: ['paragraphIcmsEventOccurrence']
  *     }
  *   }
  * })
@@ -24,11 +27,13 @@
  * @description
  * The module works by:
  * 1. Scanning all Nuxt layers for paragraph fragment definitions in their config
- * 2. Collecting these fragments into a unified GraphQL fragment
- * 3. Registering the unified fragment with the nuxt-graphql-middleware
+ * 2. Collecting these fragments into unified GraphQL fragments
+ * 3. Registering the unified fragments with the nuxt-graphql-middleware
  *
- * Each layer can define its own paragraph fragments through the
- * `icms.components.fragments` configuration property.
+ * Each layer can define:
+ * - `fragments`: Full paragraph fragments (e.g., 'paragraphIcmsLayoutText')
+ * - `teaserFragments`: Teaser variant fragments (e.g., 'paragraphIcmsEventOccurrence')
+ * - `searchResultFragments`: Search result variant fragments
  *
  * @see
  * This works in conjunction with the nuxt-graphql-middleware to make
@@ -62,8 +67,39 @@ fragment paragraph on Paragraph {
   ${paragraphFragments.join('\n  ')}
 }
     `
+
+    // Collect teaser fragments from all layers
+    const paragraphTeaserFragments = nuxt.options._layers
+      .map(layer => layer.config?.icms?.components?.teaserFragments)
+      .filter(Boolean)
+      .flat()
+      .filter((fragmentName) => typeof fragmentName === 'string')
+
+    const teaserFragment = `
+fragment paragraphTeaser on Paragraph {
+  __typename
+  ${paragraphTeaserFragments.map((fragmentName) => `...${fragmentName}Teaser`).join('\n  ')}
+}
+    `
+
+    // Collect search result fragments from all layers
+    const paragraphSearchResultFragments = nuxt.options._layers
+      .map(layer => layer.config?.icms?.components?.searchResultFragments)
+      .filter(Boolean)
+      .flat()
+      .filter((fragmentName) => typeof fragmentName === 'string')
+
+    const searchResultFragment = `
+fragment paragraphSearchResult on Paragraph {
+  __typename
+  ${paragraphSearchResultFragments.map((fragmentName) => `...${fragmentName}SearchResult`).join('\n  ')}
+}
+    `
+
     nuxt.hooks.hookOnce('nuxt-graphql-middleware:init', (context) => {
       context.addDocument('fragment.paragraph.graphql', fragment)
+      context.addDocument('fragment.paragraphTeaser.graphql', teaserFragment)
+      context.addDocument('fragment.paragraphSearchResult.graphql', searchResultFragment)
     })
   }
 })