@iqual/nuxt-icms 1.0.2

package/nuxt.config.ts

@@ -0,0 +1,551 @@
+import { resolve } from 'node:path'
+import resolveConfig from 'tailwindcss/resolveConfig'
+import { runtimeConfig } from './config/runtimeConfig'
+import graphqlMiddleware from './config/graphqlMiddleware'
+import multiCache from './config/multiCache'
+import tailwindConfig from './tailwind.config'
+import { pathPrefix, query, acceptLanguage } from 'nuxt-language-negotiation/negotiators'
+
+import { fileURLToPath } from 'url'
+import { dirname, join } from 'path'
+
+const fullTailwindConfig = resolveConfig(tailwindConfig)
+const tailwindColors = fullTailwindConfig.theme.colors as Record<string, any>
+const ONE_YEAR = 31_536_000
+const ONE_MONTH = 2_592_000
+const IS_DEV = process.env.NODE_ENV === 'development'
+const NUXT_REQUEST_HOST = process.env.NUXT_REQUEST_HOST
+const NUXT_IMAGE_CLOUDFLARE_BASE_URL = process.env.NUXT_IMAGE_CLOUDFLARE_BASE_URL ?? 'https://iqual.cloud'
+
+// 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)
+}
+
+const LANGCODES = ['en', 'de', 'fr', 'it']
+const currentDir = dirname(fileURLToPath(import.meta.url))
+
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  devtools: { enabled: true },
+  telemetry: false,
+  graphqlMiddleware,
+  multiCache,
+  runtimeConfig,
+  alias: {
+    '#nuxt-svg-sprite': resolve('/.nuxt/nuxt-svg-sprite'),
+    'tailwind-config': resolve(__dirname, './tailwind.config.ts'),
+  },
+
+  app: {
+    rootId: 'nuxt-root',
+    pageTransition: { name: 'page', mode: 'out-in' },
+    head: {
+      title: 'ICMS Base',
+      htmlAttrs: {
+        tagDuplicateStrategy: 'merge',
+        lang: LANGCODES[0],
+      },
+      link: [
+        { rel: 'shortcut icon', type: 'image/x-icon', href: '/favicon/favicon.ico' },
+        { rel: 'apple-touch-icon', href: '/favicon/favicon/apple-touch-icon.png' },
+        { rel: 'icon', type: 'image/png', sizes: '96x96', href: '/favicon/favicon-96x96.png' },
+        { rel: 'icon', type: 'image/svg+xml', href: '/favicon/favicon.svg' },
+        { rel: 'manifest', href: '/favicon/site.webmanifest' },
+        { rel: 'icon', type: 'image/png', sizes: '192x192', href: '/favicon/web-app-manifest-192x192.png' },
+        { rel: 'icon', type: 'image/png', sizes: '512x512', href: '/favicon/web-app-manifest-512x512.png' }
+      ],
+    },
+  },
+
+  /**
+   * Site-wide CSS (PostCSS compiled if within ~/assets)
+   * @see https://nuxt.com/docs/getting-started/styling
+   */
+  css: [
+    join(currentDir, './assets/css/fe-fixes.css'),
+    join(currentDir, './assets/css/tailwind.css'),
+  ],
+
+  /**
+   * Nuxt.js modules
+   */
+  modules: [
+    '@nuxt/test-utils/module',
+    '@formkit/nuxt',
+    '@nuxtjs/tailwindcss',
+    'nuxt-graphql-middleware',
+    'nuxt-easy-texts',
+    'nuxt-page-dependencies',
+    'nuxt-multi-cache',
+    'nuxt-plugin-order',
+    'vuepal',
+    'nuxt-language-negotiation',
+    'nuxt-svg-icon-sprite',
+    '@blokkli/editor',
+    'nuxt-viewport',
+    '@nuxt/eslint',
+    '@nuxt/image',
+    'shadcn-nuxt',
+    '@iqual/nuxt-icms/modules/dynamicParagraphResolver',
+    '@iqual/nuxt-icms/modules/dynamicNodeResolver'
+  ],
+
+  easyTexts: {
+    pattern: [
+      './components/**/*.{js,ts,vue}',
+      './pages/**/*.{js,ts,vue}',
+      './composables/**/*.{js,ts,vue}',
+      join(currentDir, './components/**/*.{js,ts,vue}'),
+      join(currentDir, './pages/**/*.{js,ts,vue}'),
+      join(currentDir, './composables/**/*.{js,ts,vue}'),
+      join(currentDir, './*.{js,ts,vue}'),
+      './*.{js,ts,vue}',
+    ],
+    generators: [
+      {
+        outputPath: './queries/translations.graphql',
+        generate: 'drupal-graphql-texts',
+      },
+    ],
+  },
+
+  shadcn: {
+    /**
+     * Prefix for all the imported component
+     */
+    prefix: '',
+    /**
+     * Directory that the component lives in.
+     * @default "./components/ui"
+     */
+    componentDir: join(currentDir, './components/ui'),
+  },
+
+  image: {
+    provider: 'cloudflare',
+    cloudflare: {
+      baseURL: NUXT_IMAGE_CLOUDFLARE_BASE_URL
+    }
+  },
+
+  pageDependencies: {
+    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,
+      defaultLanguage: LANGCODES[0],
+      outputPath: './../drupal/config/default/frontend_routing.settings.yml',
+    },
+    adminToolbar: {
+      enabled: true,
+    },
+    localTasks: {
+      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,
+    },
+  },
+
+  $meta: {
+    name: 'icms'
+  },
+
+  icms: {
+    components: {
+      fragments: [
+        // Layout components
+        'paragraphIcmsLayoutText',
+        'paragraphIcmsLayoutTextMedia',
+        'paragraphIcmsLayoutTeasers',
+        'paragraphIcmsLayoutHeroImage',
+        'paragraphIcmsLayoutCallToAction',
+        'paragraphIcmsLayoutCards',
+        'paragraphIcmsLayoutTextcolIconlist',
+        'paragraphIcmsLayoutContact',
+        'paragraphIcmsLayout2ColTextElements',
+        'paragraphIcmsLayoutTestimonial',
+        'paragraphIcmsLayoutFlipTeasers',
+        'paragraphIcmsLayoutTable',
+        'paragraphIcmsLayoutTabs',
+        'paragraphIcmsLayoutFaq',
+        'paragraphIcmsLayoutGallery',
+        'paragraphIcmsLayoutTextImageIntro',
+        'paragraphIcmsLayoutTestimonials',
+        'paragraphIcmsLayoutTeam',
+        'paragraphIcmsLayoutPartnerships',
+        'paragraphIcmsLayoutDownloads',
+        'paragraphIcmsLayoutMedia',
+        'paragraphIcmsLayoutDownloads',
+        'paragraphIcmsLayoutIframe',
+        // Element components
+        'paragraphIcmsButtonElement',
+        'paragraphIcmsCardElement',
+        'paragraphIcmsFaqElement',
+        'paragraphIcmsIconTextElement',
+        'paragraphIcmsTabElement',
+        'paragraphIcmsTeamElement',
+        'paragraphIcmsTestimonialElement',
+        'paragraphIcms2ColTextElement',
+        'paragraphIcmsLogoElement',
+        'paragraphIcmsPartnershipElement',
+        'paragraphIcmsIframeElement',
+      ]
+    }
+  },
+
+  sourcemap: true,
+
+  nitro: {
+    compressPublicAssets: true,
+  },
+
+  hooks: {
+    'vite:extend'({ config }) {
+      if (config.server && config.server.hmr) {
+        // @ts-ignore
+        config.server.hmr.protocol = 'wss'
+      }
+    },
+  },
+
+  vite: {
+    css: {
+      devSourcemap: true,
+    },
+    server: {
+      allowedHosts: true,
+    },
+    plugins: [],
+  },
+
+  /*
+  typescript: {
+    strict: true,
+    typeCheck: true,
+  },
+  */
+
+  formkit: {
+    autoImport: true,
+    configFile: join(currentDir, './formkit.config.ts'),
+  },
+
+  languageNegotiation: {
+    languages: LANGCODES,
+    negotiators: [
+      pathPrefix(),
+      query({ keys: ['language', 'langcode'] }),
+      acceptLanguage(),
+    ],
+    debug: false,
+  },
+
+  svgIconSprite: {
+    sprites: {
+      default: {
+        importPatterns: [
+          join(currentDir, './assets/symbols/**/*.svg'),
+          './assets/symbols/**/*.svg',
+        ],
+      },
+    },
+  },
+
+  postcss: {
+    plugins: {
+      'postcss-import': {},
+      'tailwindcss/nesting': {},
+      tailwindcss: {},
+      'postcss-hexrgba': {
+        colorFunctionNotation: 'modern',
+        transformToBareValue: true,
+      },
+      cssnano: {
+        preset: 'default',
+      },
+    },
+  },
+
+  routeRules: {
+    '/_nuxt/**': {
+      cache: {
+        maxAge: ONE_YEAR,
+      },
+      headers: {
+        'cache-control': `public,max-age=${ONE_MONTH},s-maxage=${ONE_YEAR}`,
+      },
+    },
+    '/fonts/**': {
+      cache: {
+        maxAge: ONE_YEAR,
+      },
+      headers: {
+        'cache-control': `public,max-age=${ONE_MONTH},s-maxage=${ONE_YEAR}`,
+      },
+    },
+  },
+
+  blokkli: {
+    // enableThemeEditor: true,
+    theme: {
+      accent: Object.fromEntries(
+        Object.entries(tailwindColors.primary)
+          .filter(([key]) => key !== 'DEFAULT')
+          .map(([key, rgb]) => [key, transformColor(rgb as string)])
+      ),
+      mono: Object.fromEntries(
+        Object.entries(tailwindColors.gray)
+          .filter(([key]) => key !== 'DEFAULT')
+          .map(([key, rgb]) => [key, transformColor(rgb as string)])
+      ),
+      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],
+      },
+    },
+    pattern: [
+      './components/Paragraph/**/*.{js,ts,vue}',
+      join(currentDir, './components/Blokkli/**/*.{js,ts,vue}'),
+    ],
+    globalOptions: {
+      spacingTop: {
+        type: 'radios',
+        label: 'Spacing top',
+        default: 'small',
+        options: {
+          none: 'None',
+          small: 'Small',
+          large: 'Large',
+        },
+        // displayAs: 'icons',
+        // options: {
+        //   none: {
+        //     label: 'None',
+        //     icon: 'icon-blokkli-option-no-spacing',
+        //   },
+        //   small: {
+        //     label: 'Small',
+        //     icon: 'icon-blokkli-option-small-spacing-top',
+        //   },
+        //   large: {
+        //     label: 'Large',
+        //     icon: 'icon-blokkli-option-large-spacing-top',
+        //   },
+        // },
+      },
+      spacingBottom: {
+        type: 'radios',
+        label: 'Spacing bottom',
+        default: 'small',
+        options: {
+          none: 'None',
+          small: 'Small',
+          large: 'Large',
+        },
+        // displayAs: 'icons',
+        // options: {
+        //   none: {
+        //     label: 'None',
+        //     icon: 'icon-blokkli-option-no-spacing',
+        //   },
+        //   small: {
+        //     label: 'Small',
+        //     icon: 'icon-blokkli-option-small-spacing-bottom',
+        //   },
+        //   large: {
+        //     label: 'Large',
+        //     icon: 'icon-blokkli-option-large-spacing-bottom',
+        //   },
+        // },
+      },
+      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' },
+        },
+      },
+      textWidth: {
+        type: 'radios',
+        label: 'Text width',
+        default: 'wide',
+        options: {
+          wide: 'Wide',
+          medium: 'Medium',
+          narrow: 'Narrow',
+        },
+      },
+      textAlign: {
+        type: 'radios',
+        label: 'Text alignment',
+        default: 'left',
+        options: {
+          left: 'Left',
+          center: 'Center',
+          right: 'Right',
+        },
+      },
+      textColumns: {
+        type: 'radios',
+        label: 'Text columns',
+        default: 'one',
+        options: {
+          one: 'One',
+          two: 'Two',
+          three: 'Three',
+        },
+      },
+      buttonAlignment: {
+        type: 'radios',
+        label: 'Button alignment',
+        default: 'left',
+        options: {
+          left: 'Left',
+          center: 'Center',
+          right: 'Right',
+        },
+      },
+      width: {
+        type: 'radios',
+        label: 'Width',
+        default: 'page',
+        options: {
+          full: 'Full-width',
+          page: 'Page-width',
+          narrow: 'Narrow',
+        },
+      },
+      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' },
+        },
+      },
+      reverseColumns: {
+        type: 'checkbox',
+        label: 'Reverse columns',
+        default: false,
+      },
+    },
+    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,
+    defaultLanguage: LANGCODES[0],
+    // Make sure the editor is always rendered in German instead of the
+    // current page language.
+    forceDefaultLanguage: false,
+  },
+
+  viewport: {
+    breakpoints: {
+      ...Object.fromEntries(
+        Object.entries(fullTailwindConfig.theme.screens).map((entry) => {
+          return [entry[0], parseInt(entry[1])]
+        }),
+      ),
+    },
+    defaultBreakpoints: {
+      desktop: 'lg',
+      tablet: 'md',
+      mobile: 'ss',
+    },
+    fallbackBreakpoint: 'lg',
+  },
+
+  experimental: {
+    asyncContext: true,
+  },
+
+  compatibilityDate: '2024-08-14',
+})

package/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "@iqual/nuxt-icms",
+  "version": "1.0.2",
+  "description": "ICMS Base",
+  "type": "module",
+  "private": false,
+  "main": "./nuxt.config.ts",
+  "scripts": {
+    "styles:ckeditor": "postcss --config ./config/postcss-drupal ./assets/css/ckeditor.css -o ./../../../drupal/docroot/libraries/icms-blokkli-customization/css/ckeditor.css",
+    "styles:backend": "postcss --config ./config/postcss-drupal ./assets/css/backend.css -o ./../../../drupal/docroot/libraries/icms-blokkli-customization/css/backend.css",
+    "styles:backend:watch": "postcss --config ./config/postcss-drupal ./assets/css/backend.css -o ./../../../drupal/docroot/libraries/icms-blokkli-customization/css/backend.css --watch"
+  },
+  "dependencies": {
+    "@blokkli/editor": "^1.3.4",
+    "@elastic/elasticsearch": "^8.18.2",
+    "@formkit/addons": "^1.6.9",
+    "@formkit/icons": "^1.6.9",
+    "@formkit/inputs": "^1.6.9",
+    "@formkit/nuxt": "^1.6.9",
+    "@iframe-resizer/child": "^5.4.6",
+    "@iframe-resizer/vue": "^5.4.6",
+    "@nuxtjs/color-mode": "^3.5.2",
+    "@tailwindcss/container-queries": "^0.1.1",
+    "@vueuse/core": "^12.8.2",
+    "caniuse-lite": "^1.0.30001718",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "embla-carousel-vue": "^8.6.0",
+    "lucide-vue-next": "^0.469.0",
+    "nuxt-easy-texts": "^2.0.0",
+    "nuxt-graphql-middleware": "^5.1.0",
+    "nuxt-language-negotiation": "^2.0.0",
+    "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",
+    "swiper": "^10.3.1",
+    "tailwind-merge": "^2.6.0",
+    "tailwind-variants": "^0.3.1",
+    "tailwindcss-animate": "^1.0.7",
+    "vue3-carousel": "0.3.1",
+    "vue3-click-away": "^1.2.4",
+    "vuepal": "^3.0.1"
+  },
+  "devDependencies": {
+    "@nuxt/image": "^1.10.0",
+    "@nuxt/scripts": "^0.11.7",
+    "@nuxtjs/tailwindcss": "^6.14.0",
+    "@nuxtjs/turnstile": "1.0.0",
+    "@types/iframe-resizer": "^4.0.0",
+    "nuxt-viewport": "^2.3.1",
+    "postcss-cli": "^11.0.1",
+    "postcss-hexrgba": "github:thormeier/postcss-hexrgba",
+    "postcss-nesting": "^13.0.1",
+    "sass": "^1.89.0",
+    "shadcn-nuxt": "^0.11.4"
+  },
+  "peerDependencies": {
+    "nuxt": "^3.17.4",
+    "vue": "^3.5.14"
+  }
+}

package/pages/[...slug]/index.vue

@@ -0,0 +1,27 @@
+<template>
+  <component :is="pageComponent" v-bind="node"/>
+</template>
+
+<script lang="ts" setup>
+
+const { $resolveDynamicNodeComponent } = useNuxtApp()
+
+defineOptions({
+  name: 'PageSlug',
+})
+
+definePageMeta({
+  name: 'drupal-route',
+  path: '/:slug(.*)*',
+})
+
+const { entity: node } = await useDrupalRouteQuery('slug')
+
+const contentType = computed(() => node.value?.__typename)
+
+const pageComponent = computed(() => {
+  return $resolveDynamicNodeComponent(contentType.value)
+})
+
+await renderPageDependencies()
+</script>