@iqual/nuxt-icms 1.1.0 → 1.2.2

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.2",
   "description": "ICMS Base",
   "type": "module",
   "private": false,
@@ -30,9 +30,9 @@
     "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/plugins/graphqlMiddleware.ts

@@ -1,7 +1,7 @@
 import { defineNuxtPlugin } from 'nuxt/app'
-import type { DrupalMessage } from '~/composables/useDrupalMessages'
-import { useCDNHeaders } from '#nuxt-multi-cache/composables'
-import type { GraphqlResponseTyped } from '#graphql-middleware-server-options-build'
+import type { DrupalMessage } from '../composables/useDrupalMessages'
+import type { GraphqlResponseTyped } from '#nuxt-graphql-middleware/response'
+import { buildProxyRequestHeaders } from '~/shared/request'
 
 type GraphqlMessengerMessage = {
   type: string
@@ -30,21 +30,24 @@ function extractMessages(data: GraphqlResponseTyped): DrupalMessage[] {
  * This is only called when performing a query or mutation from within the nuxt
  * app (e.g. not via custom server routes).
  */
-export default defineNuxtPlugin(() => {
-  const state = useGraphqlState()
-  const { messages } = useDrupalMessages()
-  const language = useCurrentLanguage()
-  const config = useRuntimeConfig()
+export default defineNuxtPlugin({
+  name: 'starterkit:graphql-plugin',
+  dependsOn: ['nuxt-graphql-middleware-provide-state', 'nuxt:router'],
+  setup() {
+    const state = useGraphqlState()
+    const { messages } = useDrupalMessages()
 
-  if (!state) {
-    return
-  }
+    const event = import.meta.server ? useRequestEvent() : undefined
+
+    if (!state) {
+      throw new Error('Missing nuxt-graphql-middleware state.')
+    }
 
-  state.fetchOptions = {
-    /**
-     * Interceptor called whenever a GraphQL response arrives.
-     */
-    onResponse(result) {
+    if (import.meta.server && event) {
+      state.fetchOptions.headers = buildProxyRequestHeaders(event)
+    }
+
+    state.fetchOptions.onResponse = (result) => {
       const data = result.response?._data
       if (!data) {
         return
@@ -56,60 +59,16 @@ export default defineNuxtPlugin(() => {
         if (!exists) {
           messages.value.push(v)
 
-          // When there are messages, we have to make the whole request uncacheable.
-          useCDNHeaders((v) => v.private())
-        }
-      })
-
-      if (import.meta.server) {
-        const event = useRequestEvent()
-
-        useCDNHeaders((helper) => {
-          if (!data.__cacheability?.isCacheable) {
-            helper.private()
-            return
+          if (import.meta.server) {
+            // When there are messages, we have to make the whole request uncacheable.
+            useCDNHeaders((v) => v.private())
           }
-
-          helper
-            .public()
-            .setNumeric('sharedMaxAge', data.__cacheability.sharedMaxAge)
-            .addTags(data.__cacheability.tagsCdn)
-        }, event)
-      }
-    },
-
-    onRequest({ options, request }) {
-      // if (import.meta.server && import.meta.dev) {
-      //   console.log('GraphQL Query: ' + request)
-      // }
-      try {
-        if (!options.params) {
-          options.params = {}
-        }
-
-        /*
-        // Add the build hash to every GraphQL request.
-        // We do this so that after a deployment, if the user is using the
-        // "new" version of the app, the request URL issued is now different
-        // than the previous one and thus will not be served from cache.
-        options.params.__h = config.public.buildHash
-
-        // Add the current language to the URL
-        options.params.__l = language.value
-
-        if (import.meta.server) {
-          options.params.__server = 'true'
         }
-        */
+      })
 
-        const requestHeaders = useRequestHeaders()
-        Object.keys(requestHeaders).forEach((key) => {
-          options.headers?.append(key, requestHeaders[key])
-        })
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      } catch (e) {
-        // Do nothing.
+      if (import.meta.server && event) {
+        useGraphqlCacheability(event, result.response?._data)
       }
-    },
-  }
+    }
+  },
 })

package/plugins/initData.ts

@@ -0,0 +1,105 @@
+
+import type {
+  GlobalConfigFragment,
+  InitDataQuery,
+  MenuLinkTreeElementFirstFragment,
+  MenuLinkTreeFragment,
+} from '#graphql-operations'
+import type { GraphqlResponse } from '#nuxt-graphql-middleware/response'
+type InitDataResponse = GraphqlResponse<InitDataQuery>
+export type MappedMenuLink = {
+  id: string
+  label: string
+  href?: string
+  children?: MappedMenuLink[]
+}
+export interface InitData {
+  metaMenuLinks: MappedMenuLink[]
+  mainMenuLinks: MappedMenuLink[]
+  footerMenuLinks: MappedMenuLink[]
+  footerMetaMenuLinks: MappedMenuLink[]
+  globalConfig: GlobalConfigFragment
+}
+/**
+ * Maps a MenuLinkTreeElementFirstFragment array to a MappedMenuLink array.
+ */
+export function mapMenuLinkTree(
+  menuLinks?: (MenuLinkTreeFragment | MenuLinkTreeElementFirstFragment)[],
+  context: { count: number } = { count: 0 },
+): MappedMenuLink[] {
+  if (!menuLinks) {
+    return []
+  }
+  return menuLinks.map((menuLink) => {
+    const id = `menu-item-${context.count++}`
+    // Extract the basic properties
+    const label = menuLink.link.label
+    const href = menuLink.link.url?.path
+    // Process children if they exist
+    const children =
+      'subtree' in menuLink && menuLink.subtree && menuLink.subtree.length > 0
+        ? mapMenuLinkTree(menuLink.subtree, context)
+        : undefined
+    // Return the mapped menu link
+    return {
+      id,
+      label,
+      href,
+      children,
+    }
+  })
+}
+function mapInitData(response: InitDataResponse): InitData {
+  if (response.data) {
+    return {
+      metaMenuLinks: mapMenuLinkTree(response.data.metaMenu?.links),
+      mainMenuLinks: mapMenuLinkTree(response.data.mainMenu?.links),
+      footerMenuLinks: mapMenuLinkTree(response.data.footerMenu?.links),
+      footerMetaMenuLinks: mapMenuLinkTree(response.data.footerMetaMenu?.links),
+      globalConfig: response.data.globalConfig || {},
+    }
+  }
+  throw new Error('Failed to load init data.')
+}
+export default defineNuxtPlugin({
+  name: 'starterkit:init-data',
+  dependsOn: [
+    'nuxt-graphql-middleware-provide-state',
+    'starterkit:graphql-plugin',
+    'nuxt:router',
+  ],
+  async setup() {
+    const data = useState<InitData | null>('initData', () => null)
+    if (import.meta.server) {
+      const event = useRequestEvent()
+      const language = useCurrentLanguage()
+      if (!event) {
+        throw new Error('Missing request event.')
+      }
+      const { value: cachedResponse, addToCache } =
+        await useDataCache<InitDataResponse>(
+          'initData_' + language.value,
+          event,
+        )
+      const response = cachedResponse || (await useGraphqlQuery('initData'))
+      data.value = mapInitData(response)
+      if (!cachedResponse && response.extensions.cacheability?.isCacheable) {
+        await addToCache(response, response.extensions.cacheability?.tagsNuxt)
+      }
+    }
+    if (import.meta.client) {
+      async function loadInitData() {
+        data.value = await useGraphqlQuery('initData', null, {
+          graphqlCaching: {
+            client: true,
+          },
+        }).then(mapInitData)
+      }
+      if (!data.value) {
+        await loadInitData()
+      }
+      const language = useCurrentLanguage()
+      watch(language, loadInitData)
+    }
+  },
+})

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/{composables → queries}/query.initData.graphql

@@ -83,16 +83,10 @@ fragment globalConfig on TranslatableConfigPagesGlobal {
   phoneNumber: fieldIcmsPhoneNumber
   emailAddress: fieldIcmsEmailAddress
   contactButtons: fieldIcmsContactButtons {
-    ...paragraphsFieldItem
-    props {
-      ...paragraphIcmsButtonElement
-    }
+    ...paragraphIcmsButtonElement
   }
   metaLinks: fieldIcmsMetaLinks {
-    ...paragraphsFieldItem
-    props {
-      ...paragraphIcmsButtonElement
-    }
+    ...paragraphIcmsButtonElement
   }
   socialMediaLinks: fieldIcmsSocialMediaLinks {
     uri {

package/queries/query.loadTranslations.graphql

@@ -0,0 +1,5 @@
+query loadTranslations {
+  translations: textsLoader {
+    ...easyTexts
+  }
+}

package/tailwind.config.ts

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

package/types/initData.ts

@@ -0,0 +1 @@
+export type MenuName = 'metaMenu' | 'mainMenu' | 'footerMenu' | 'footerMetaMenu'

package/components/Section/Header/SearchLink.vue

@@ -1,26 +0,0 @@
-<template>
-  <div
-    class="pr-4 font-medium lg:pr-12"
-    :class="{
-      'sticky top-0': isSticky,
-    }"
-  >
-    <nuxt-link
-      :to="{ name: 'search' }"
-      class="flex h-10 items-center gap-1 px-3 text-primary-500 lg:h-[50px]"
-    >
-      <span class="sr-only lg:not-sr-only">
-        {{ $texts('header.search', 'Suche') }}
-      </span>
-      <SpriteSymbol name="magnifyingglass" class="size-5" />
-    </nuxt-link>
-  </div>
-</template>
-
-<script lang="ts" setup>
-defineProps<{
-  isSticky: boolean
-}>()
-
-const { $texts } = useNuxtApp()
-</script>

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/composables/useMainMenuLinks.ts

@@ -1,69 +0,0 @@
-import type { InitData } from '~/composables/useInitData'
-import type { MenuLinkTreeFragment } from '#graphql-operations'
-
-function isLinkTreeActive(
-  tree: MenuLinkTreeFragment & { subtree?: Array<MenuLinkTreeFragment> },
-  currentRoutePath: string,
-): boolean {
-  if (tree.link.url?.path === currentRoutePath) {
-    return true
-  }
-
-  if (tree.subtree) {
-    return tree.subtree.some((subtreeEl) =>
-      isLinkTreeActive(subtreeEl, currentRoutePath),
-    )
-  }
-
-  return false
-}
-
-export async function useMainMenuLinks() {
-  const initData: Ref<InitData> = await useInitData()
-  const currentRoute = useRoute()
-
-  const links = computed(() => {
-    return initData.value.mainMenuLinks
-  })
-
-  const currentActiveMainLink = computed(() => {
-    return initData.value.mainMenuLinks.find((l) =>
-      isLinkTreeActive(l, currentRoute.path),
-    )
-  })
-
-  const activeFirstLevelLink = computed(() => {
-    return currentActiveMainLink.value?.subtree.find((l) =>
-      isLinkTreeActive(l, currentRoute.path),
-    )
-  })
-
-  const activeSecondLevelLink = computed(() => {
-    const activeSubtree = activeFirstLevelLink.value?.subtree
-    if (activeSubtree) {
-      return activeSubtree.find((l) => isLinkTreeActive(l, currentRoute.path))
-    }
-    return null
-  })
-
-  const activeThirdLevelLink = computed(() => {
-    const activeSubtree = activeSecondLevelLink.value?.subtree
-    if (activeSubtree) {
-      return activeSubtree.find((l) => isLinkTreeActive(l, currentRoute.path))
-    }
-    return null
-  })
-
-  const isHotelActive = computed(() => {
-    return isLinkTreeActive(initData.value.mainMenuLinks[2], currentRoute.path)
-  })
-
-  return {
-    links,
-    currentActiveMainLink,
-    activeFirstLevelLink,
-    activeSecondLevelLink,
-    activeThirdLevelLink,
-    isHotelActive,
-  }
-}

package/composables/useMetaMenuLinks.ts

@@ -1,44 +0,0 @@
-import type { InitData } from '~/composables/useInitData'
-import type { MenuLinkTreeFragment } from '#graphql-operations'
-
-function isLinkTreeActive(
-  tree: MenuLinkTreeFragment & { subtree?: Array<MenuLinkTreeFragment> },
-  currentRoutePath: string,
-): boolean {
-  if (tree.link.url?.path === currentRoutePath) {
-    return true
-  }
-
-  if (tree.subtree) {
-    return tree.subtree.some((subtreeEl) =>
-      isLinkTreeActive(subtreeEl, currentRoutePath),
-    )
-  }
-
-  return false
-}
-
-export async function useMetaMenuLinks() {
-  const initData: Ref<InitData> = await useInitData()
-  const currentRoute = useRoute()
-
-  const links = computed(() => {
-    return initData.value.metaMenuLinks
-  })
-
-  const currentActiveMetaLink = computed(() => {
-    return initData.value.metaMenuLinks.find((l) =>
-      isLinkTreeActive(l, currentRoute.path),
-    )
-  })
-
-  const isHotelActive = computed(() => {
-    return isLinkTreeActive(initData.value.metaMenuLinks[2], currentRoute.path)
-  })
-
-  return {
-    links,
-    currentActiveMetaLink,
-    isHotelActive,
-  }
-}