@iqual/nuxt-icms 1.1.0 → 1.2.1

package/nuxt.config.ts

@@ -78,7 +78,6 @@ export default defineNuxtConfig({
     'nuxt-easy-texts',
     'nuxt-page-dependencies',
     'nuxt-multi-cache',
-    'nuxt-plugin-order',
     'vuepal',
     'nuxt-language-negotiation',
     'nuxt-svg-icon-sprite',
@@ -88,7 +87,8 @@ export default defineNuxtConfig({
     '@nuxt/image',
     'shadcn-nuxt',
     '@iqual/nuxt-icms/modules/dynamicParagraphResolver',
-    '@iqual/nuxt-icms/modules/dynamicNodeResolver'
+    '@iqual/nuxt-icms/modules/dynamicEntityComponentResolver',
+    'nuxt-maplibre',
   ],
 
   easyTexts: {
@@ -133,26 +133,6 @@ export default defineNuxtConfig({
     checkComposableCalled: true,
   },
 
-  pluginOrder: {
-    order: [
-      // Match plugins by their file path.
-      // Note that only a single plugin may match.
-      // The match is performed as "plugin.src.includes(v.pathMatch)".
-      { pathMatch: 'plugins/language.ts' },
-      { pathMatch: '@blokkli/editor/dist/runtime/plugins/blokkliEditable.js' },
-      { pathMatch: 'staticNodes.mjs' },
-      { pathMatch: 'formkitSSRPlugin.mjs' },
-      { pathMatch: 'clickaway.ts' },
-      { pathMatch: 'graphqlMiddleware.ts' },
-      { pathMatch: 'forceHttps.js' },
-      { pathMatch: 'nuxt-easy-texts/dist/runtime/plugins/texts.mjs' },
-      { pathMatch: 'drupalUser.ts' },
-      { pathMatch: 'dynamic-node-resolver.plugin.mjs' },
-    ],
-
-    logSortedPlugins: false,
-  },
-
   vuepal: {
     frontendRouting: {
       enabled: IS_DEV,
@@ -165,6 +145,9 @@ export default defineNuxtConfig({
     localTasks: {
       enabled: true,
     },
+    languageSwitchLinks: {
+      enabled: true,
+    },
     drupalRoute: {
       enabled: true,
       routeQueries: {
@@ -197,6 +180,7 @@ export default defineNuxtConfig({
   },
 
   icms: {
+    pageComponentTypes: ['Node'],
     components: {
       fragments: [
         // Layout components
@@ -237,6 +221,11 @@ export default defineNuxtConfig({
         'paragraphIcmsPartnershipElement',
         'paragraphIcmsTimelineElement',
       ]
+    },
+    searchResults: {
+      fragments: [
+        'nodeIcmsPageSearchResult',
+      ]
     }
   },
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iqual/nuxt-icms",
-  "version": "1.1.0",
+  "version": "1.2.1",
   "description": "ICMS Base",
   "type": "module",
   "private": false,
@@ -26,13 +26,14 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "embla-carousel-vue": "^8.6.0",
+    "fslightbox-vue": "^2.2.1",
     "lucide-vue-next": "^0.469.0",
     "nuxt-easy-texts": "^2.0.0",
     "nuxt-graphql-middleware": "^5.1.0",
     "nuxt-language-negotiation": "^2.0.0",
+    "nuxt-maplibre": "^1.1.1",
     "nuxt-multi-cache": "^3.4.0",
     "nuxt-page-dependencies": "^1.1.0",
-    "nuxt-plugin-order": "^1.0.0",
     "nuxt-svg-icon-sprite": "^2.0.0",
     "patch-package": "^8.0.0",
     "radix-vue": "^1.9.17",

package/pages/[...slug]/index.vue

@@ -4,7 +4,7 @@
 
 <script lang="ts" setup>
 
-const { $resolveDynamicNodeComponent } = useNuxtApp()
+const { $resolveDynamicEntityComponent } = useNuxtApp()
 
 defineOptions({
   name: 'PageSlug',
@@ -20,7 +20,7 @@ const { entity: node } = await useDrupalRouteQuery('slug')
 const contentType = computed(() => node.value?.__typename)
 
 const pageComponent = computed(() => {
-  return $resolveDynamicNodeComponent(contentType.value)
+  return $resolveDynamicEntityComponent(contentType.value)
 })
 
 await renderPageDependencies()

package/pages/index.vue

@@ -4,7 +4,7 @@
 
 <script lang="ts" setup>
 
-const { $resolveDynamicNodeComponent } = useNuxtApp()
+const { $resolveDynamicEntityComponent } = useNuxtApp()
 
 defineOptions({
   name: 'Homepage',
@@ -20,7 +20,7 @@ const { entity: node } = await useDrupalRouteQuery('slug')
 const contentType = computed(() => node.value?.__typename)
 
 const pageComponent = computed(() => {
-  return $resolveDynamicNodeComponent(contentType.value)
+  return $resolveDynamicEntityComponent(contentType.value)
 })
 
 await renderPageDependencies()

package/pages/node/[nid]/index.vue

@@ -4,7 +4,7 @@
 
 <script lang="ts" setup>
 
-const { $resolveDynamicNodeComponent } = useNuxtApp()
+const { $resolveDynamicEntityComponent } = useNuxtApp()
 
 defineOptions({
   name: 'PageNodeCanonical',
@@ -18,7 +18,7 @@ const { entity: node } = await useDrupalRouteQuery('nodeCanonical')
 const contentType = computed(() => node.value?.__typename)
 
 const pageComponent = computed(() => {
-  return $resolveDynamicNodeComponent(contentType.value)
+  return $resolveDynamicEntityComponent(contentType.value)
 })
 
 await renderPageDependencies()

package/queries/query.contentSearch.graphql

@@ -0,0 +1,17 @@
+query contentSearch($keys: String!, $language: String, $facets: [String!], $filter: SearchApiQueryFilterInput, $limit: Int, $offset: Int) {
+	searchApiQuery(indexId: "content_search", keys: $keys, language: $language, facets: $facets, filter: $filter, limit: $limit, offset: $offset) {
+    count
+    facets {
+      field
+      filter {
+        id
+        label
+      }
+      count
+      results {
+        bundle: __typename
+        ...entitySearchResult
+      }
+    }
+  }
+}

package/tailwind.config.ts

@@ -222,6 +222,7 @@ const config: Config = {
   ],
   corePlugins: {
     textOpacity: false,
+    container: false,
   },
 }
 

package/types/fslightbox-vue.d.ts

@@ -0,0 +1 @@
+declare module 'fslightbox-vue'

package/composables/languageLinks.ts

@@ -1,31 +0,0 @@
-import type {
-  LanguageSwitchLinkFragment,
-  RouteQuery,
-} from '#graphql-operations'
-
-export function setLanguageLinksFromFragment(
-  links: LanguageSwitchLinkFragment[],
-) {
-  const route = useRoute()
-
-  definePageLanguageLinks(
-    route.path,
-    links.reduce<Record<string, string>>((acc, v) => {
-      if (v.language.id && v.url.path) {
-        acc[v.language.id] = v.url.path
-      }
-      return acc
-    }, {}),
-  )
-}
-
-export function setLanguageLinksFromRoute(
-  query?: RouteQuery | undefined | null,
-) {
-  if (query && query.route && 'languageSwitchLinks' in query.route) {
-    setLanguageLinksFromFragment(query.route.languageSwitchLinks)
-    return
-  }
-  const route = useRoute()
-  definePageLanguageLinks(route.path, {})
-}

package/modules/dynamicNodeResolver.ts

@@ -1,95 +0,0 @@
-/**
- * Nuxt Layer Module: dynamicNodeResolver
- *
- * 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 { root } from 'happy-dom/lib/PropertySymbol.js'
-import { join } from 'pathe'
-import { rootDir } from 'vitest/node'
-
-export default defineNuxtModule({
-  meta: { name: 'dynamicNodeResolver' },
-  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, '') : '/')
-
-    // Generate import.meta.glob for each layer's Node components
-    const imports = layerDirs.map((dir, i) => {
-      const componentsPath = join(dir, 'components/Node/**/*.vue')
-      return `const modules${i} = import.meta.glob(${JSON.stringify(componentsPath)});`
-    }).join('\n')
-
-    // Merge logic (reverse order so main app overrides layers)
-    const mergeLogic = layerDirs
-      .map((_, i) => `
-        for (const path in modules${i}) {
-          const name = getComponentNameFromPath(path);
-          if (name) componentMap[name] = defineAsyncComponent(modules${i}[path]);
-        }
-      `)
-      .reverse()
-      .join('\n')
-
-    // Create the plugin template
-    addTemplate({
-      filename: 'dynamic-node-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/Node/Foo.vue                       -> NodeFoo
-         *   - /components/Node/Foo/index.vue                 -> NodeFoo
-         *   - /components/Node/Bar/Baz.vue                   -> NodeBarBaz
-         *   - /components/Node/Bar/Baz/index.vue             -> NodeBarBaz
-         *
-         * @param {string} path - The absolute or relative file path to the Vue component.
-         * @returns {string|null} The normalized component name (e.g., 'NodeFoo' or 'NodeBarBaz'), or null if the path does not match.
-         */
-        function getComponentNameFromPath(path) {
-          // Match everything after /Node/ up to .vue, splitting by /
-          //const match = path.match(/\\/Node\\/([^/]+?)(?:\\/index)?\\.vue$/)
-          const match = path.match(/\\/Node\\/(.+?)\\/?(index)?\\.vue$/)
-
-          if (match) {
-            // match[1] is the path after /Node/ up to the file (could be nested)
-            // Split by '/', capitalize each part, and join
-            const parts = match[1].split('/').map(
-              part => part.charAt(0).toUpperCase() + part.slice(1)
-            )
-            return 'Node' + parts.join('')
-          }
-          return null
-        }
-
-
-        export default defineNuxtPlugin(() => {
-          ${imports}
-          const componentMap = {};
-          ${mergeLogic}
-          return {
-            provide: {
-              resolveDynamicNodeComponent: (name) => componentMap[name] || null
-            }
-          }
-        })
-      `
-    })
-
-    // Register the generated plugin
-    addPlugin({
-      src: resolve(nuxt.options.buildDir, 'dynamic-node-resolver.plugin.mjs')
-    })
-  }
-})

package/pages/search/index.vue

@@ -1,69 +0,0 @@
-<template>
-  <main :class="{ 'cursor-wait': pending }">
-    <section class="flex">
-      <div class="container">
-        <h1 v-if="node" class="pb-3 text-4xl lg:pb-6 lg:text-7xl">
-          {{ node.title }}
-        </h1>
-        <form @submit.prevent>
-          <SearchInput v-model="searchTerm" />
-        </form>
-      </div>
-    </section>
-    <template v-if="data && searchTerm">
-      <Container>
-        <ol class="mt-10">
-          <SearchResult v-for="hit in data" v-bind="hit" :key="hit.id" />
-        </ol>
-      </Container>
-    </template>
-  </main>
-</template>
-
-<script lang="ts" setup>
-import type { NodeIcmsPageFragment } from '#graphql-operations'
-
-definePageMeta({
-  name: 'search',
-  drupalFrontendRoute: true,
-  path: '/suche',
-  languageMapping: {
-    fr: '/chercher',
-    en: '/search',
-  },
-})
-
-const nuxtRoute = useRoute()
-const searchTerm = useQueryString('text')
-const language = useCurrentLanguage()
-
-const searchQuery = computed(() => {
-  return {
-    langcode: language.value,
-    size: 16,
-    text: searchTerm.value || undefined,
-  }
-})
-
-const { data, pending } = await useFetch('/api/content-search', {
-  query: searchQuery,
-})
-
-// Get the data.
-const { data: query } = await useAsyncData(nuxtRoute.path, () => {
-  return useGraphqlQuery('route', {
-    path: nuxtRoute.path,
-  }).then((v) => v.data)
-})
-
-// Handles redirects and metatags.
-const { entity: node } = await useDrupalRoute<NodeIcmsPageFragment>(
-  query.value,
-  {
-    noError: true,
-  },
-)
-setBreadcrumbLinksFromRoute(query.value)
-setLanguageLinksFromRoute(query.value)
-await renderPageDependencies()
-</script>

package/pages/static-page/example.vue

@@ -1,40 +0,0 @@
-<template>
-  <div class="container">
-    <h1 class="mb-10 text-4xl">Static Page example</h1>
-    <h2>{{ node.title }}</h2>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import type { NodePageFragment } from '#graphql-operations'
-
-defineOptions({
-  name: 'StaticPageExample',
-})
-
-definePageMeta({
-  name: 'static-page-example',
-  drupalFrontendRoute: true,
-  path: '/statisch',
-  languageMapping: {
-    fr: '/statique',
-    en: '/static',
-  },
-})
-
-const nuxtRoute = useRoute()
-
-// Get the data.
-const { data: query } = await useAsyncData('staticPageExample', async () => {
-  return await useGraphqlQuery('route', {
-    path: nuxtRoute.path,
-  }).then((v) => v.data)
-})
-
-// Handles redirects and metatags.
-const { entity: node } = await useDrupalRoute<NodePageFragment>(query.value)
-
-setBreadcrumbLinks()
-setLanguageLinksFromRoute(query.value)
-await renderPageDependencies()
-</script>

package/queries/fragment.routeQuery.graphql

@@ -1,51 +0,0 @@
-fragment routeQuery on Query {
-  messengerMessages
-  # Data used for the useDrupalRoute composable.
-  ...useDrupalRoute
-
-  # Data used for rendering entities.
-  route(path: $path) {
-    __typename
-    ... on EntityUrl {
-      breadcrumb {
-        ...breadcrumb
-      }
-      ...entityUrl
-    }
-    ... on InternalUrl {
-      languageSwitchLinks {
-        ...languageSwitchLink
-      }
-    }
-  }
-}
-
-fragment entityUrl on EntityUrl {
-  languageSwitchLinks {
-    ...languageSwitchLink
-  }
-  entity {
-    uuid
-  }
-  entityGlobal: entity {
-    ...entityGlobal
-  }
-}
-
-fragment entityGlobal on Entity {
-  __typename
-  canEdit: accessCheck(operation: "edit-blokkli")
-  id
-  bundle: entityBundle
-}
-
-fragment languageSwitchLink on LanguageSwitchLink {
-  active
-  language {
-    id
-  }
-  title
-  url {
-    path
-  }
-}