@dargmuesli/nuxt-vio 2.0.1 → 3.0.0-beta.10

package/nuxt.config.ts

@@ -1,12 +1,18 @@
 import { dirname, join } from 'node:path'
 import { fileURLToPath } from 'node:url'
 
-import { I18N_MODULE_CONFIG, SITE_NAME } from './utils/constants'
+import {
+  I18N_COOKIE_NAME,
+  I18N_MODULE_CONFIG,
+  TIMEZONE_COOKIE_NAME,
+  SITE_NAME,
+} from './utils/constants'
 
 const currentDir = dirname(fileURLToPath(import.meta.url))
 
 const BASE_URL =
-  'https://' +
+  (process.env.NUXT_PUBLIC_STACK_DOMAIN ? 'https' : 'http') +
+  '://' +
   (process.env.NUXT_PUBLIC_STACK_DOMAIN ||
     `${process.env.HOST || 'localhost'}:${
       !process.env.NODE_ENV || process.env.NODE_ENV === 'development'
@@ -17,22 +23,35 @@ const BASE_URL =
 // https://v3.nuxtjs.org/api/configuration/nuxt.config
 export default defineNuxtConfig({
   alias: {
-    sweetalert2: 'sweetalert2', // TODO: remove (https://github.com/nuxt/nuxt/issues/19426)
-  },
+    dayjs: 'dayjs',
+    sweetalert2: 'sweetalert2',
+  }, // TODO: remove (https://github.com/nuxt/nuxt/issues/19426)
   app: {
     head: {
       htmlAttrs: {
         lang: 'en', // fallback data to prevent invalid html at generation
       },
-      titleTemplate: `%s`,
       title: SITE_NAME, // fallback data to prevent invalid html at generation
+      titleTemplate: '%s', // fully set in `composables/useAppLayout.ts`
+    },
+    pageTransition: {
+      name: 'layout',
+    },
+  },
+  devtools: {
+    enabled: process.env.NODE_ENV !== 'production',
+    timeline: {
+      enabled: true,
     },
   },
   modules: [
     '@dargmuesli/nuxt-cookie-control',
+    '@nuxt/image',
+    '@nuxtjs/color-mode',
     '@nuxtjs/html-validator',
     '@nuxtjs/i18n',
     '@nuxtjs/tailwindcss',
+    '@pinia/nuxt',
     'nuxt-seo-kit-module',
   ],
   nitro: {
@@ -46,14 +65,26 @@ export default defineNuxtConfig({
       },
       isInProduction: process.env.NODE_ENV === 'production',
       isTesting: false,
+      stagingHost:
+        process.env.NODE_ENV !== 'production' &&
+        !process.env.NUXT_PUBLIC_STACK_DOMAIN
+          ? 'localhost:3000'
+          : undefined,
     },
   },
   typescript: {
     shim: false,
-    strict: true,
+    // tsConfig: {
+    //   compilerOptions: {
+    //     esModuleInterop: true,
+    //   },
+    // },
   },
 
   // modules
+  colorMode: {
+    classSuffix: '',
+  },
   cookieControl: {
     cookies: {
       necessary: [
@@ -79,7 +110,19 @@ export default defineNuxtConfig({
             de: 'Sprache',
             en: 'Language',
           },
-          targetCookieIds: ['i18n_redirected'],
+          targetCookieIds: [I18N_COOKIE_NAME],
+        },
+        {
+          description: {
+            de: 'Dieser Cookie von uns speichert die Zeitzone, in der sich das Gerät zu befinden scheint.',
+            en: 'This cookie of ours saves the timezone in which the device appears to be located.',
+          },
+          id: 't',
+          name: {
+            de: 'Zeitzone',
+            en: 'Timezone',
+          },
+          targetCookieIds: [TIMEZONE_COOKIE_NAME],
         },
       ],
       optional: [
@@ -101,18 +144,20 @@ export default defineNuxtConfig({
     locales: ['en', 'de'],
   },
   htmlValidator: {
-    // failOnError: true,
+    failOnError: false, // TODO: fix invalid html in nuxt html template (https://github.com/nuxt/nuxt/issues/22526)
     logLevel: 'warning',
   },
   i18n: {
     ...I18N_MODULE_CONFIG,
     defaultLocale: 'en', // Must be set for the default prefix_except_default prefix strategy.
     detectBrowserLanguage: {
+      cookieKey: I18N_COOKIE_NAME,
       cookieSecure: true,
     },
   },
   linkChecker: {
-    failOnError: false, // TODO: enable (https://github.com/harlan-zw/nuxt-seo-kit/issues/4#issuecomment-1434522124)
+    debug: process.env.NODE_ENV === 'development',
+    failOnError: true,
   },
   seoKit: {
     splash: false,
@@ -120,10 +165,11 @@ export default defineNuxtConfig({
   site: {
     debug: process.env.NODE_ENV === 'development',
     name: SITE_NAME,
+    titleSeparator: '·',
     url: BASE_URL,
   },
   sitemap: {
-    exclude: ['/api/**'],
+    exclude: ['/api/pages/**'],
   },
   tailwindcss: {
     cssPath: join(currentDir, './assets/css/tailwind.css'),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dargmuesli/nuxt-vio",
-  "version": "2.0.1",
+  "version": "3.0.0-beta.10",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -8,16 +8,18 @@
   "engines": {
     "node": "20"
   },
-  "packageManager": "pnpm@8.6.11",
+  "packageManager": "pnpm@8.6.12",
   "files": [
     "assets",
     "components",
     "composables",
     "layouts",
     "locales",
-    "server",
     "pages",
     "plugins",
+    "server",
+    "store",
+    "types",
     "utils",
     "app.config.ts",
     "error.vue",
@@ -25,56 +27,66 @@
     "nuxt.config.ts",
     "tailwind.config.ts"
   ],
-  "main": "./nuxt.config.ts",
+  "main": "nuxt.config.ts",
   "scripts": {
-    "dev": "nuxi dev .playground",
-    "build": "nuxi build .playground",
-    "generate": "nuxi generate .playground",
-    "preview": "nuxi preview .playground",
-    "prepare": "pnpm husky install && pnpm nuxt prepare .playground",
-    "lint": "pnpm lint:js && pnpm lint:ts && pnpm lint:style",
+    "build": "nuxt build .playground",
+    "dev": "nuxt dev .playground",
+    "generate": "nuxt generate .playground",
     "lint:fix": "pnpm lint:js --fix && pnpm lint:ts --fix && pnpm lint:style --fix",
     "lint:js": "eslint --cache --ext .js,.ts,.vue --ignore-path .gitignore .",
-    "lint:staged": "pnpm lint-staged",
+    "lint:staged": "lint-staged",
     "lint:style": "stylelint **/*.{vue,css} --ignore-path .gitignore",
-    "lint:ts": "nuxt typecheck"
+    "lint:ts": "nuxt typecheck",
+    "lint": "pnpm lint:js && pnpm lint:ts && pnpm lint:style",
+    "prepare": "nuxt prepare .playground",
+    "preview": "nuxt preview .playground"
   },
   "dependencies": {
     "@dargmuesli/nuxt-cookie-control": "6.1.5",
-    "@dargmuesli/nuxt-vio": "link:",
     "@http-util/status-i18n": "0.7.0",
+    "@nuxt/image": "1.0.0-rc.1",
+    "@nuxtjs/color-mode": "3.3.0",
     "@nuxtjs/html-validator": "1.5.2",
-    "@nuxtjs/i18n": "8.0.0-rc.1",
+    "@nuxtjs/i18n": "8.0.0-rc.2",
     "@nuxtjs/tailwindcss": "6.8.0",
+    "@pinia/nuxt": "0.4.11",
+    "@tailwindcss/forms": "0.5.4",
     "@tailwindcss/typography": "0.5.9",
+    "@urql/core": "4.1.1",
+    "@urql/devtools": "2.0.3",
+    "@urql/exchange-graphcache": "6.3.1",
+    "@urql/vue": "1.1.2",
+    "@vuelidate/core": "2.0.3",
+    "@vuelidate/validators": "2.0.3",
+    "clipboard": "2.0.11",
+    "dayjs": "2.0.0-alpha.4",
+    "is-https": "4.0.0",
+    "jose": "4.14.4",
+    "marked": "7.0.1",
     "nuxt-seo-kit-module": "2.0.0-beta.9",
+    "pinia": "2.1.6",
     "sweetalert2": "11.7.20",
     "vue-gtag": "2.0.1"
   },
   "devDependencies": {
-    "@commitlint/cli": "17.6.7",
-    "@commitlint/config-conventional": "17.6.7",
     "@intlify/eslint-plugin-vue-i18n": "3.0.0-next.3",
     "@nuxtjs/eslint-config-typescript": "12.0.0",
+    "@types/marked": "5.0.1",
     "eslint": "8.46.0",
-    "eslint-config-prettier": "8.9.0",
+    "eslint-config-prettier": "9.0.0",
+    "eslint-plugin-compat": "4.1.4",
     "eslint-plugin-nuxt": "4.0.0",
     "eslint-plugin-prettier": "5.0.0",
     "eslint-plugin-yml": "1.8.0",
-    "husky": "8.0.3",
     "lint-staged": "13.2.3",
     "nuxt": "3.6.5",
-    "prettier": "3.0.0",
+    "prettier": "3.0.1",
     "stylelint": "15.10.2",
     "stylelint-config-recommended-vue": "1.5.0",
     "stylelint-config-standard": "34.0.0",
     "stylelint-no-unsupported-browser-features": "7.0.0",
-    "typescript": "5.1.6",
+    "tailwindcss": "3.3.3",
+    "vue": "3.3.4",
     "vue-tsc": "1.8.8"
-  },
-  "pnpm": {
-    "overrides": {
-      "eslint-plugin-vue": "9.15.1"
-    }
   }
 }

package/pages/legal-notice.vue

@@ -1,3 +1,3 @@
 <template>
-  <VioLegalNotice />
+  <VioPageLegalNotice />
 </template>

package/pages/privacy-policy.vue

@@ -1,5 +1,5 @@
 <template>
-  <VioPrivacyPolicy
+  <VioPagePrivacyPolicy
     :is-enabled="{
       summary: {
         generalNotes: true,

package/plugins/dayjs.ts

@@ -0,0 +1,34 @@
+import dayjs from 'dayjs'
+
+// workaround for [1]
+import de from 'dayjs/locale/de'
+// import 'dayjs/locale/de' does not make locale available
+
+import isSameOrBefore from 'dayjs/plugin/isSameOrBefore'
+import localizedFormat from 'dayjs/plugin/localizedFormat'
+import timezone from 'dayjs/plugin/timezone'
+import utc from 'dayjs/plugin/utc'
+
+export default defineNuxtPlugin((_nuxtApp) => {
+  dayjs.extend(isSameOrBefore)
+  dayjs.extend(localizedFormat)
+  dayjs.extend(timezone)
+  dayjs.extend(utc)
+
+  // workaround for [1]
+  dayjs.locale(de)
+  // dayjs.locale(en) makes `format` error
+
+  return {
+    provide: {
+      dayjs,
+    },
+  }
+})
+
+/*
+  [1]
+  https://github.com/nuxt/framework/issues/7534#issuecomment-1248596609
+  https://github.com/nuxt/framework/issues/7206
+  https://github.com/maevsi/maevsi/issues/956
+*/

package/plugins/gtag.client.ts

@@ -11,6 +11,9 @@ export default defineNuxtPlugin((nuxtApp) => {
       bootstrap: !!cookieControl.cookiesEnabledIds.value?.includes('ga'),
       config: {
         id: config.public.googleAnalyticsId,
+        params: {
+          cookie_flags: 'secure;samesite=strict',
+        },
       },
     },
     router,

package/plugins/i18n.ts

@@ -0,0 +1,5 @@
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.hook('i18n:localeSwitched', ({ newLocale }) => {
+    nuxtApp.vueApp.$nuxt.$dayjs.locale(newLocale)
+  })
+})

package/plugins/marked.ts

@@ -0,0 +1,9 @@
+import { marked } from 'marked'
+
+export default defineNuxtPlugin((_nuxtApp) => {
+  return {
+    provide: {
+      marked: marked.parse,
+    },
+  }
+})

package/server/middleware/headers.ts

@@ -1,13 +1,44 @@
-import { defineEventHandler } from 'h3'
+import { appendHeader, defineEventHandler } from 'h3'
+import type { H3Event } from 'h3'
+import { AppConfig } from 'nuxt/schema'
 
-export default defineEventHandler((event) => {
-  const { res } = event.node
+import { TIMEZONE_HEADER_KEY } from '../../utils/constants'
+import { getTimezone } from '../../utils/networking'
 
-  res.setHeader('Permissions-Policy', '')
-
-  // // Disabled until there is better browser support (https://caniuse.com/?search=report-to)
-  // res.setHeader(
-  //   'Report-To',
-  //   '{"group":"default","max_age":31536000,"endpoints":[{"url":"https://dargmuesli.report-uri.com/a/d/g"}],"include_subdomains":true}'
-  // )
+export default defineEventHandler(async (event) => {
+  setRequestHeader(event, TIMEZONE_HEADER_KEY, await getTimezone(event))
+  // setContentSecurityPolicy(event);
+  setResponseHeaders(event)
 })
+
+// const setContentSecurityPolicy = (event: H3Event) => {
+//   const config = useAppConfig();
+
+//   appendHeader(
+//     event,
+//     "Content-Security-Policy",
+//     getCspAsString(config.public.vio.server.middleware.headers.csp)
+//   );
+// };
+
+const setRequestHeader = (event: H3Event, name: string, value?: string) => {
+  event.node.req.headers[name] = value
+}
+
+const setResponseHeaders = (event: H3Event) => {
+  const config = useAppConfig() as AppConfig
+
+  for (const entry of Object.entries(
+    config.vio.server.middleware.headers.csp.default,
+  )) {
+    appendHeader(event, entry[0], entry[1])
+  }
+
+  if (process.env.NODE_ENV === 'production') {
+    for (const entry of Object.entries(
+      config.vio.server.middleware.headers.csp.production,
+    )) {
+      appendHeader(event, entry[0], entry[1])
+    }
+  }
+}

package/server/tsconfig.json

@@ -1,3 +1,3 @@
 {
-  "extends": "../.nuxt/tsconfig.server.json"
+  "extends": "../.playground/.nuxt/tsconfig.server.json"
 }

package/server/utils/util.ts

@@ -0,0 +1,2 @@
+export const getCspAsString = (csp = {} as Record<string, Array<string>>) =>
+  Object.keys(csp).reduce((p, c) => (p += `${c} ${csp[c].join(' ')};`), '')

package/store/auth.ts

@@ -0,0 +1,32 @@
+import { decodeJwt, JWTPayload } from 'jose'
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+export const useVioAuthStore = defineStore('vio-auth', () => {
+  const jwt = ref<string>()
+  const jwtDecoded = ref<JWTPayload>()
+  const signedInUsername = ref<string>()
+
+  const jwtRemove = () => jwtSet(undefined)
+
+  const jwtSet = (jwtNew?: string) => {
+    const jwtDecodedNew = jwtNew !== undefined ? decodeJwt(jwtNew) : undefined
+
+    jwt.value = jwtNew
+    jwtDecoded.value = jwtDecodedNew
+    signedInUsername.value =
+      jwtDecodedNew?.role === 'vio_account' &&
+      jwtDecodedNew.exp !== undefined &&
+      jwtDecodedNew.exp > Math.floor(Date.now() / 1000)
+        ? (jwtDecodedNew.username as string | undefined)
+        : undefined
+  }
+
+  return {
+    jwt,
+    jwtDecoded,
+    signedInUsername,
+    jwtRemove,
+    jwtSet,
+  }
+})

package/tailwind.config.ts

@@ -1,13 +1,15 @@
-import colors from 'tailwindcss/colors'
-import { PluginAPI } from 'tailwindcss/types/config'
+import formsPlugin from '@tailwindcss/forms'
 import typographyPlugin from '@tailwindcss/typography'
+import type { Config } from 'tailwindcss'
+import colors from 'tailwindcss/colors'
+import type { PluginAPI } from 'tailwindcss/types/config'
 
-const heading = (theme: PluginAPI['theme']) =>
-  ({
-    fontWeight: theme('fontWeight.bold'),
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-  }) as Record<string, string>
+const heading = (theme: PluginAPI['theme']): Record<string, string> => ({
+  fontWeight: theme('fontWeight.bold'),
+  // marginBottom: theme('margin.1'),
+  // marginTop: theme('margin.4'),
+  // set overflow truncate/ellipsis in the surrounding container, or larger fonts will be cut off due to their line-heights
+})
 
 const gray = colors.gray // or slate, zinc, neutral, stone
 
@@ -39,14 +41,42 @@ const prose = (theme: PluginAPI['theme']) => ({
 })
 
 export default {
+  content: [
+    './components/**/*.{js,vue,ts}',
+    './composables/**/*.{js,vue,ts}',
+    './layouts/**/*.vue',
+    './pages/**/*.vue',
+    './plugins/**/*.{js,ts}',
+    // './nuxt.config.{js,ts}', // Does not work with i18n as of 2022-12-01
+    './app.vue',
+  ],
   darkMode: 'class',
   plugins: [
+    formsPlugin,
     typographyPlugin,
-    ({ addBase, addComponents, theme }: PluginAPI) => {
+    ({ addBase, addComponents, addUtilities, theme }: PluginAPI) => {
       addBase({
+        ':disabled': {
+          cursor: theme('cursor.not-allowed'),
+          opacity: theme('opacity.50'),
+        },
+        'a[target="_blank"]:after': {
+          backgroundColor: 'currentColor',
+          content: '""',
+          display: 'inline-table', // inline-table centers the element vertically in the tiptap text area, instead of inline-block
+          mask: 'url(data:image/svg+xml;base64,PHN2ZyBhcmlhLWhpZGRlbj0idHJ1ZSIgZm9jdXNhYmxlPSJmYWxzZSIgZGF0YS1wcmVmaXg9ImZhcyIgZGF0YS1pY29uPSJhcnJvdy11cC1yaWdodC1mcm9tLXNxdWFyZSIgY2xhc3M9InN2Zy1pbmxpbmUtLWZhIGZhLWFycm93LXVwLXJpZ2h0LWZyb20tc3F1YXJlIiByb2xlPSJpbWciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDUxMiA1MTIiPjxwYXRoIGZpbGw9ImN1cnJlbnRDb2xvciIgZD0iTTM4NCAzMjBjLTE3LjY3IDAtMzIgMTQuMzMtMzIgMzJ2OTZINjRWMTYwaDk2YzE3LjY3IDAgMzItMTQuMzIgMzItMzJzLTE0LjMzLTMyLTMyLTMyTDY0IDk2Yy0zNS4zNSAwLTY0IDI4LjY1LTY0IDY0VjQ0OGMwIDM1LjM0IDI4LjY1IDY0IDY0IDY0aDI4OGMzNS4zNSAwIDY0LTI4LjY2IDY0LTY0di05NkM0MTYgMzM0LjMgNDAxLjcgMzIwIDM4NCAzMjB6TTUwMi42IDkuMzY3QzQ5Ni44IDMuNTc4IDQ4OC44IDAgNDgwIDBoLTE2MGMtMTcuNjcgMC0zMS4xIDE0LjMyLTMxLjEgMzEuMWMwIDE3LjY3IDE0LjMyIDMxLjEgMzEuOTkgMzEuMWg4Mi43NUwxNzguNyAyOTAuN2MtMTIuNSAxMi41LTEyLjUgMzIuNzYgMCA0NS4yNkMxOTEuMiAzNDguNSAyMTEuNSAzNDguNSAyMjQgMzM2bDIyNC0yMjYuOFYxOTJjMCAxNy42NyAxNC4zMyAzMS4xIDMxLjEgMzEuMVM1MTIgMjA5LjcgNTEyIDE5MlYzMS4xQzUxMiAyMy4xNiA1MDguNCAxNS4xNiA1MDIuNiA5LjM2N3oiPjwvcGF0aD48L3N2Zz4K) no-repeat 50% 50%',
+          maskSize: 'cover',
+          height: theme('fontSize.xs'),
+          marginLeft: '5px',
+          width: theme('fontSize.xs'),
+        },
+        address: {
+          margin: theme('margin.4'),
+        },
         h1: {
           ...heading(theme),
           fontSize: theme('fontSize.4xl'),
+          // marginBottom: theme('margin.4'),
           textAlign: 'center',
         },
         h2: {
@@ -70,14 +100,77 @@ export default {
         },
       })
       addComponents({
+        '::placeholder': {
+          fontStyle: 'italic',
+          '.form-input&,.form-textarea&': {
+            opacity: '0.5',
+          },
+        },
+        '.form-input': {
+          appearance: 'none',
+          backgroundColor: theme('colors.gray.50'),
+          borderColor: theme('colors.gray.300'),
+          borderRadius: theme('borderRadius.DEFAULT'),
+          borderWidth: theme('borderWidth.DEFAULT'),
+          boxShadow: theme('boxShadow.sm'),
+          color: theme('colors.text.dark'),
+          lineHeight: theme('lineHeight.tight'),
+          padding: theme('padding.2') + ' ' + theme('padding.4'),
+          width: theme('width.full'),
+          '&:focus': {
+            backgroundColor: theme('colors.white'),
+          },
+        },
+        '.form-input-error': {
+          input: {
+            borderColor: theme('colors.red.500'),
+          },
+        },
+        '.form-input-success': {
+          input: {
+            borderColor: theme('colors.green.600'),
+          },
+        },
+        '.form-input-warning': {
+          input: {
+            borderColor: theme('colors.yellow.600'),
+          },
+        },
+        '.fullscreen': {
+          bottom: '0',
+          height: theme('height.full'),
+          left: '0',
+          position: 'absolute',
+          right: '0',
+          top: '0',
+          width: theme('width.full'),
+        },
         '.object-position-custom': {
           objectPosition: '50% 30%',
         },
       })
+      addUtilities({
+        '.disabled': {
+          cursor: theme('cursor.not-allowed'),
+          opacity: theme('opacity.50'),
+        },
+        '.max-w-xxs': {
+          maxWidth: '15rem',
+        },
+        '.min-w-xxs': {
+          minWidth: '15rem',
+        },
+        '.mb-20vh': {
+          marginBottom: '20vh',
+        },
+      })
     },
   ],
   theme: {
     extend: {
+      animation: {
+        shake: 'shake 0.6s ease-in-out 0s 1 normal forwards running',
+      },
       colors: {
         background: {
           bright: colors.white,
@@ -94,6 +187,34 @@ export default {
           dark: gray['900'],
         },
       },
+      keyframes: {
+        shake: {
+          '0%': {
+            transform: 'translateX(0)',
+          },
+          '15%': {
+            transform: 'translateX(0.375rem)',
+          },
+          '30%': {
+            transform: 'translateX(-0.375rem)',
+          },
+          '45%': {
+            transform: 'translateX(0.375rem)',
+          },
+          '60%': {
+            transform: 'translateX(-0.375rem)',
+          },
+          '75%': {
+            transform: 'translateX(0.375rem)',
+          },
+          '90%': {
+            transform: 'translateX(-0.375rem)',
+          },
+          '100%': {
+            transform: 'translateX(0)',
+          },
+        },
+      },
       screens: {
         12: { raw: '(min-aspect-ratio: 2/1)' },
       },
@@ -107,4 +228,4 @@ export default {
       }),
     },
   },
-}
+} as Config

package/types/api.d.ts

@@ -0,0 +1,9 @@
+import type { CombinedError } from '@urql/core'
+
+export type ApiData = ComputedRef<{
+  data?: Object
+  errors: BackendError[]
+  isFetching: boolean
+}>
+
+export type BackendError = CombinedError | { errcode: string; message: string }

package/types/fetch.d.ts

@@ -0,0 +1,8 @@
+export interface StrapiResult<T> {
+  data: CollectionItem<T>[]
+  meta: {
+    pagination: {
+      total: number
+    }
+  }
+}

package/types/modules/gql.d.ts

@@ -0,0 +1,6 @@
+declare module '*.gql' {
+  import { DocumentNode } from 'graphql'
+
+  const content: DocumentNode
+  export default content
+}

package/types/modules/graphql.d.ts

@@ -0,0 +1,6 @@
+declare module '*.graphql' {
+  import { DocumentNode } from 'graphql'
+
+  const content: DocumentNode
+  export default content
+}

package/utils/constants.ts

@@ -1,3 +1,10 @@
+export const SITE_NAME = 'Vio'
+
+export const CACHE_VERSION = 'bOXMwoKlJr'
+export const COOKIE_PREFIX = SITE_NAME.toLocaleLowerCase()
+export const COOKIE_SEPARATOR = '_'
+export const FETCH_RETRY_AMOUNT = 3
+export const I18N_COOKIE_NAME = 'i18n_r'
 export const I18N_MODULE_CONFIG = {
   langDir: 'locales',
   lazy: true,
@@ -20,4 +27,6 @@ export const I18N_VUE_CONFIG = {
   fallbackWarn: false, // covered by linting
   missingWarn: false, // covered by linting
 }
-export const SITE_NAME = 'Vio'
+export const TIMEZONE_COOKIE_NAME = [COOKIE_PREFIX, 'tz'].join(COOKIE_SEPARATOR)
+export const TIMEZONE_HEADER_KEY = `X-${SITE_NAME}-Timezone`
+export const VALIDATION_SUGGESTION_TITLE_LENGTH_MAXIMUM = 300