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

package/config/blokkli.ts

@@ -1,22 +1,16 @@
 import drupal from '@blokkli/editor/drupal'
 import { join } from 'node:path'
 import { defineNuxtConfigProperty, currentLayerDir } from '.'
-import tailwindConfig from '../tailwind.config'
-// import resolveConfig from 'tailwindcss/resolveConfig'
 
-// const fullTailwindConfig = resolveConfig(tailwindConfig)
-// const tailwindColors = fullTailwindConfig.theme.colors as Record<string, any>
 const IS_DEV = process.env.NODE_ENV === 'development'
 
-// Helper function to transform Tailwind's rgb(xx, xx, xx) colors to blökkli's theme [xx, xx, xx]
-const transformColor = (color: string): number[] => {
-  return color.substring(4, color.length - 1).replace(/ /g, '').split(',').map(Number)
-}
-
-export default defineNuxtConfigProperty<'blokkli'>((ctx) => {
+export default defineNuxtConfigProperty<'blokkli'>(() => {
   return {
-
     modules: [drupal()],
+    // The layer's adapter extends blökkli's Drupal adapter so that Drupal
+    // forms load from the backend domain. An app-level
+    // app/blokkli.editAdapter.ts still takes precedence.
+    editAdapterPath: join(currentLayerDir, 'blokkli.editAdapter.ts'),
     theme: {
       accent: {
         '50': [254, 245, 238],
@@ -167,7 +161,7 @@ export default defineNuxtConfigProperty<'blokkli'>((ctx) => {
           right: {
             label: 'Right',
             icon: 'icon-blokkli-option-align-h-right',
-          }
+          },
         },
       },
       alignHorizontalReduced: {
@@ -183,7 +177,7 @@ export default defineNuxtConfigProperty<'blokkli'>((ctx) => {
           right: {
             label: 'Right',
             icon: 'icon-blokkli-option-align-h-right',
-          }
+          },
         },
       },
       alignVerticalReduced: {

package/config/easyTexts.ts

@@ -10,4 +10,4 @@ export default defineNuxtConfigProperty<'easyTexts'>(() => {
       },
     ],
   }
-})
+})

package/config/graphqlMiddleware.ts

@@ -3,8 +3,15 @@ import { join } from 'path'
 
 const NUXT_BACKEND_URL = process.env.NUXT_BACKEND_URL
 const IS_DEV = process.env.NODE_ENV === 'development'
+// A dev-mode prepare on CI (the linting workflow needs one) has no Drupal
+// backend to introspect — the committed schema.graphql is the source there.
+const IS_CI = !!process.env.CI
+// `make frontend-schema` forces a download regardless of mode: locally to
+// refresh the committed schema, in the testing workflow's build job (where a
+// Drupal backend exists) to detect a stale one.
+const FORCE_DOWNLOAD = process.env.NUXT_GRAPHQL_DOWNLOAD_SCHEMA === 'true'
 
-export default defineNuxtConfigProperty<'graphqlMiddleware'>((ctx) => {
+export default defineNuxtConfigProperty<'graphqlMiddleware'>(() => {
   return {
     serverApiPrefix: '/api/graphql',
     autoImportPatterns: [
@@ -20,10 +27,10 @@ export default defineNuxtConfigProperty<'graphqlMiddleware'>((ctx) => {
       '~/server/**/*.{gql,graphql}',
       '~/sites/**/*.{gql,graphql}',
       '!node_modules',
-      join(currentLayerDir, './**/*.{gql,graphql}')
+      join(currentLayerDir, './**/*.{gql,graphql}'),
     ],
     documents: [],
-    downloadSchema: IS_DEV,
+    downloadSchema: FORCE_DOWNLOAD || (IS_DEV && !IS_CI),
     graphqlEndpoint: `${NUXT_BACKEND_URL}/graphql`, // If we have Multisite Setup we need to use NUXT_HOST here.
     codegenConfig: {
       skipUnusedFragments: true,
@@ -36,4 +43,4 @@ export default defineNuxtConfigProperty<'graphqlMiddleware'>((ctx) => {
       },
     },
   }
-})
+})

package/config/index.ts

@@ -3,7 +3,10 @@ import type { NuxtConfig } from '@nuxt/schema'
 import { fileURLToPath } from 'node:url'
 import { dirname, join } from 'node:path'
 
-export const currentLayerDir = join(dirname(fileURLToPath(import.meta.url)), '..')
+export const currentLayerDir = join(
+  dirname(fileURLToPath(import.meta.url)),
+  '..',
+)
 
 type ModuleConfigContext = {
   DEV: boolean
@@ -21,4 +24,4 @@ export function defineNuxtConfigProperty<T extends keyof NuxtConfig>(
   cb: (ctx: ModuleConfigContext) => NuxtConfig[T],
 ) {
   return cb(ctx)
-}
+}

package/config/languageNegotiation.ts

@@ -5,7 +5,7 @@ import {
   acceptLanguage,
 } from 'nuxt-language-negotiation/negotiators'
 
-export default defineNuxtConfigProperty<'languageNegotiation'>((ctx) => {
+export default defineNuxtConfigProperty<'languageNegotiation'>(() => {
   return {
     negotiators: [
       pathPrefix(),

package/config/multiCache.ts

@@ -8,8 +8,10 @@ export default defineNuxtConfigProperty<'multiCache'>((ctx) => {
     data: {
       enabled: true,
     },
+    // Built in, but pages only land in it via usePageCache() and only in
+    // the default page cache mode (runtimeConfig.pageCache).
     route: {
-      enabled: false,
+      enabled: true,
     },
     api: {
       enabled: true,
@@ -17,6 +19,9 @@ export default defineNuxtConfigProperty<'multiCache'>((ctx) => {
       prefix: '/api/multi-cache',
       cacheTagInvalidationDelay: 5000,
     },
+    // Collects the cacheability of every SSR response. The headers are only
+    // sent as-is in the `varnish` page cache mode; the default mode rewrites
+    // them to browser-only headers (server/plugins/pageCache.ts).
     cdn: {
       enabled: true,
       cacheControlHeader: 'Cache-Control',

package/config/postcss-drupal/postcss.config.cjs

@@ -1,6 +1,6 @@
 module.exports = {
   plugins: {
-    "@tailwindcss/postcss": {},
+    '@tailwindcss/postcss': {},
     'postcss-nesting': {},
     'postcss-hexrgba': {
       colorFunctionNotation: 'modern',
@@ -10,4 +10,4 @@ module.exports = {
       preset: 'default',
     },
   },
-}
+}

package/config/runtimeConfig.ts

@@ -1,14 +1,19 @@
 import { defineNuxtConfigProperty } from '.'
+import { pageCacheDefaults } from '../utils/pageCache'
 
-export default defineNuxtConfigProperty<'runtimeConfig'>(() => {
+export default defineNuxtConfigProperty<'runtimeConfig'>((ctx) => {
   return {
     backendUrl: '',
     requestHost: '',
     drupalGraphqlToken: process.env.DRUPAL_GRAPHQL_TOKEN || '',
     elasticsearchUrl: '',
     elasticsearchPrefix: '',
+    // Page cache mode and budgets (ICMS-268), overridable per project in
+    // nuxt.config.ts or via NUXT_PAGE_CACHE_* environment variables. See
+    // utils/pageCache.ts. The route cache is off in development.
+    pageCache: pageCacheDefaults(ctx.DEV),
     public: {
-      imageBaseUrl: ''
+      imageBaseUrl: '',
     },
   }
 })

package/config/svgIconSprite.ts

@@ -8,9 +8,8 @@ export default defineNuxtConfigProperty<'svgIconSprite'>(() => {
         importPatterns: [
           join(currentLayerDir, './assets/symbols/**/*.svg'),
           'app/assets/symbols/**/*.svg',
-        ]
+        ],
       },
     },
   }
 })
-

package/config/vuepal.ts

@@ -1,24 +1,28 @@
 import { defineNuxtConfigProperty } from '.'
-import { resolve, dirname } from 'path'
-import { fileURLToPath } from 'url'
-import { existsSync } from 'fs'
 
 const NUXT_REQUEST_HOST = process.env.NUXT_REQUEST_HOST
 const IS_DEV = process.env.NODE_ENV === 'development'
+// A dev-mode prepare on CI (the linting workflow needs one) has no local
+// Drupal checkout to write into.
+const IS_CI = !!process.env.CI
 
-export default defineNuxtConfigProperty<'vuepal'>((ctx) => {
+export default defineNuxtConfigProperty<'vuepal'>(() => {
   return {
     frontendRouting: {
       enabled: true,
-      outputPath: IS_DEV 
-        ? './../drupal/config/default/frontend_routing.settings.yml'
-        : './app/tmp.yml',
+      outputPath:
+        IS_DEV && !IS_CI
+          ? './../drupal/config/default/frontend_routing.settings.yml'
+          : './app/tmp.yml',
     },
+    // The admin UI is Drupal's: editors browse the frontend inside the
+    // backend's site shell (docs/routing.md), so the frontend renders no
+    // toolbar or local tasks of its own.
     adminToolbar: {
-      enabled: true,
+      enabled: false,
     },
     localTasks: {
-      enabled: true,
+      enabled: false,
     },
     languageSwitchLinks: {
       enabled: true,
@@ -27,19 +31,13 @@ export default defineNuxtConfigProperty<'vuepal'>((ctx) => {
       enabled: true,
       routeQueries: {
         nodeIcmsPage: {
-          fragments: [
-            'nodeIcmsPage'
-          ]
+          fragments: ['nodeIcmsPage'],
         },
         slug: {
-          fragments: [
-            'nodeIcmsPage',
-          ]
+          fragments: ['nodeIcmsPage'],
         },
         nodeCanonical: {
-          fragments: [
-            'nodeIcmsPage',
-          ]
+          fragments: ['nodeIcmsPage'],
         },
       },
     },

package/error.vue

@@ -1,34 +1,13 @@
 <template>
   <div class="bk-main-canvas relative">
-    <ClientOnly>
-      <div
-        v-if="drupalUser.accessToolbar && !isEditing"
-        class="hidden border-b border-b-gray-100 bg-white 2xl:block"
-      >
-        <VuepalAdminToolbar :key="language" />
-        <div class="flex">
-          <div class="mx-auto w-auto bg-white py-8 xl:min-w-[1174px]">
-            <VuepalLocalTasks />
-          </div>
-        </div>
-      </div>
-    </ClientOnly>
+    <NuxtLoadingIndicator color="var(--primary-500)" :height="3" />
     <NuxtLayout name="error" />
   </div>
 </template>
 
 <script setup lang="ts">
-const route = useRoute()
-const drupalUser = useDrupalUser()
 const language = useCurrentLanguage()
 
-
-const isEditing = computed(
-  () =>
-    !!(route.query.blokkliEditing || route.query.blokkliPreview) &&
-    drupalUser.value.accessToolbar,
-)
-
 useHead({
   htmlAttrs: {
     lang: language.value,

package/layouts/default.vue

@@ -2,10 +2,6 @@
   <div>
     <SectionHeader />
 
-    <!-- <NuxtPageDependency>
-      <DrupalBreadcrumb v-if="showBreadcrumb" :links="breadcrumb" />
-    </NuxtPageDependency> -->
-
     <div>
       <ClientOnly>
         <DrupalMessages v-if="!isEditing" />
@@ -21,6 +17,7 @@
 const route = useRoute()
 const drupalUser = useDrupalUser()
 const language = useCurrentLanguage()
+const hreflangLinks = useHreflangLinks()
 
 const node = route.meta.drupalFrontendRoute
   ? ref(null)
@@ -30,6 +27,7 @@ useHead({
   htmlAttrs: {
     lang: language.value,
   },
+  link: hreflangLinks,
   meta: [
     {
       name: 'robots',
@@ -48,6 +46,4 @@ const isEditing = computed(
     !!(route.query.blokkliEditing || route.query.blokkliPreview) &&
     drupalUser.value.accessToolbar,
 )
-
-const showBreadcrumb = computed(() => !route.meta.hideBreadcrumb)
 </script>

package/layouts/error.vue

@@ -2,10 +2,6 @@
   <div>
     <SectionHeader />
 
-    <!-- <NuxtPageDependency>
-      <DrupalBreadcrumb v-if="showBreadcrumb" :links="breadcrumb" />
-    </NuxtPageDependency> -->
-
     <div>
       <ClientOnly>
         <DrupalMessages v-if="!isEditing" />
@@ -14,7 +10,7 @@
       <div class="container mx-auto grid grid-cols-1 gap-6 py-12">
         <div class="ck-editor text-center">
           <h1>Whooops!</h1>
-          <p v-html="errorMessage.replace(/\n/g, '<br>')"></p>
+          <p v-html="errorMessage.replace(/\n/g, '<br>')" />
           <NuxtLink
             class="mt-8 inline-block underline"
             :to="`/${currentLanguage}`"
@@ -45,25 +41,21 @@ const isEditing = computed(
     drupalUser.value.accessToolbar,
 )
 
-const showBreadcrumb = computed(() => !route.meta.hideBreadcrumb)
-
 const currentLanguage = useCurrentLanguage()
 
 const error = useError()
 const errorCode = error.value?.statusCode || 'Unknown error'
 
-const errorMessages = {
+const UNKNOWN_ERROR_MESSAGE = 'An unknown error occurred.'
+
+const errorMessages: Record<string, string> = {
   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.',
 }
 
-const errorMessage = computed(() => {
-  if (errorMessages[errorCode]) {
-    return errorMessages[errorCode]
-  }
-  return errorMessages['Unknown error']
-})
+const errorMessage = computed(
+  () => errorMessages[String(errorCode)] ?? UNKNOWN_ERROR_MESSAGE,
+)
 
 useHead({
   title: errorMessage,

package/modules/blokkliFragments.ts

@@ -0,0 +1,76 @@
+/**
+ * Wires up blökkli fragments for the layer stack.
+ *
+ * Fragments (`defineBlokkliFragment()`) are blocks whose content lives only in
+ * the frontend; Drupal stores nothing but the fragment's name, so *which*
+ * fragments editors may place is a frontend decision. This module
+ *
+ * 1. collects the fragments blökkli discovered in all layers and exposes their
+ *    names as `icms.allowedFragments` in the app config, from where
+ *    `useAllowedFragments()` passes them to the page-level `<BlokkliField>` —
+ *    a fragment only needs to exist to be offered,
+ * 2. disables blökkli's `fragments` feature when a layer sets
+ *    `icms.blokkliFragments: false` or no fragment exists — otherwise the
+ *    editor shows an "Add fragment" button opening an empty dialog, because
+ *    the feature itself only depends on Drupal exposing the
+ *    `blokkli_fragment` paragraph type.
+ *
+ * @example
+ * // In the nuxt.config.ts of a project that does not want fragments
+ * export default defineNuxtConfig({
+ *   icms: {
+ *     blokkliFragments: false,
+ *   },
+ * })
+ */
+import { defineNuxtModule } from 'nuxt/kit'
+import type { IcmsLayerConfig } from '../types/layerConfig'
+
+export default defineNuxtModule({
+  meta: {
+    name: 'blokkliFragments',
+  },
+  setup(_options, nuxt) {
+    // The project layer comes first, so its setting wins.
+    const enabled =
+      nuxt.options._layers
+        .map(
+          (layer) =>
+            (layer.config?.icms as IcmsLayerConfig | undefined)
+              ?.blokkliFragments,
+        )
+        .find((value) => typeof value === 'boolean') ?? true
+
+    // The features hook runs before the blocks hook, so the decision to
+    // disable is taken once the fragments are known.
+    let feature: { disable: () => void } | undefined
+    nuxt.hooks.hook('blokkli:alter-features', ({ features }) => {
+      feature = features.find((v) => v.getDefinition()?.id === 'fragments')
+    })
+
+    nuxt.hooks.hook('blokkli:alter-blocks', ({ blocks }) => {
+      const allowedFragments = enabled
+        ? [
+            ...new Set(
+              blocks
+                .filter((block) => block.type === 'fragment')
+                .map((block) => block.definition?.name)
+                .filter((name): name is string => typeof name === 'string'),
+            ),
+          ].sort()
+        : []
+
+      // Cast: the type of `appConfig` is generated from the very value written
+      // here, so it narrows `allowedFragments` to whatever the last build had.
+      const appConfig = nuxt.options.appConfig as Record<string, unknown>
+      appConfig.icms = {
+        ...(appConfig.icms as Record<string, unknown> | undefined),
+        allowedFragments,
+      }
+
+      if (!allowedFragments.length) {
+        feature?.disable()
+      }
+    })
+  },
+})

package/modules/dynamicEntityComponentResolver.ts

@@ -6,100 +6,100 @@
  * proper override priority (main app overrides layers).
  */
 
-import { defineNuxtModule, addPlugin, addTemplate, createResolver } from '@nuxt/kit'
+import { defineNuxtModule } from '@nuxt/kit'
+import type { IcmsLayerConfig } from '../types/layerConfig'
 
 export default defineNuxtModule({
   meta: { name: 'dynamicEntityComponentResolver' },
   setup(_options, nuxt) {
-
     // Private helper to extract unique fragment values from any routeQueries object.
-    function extractFragments(routeQueries: any): string[] {
-      const fragments = new Set<string>();
+    function extractFragments(routeQueries: unknown): string[] {
+      const fragments = new Set<string>()
 
-      function traverse(obj: any) {
+      function traverse(obj: unknown) {
         if (Array.isArray(obj)) {
-          obj.forEach(item => traverse(item));
+          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);
-              });
+          for (const [key, value] of Object.entries(obj)) {
+            if (key === 'fragments' && Array.isArray(value)) {
+              value.forEach((frag) => {
+                if (typeof frag === 'string') fragments.add(frag)
+              })
             } else {
-              traverse(obj[key]);
+              traverse(value)
             }
           }
         }
       }
 
-      traverse(routeQueries);
-      return Array.from(fragments);
+      traverse(routeQueries)
+      return Array.from(fragments)
     }
 
+    const layerConfigs: IcmsLayerConfig[] = nuxt.options._layers
+      .map((layer) => layer.config?.icms)
+      .filter((config): config is IcmsLayerConfig => !!config)
+
     // Creates graphQL fragments for all reoute queries.
     const entityFragments = nuxt.options._layers
-      .map((layer, idx) => {
-        const queries = layer.config?.vuepal?.drupalRoute?.routeQueries;
-        const fragments = extractFragments(queries);
-        return fragments;
+      .map((layer) => {
+        const vuepal = layer.config?.vuepal
+        const queries = vuepal ? vuepal.drupalRoute?.routeQueries : undefined
+        return extractFragments(queries)
       })
-      .filter(arr => Array.isArray(arr) && arr.length)
+      .filter((arr) => Array.isArray(arr) && arr.length)
       .flat()
-      .filter(Boolean);
+      .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)
+    const entityFragmentsExtend = layerConfigs
+      .map((config) => config.extendFragments?.entity)
+      .filter((arr) => Array.isArray(arr) && arr.length)
       .flat()
-      .filter(Boolean);
+      .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)
+    const entityTeaserFragmentsExtend = layerConfigs
+      .map((config) => config.extendFragments?.teaser)
+      .filter((arr) => Array.isArray(arr) && arr.length)
       .flat()
-      .filter(Boolean);
+      .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)
+    const entitySearchResultFragmentsExtend = layerConfigs
+      .map((config) => config.extendFragments?.searchResult)
+      .filter((arr) => Array.isArray(arr) && arr.length)
       .flat()
-      .filter(Boolean);
+      .filter(Boolean)
 
     const entityFagment = `
 fragment entity on Entity {
   __typename
-  ${entityFragments.map((fragmentName) => fragmentName ? `...${fragmentName}` : '').join('\n  ')}
-  ${entityFragmentsExtend.map((fragmentName) => fragmentName ? `...${fragmentName}` : '').join('\n  ')}
+  ${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  ')}
+  ${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  ')}
+  ${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)
+      context.addDocument(
+        'fragment.entitySearchResult.graphql',
+        entitySearchResultFagment,
+      )
     })
-  } 
+  },
 })
-