@iqual/nuxt-icms 1.0.2

package/composables/useInitData.ts

@@ -0,0 +1,118 @@
+import type {
+  GlobalConfigFragment,
+  InitDataQuery,
+  MenuLinkTreeElementFirstFragment,
+} from '#graphql-operations'
+
+export interface InitData {
+  metaMenuLinks: MenuLinkTreeElementFirstFragment[]
+  mainMenuLinks: MenuLinkTreeElementFirstFragment[]
+  footerMenuLinks: MenuLinkTreeElementFirstFragment[]
+  footerMetaMenuLinks: MenuLinkTreeElementFirstFragment[]
+  translations: Record<string, string | [string, string]>
+  globalConfig: {
+    companyLogo?: GlobalConfigFragment['companyLogo']
+    companyLogoAlt?: GlobalConfigFragment['companyLogoAlt']
+    companyName?: GlobalConfigFragment['companyName']
+    companyDescription?: GlobalConfigFragment['companyDescription']
+    address?: GlobalConfigFragment['address']
+    phoneNumber?: GlobalConfigFragment['phoneNumber']
+    emailAddress?: GlobalConfigFragment['emailAddress']
+    metaLinks?: GlobalConfigFragment['metaLinks']
+    contactButtons?: GlobalConfigFragment['contactButtons']
+    socialMediaLinks?: GlobalConfigFragment['socialMediaLinks']
+  }
+}
+
+function getTranslations(
+  v?: InitDataQuery,
+): Record<string, string | [string, string]> {
+  if (!v) {
+    return {}
+  }
+  return Object.entries(
+    (v.translations || {}) as Record<
+      string,
+      string | { singular?: string; plural?: string }
+    >,
+  ).reduce<Record<string, string | [string, string]>>(
+    (acc, [fullKey, value]) => {
+      const keyWithDots = fullKey.replace('__', '.')
+      if (typeof value === 'string') {
+        acc[keyWithDots] = value
+      } else if (typeof value === 'object' && value.plural && value.singular) {
+        acc[keyWithDots] = [value.singular, value.plural]
+      }
+      return acc
+    },
+    {},
+  )
+}
+
+export default async function (): Promise<Ref<InitData>> {
+  const currentLanguage = useCurrentLanguage()
+  const data = useState<InitData>('initData')
+
+  // Let's try to fetch the data from the cache first.
+  const event = useRequestEvent()
+  const { value, addToCache } = await useDataCache<InitData>(
+    'initData_' + currentLanguage.value,
+    event,
+  )
+  if (value) {
+    data.value = value
+    return data
+  }
+
+  // If the data is not in the cache, we fetch it from the payload / useState().
+  if (data.value) {
+    return data
+  }
+
+  const config = useRuntimeConfig()
+  // Read the host from .env NUXT_HOST to support multisite setup.
+  // Read the host from .env NUXT_HOST to support multisite setup.
+  const url = useRequestURL()
+  let host = url.hostname
+  if (import.meta.server) {
+    host = config.requestHost
+  }
+
+  // Fetch the data from the server.
+  data.value = await useGraphqlQuery({
+    name: 'initData',
+    fetchOptions: {
+      query: {
+        language: currentLanguage.value,
+        __server: 'true',
+      },
+      headers: {
+        host,
+        'x-forwarded-host': host,
+      },
+    },
+  }).then((v) => {
+    const initData = {
+      metaMenuLinks: v.data.metaMenu?.links || [],
+      mainMenuLinks: v.data.mainMenu?.links || [],
+      footerMenuLinks: v.data.footerMenu?.links || [],
+      footerMetaMenuLinks: v.data.footerMetaMenu?.links || [],
+      globalConfig: v.data.globalConfig || {},
+      translations: getTranslations(v.data),
+    }
+
+    // The cache tags are coming from the onServerResponse() function in the graphqlMiddleware.
+
+    if (
+      import.meta.server &&
+      v.__cacheability?.isCacheable &&
+      v.__cacheability.tagsNuxt
+    ) {
+      addToCache(initData, v.__cacheability.tagsNuxt)
+    }
+
+    return initData
+  })
+
+  return data
+}

package/composables/useIsMobile.ts

@@ -0,0 +1,14 @@
+export function useIsMobile() {
+  const viewport = useViewport()
+  const isMobile = ref(viewport.isLessThan('lg'))
+
+  watch(viewport.breakpoint, (newValue: string) => {
+    isMobile.value =
+      newValue === 'md' ||
+      newValue === 'sm' ||
+      newValue === 'xs' ||
+      newValue === 'ss'
+  })
+
+  return { isMobile }
+}

package/composables/useMainMenuLinks.ts

@@ -0,0 +1,69 @@
+import type { InitData } from '~/composables/useInitData'
+import type { MenuLinkTreeFragment } from '#graphql-operations'
+
+function isLinkTreeActive(
+  tree: MenuLinkTreeFragment & { subtree?: Array<MenuLinkTreeFragment> },
+  currentRoutePath: string,
+): boolean {
+  if (tree.link.url?.path === currentRoutePath) {
+    return true
+  }
+
+  if (tree.subtree) {
+    return tree.subtree.some((subtreeEl) =>
+      isLinkTreeActive(subtreeEl, currentRoutePath),
+    )
+  }
+
+  return false
+}
+
+export async function useMainMenuLinks() {
+  const initData: Ref<InitData> = await useInitData()
+  const currentRoute = useRoute()
+
+  const links = computed(() => {
+    return initData.value.mainMenuLinks
+  })
+
+  const currentActiveMainLink = computed(() => {
+    return initData.value.mainMenuLinks.find((l) =>
+      isLinkTreeActive(l, currentRoute.path),
+    )
+  })
+
+  const activeFirstLevelLink = computed(() => {
+    return currentActiveMainLink.value?.subtree.find((l) =>
+      isLinkTreeActive(l, currentRoute.path),
+    )
+  })
+
+  const activeSecondLevelLink = computed(() => {
+    const activeSubtree = activeFirstLevelLink.value?.subtree
+    if (activeSubtree) {
+      return activeSubtree.find((l) => isLinkTreeActive(l, currentRoute.path))
+    }
+    return null
+  })
+
+  const activeThirdLevelLink = computed(() => {
+    const activeSubtree = activeSecondLevelLink.value?.subtree
+    if (activeSubtree) {
+      return activeSubtree.find((l) => isLinkTreeActive(l, currentRoute.path))
+    }
+    return null
+  })
+
+  const isHotelActive = computed(() => {
+    return isLinkTreeActive(initData.value.mainMenuLinks[2], currentRoute.path)
+  })
+
+  return {
+    links,
+    currentActiveMainLink,
+    activeFirstLevelLink,
+    activeSecondLevelLink,
+    activeThirdLevelLink,
+    isHotelActive,
+  }
+}

package/composables/useMetaMenuLinks.ts

@@ -0,0 +1,44 @@
+import type { InitData } from '~/composables/useInitData'
+import type { MenuLinkTreeFragment } from '#graphql-operations'
+
+function isLinkTreeActive(
+  tree: MenuLinkTreeFragment & { subtree?: Array<MenuLinkTreeFragment> },
+  currentRoutePath: string,
+): boolean {
+  if (tree.link.url?.path === currentRoutePath) {
+    return true
+  }
+
+  if (tree.subtree) {
+    return tree.subtree.some((subtreeEl) =>
+      isLinkTreeActive(subtreeEl, currentRoutePath),
+    )
+  }
+
+  return false
+}
+
+export async function useMetaMenuLinks() {
+  const initData: Ref<InitData> = await useInitData()
+  const currentRoute = useRoute()
+
+  const links = computed(() => {
+    return initData.value.metaMenuLinks
+  })
+
+  const currentActiveMetaLink = computed(() => {
+    return initData.value.metaMenuLinks.find((l) =>
+      isLinkTreeActive(l, currentRoute.path),
+    )
+  })
+
+  const isHotelActive = computed(() => {
+    return isLinkTreeActive(initData.value.metaMenuLinks[2], currentRoute.path)
+  })
+
+  return {
+    links,
+    currentActiveMetaLink,
+    isHotelActive,
+  }
+}

package/composables/useNavigationOffset.ts

@@ -0,0 +1,14 @@
+import { useIsMobile } from '@/composables/useIsMobile'
+
+const mobileNavHeight: number = 73
+const desktopNavHeight: number = 114
+
+export function useNavigationOffset(): { navigationOffset: ComputedRef<number> } {
+  const { isMobile } = useIsMobile()
+
+  const navigationOffset = computed(() => {
+    return isMobile.value ? mobileNavHeight : desktopNavHeight
+  })
+
+  return { navigationOffset }
+}

package/config/graphqlMiddleware/index.ts

@@ -0,0 +1,41 @@
+import type { NuxtConfig } from '@nuxt/schema'
+import { fileURLToPath } from 'url'
+import { dirname, join } from 'path'
+
+const currentDir = dirname(fileURLToPath(import.meta.url))
+const IS_DEV = process.env.NODE_ENV === 'development'
+
+const NUXT_BACKEND_URL = process.env.NUXT_BACKEND_URL
+
+const graphqlMiddleware: NuxtConfig['graphqlMiddleware'] = {
+  serverApiPrefix: '/api/graphql',
+  autoImportPatterns: [
+    '~/pages/**/*.{gql,graphql}',
+    '~/components/**/*.{gql,graphql}',
+    '~/composables/**/*.{gql,graphql}',
+    '~/app/**/*.{gql,graphql}',
+    '~/helpers/**/*.{gql,graphql}',
+    '~/graphql/**/*.{gql,graphql}',
+    '~/queries/**/*.{gql,graphql}',
+    '~/stores/**/*.{gql,graphql}',
+    '~/server/**/*.{gql,graphql}',
+    '~/sites/**/*.{gql,graphql}',
+    '~/node_modules/@blokkli/editor/dist/runtime/adapter/**/*.{gql,graphql}',
+    join(currentDir, '../../**/*.{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 ?? '',
+      },
+    },
+  },
+}
+
+export default graphqlMiddleware

package/config/multiCache/index.ts

@@ -0,0 +1,28 @@
+import type { NuxtConfig } from '@nuxt/schema'
+const IS_DEV = process.env.NODE_ENV === 'development'
+
+const multiCache: NuxtConfig['multiCache'] = {
+  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: 'Cache-Control',
+    cacheTagHeader: 'Cache-Tag',
+  },
+  debug: IS_DEV,
+}
+
+export default multiCache

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

@@ -0,0 +1,14 @@
+module.exports = {
+  plugins: {
+    'postcss-import': {},
+    'tailwindcss/nesting': {},
+    tailwindcss: {},
+    'postcss-hexrgba': {
+      colorFunctionNotation: 'modern',
+      transformToBareValue: true,
+    },
+    cssnano: {
+      preset: 'default',
+    },
+  },
+}

package/config/runtimeConfig.ts

@@ -0,0 +1,12 @@
+import type { NuxtConfig } from '@nuxt/schema'
+
+export const runtimeConfig: NuxtConfig['runtimeConfig'] = {
+  backendUrl: '',
+  requestHost: '',
+  drupalGraphqlToken: process.env.DRUPAL_GRAPHQL_TOKEN || '',
+  elasticsearchUrl: '',
+  elasticsearchPrefix: '',
+  public: {
+    imageBaseUrl: ''
+  },
+}

package/error.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="bk-main-canvas relative">
+    <ClientOnly>
+      <div
+        v-if="drupalUser.accessToolbar && !isEditing"
+        class="hidden border-b border-b-gray-100 bg-white lg: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>
+    <NuxtLayout name="error" />
+  </div>
+</template>
+
+<script setup lang="ts">
+const route = useRoute()
+const drupalUser = useDrupalUser()
+const language = useCurrentLanguage()
+
+import { onMounted } from 'vue';
+
+const isEditing = computed(
+  () =>
+    !!(route.query.blokkliEditing || route.query.blokkliPreview) &&
+    drupalUser.value.accessToolbar,
+)
+
+useHead({
+  htmlAttrs: {
+    lang: language.value,
+  },
+})
+
+</script>

package/eslint.config.mjs

@@ -0,0 +1,111 @@
+import withNuxt from '../../.nuxt/eslint.config.mjs'
+import tailwind from 'eslint-plugin-tailwindcss'
+import sonarjs from 'eslint-plugin-sonarjs'
+
+import { fileURLToPath } from 'url'
+import { dirname, join } from 'path'
+const currentDir = dirname(fileURLToPath(import.meta.url))
+
+export default withNuxt([
+  ...tailwind.configs['flat/recommended'],
+  sonarjs.configs.recommended,
+  {
+    settings: {
+      tailwindcss: {
+        config: join(currentDir, './tailwind.config.ts'),
+      },
+    },
+  },
+])
+  .override('nuxt/vue/rules', {
+    rules: {
+      'vue/no-v-html': 0,
+      'vue/no-empty-component-block': 'error',
+      'vue/padding-line-between-blocks': 'error',
+      'vue/no-v-for-template-key': 'error',
+      'vue/prefer-true-attribute-shorthand': 'error',
+      'vue/component-api-style': 'error',
+      'vue/block-lang': [
+        'error',
+        {
+          script: {
+            lang: 'ts',
+          },
+        },
+      ],
+      'vue/block-order': [
+        'error',
+        {
+          order: [['script', 'template'], 'style'],
+        },
+      ],
+      'vue/html-self-closing': [
+        'error',
+        {
+          html: {
+            void: 'always',
+          },
+        },
+      ],
+      'vue/no-deprecated-slot-attribute': [
+        'error',
+        {
+          ignore: [
+            'celum-adapter',
+            'anura-lightbox',
+            'anura-details',
+            'anura-asset',
+            'span',
+            'div',
+          ],
+        },
+      ],
+    },
+  })
+  .override('nuxt/typescript/rules', {
+    rules: {
+      '@typescript-eslint/no-explicit-any': 'warn',
+      '@typescript-eslint/ban-ts-comment': 'off',
+    },
+  })
+  .override('tailwindcss:rules', {
+    rules: {
+      'tailwindcss/classnames-order': 'off',
+      'tailwindcss/no-custom-classname': [
+        'error',
+        {
+          callees: ['twMerge'],
+          cssFiles: ['./assets/css/**/*.css'],
+          whitelist: [
+            'bk-main-canvas',
+            'close-launcher',
+            'open-launcher',
+            'launcher',
+            'select',
+            'page-header',
+            'info-box',
+            'search-result',
+            'info-box-floater',
+            'carousel.*',
+            'launcher-visible',
+            'breadcrumb-.*',
+            'pagination-page',
+            'content-fullscreen-header',
+            'is-previous',
+            'is-active',
+            'is-next',
+            'paragraph-expand-section',
+            'search-input',
+            'pagination-buttons',
+            'formkit-.*',
+            'breadcrumb',
+            'editor_image',
+            'close-icon-.*',
+            'grid-area-.*',
+            'page-.*',
+            'paragraph-.*',
+          ],
+        },
+      ],
+    },
+  })

package/formkit.config.ts

@@ -0,0 +1,56 @@
+import { defaultConfig } from '@formkit/vue'
+import { createLocalStoragePlugin, createAutoAnimatePlugin } from '@formkit/addons'
+import '@formkit/addons/css/floatingLabels'
+import { rootClasses } from './formkit.theme';
+
+const legends = ['checkbox_multi', 'radio_multi', 'repeater', 'transferlist'];
+
+function addAsteriskPlugin(node) {
+  if (['button', 'submit', 'hidden', 'group', 'list', 'meta'].includes(node.props.type)) return;
+
+  node.on('created', () => {
+    const legendOrLabel = legends.includes(`${node.props.type}${node.props.options ? '_multi' : ''}`) ? 'legend' : 'label';
+
+    if (node.props.definition.schemaMemoKey) {
+      node.props.definition.schemaMemoKey += `${node.props.options ? '_multi' : ''}_add_asterisk`;
+    };
+
+    const schemaFn = node.props.definition.schema
+    node.props.definition.schema = (sectionsSchema = {}) => {
+      sectionsSchema[legendOrLabel] = {
+        children: ['$label', {
+          $el: 'span',
+          if: '$state.required',
+          attrs: {
+            class: '$classes.asterisk',
+          },
+          children: ['*']
+        }]
+      }
+
+      return schemaFn(sectionsSchema)
+    }
+  })
+}
+
+export default defaultConfig({
+  plugins: [
+    createLocalStoragePlugin({
+      prefix: 'formkit',
+      key: undefined,
+      control: undefined,
+      maxAge: 3600000,
+      debounce: 200,
+      beforeSave: undefined,
+      beforeLoad: undefined
+    }),
+    createAutoAnimatePlugin({
+      duration: 250,
+      easing: 'ease-in-out'
+    }),
+    addAsteriskPlugin
+  ],
+  config: {
+    rootClasses,
+  },
+})