@iqual/nuxt-icms 1.0.2

package/layouts/default.vue

@@ -0,0 +1,66 @@
+<template>
+  <div>
+    <SectionHeader
+      @menu:open="menuOpen"
+      @menu:close:start="menuCloseStart"
+      @menu:close:finished="menuCloseFinish"
+    />
+
+    <NuxtPageDependency>
+      <DrupalBreadcrumb v-if="showBreadcrumb" :links="breadcrumb" />
+    </NuxtPageDependency>
+
+    <div>
+      <ClientOnly>
+        <DrupalMessages v-if="!isEditing" />
+      </ClientOnly>
+
+      <NuxtPage />
+    </div>
+    <SectionFooter />
+  </div>
+</template>
+
+<script setup lang="ts">
+const route = useRoute()
+const drupalUser = useDrupalUser()
+const language = useCurrentLanguage()
+const breadcrumb = useBreadcrumbLinks()
+const viewport = useViewport()
+
+const isEditing = computed(
+  () =>
+    !!(route.query.blokkliEditing || route.query.blokkliPreview) &&
+    drupalUser.value.accessToolbar,
+)
+
+const showBreadcrumb = computed(() => !route.meta.hideBreadcrumb)
+
+useHead({
+  htmlAttrs: {
+    lang: language.value,
+  },
+})
+
+const isMenuOpen = ref(false)
+const hasMenuFinishedClosing = ref(true)
+
+function menuOpen() {
+  window.document.body.classList.add('overflow-y-hidden')
+  isMenuOpen.value = true
+}
+
+function menuCloseStart() {
+  if (viewport.isLessThan('md')) {
+    isMenuOpen.value = false
+    hasMenuFinishedClosing.value = false
+  }
+}
+
+function menuCloseFinish() {
+  if (viewport.isLessThan('md')) {
+    window.document.body.classList.remove('overflow-y-hidden')
+    hasMenuFinishedClosing.value = true
+  }
+}
+</script>

package/layouts/error.vue

@@ -0,0 +1,98 @@
+<template>
+  <div>
+    <SectionHeader
+      @menu:open="menuOpen"
+      @menu:close:start="menuCloseStart"
+      @menu:close:finished="menuCloseFinish"
+    />
+
+    <NuxtPageDependency>
+      <DrupalBreadcrumb v-if="showBreadcrumb" :links="breadcrumb" />
+    </NuxtPageDependency>
+
+    <div>
+      <ClientOnly>
+        <DrupalMessages v-if="!isEditing" />
+      </ClientOnly>
+
+
+      <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>
+          <NuxtLink
+            class="mt-8 inline-block underline"
+            :to="`/${currentLanguage}`"
+            prefetch
+            >Go back to home</NuxtLink>
+        </div>
+      </div>
+
+    </div>
+    <SectionFooter />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useError } from '#app'
+import { useHead } from '#imports'
+
+const route = useRoute()
+const drupalUser = useDrupalUser()
+const language = useCurrentLanguage()
+const breadcrumb = useBreadcrumbLinks()
+const viewport = useViewport()
+
+const isEditing = computed(
+  () =>
+    !!(route.query.blokkliEditing || route.query.blokkliPreview) &&
+    drupalUser.value.accessToolbar,
+)
+
+const showBreadcrumb = computed(() => !route.meta.hideBreadcrumb)
+
+const currentLanguage = useCurrentLanguage()
+
+const error = useError()
+const errorCode = error.value?.statusCode || 'Unknown error'
+
+const errorMessages = {
+  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']
+});
+
+useHead({
+  title: errorMessage
+})
+
+const isMenuOpen = ref(false)
+const hasMenuFinishedClosing = ref(true)
+
+function menuOpen() {
+  window.document.body.classList.add('overflow-y-hidden')
+  isMenuOpen.value = true
+}
+
+function menuCloseStart() {
+  if (viewport.isLessThan('md')) {
+    isMenuOpen.value = false
+    hasMenuFinishedClosing.value = false
+  }
+}
+
+function menuCloseFinish() {
+  if (viewport.isLessThan('md')) {
+    window.document.body.classList.remove('overflow-y-hidden')
+    hasMenuFinishedClosing.value = true
+  }
+}
+
+</script>

package/layouts/library.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <slot />
+  </div>
+</template>

package/modules/dynamicNodeResolver.ts

@@ -0,0 +1,95 @@
+/**
+ * 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/modules/dynamicParagraphResolver.ts

@@ -0,0 +1,69 @@
+/**
+ * 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.
+ *
+ * @module dynamicParagraphResolver
+ *
+ * @example
+ * // In nuxt.config.ts
+ * export default defineNuxtConfig({
+ *   modules: [
+ *     // ... other modules
+ *     '@iqual/nuxt-icms/modules/dynamicParagraphResolver'
+ *   ],
+ *   // Optional configuration for a layer
+ *   icms: {
+ *     components: {
+ *       fragments: ['ParagraphText', 'ParagraphImage']
+ *     }
+ *   }
+ * })
+ *
+ * @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
+ *
+ * Each layer can define its own paragraph fragments through the
+ * `icms.components.fragments` configuration property.
+ *
+ * @see
+ * This works in conjunction with the nuxt-graphql-middleware to make
+ * the fragments available in GraphQL queries throughout the application.
+ */
+import { defineNuxtModule } from 'nuxt/kit'
+
+/**
+ * Module definition for the dynamicParagraphResolver
+ *
+ * @returns {Object} Nuxt module definition
+ */
+export default defineNuxtModule({
+  meta: {
+    name: 'nuxt-graphql-middleware-playground',
+  },
+  setup(_options, nuxt) {
+    // Collect all paragraph fragments from the Nuxt layers.
+    const paragraphFragments = nuxt.options._layers
+      .map(layer => layer.config?.icms?.components?.fragments)
+      .filter(Boolean)
+      .flat()
+      .map((fragmentName) => {
+        return `...${fragmentName}`
+      })
+
+    const fragment = `
+fragment paragraph on Paragraph {
+  id
+  parentId
+  ${paragraphFragments.join('\n  ')}
+}
+    `
+    nuxt.hooks.hookOnce('nuxt-graphql-middleware:init', (context) => {
+      context.addDocument('fragment.paragraph.graphql', fragment)
+    })
+  }
+})