@iqual/nuxt-icms 1.0.2

package/server/utils/cacheability.ts

@@ -0,0 +1,138 @@
+import type { FetchResponse } from 'ofetch'
+import type { H3Event } from 'h3'
+import crypto from 'crypto'
+import { INTERVALS, MAX_AGE, type ValidInterval } from '../helpers'
+
+function extractCacheTags(
+  response: FetchResponse<unknown>,
+  header: string,
+): string[] {
+  const value = response.headers.get(header) || ''
+  if (typeof value !== 'string') {
+    return []
+  }
+
+  return value
+    .split(' ')
+    .map((v) => v.trim())
+    .filter(Boolean)
+}
+
+function calculateMaxAge(expires: string | null): number {
+  if (!expires) {
+    return MAX_AGE.UNCACHEABLE
+  }
+  const expiresValue = parseInt(expires)
+  if (isNaN(expiresValue)) {
+    return MAX_AGE.UNCACHEABLE
+  }
+
+  if (expiresValue === 0) {
+    return MAX_AGE.UNCACHEABLE
+  }
+
+  if (expiresValue === -1) {
+    return MAX_AGE.ONE_YEAR
+  }
+
+  return expiresValue
+}
+
+/**
+ * Extracts cacheability metadata from a Drupal fetch response.
+ */
+export function extractCacheability(
+  response: FetchResponse<unknown>,
+  event: H3Event,
+) {
+  const hasSessionCookie = (event.node.req.headers.cookie || '').includes(
+    'SSESS',
+  )
+  // These tags are provided by the nuxt_multi_cache module and used to
+  // cache the initData in the cache of nuxt_multi_cache in the frontend.
+  const tagsNuxt = extractCacheTags(response, 'x-nuxt-cache-tags')
+
+  // These tags are provided by the  generic http purge module and 
+  // used to invalidate SSR full page caches on varnish.
+  const tagsCdn = extractCacheTags(response, 'purge-cache-tags')
+
+  // During development, we also pass the original Drupal cache tags.
+  const tagsDrupal = extractCacheTags(response, 'x-drupal-cache-tags')
+
+  const expires = response.headers.get('x-nuxt-expires')
+  const sharedMaxAge = calculateMaxAge(expires)
+
+  return {
+    isCacheable: expires !== '0' && !!sharedMaxAge && !hasSessionCookie,
+    sharedMaxAge,
+    tagsNuxt,
+    tagsCdn: tagsCdn.length ? tagsCdn : tagsDrupal,
+    tagsDrupal,
+  }
+}
+
+/**
+ * Determine the number of seconds until the next given interval.
+ *
+ * Useful to calculate a max age for responses that should invalidate at the
+ * same time, no matter when they were put in cache.
+ *
+ * For example, when pasing '5min' and the current time is 12:04:00, the
+ * method will return 60.
+ */
+export function getSecondsUntilNextInterval(key: ValidInterval): number {
+  const now = new Date()
+
+  // Special handling for the midnight case.
+  if (key === 'midnight') {
+    now.setHours(24, 0, 0, 0)
+    return Math.floor((now.getTime() - Date.now()) / 1000)
+  }
+
+  // Get the current timestamp in milliseconds
+  const msSinceHourStart =
+    now.getMinutes() * 60 * 1000 +
+    now.getSeconds() * 1000 +
+    now.getMilliseconds()
+
+  const interval = INTERVALS[key]
+
+  // Calculate the interval in milliseconds.
+  const intervalMs = interval * 1000
+
+  // Calculate the remaining milliseconds until the next interval.
+  const millisecondsUntilNextInterval =
+    intervalMs - (msSinceHourStart % intervalMs)
+
+  // Convert milliseconds to seconds.
+  return Math.floor(millisecondsUntilNextInterval / 1000)
+}
+
+/**
+ * Convert the given cache tag or cache tags to its hashed version.
+ *
+ * Because our responses can contain a lot of cache tags, in order to avoid
+ * headers that are too large, the fastly Drupal module will hash the cache
+ * tags to a fixed length.
+ *
+ * In some cases, when directly building responses in the Nuxt app that have
+ * to manually define cache tags, we need to "recreate" the same behaviour
+ * as Drupal, so that when Drupal invalidates the hashed cache tags, our
+ * custom responses also get invalidated.
+ *
+ * IMPORTANT: It is crucial that the logic for this method is in-sync with
+ * Drupal or else responses are not properly invalidated. In particular, the
+ * length of the hashed cache tag is configurable in Drupal.
+ */
+export function buildFastlyCacheTags(input: string | string[]): string[] {
+  const tags = typeof input === 'string' ? [input] : input
+  const siteId = useRuntimeConfig().fastlySiteId
+
+  return tags.map(function (tag) {
+    return crypto
+      .createHash('md5')
+      .update(siteId + ':' + tag)
+      .digest('base64')
+      .substring(0, 6)
+  })
+}

package/shims-vue.d.ts

@@ -0,0 +1,5 @@
+// shims-vue.d.ts
+declare module '@iframe-resizer/vue/iframe-resizer.vue' {
+  const IframeResizer: any
+  export default IframeResizer
+}

package/tailwind.config.ts

@@ -0,0 +1,228 @@
+import type { Config } from 'tailwindcss'
+
+import plugin from 'tailwindcss/plugin'
+import defaultTheme from 'tailwindcss/defaultTheme'
+import type { PluginAPI } from 'tailwindcss/types/config'
+import animate from 'tailwindcss-animate'
+
+import { fileURLToPath } from 'url'
+import { dirname, join } from 'path'
+const currentDir = dirname(fileURLToPath(import.meta.url))
+
+const colors = {
+  primary: {
+    DEFAULT: 'rgb(232, 93, 39)',
+    '50': 'rgb(254, 245, 238)',
+    '100': 'rgb(252, 232, 216)',
+    '200': 'rgb(248, 206, 176)',
+    '300': 'rgb(243, 171, 126)',
+    '400': 'rgb(237, 126, 74)',
+    '500': 'rgb(232, 93, 39)',
+    '600': 'rgb(217, 69, 29)',
+    '700': 'rgb(180, 51, 26)',
+    '800': 'rgb(144, 42, 28)',
+    '900': 'rgb(116, 37, 26)',
+    '950': 'rgb(63, 16, 11)',
+  },
+  secondary: {
+    DEFAULT: 'rgb(11, 102, 156)',
+    '50': 'rgb(241, 249, 254)',
+    '100': 'rgb(225, 241, 253)',
+    '200': 'rgb(189, 228, 250)',
+    '300': 'rgb(131, 207, 246)',
+    '400': 'rgb(65, 182, 239)',
+    '500': 'rgb(25, 157, 222)',
+    '600': 'rgb(12, 126, 189)',
+    '700': 'rgb(11, 102, 156)',
+    '800': 'rgb(13, 85, 127)',
+    '900': 'rgb(17, 71, 105)',
+    '950': 'rgb(11, 45, 70)',
+  },
+  gray: {
+    DEFAULT: 'rgb(61, 61, 61)',
+    '50': 'rgb(246, 246, 246)',
+    '100': 'rgb(231, 231, 231)',
+    '200': 'rgb(209, 209, 209)',
+    '300': 'rgb(176, 176, 176)',
+    '400': 'rgb(136, 136, 136)',
+    '500': 'rgb(109, 109, 109)',
+    '600': 'rgb(93, 93, 93)',
+    '700': 'rgb(79, 79, 79)',
+    '800': 'rgb(69, 69, 69)',
+    '900': 'rgb(61, 61, 61)',
+    '950': 'rgb(17, 17, 17)',
+  },
+  error: {
+    DEFAULT: 'rgb(229, 62, 62)',
+    '50': 'rgb(253, 243, 243)',
+    '100': 'rgb(253, 227, 227)',
+    '200': 'rgb(252, 204, 204)',
+    '300': 'rgb(248, 169, 169)',
+    '400': 'rgb(242, 119, 119)',
+    '500': 'rgb(229, 62, 62)',
+    '600': 'rgb(211, 47, 47)',
+    '700': 'rgb(178, 35, 35)',
+    '800': 'rgb(147, 33, 33)',
+    '900': 'rgb(122, 34, 34)',
+    '950': 'rgb(66, 13, 13)',
+  },
+  warning: {
+    DEFAULT: 'rgb(247, 181, 0)',
+    '50': 'rgb(255, 254, 234)',
+    '100': 'rgb(255, 250, 197)',
+    '200': 'rgb(255, 246, 133)',
+    '300': 'rgb(255, 234, 70)',
+    '400': 'rgb(255, 219, 27)',
+    '500': 'rgb(247, 181, 0)',
+    '600': 'rgb(226, 144, 0)',
+    '700': 'rgb(187, 101, 2)',
+    '800': 'rgb(152, 78, 8)',
+    '900': 'rgb(124, 64, 11)',
+    '950': 'rgb(72, 33, 0)',
+  },
+  success: {
+    DEFAULT: 'rgb(46, 133, 75)',
+    '50': 'rgb(242, 251, 245)',
+    '100': 'rgb(226, 246, 232)',
+    '200': 'rgb(198, 236, 210)',
+    '300': 'rgb(153, 220, 175)',
+    '400': 'rgb(101, 195, 132)',
+    '500': 'rgb(64, 167, 98)',
+    '600': 'rgb(46, 133, 75)',
+    '700': 'rgb(40, 109, 64)',
+    '800': 'rgb(36, 87, 53)',
+    '900': 'rgb(31, 72, 46)',
+    '950': 'rgb(12, 39, 22)',
+  },
+};
+
+const config: Config = {
+  content: [
+    './components/**/*.{vue,ts,js}',
+    './pages/**/*.{vue,ts,js}',
+    './layouts/**/*.{vue,ts,js}',
+    './helpers/**/*.{vue,ts,js}',
+
+    // We also need to check the formkit config to not
+    // purge classes away that are only used there.
+    join(currentDir, './formkit.config.ts'),
+    join(currentDir, './formkit.theme.ts'),
+  ],
+  theme: {
+    borderWidth: {
+      DEFAULT: '1px',
+      0: '0',
+      1: '1px',
+      2: '2px',
+      3: '3px',
+      4: '4px',
+      6: '6px',
+      8: '8px',
+    },
+    colors: {
+      // Monochrome colors.
+      white: "rgb(255, 255, 255)",
+      black: "rgb(17, 17, 17)",
+      current: 'currentColor',
+      transparent: 'transparent',
+      body: colors.gray['900'],
+
+      ...colors,
+    },
+    extend: {
+      screens: {
+        ss: '375px',
+        xs: '412px',
+      },
+      containers: {
+        '3xs': '12rem',
+        '2xs': '16rem',
+      },
+      fontFamily: {
+        sans: ['"Inter"', ...defaultTheme.fontFamily.sans],
+        montserrat: ['"Montserrat"', ...defaultTheme.fontFamily.sans],
+      },
+      fontWeight: {
+        regular: '400',
+      },
+      transitionDuration: {
+        250: '250ms',
+      },
+      columnCount: {
+        1: '1',
+        2: '2',
+        3: '3',
+      },
+      boxShadow: {
+        custom: '0 0 30px 15px rgba(0, 0, 0, 0.1)',
+        'custom-small': '0 0 30px 0px rgba(0, 0, 0, 0.1)',
+        'custom-offset': '30px 30px 30px -15px rgba(0, 0, 0, 0.1)',
+        'custom-inner': 'inset -15px -15px 50px -15px rgba(0 ,0, 0, 0.1)',
+      },
+      textShadow: {
+        sm: '0 0 16px rgba(0, 0, 0, 0.25)',
+        md: '0 0 16px rgba(0, 0, 0, 0.4)',
+        lg: '0 0 16px rgba(0, 0, 0, 0.6)',
+      },
+      aspectRatio: {
+        '4/3': '4 / 3',
+      },
+      keyframes: {
+        'accordion-down': {
+          from: { height: '0' },
+          to: { height: 'var(--radix-accordion-content-height)' },
+        },
+        'accordion-up': {
+          from: { height: 'var(--radix-accordion-content-height)' },
+          to: { height: '0' },
+        },
+      },
+      animation: {
+        'accordion-down': 'accordion-down 0.2s ease-out',
+        'accordion-up': 'accordion-up 0.2s ease-out',
+      },
+    },
+  },
+  future: {
+    hoverOnlyWhenSupported: true,
+  },
+  plugins: [
+    // Used by shadcn
+    animate,
+    /**
+     * Various additional variants
+     */
+    require('@tailwindcss/container-queries'),
+    require('@formkit/themes'),
+    plugin(({ addVariant }) => {
+      addVariant(
+        'mobile-only',
+        "@media screen and (max-width: theme('screens.md'))",
+      )
+      addVariant('not-last', '&:not(:last-child)')
+      addVariant('not-first', '&:not(:first-child)')
+    }),
+    plugin(function ({ matchUtilities, theme }) {
+      matchUtilities(
+        {
+          'text-shadow': (value: string) => ({
+            textShadow: value,
+          }),
+        },
+        { values: theme('textShadow') },
+      )
+    }),
+    function (pluginApi: PluginAPI) {
+      const { addUtilities } = pluginApi
+      addUtilities({
+        '.column-count-2': { columnCount: '2' },
+        '.column-count-3': { columnCount: '3' },
+      })
+    },
+  ],
+  corePlugins: {
+    textOpacity: false,
+  },
+}
+
+export default config

package/vitest.config.mts

@@ -0,0 +1,28 @@
+import { defineVitestConfig } from '@nuxt/test-utils/config'
+import path from 'path'
+
+export default defineVitestConfig({
+  test: {
+    globals: true,
+    environment: 'nuxt',
+    alias: {
+      '~': path.resolve(__dirname, './'),
+    },
+    include: ['**/__tests__/*.*'],
+    coverage: {
+      all: true,
+      provider: 'v8',
+      reporter: ['text', 'json', 'html'],
+      include: [
+        'app/**/*.*',
+        'components/**/*.*',
+        'composables/**/*.*',
+        'config/**/*.*',
+        'layouts/**/*.*',
+        'middleware/**/*.*',
+        'plugins/**/*.*',
+        '/**/*.*',
+      ],
+    },
+  },
+})