@iqual/nuxt-icms 1.4.10 → 1.5.0

package/config/blokkli.ts

@@ -0,0 +1,388 @@
+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) => {
+  return {
+
+    modules: [drupal()],
+    theme: {
+      accent: {
+        '50': [254, 245, 238],
+        '100': [252, 232, 216],
+        '200': [248, 206, 176],
+        '300': [243, 171, 126],
+        '400': [237, 126, 74],
+        '500': [232, 93, 39],
+        '600': [217, 69, 29],
+        '700': [180, 51, 26],
+        '800': [144, 42, 28],
+        '900': [116, 37, 26],
+        '950': [63, 16, 11],
+      },
+      mono: {
+        '50': [246, 246, 246],
+        '100': [235, 235, 235],
+        '200': [218, 218, 218],
+        '300': [182, 182, 182],
+        '400': [150, 150, 150],
+        '500': [116, 116, 116],
+        '600': [94, 94, 94],
+        '700': [73, 73, 73],
+        '800': [57, 57, 57],
+        '900': [44, 44, 44],
+        '950': [36, 36, 36],
+      },
+      teal: {
+        light: [216, 243, 233],
+        normal: [131, 165, 152],
+        dark: [38, 59, 51],
+      },
+      yellow: {
+        light: [251, 241, 199],
+        normal: [250, 189, 47],
+        dark: [144, 106, 20],
+      },
+      red: {
+        light: [255, 218, 214],
+        normal: [251, 73, 52],
+        dark: [142, 24, 11],
+      },
+      lime: {
+        light: [236, 236, 197],
+        normal: [184, 187, 38],
+        dark: [80, 80, 12],
+      },
+    },
+    settingsOverride: {
+      'feature:block-add-list:hideDisabledBlocks': {
+        default: true,
+      },
+    },
+    pattern: [
+      './components/Paragraph/**/*.{js,ts,vue}',
+      join(currentLayerDir, './components/Blokkli/**/*.{js,ts,vue}'),
+    ],
+    globalOptions: {
+      spacingTop: {
+        type: 'radios',
+        label: 'Top',
+        default: 'small',
+        displayAs: 'icons',
+        group: 'Spacing',
+        options: {
+          none: {
+            label: 'None',
+            icon: 'icon-blokkli-option-spacing-top-none',
+          },
+          small: {
+            label: 'Small',
+            icon: 'icon-blokkli-option-spacing-top-small',
+          },
+          large: {
+            label: 'Large',
+            icon: 'icon-blokkli-option-spacing-top-large',
+          },
+        },
+      },
+      spacingBottom: {
+        type: 'radios',
+        label: 'Bottom',
+        default: 'small',
+        displayAs: 'icons',
+        group: 'Spacing',
+        options: {
+          none: {
+            label: 'None',
+            icon: 'icon-blokkli-option-spacing-bottom-none',
+          },
+          small: {
+            label: 'Small',
+            icon: 'icon-blokkli-option-spacing-bottom-small',
+          },
+          large: {
+            label: 'Large',
+            icon: 'icon-blokkli-option-spacing-bottom-large',
+          },
+        },
+      },
+      colorScheme: {
+        type: 'radios',
+        label: 'Color',
+        default: 'none',
+        displayAs: 'colors',
+        options: {
+          none: { class: 'bg-white', label: 'None' },
+          dark: { class: 'bg-gray-950', label: 'dark' },
+          light: { class: 'bg-gray-100', label: 'Light' },
+          accent: { class: 'bg-primary-600', label: 'Accent' },
+        },
+      },
+      width: {
+        type: 'radios',
+        label: 'Width',
+        default: 'wide',
+        displayAs: 'icons',
+        options: {
+          narrow: {
+            label: 'Narrow',
+            icon: 'icon-blokkli-option-text-width-small',
+          },
+          medium: {
+            label: 'Medium',
+            icon: 'icon-blokkli-option-text-width-medium',
+          },
+          wide: {
+            label: 'Wide',
+            icon: 'icon-blokkli-option-text-width-large',
+          },
+        },
+      },
+      alignHorizontalFull: {
+        type: 'radios',
+        label: 'Alignment (horizontal)',
+        default: 'left',
+        displayAs: 'icons',
+        options: {
+          left: {
+            label: 'Left',
+            icon: 'icon-blokkli-option-align-h-left',
+          },
+          center: {
+            label: 'Center',
+            icon: 'icon-blokkli-option-align-h-center',
+          },
+          right: {
+            label: 'Right',
+            icon: 'icon-blokkli-option-align-h-right',
+          }
+        },
+      },
+      alignHorizontalReduced: {
+        type: 'radios',
+        label: 'Alignment (horizontal)',
+        default: 'left',
+        displayAs: 'icons',
+        options: {
+          left: {
+            label: 'Left',
+            icon: 'icon-blokkli-option-align-h-left',
+          },
+          right: {
+            label: 'Right',
+            icon: 'icon-blokkli-option-align-h-right',
+          }
+        },
+      },
+      alignVerticalReduced: {
+        type: 'radios',
+        label: 'Alignment (vertical)',
+        default: 'center',
+        displayAs: 'icons',
+        options: {
+          top: {
+            label: 'Top',
+            icon: 'icon-blokkli-option-align-v-top',
+          },
+          bottom: {
+            label: 'Bottom',
+            icon: 'icon-blokkli-option-align-v-bottom',
+          },
+        },
+      },
+      alignVerticalFull: {
+        type: 'radios',
+        label: 'Alignment (vertical)',
+        default: 'center',
+        displayAs: 'icons',
+        options: {
+          top: {
+            label: 'Top',
+            icon: 'icon-blokkli-option-align-v-top',
+          },
+          center: {
+            label: 'Center',
+            icon: 'icon-blokkli-option-align-v-center',
+          },
+          bottom: {
+            label: 'Bottom',
+            icon: 'icon-blokkli-option-align-v-bottom',
+          },
+        },
+      },
+      imageFormat: {
+        type: 'radios',
+        label: 'Image format',
+        default: 'landscape',
+        displayAs: 'icons',
+        options: {
+          landscape: {
+            label: 'Landscape',
+            icon: 'icon-blokkli-option-image-format-landscape',
+          },
+          portrait: {
+            label: 'Portrait',
+            icon: 'icon-blokkli-option-image-format-portrait',
+          },
+          auto: {
+            label: 'Auto',
+            icon: 'icon-blokkli-option-image-format-auto',
+          },
+        },
+      },
+      textColumns: {
+        type: 'radios',
+        label: 'Columns',
+        default: 'one',
+        displayAs: 'icons',
+        options: {
+          one: {
+            label: '1',
+            icon: 'icon-blokkli-option-col-1',
+          },
+          two: {
+            label: '2',
+            icon: 'icon-blokkli-option-col-2',
+          },
+          three: {
+            label: '3',
+            icon: 'icon-blokkli-option-col-3',
+          },
+        },
+      },
+      textShadow: {
+        type: 'radios',
+        label: 'Text shadow',
+        default: 'none',
+        displayAs: 'colors',
+        options: {
+          none: { class: 'bg-white', label: 'None' },
+          light: { class: 'bg-gray-200', label: 'Light' },
+          dark: { class: 'bg-gray-500', label: 'Dark' },
+          darker: { class: 'bg-gray-900', label: 'Darker' },
+        },
+      },
+      colorMode: {
+        type: 'radios',
+        label: 'Color mode',
+        default: 'none',
+        displayAs: 'colors',
+        options: {
+          none: { class: 'bg-grey-200', label: 'None' },
+          dark: { class: 'bg-black', label: 'Dark' },
+          light: { class: 'bg-white', label: 'Light' },
+        },
+      },
+      teaserStyle: {
+        type: 'radios',
+        label: ' Teaser style',
+        default: 'none',
+        displayAs: 'colors',
+        options: {
+          none: { class: 'bg-white', label: 'Normal' },
+          highlight: { class: 'bg-black', label: 'Highlight' },
+        },
+      },
+      cardVariant: {
+        type: 'radios',
+        label: 'Card variant',
+        default: 'feature',
+        displayAs: 'icons',
+        options: {
+          feature: {
+            label: 'Feature card',
+            icon: 'icon-blokkli-option-card-variant-feature',
+          },
+          text: {
+            label: 'Text card',
+            icon: 'icon-blokkli-option-card-variant-text',
+          },
+          spotlight: {
+            label: 'Spotlight card',
+            icon: 'icon-blokkli-option-card-variant-spotlight',
+          },
+          fact: {
+            label: 'Fact card',
+            icon: 'icon-blokkli-option-card-variant-fact',
+          },
+        },
+      },
+      teaserVariant: {
+        type: 'radios',
+        label: 'Teaser variant',
+        default: 'teaser',
+        displayAs: 'icons',
+        options: {
+          teaser: {
+            label: 'Teaser card',
+            icon: 'icon-blokkli-option-card-variant-teaser',
+          },
+          feature: {
+            label: 'Feature card',
+            icon: 'icon-blokkli-option-card-variant-feature',
+          },
+          text: {
+            label: 'Text card',
+            icon: 'icon-blokkli-option-card-variant-text',
+          },
+          spotlight: {
+            label: 'Spotlight card',
+            icon: 'icon-blokkli-option-card-variant-spotlight',
+          },
+          flipTeaser: {
+            label: 'Flip teaser',
+            icon: 'icon-blokkli-option-card-variant-flip',
+          },
+          simple: {
+            label: 'Simple teaser',
+            icon: 'icon-blokkli-option-card-variant-simple',
+          },
+        },
+      },
+      slider: {
+        type: 'checkbox',
+        label: 'Slider',
+        default: false,
+        group: 'Slider',
+      },
+      sliderColumns: {
+        type: 'number',
+        label: 'Columns',
+        default: 1,
+        min: 1,
+        max: 4,
+        group: 'Slider',
+      },
+    },
+    translations: {
+      en: {
+        editIndicatorLabel: 'Edit paragraphs',
+      },
+      de: {
+        editIndicatorLabel: 'Abschnitte bearbeiten',
+      },
+    },
+    chunkNames: ['global', 'rare'],
+    itemEntityType: 'paragraph',
+    storageDefaults: {
+      blockFavorites: ['text'],
+    },
+    schemaOptionsPath: IS_DEV
+      ? '../../drupal/docroot/libraries/icms-blokkli-customization/data/schema.json'
+      : undefined,
+    // Make sure the editor is always rendered in German instead of the
+    // current page language.
+    forceDefaultLanguage: false,
+  }
+})

package/config/breakpoints.ts

@@ -0,0 +1,20 @@
+/**
+ * Shared breakpoint definitions for both Tailwind CSS and nuxt-viewport.
+ *
+ * These values must be kept in sync with the CSS @theme in
+ * assets/css/base/theme.css if you add custom breakpoints there.
+ *
+ * The standard Tailwind 4 breakpoints (sm, md, lg, xl, 2xl) are included
+ * by default, plus custom breakpoints (ss, xs) for mobile-first design.
+ */
+export const breakpoints = {
+  ss: 375,
+  xs: 412,
+  sm: 640,
+  md: 768,
+  lg: 1024,
+  xl: 1280,
+  '2xl': 1536,
+} as const
+
+export type Breakpoint = keyof typeof breakpoints

package/config/easyTexts.ts

@@ -0,0 +1,13 @@
+import { defineNuxtConfigProperty } from '.'
+
+export default defineNuxtConfigProperty<'easyTexts'>(() => {
+  return {
+    pattern: ['~/**/*.{js,ts,vue}'],
+    generators: [
+      {
+        outputPath: './graphql/translations.graphql',
+        generate: 'drupal-graphql-texts',
+      },
+    ],
+  }
+})

package/config/graphqlMiddleware.ts

@@ -0,0 +1,39 @@
+import { defineNuxtConfigProperty, currentLayerDir } from '.'
+import { join } from 'path'
+
+const NUXT_BACKEND_URL = process.env.NUXT_BACKEND_URL
+const IS_DEV = process.env.NODE_ENV === 'development'
+
+export default defineNuxtConfigProperty<'graphqlMiddleware'>((ctx) => {
+  return {
+    serverApiPrefix: '/api/graphql',
+    autoImportPatterns: [
+      '~/pages/**/*.{gql,graphql}',
+      '~/components/**/*.{gql,graphql}',
+      '~/composables/**/*.{gql,graphql}',
+      '~/app/**/*.{gql,graphql}',
+      '~/helpers/**/*.{gql,graphql}',
+      '~/graphql/**/*.{gql,graphql}',
+      'graphql/**/*.{gql,graphql}',
+      '~/queries/**/*.{gql,graphql}',
+      '~/stores/**/*.{gql,graphql}',
+      '~/server/**/*.{gql,graphql}',
+      '~/sites/**/*.{gql,graphql}',
+      '!node_modules',
+      join(currentLayerDir, './**/*.{gql,graphql}')
+    ],
+    documents: [],
+    downloadSchema: IS_DEV,
+    graphqlEndpoint: `${NUXT_BACKEND_URL}/graphql`, // If we have Multisite Setup we need to use NUXT_HOST here.
+    codegenConfig: {
+      skipUnusedFragments: true,
+    },
+    codegenSchemaConfig: {
+      urlSchemaOptions: {
+        headers: {
+          'x-drupal-graphql-token': process.env.DRUPAL_GRAPHQL_TOKEN ?? '',
+        },
+      },
+    },
+  }
+})

package/config/index.ts

@@ -0,0 +1,24 @@
+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)), '..')
+
+type ModuleConfigContext = {
+  DEV: boolean
+  NUXT_BACKEND_URL: string
+  NUXT_REQUEST_HOST: string
+}
+
+const ctx: ModuleConfigContext = Object.freeze({
+  DEV: process.env.NODE_ENV === 'development',
+  NUXT_BACKEND_URL: process.env.NUXT_BACKEND_URL || '',
+  NUXT_REQUEST_HOST: process.env.NUXT_REQUEST_HOST || '',
+})
+
+export function defineNuxtConfigProperty<T extends keyof NuxtConfig>(
+  cb: (ctx: ModuleConfigContext) => NuxtConfig[T],
+) {
+  return cb(ctx)
+}

package/config/languageNegotiation.ts

@@ -0,0 +1,17 @@
+import { defineNuxtConfigProperty } from '.'
+import {
+  pathPrefix,
+  query,
+  acceptLanguage,
+} from 'nuxt-language-negotiation/negotiators'
+
+export default defineNuxtConfigProperty<'languageNegotiation'>((ctx) => {
+  return {
+    negotiators: [
+      pathPrefix(),
+      query({ keys: ['language', 'langcode'] }),
+      acceptLanguage(),
+    ],
+    debug: false,
+  }
+})

package/config/multiCache.ts

@@ -0,0 +1,27 @@
+import { defineNuxtConfigProperty } from '.'
+
+export default defineNuxtConfigProperty<'multiCache'>((ctx) => {
+  return {
+    component: {
+      enabled: false,
+    },
+    data: {
+      enabled: true,
+    },
+    route: {
+      enabled: false,
+    },
+    api: {
+      enabled: true,
+      authorization: 'overriden-at-runtime',
+      prefix: '/api/multi-cache',
+      cacheTagInvalidationDelay: 5000,
+    },
+    cdn: {
+      enabled: true,
+      cacheControlHeader: 'CDN-Cache-Control',
+      cacheTagHeader: 'Cache-Tag',
+    },
+    debug: ctx.DEV,
+  }
+})

package/config/nitro.ts

@@ -0,0 +1,20 @@
+import { defineNuxtConfigProperty } from '.'
+
+export default defineNuxtConfigProperty<'nitro'>(() => {
+  return {
+    preset: 'bun',
+    compressPublicAssets: true,
+    typescript: {
+      strict: true,
+      tsConfig: {
+        compilerOptions: {
+          noUncheckedIndexedAccess: false,
+        },
+      },
+    },
+    prerender: {
+      crawlLinks: false,
+      // routes: ['/de/error'],
+    },
+  }
+})

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

@@ -1,8 +1,7 @@
 module.exports = {
   plugins: {
-    'postcss-import': {},
-    'tailwindcss/nesting': {},
-    tailwindcss: {},
+    "@tailwindcss/postcss": {},
+    'postcss-nesting': {},
     'postcss-hexrgba': {
       colorFunctionNotation: 'modern',
       transformToBareValue: true,
@@ -11,4 +10,4 @@ module.exports = {
       preset: 'default',
     },
   },
-}
+}

package/config/routeRules.ts

@@ -0,0 +1,28 @@
+import { defineNuxtConfigProperty } from '.'
+
+const ONE_YEAR = 31_536_000
+
+export default defineNuxtConfigProperty<'routeRules'>(() => {
+  return {
+    // '/de/error': {
+    //   noScripts: true,
+    //   prerender: true,
+    // },
+    '/_nuxt/**': {
+      cache: {
+        maxAge: ONE_YEAR,
+      },
+      headers: {
+        'cache-control': `public,max-age=${ONE_YEAR},s-maxage=${ONE_YEAR}`,
+      },
+    },
+    '/fonts/**': {
+      cache: {
+        maxAge: ONE_YEAR,
+      },
+      headers: {
+        'cache-control': `public,max-age=${ONE_YEAR},s-maxage=${ONE_YEAR}`,
+      },
+    },
+  }
+})

package/config/runtimeConfig.ts

@@ -1,12 +1,14 @@
-import type { NuxtConfig } from '@nuxt/schema'
+import { defineNuxtConfigProperty } from '.'
 
-export const runtimeConfig: NuxtConfig['runtimeConfig'] = {
-  backendUrl: '',
-  requestHost: '',
-  drupalGraphqlToken: process.env.DRUPAL_GRAPHQL_TOKEN || '',
-  elasticsearchUrl: '',
-  elasticsearchPrefix: '',
-  public: {
-    imageBaseUrl: ''
-  },
-}
+export default defineNuxtConfigProperty<'runtimeConfig'>(() => {
+  return {
+    backendUrl: '',
+    requestHost: '',
+    drupalGraphqlToken: process.env.DRUPAL_GRAPHQL_TOKEN || '',
+    elasticsearchUrl: '',
+    elasticsearchPrefix: '',
+    public: {
+      imageBaseUrl: ''
+    },
+  }
+})

package/config/svgIconSprite.ts

@@ -0,0 +1,16 @@
+import { defineNuxtConfigProperty, currentLayerDir } from '.'
+import { join } from 'node:path'
+
+export default defineNuxtConfigProperty<'svgIconSprite'>(() => {
+  return {
+    sprites: {
+      default: {
+        importPatterns: [
+          join(currentLayerDir, './assets/symbols/**/*.svg'),
+          'assets/symbols/**/*.svg',
+        ]
+      },
+    },
+  }
+})
+

package/config/vuepal.ts

@@ -0,0 +1,52 @@
+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'
+
+export default defineNuxtConfigProperty<'vuepal'>((ctx) => {
+  return {
+    frontendRouting: {
+      enabled: true,
+      outputPath: IS_DEV 
+        ? './../drupal/config/default/frontend_routing.settings.yml'
+        : './app/tmp.yml',
+    },
+    adminToolbar: {
+      enabled: true,
+    },
+    localTasks: {
+      enabled: true,
+    },
+    languageSwitchLinks: {
+      enabled: true,
+    },
+    drupalRoute: {
+      enabled: true,
+      routeQueries: {
+        nodeIcmsPage: {
+          fragments: [
+            'nodeIcmsPage'
+          ]
+        },
+        slug: {
+          fragments: [
+            'nodeIcmsPage',
+          ]
+        },
+        nodeCanonical: {
+          fragments: [
+            'nodeIcmsPage',
+          ]
+        },
+      },
+    },
+    devMode: {
+      enabled: true,
+      url: `https://${NUXT_REQUEST_HOST}`,
+      forceHttps: true,
+    },
+  }
+})