@iqual/nuxt-icms 1.6.1 → 1.6.2-rc.2

package/components/Section/Header/LanguageDropdown.vue

@@ -3,21 +3,21 @@
     <div
       v-if="showLanguageLinks"
       v-click-away="closeDropdown"
-      @keydown.esc="closeDropdown"
       :class="themedClass('containerClass', 'relative py-2')"
+      @keydown.esc="closeDropdown"
     >
       <button
         type="button"
         aria-haspopup="menu"
         :aria-expanded="isLangDropdownOpen"
         aria-controls="language-dropdown"
-        @click="toggleDropdown"
         :class="
           themedClass(
             'currentLanguageLinkClass',
             'flex cursor-pointer flex-nowrap items-center gap-1',
           )
         "
+        @click="toggleDropdown"
       >
         {{ currentLanguage.toUpperCase() }}
         <SpriteSymbol
@@ -104,7 +104,6 @@
 </template>
 
 <script lang="ts" setup>
-
 const themedClass = useTheme('SectionHeaderLanguageDropdown')
 const links = useLanguageLinks()
 const currentLanguage = useCurrentLanguage()

package/components/Section/Header/Logo.vue

@@ -8,9 +8,9 @@
     <Media
       v-if="companyLogo"
       :media="companyLogo"
-      :mediaClass="themedClass('mediaClass', 'h-8 2xl:h-10')"
-      :figcaptionClass="themedClass('figcaptionClass')"
-      :elementClass="themedClass('elementClass', 'h-8 2xl:h-10 w-auto')"
+      :media-class="themedClass('mediaClass', 'h-8 2xl:h-10')"
+      :figcaption-class="themedClass('figcaptionClass')"
+      :element-class="themedClass('elementClass', 'h-8 2xl:h-10 w-auto')"
     />
   </NuxtLink>
 </template>

package/components/Section/Header/MainButtons.vue

@@ -11,17 +11,16 @@
       :link="link?.link?.uri?.path"
       :params="link?.params"
       :target-blank="link?.targetBlank"
-      :buttonClass="themedClass('buttonClass', 'xs:w-fit')"
-      :labelClass="themedClass('labelClass')"
-      colorScheme="none"
-      buttonStyle="focus"
+      :button-class="themedClass('buttonClass', 'xs:w-fit')"
+      :label-class="themedClass('labelClass')"
+      color-scheme="none"
+      button-style="focus"
       @click="close()"
     />
   </div>
 </template>
 
 <script lang="ts" setup>
-
 const { contactButtons } = await useGlobalConfig()
 const themedClass = useTheme('SectionHeaderMainButtons')
 const { close } = useMobileMenuOverlayBus()

package/components/Section/Header/MetaButtons.vue

@@ -10,18 +10,17 @@
       :title="link?.title"
       :link="link?.link?.uri?.path"
       :params="link?.params"
-      :targetBlank="link?.targetBlank"
-      :buttonClass="themedClass('buttonClass', 'xs:w-fit')"
-      :labelClass="themedClass('labelClass')"
-      colorScheme="none"
-      buttonStyle="focus"
+      :target-blank="link?.targetBlank"
+      :button-class="themedClass('buttonClass', 'xs:w-fit')"
+      :label-class="themedClass('labelClass')"
+      color-scheme="none"
+      button-style="focus"
       @click="close()"
     />
   </div>
 </template>
 
 <script lang="ts" setup>
-
 const { metaLinks } = await useGlobalConfig()
 const themedClass = useTheme('SectionHeaderMetaButtons')
 const { close } = useMobileMenuOverlayBus()

package/components/Section/Header/MetaMenu.vue

@@ -33,7 +33,6 @@
             "
             :target="menuItem?.target"
             :rel="menuItem?.rel"
-            @click="close()"
             :exact-active-class="themedClass('linkActiveClass', 'text-primary')"
             :class="
               cn(
@@ -44,6 +43,7 @@
                 menuItem?.additionalClass,
               )
             "
+            @click="close()"
           >
             {{ menuItem.label }}
           </NuxtLink>

package/components/Section/Header/MobileMainMenu.vue

@@ -8,7 +8,7 @@
         v-for="item in menuItems"
         :key="item.id"
         :item="item"
-        :menuItemActive="menuItemActive"
+        :menu-item-active="menuItemActive"
       />
     </ul>
   </nav>

package/components/Section/Header/MobileMainMenuItem.vue

@@ -25,7 +25,6 @@
         :aria-controls="submenuId"
         role="button"
         tabindex="0"
-        @click="isOpen = !isOpen"
         :class="[
           themedClass(
             'submenuToggleClass',
@@ -33,6 +32,7 @@
           ),
           { 'motion-safe:rotate-180': isOpen },
         ]"
+        @click="isOpen = !isOpen"
       />
     </div>
 
@@ -84,7 +84,7 @@
           v-for="item in item.children"
           :key="`submenu_${item.id}`"
           :item="item"
-          :menuItemActive="menuItemActive"
+          :menu-item-active="menuItemActive"
         />
       </ul>
     </Transition>

package/components/Section/Header/index.vue

@@ -25,7 +25,7 @@
         )
       "
     >
-      <div ref="metaContainer" :class="themedClass('metaRefContainerClass')">
+      <div data-navigation-meta :class="themedClass('metaRefContainerClass')">
         <DesignSystemAtomsGridRow
           :class="
             themedClass(
@@ -52,6 +52,7 @@
 
     <!-- Main Container -->
     <DesignSystemAtomsContainer
+      data-navigation-main
       :spacing="{ top: 'none', bottom: 'none' }"
       :class="
         themedClass('mainContainerClass', 'border-b border-gray-100 bg-white')
@@ -90,8 +91,6 @@
     <!-- Mobile Menu Overlay -->
     <Teleport to="body">
       <Transition
-        @after-enter="clickAwayArmed = true"
-        @after-leave="clickAwayArmed = false"
         :enter-active-class="
           themedClass(
             'transitionEnterActiveClass',
@@ -128,11 +127,13 @@
             'opacity-0 md:opacity-100 md:translate-x-full',
           )
         "
+        @after-enter="clickAwayArmed = true"
+        @after-leave="clickAwayArmed = false"
       >
         <DesignSystemAtomsContainer
           v-show="isMobileMenuOpen"
-          :spacing="{ top: 'none', bottom: 'none' }"
           v-click-away="clickAwayArmed && close"
+          :spacing="{ top: 'none', bottom: 'none' }"
           :class="
             themedClass(
               'mobileMenuContainerClass',
@@ -174,7 +175,6 @@
 </template>
 
 <script lang="ts" setup>
-
 const { metaLinks, contactButtons } = await useGlobalConfig()
 const { menuItems: metaMenuItems } = await useMenu('metaMenu')
 const languageLinks = useLanguageLinks()
@@ -185,8 +185,7 @@ const viewport = useViewport()
 const isMobileMenuOpen = ref(false)
 const clickAwayArmed = ref(false)
 
-const metaContainer = ref<HTMLElement | null>(null)
-const metaHeight = ref(0)
+const { metaHeight } = useNavigationOffset()
 
 onOpen(() => {
   isMobileMenuOpen.value = true
@@ -203,10 +202,4 @@ watch(viewport.breakpoint, (newValue: string) => {
     isMobileMenuOpen.value = false
   }
 })
-
-onMounted(() => {
-  requestAnimationFrame(() => {
-    metaHeight.value = metaContainer.value?.offsetHeight ?? 0
-  })
-})
 </script>

package/composables/__tests__/useImageSources.spec.ts

@@ -0,0 +1,91 @@
+import { describe, it, expect, vi, beforeAll } from 'vitest'
+import { computed, toRef } from 'vue'
+
+/**
+ * The image component renders width/height attributes from the sources the
+ * composable builds, so the browser reserves the box before the image has
+ * loaded (no layout shift, stable screenshots). Art-directed images carry
+ * one pair per <source>; images without an aspect ratio use the original
+ * file's dimensions.
+ */
+
+// Stand-in for @nuxt/image: one candidate per requested width, screens as
+// configured in nuxt.config.ts of the layer.
+const screens = { xs: 320, sm: 640, md: 768, lg: 1024, xl: 1280, xxl: 1536 }
+const img = Object.assign(
+  (src: string, modifiers: Record<string, unknown>) =>
+    `${src}?w=${modifiers.width}&h=${modifiers.height}`,
+  {
+    options: { screens },
+    getSizes: (src: string) => ({ sizes: '100vw', srcset: `${src} 1x`, src }),
+  },
+)
+
+type UseImageSources = typeof import('../useImageSources').useImageSources
+let useImageSources: UseImageSources
+
+beforeAll(async () => {
+  // The composable relies on Nuxt auto-imports; the unit suite is Nuxt-free.
+  vi.stubGlobal('useImage', () => img)
+  vi.stubGlobal('useRuntimeConfig', () => ({
+    public: { imageBaseUrl: 'https://backend.example' },
+  }))
+  vi.stubGlobal('toRef', toRef)
+  vi.stubGlobal('computed', computed)
+  useImageSources = (await import('../useImageSources')).useImageSources
+})
+
+const media = (dimensions: { width: number; height: number } | null) =>
+  ({
+    sourceUrl: { path: '/sites/default/files/image.jpg' },
+    dimensions,
+  }) as unknown as Parameters<UseImageSources>[0]['media']
+
+describe('useImageSources dimensions', () => {
+  it('reserves the largest candidate of a single aspect ratio', () => {
+    const { imageSources } = useImageSources({
+      media: media({ width: 4000, height: 3000 }),
+      imageAspectRatios: '16/9',
+      imageSizes: 'xs:100vw md:50vw lg:600px',
+    })
+    expect(imageSources.value).toHaveLength(1)
+    expect(imageSources.value[0]).toMatchObject({ width: 600, height: 338 })
+  })
+
+  it('reserves one box per art-directed source', () => {
+    const { imageSources } = useImageSources({
+      media: media({ width: 4000, height: 3000 }),
+      imageAspectRatios: 'xs:1/1 md:16/9',
+      imageSizes: 'xs:100vw md:50vw lg:600px',
+    })
+    expect(imageSources.value).toHaveLength(2)
+    // Square up to the md breakpoint: 50vw of 768px.
+    expect(imageSources.value[0]).toMatchObject({
+      media: '(max-width: 768px)',
+      width: 384,
+      height: 384,
+    })
+    // Landscape from md on; the last source has no media query and is the
+    // fallback the <img> uses.
+    expect(imageSources.value[1].media).toBeUndefined()
+    expect(imageSources.value[1]).toMatchObject({ width: 600, height: 338 })
+  })
+
+  it('uses the original dimensions when the natural ratio is kept', () => {
+    const { imageSources } = useImageSources({
+      media: media({ width: 4000, height: 3000 }),
+      imageAspectRatios: '',
+    })
+    expect(imageSources.value).toHaveLength(1)
+    expect(imageSources.value[0]).toMatchObject({ width: 4000, height: 3000 })
+  })
+
+  it('leaves the attributes out when the file dimensions are unknown', () => {
+    const { imageSources } = useImageSources({
+      media: media(null),
+      imageAspectRatios: '',
+    })
+    expect(imageSources.value[0].width).toBeUndefined()
+    expect(imageSources.value[0].height).toBeUndefined()
+  })
+})

package/composables/breadcrumb.ts

@@ -1,4 +1,7 @@
-import type { BreadcrumbFragment, RouteQuery } from '#graphql-operations'
+import type {
+  BreadcrumbLink,
+  RouteQueryWithBreadcrumb,
+} from '@iqual/nuxt-icms/types/breadcrumb'
 
 /**
  * Extract the breadcrumb from a route query.
@@ -6,10 +9,12 @@ import type { BreadcrumbFragment, RouteQuery } from '#graphql-operations'
  * @see ~/pages/[language]/[...slug]/query.route.graphql
  */
 function getBreadcrumbFromRouteQuery(
-  routeQuery: RouteQuery | undefined | null,
-): BreadcrumbFragment[] {
+  routeQuery: RouteQueryWithBreadcrumb | undefined | null,
+): BreadcrumbLink[] {
   if (routeQuery && routeQuery.route && 'breadcrumb' in routeQuery.route) {
-    return routeQuery.route.breadcrumb || []
+    return (routeQuery.route.breadcrumb || []).filter(
+      (link): link is BreadcrumbLink => !!link,
+    )
   }
   return []
 }
@@ -18,14 +23,14 @@ function getBreadcrumbFromRouteQuery(
  * Returns the current breadcrumb links.
  */
 export function useBreadcrumbLinks() {
-  return useState<BreadcrumbFragment[]>('breadcrumbLinks', () => [])
+  return useState<BreadcrumbLink[]>('breadcrumbLinks', () => [])
 }
 
 /**
  * Set the breadcrumb links for the current page.
  */
 export function setBreadcrumbLinksFromRoute(
-  routeQuery: RouteQuery | undefined | null,
+  routeQuery: RouteQueryWithBreadcrumb | undefined | null,
 ) {
   const links = useBreadcrumbLinks()
   links.value = getBreadcrumbFromRouteQuery(routeQuery)
@@ -35,7 +40,7 @@ export function setBreadcrumbLinksFromRoute(
  * Set the breadcrumb links directly.
  */
 export function setBreadcrumbLinks(
-  newLinks?: BreadcrumbFragment[] | null | undefined,
+  newLinks?: BreadcrumbLink[] | null | undefined,
 ) {
   const links = useBreadcrumbLinks()
   links.value = newLinks || []

package/composables/useAccordionScroll.ts

@@ -3,21 +3,29 @@ import { useNavigationOffset } from '@iqual/nuxt-icms/composables/useNavigationO
 export function useAccordionScroll() {
   const { navigationOffset } = useNavigationOffset()
 
-  const scrollToTrigger = (accordionEl: HTMLElement | undefined, index: number): void => {
+  const scrollToTrigger = (
+    accordionEl: HTMLElement | undefined,
+    index: number,
+  ): void => {
     if (!accordionEl) return
 
-    const triggers = accordionEl.querySelectorAll<HTMLElement>('[data-slot="trigger"]')
+    const triggers = accordionEl.querySelectorAll<HTMLElement>(
+      '[data-slot="trigger"]',
+    )
     const trigger = triggers[index]
 
     if (!trigger) return
 
     nextTick(() => {
       setTimeout(() => {
-        const top = window.scrollY + trigger.getBoundingClientRect().top - navigationOffset.value
+        const top =
+          window.scrollY +
+          trigger.getBoundingClientRect().top -
+          navigationOffset.value
         window.scrollTo({ top, behavior: 'smooth' })
       }, 400)
     })
   }
 
   return { scrollToTrigger }
-}
+}

package/composables/useAllowedFragments.ts

@@ -0,0 +1,14 @@
+import type { BlokkliFragmentName } from '#blokkli-build/definitions'
+
+/**
+ * The fragments editors may place in a page's paragraphs field.
+ *
+ * Passed as `allowed-fragments` to the page-level `<BlokkliField>`. The list
+ * holds every fragment blökkli discovered in the layer stack (collected at
+ * build time by the `blokkliFragments` module); it is empty when a project
+ * sets `icms.blokkliFragments: false`, in which case the editor's fragments
+ * feature is disabled altogether.
+ */
+export default function useAllowedFragments(): BlokkliFragmentName[] {
+  return (useAppConfig().icms?.allowedFragments ?? []) as BlokkliFragmentName[]
+}

package/composables/useAnchors.ts

@@ -0,0 +1,48 @@
+import { useNavigationOffset } from '@iqual/nuxt-icms/composables/useNavigationOffset'
+
+export type Anchor = { id: string; label: string }
+
+const anchorNavigationHeight = 52
+
+// Strips everything that is not safe in a URL fragment, e.g.
+// "Öffnungszeiten & Preise" -> "Offnungszeiten-Preise".
+const fragment = (text: string): string =>
+  text
+    .normalize('NFKD')
+    .replace(/[̀-ͯ]/g, '')
+    .trim()
+    .replace(/[^a-zA-Z0-9]+/g, '-')
+    .replace(/^-+|-+$/g, '')
+
+// Generates an id from a label. Lowercase on top, so a link typed by hand
+// ("#kontakt") hits the anchor no matter how the label is capitalised.
+export function anchorId(text: string): string {
+  return fragment(text.toLowerCase())
+}
+
+// The id an anchor block scrolls to: the anchor field when the editor filled
+// it in, kept as written apart from invalid characters, otherwise generated
+// from the label.
+export function resolveAnchorId(
+  label?: string | null,
+  anchor?: string | null,
+): string {
+  const explicit = anchor?.trim()
+
+  return explicit ? fragment(explicit) : anchorId(label ?? '')
+}
+
+// Both measured from the top of the viewport:
+// headerOffset sits below the header, where the anchor navigation sticks.
+// anchorOffset sits below the anchor navigation, where a section scrolls to.
+export function useAnchorOffset(): {
+  headerOffset: ComputedRef<number>
+  anchorOffset: ComputedRef<number>
+} {
+  const { headerHeight } = useNavigationOffset()
+
+  return {
+    headerOffset: headerHeight,
+    anchorOffset: computed(() => headerHeight.value + anchorNavigationHeight),
+  }
+}

package/composables/useChildTitleWeight.ts

@@ -10,4 +10,4 @@ export function useChildTitleWeight(titleWeight: string) {
   } else {
     return 'p'
   }
-}
+}

package/composables/useCurrentLangcodeEnum.ts

@@ -1,4 +1,4 @@
-import { Langcode } from '#graphql-operations'
+import { Langcode } from '@iqual/nuxt-icms/types/langcode'
 
 /**
  * Return the current langcode enum for GraphQL requests.

package/composables/useCurrentNodeId.ts

@@ -0,0 +1,8 @@
+/**
+ * The node ID of the node the current Drupal route resolves to.
+ *
+ * Set by the current-node plugin via the vuepal:drupal-route hook and
+ * null on routes that don't resolve to a node.
+ */
+export const useCurrentNodeId = () =>
+  useState<string | null>('currentNodeId', () => null)

package/composables/useDrupalUrl.ts

@@ -0,0 +1,15 @@
+import { drupalOrigin, toDrupalUrl } from '../shared/drupalUrl'
+
+/**
+ * Returns a function that turns a Drupal path into a browser-facing URL.
+ *
+ * The Drupal backend runs on the "backend." subdomain of the domain the
+ * frontend was requested on (see docs/routing.md), so the origin is derived
+ * per request and is right on every domain a site serves. Use it for every
+ * link or iframe pointing at Drupal (login, admin, entity forms) — it is the
+ * only place the backend URL is read from.
+ */
+export default function useDrupalUrl() {
+  const origin = drupalOrigin(useRequestURL())
+  return (path: string): string => toDrupalUrl(path, origin)
+}

package/composables/useEnrichFacetLabels.ts

@@ -10,14 +10,14 @@
  */
 export async function useEnrichFacetLabels(
   facets: any[],
-  fieldsToEnrich: string[] = ['topics']
+  fieldsToEnrich: string[] = ['topics'],
 ): Promise<any[]> {
   if (!facets || facets.length === 0) {
     return facets
   }
 
   // Find facets that need enrichment
-  const facetsToEnrich = facets.filter(f => fieldsToEnrich.includes(f.field))
+  const facetsToEnrich = facets.filter((f) => fieldsToEnrich.includes(f.field))
 
   if (facetsToEnrich.length === 0) {
     return facets
@@ -37,7 +37,9 @@ export async function useEnrichFacetLabels(
 
   // Fetch term labels via GraphQL
   try {
-    const response: any = await useGraphqlQuery('facetTermLabels' as any, { ids: termIds })
+    const response: any = await useGraphqlQuery('facetTermLabels' as any, {
+      ids: termIds,
+    })
     const terms = response?.data?.terms?.items || []
 
     if (terms.length === 0) {
@@ -53,7 +55,7 @@ export async function useEnrichFacetLabels(
     }
 
     // Update facet filter labels
-    return facets.map(facet => {
+    return facets.map((facet) => {
       if (fieldsToEnrich.includes(facet.field) && facet.filter?.id) {
         const label = termLabelMap.get(facet.filter.id)
         if (label) {
@@ -61,8 +63,8 @@ export async function useEnrichFacetLabels(
             ...facet,
             filter: {
               ...facet.filter,
-              label
-            }
+              label,
+            },
           }
         }
       }

package/composables/useEntityRegistry.ts

@@ -1,6 +1,6 @@
 const nodeComponentRegistry = new Map<string, Component>()
 
-export const useEntityRegistry  = () => {
+export const useEntityRegistry = () => {
   const register = (type: string, component: Component) => {
     nodeComponentRegistry.set(type, component)
   }
@@ -16,6 +16,6 @@ export const useEntityRegistry  = () => {
   return {
     register,
     get,
-    getAll
+    getAll,
   }
-}
+}

package/composables/useGlobalConfig.ts

@@ -1,4 +1,3 @@
-
 export async function useGlobalConfig() {
   const initData = useInitData()
 
@@ -44,7 +43,7 @@ export async function useGlobalConfig() {
 
   return {
     companyLogo,
-    companyLogoAlt, 
+    companyLogoAlt,
     companyName,
     companyDescription,
     address,

package/composables/useGraphqlCacheability.ts

@@ -6,8 +6,9 @@ export function useGraphqlCacheability(
   response?: GraphqlResponseTyped,
 ) {
   if (import.meta.server) {
+    const cacheability = response?.extensions.cacheability
+
     useCDNHeaders((cdn) => {
-      const cacheability = response?.extensions.cacheability
       if (!cacheability?.isCacheable) {
         cdn.private()
         return
@@ -18,5 +19,15 @@ export function useGraphqlCacheability(
         .setNumeric('sharedMaxAge', cacheability.sharedMaxAge)
         .addTags(cacheability.tagsCdn)
     }, event)
+
+    // The route cache is purged by Drupal with the encoded tags.
+    useRouteCache((route) => {
+      if (!cacheability?.isCacheable) {
+        route.setUncacheable()
+        return
+      }
+
+      route.setMaxAge(cacheability.sharedMaxAge).addTags(cacheability.tagsNuxt)
+    }, event)
   }
 }

package/composables/useHreflangLinks.ts

@@ -0,0 +1,54 @@
+export interface HreflangAlternate {
+  code: string
+  path: string
+}
+
+export type HreflangLink = {
+  rel: 'alternate'
+  hreflang: string
+  href: string
+}
+
+/**
+ * Builds the `<link rel="alternate" hreflang>` tags of a single page.
+ *
+ * Without them search engines rank the language versions of a page against
+ * each other as near-duplicates. No `x-default`: it would name the fallback
+ * of the `/` redirect, which lives in the router config (`routing.languages`)
+ * and is not visible here.
+ */
+export function buildHreflangLinks(
+  alternates: HreflangAlternate[],
+  origin: string,
+): HreflangLink[] {
+  if (!origin || alternates.length < 2) {
+    return []
+  }
+
+  return alternates.map((alternate) => ({
+    rel: 'alternate',
+    hreflang: alternate.code,
+    href: origin + alternate.path,
+  }))
+}
+
+/**
+ * The hreflang link tags for the current route, for `useHead()`.
+ *
+ * Translations come from the route query's `languageSwitchLinks`, the same
+ * source as the language switcher.
+ */
+export function useHreflangLinks() {
+  const languageLinks = useLanguageLinks()
+  const requestUrl = useRequestURL({ xForwardedHost: true })
+
+  return computed<HreflangLink[]>(() => {
+    const alternates = (languageLinks.value ?? []).flatMap((link) =>
+      link.enabled && typeof link.to === 'string'
+        ? [{ code: link.code, path: link.to }]
+        : [],
+    )
+
+    return buildHreflangLinks(alternates, requestUrl.origin)
+  })
+}