@dargmuesli/nuxt-vio 3.0.0-beta.9 → 3.1.0

package/assets/css/tailwind.css

@@ -1,43 +1,58 @@
+/* stylelint-disable at-rule-no-unknown */
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+/* stylelint-enable at-rule-no-unknown */
 
+/* doiuse-disable css-cascade-layers */
 @layer base {
+  /* doiuse-enable css-cascade-layers */
   a:focus {
-    @apply outline-none ring;
+    /* doiuse-disable css-nesting */
+    @apply outline-none ring; /* doiuse-enable css-nesting */
   }
 
   button:focus {
-    @apply outline-none ring;
+    /* doiuse-disable css-nesting */
+    @apply outline-none ring; /* doiuse-enable css-nesting */
   }
 
   thead {
-    @apply sticky top-0 z-10 vio-bg-darken;
+    /* doiuse-disable css-nesting */
+    @apply vio-bg-darken sticky top-0 z-10; /* doiuse-enable css-nesting */
   }
 
   tbody {
-    @apply divide-y vio-divide-darken;
+    /* doiuse-disable css-nesting */
+    @apply vio-divide-darken divide-y; /* doiuse-enable css-nesting */
   }
 }
 
+/* doiuse-disable css-cascade-layers */
 @layer utilities {
+  /* doiuse-enable css-cascade-layers */
   .vio-prose {
-    @apply m-auto prose dark:prose-invert prose-sm sm:prose-base lg:prose-lg xl:prose-xl; /* 2xl:prose-2xl */
+    /* doiuse-disable css-nesting */
+    @apply prose prose-sm dark:prose-invert sm:prose-base lg:prose-lg xl:prose-xl; /* 2xl:prose-2xl */ /* doiuse-enable css-nesting */
   }
 
   .vio-prose-fullwidth {
-    @apply vio-prose max-w-full sm:max-w-full md:max-w-full xl:max-w-full 2xl:max-w-full;
+    /* doiuse-disable css-nesting */
+    @apply vio-prose max-w-full sm:max-w-full md:max-w-full xl:max-w-full 2xl:max-w-full; /* doiuse-enable css-nesting */
   }
 
   .vio-divide-darken {
-    @apply divide-background-brighten dark:divide-background-darken;
+    /* doiuse-disable css-nesting */
+    @apply divide-background-brighten dark:divide-background-darken; /* doiuse-enable css-nesting */
   }
 
   .vio-bg-darken {
-    @apply bg-background-brighten dark:bg-background-darken;
+    /* doiuse-disable css-nesting */
+    @apply bg-background-brighten dark:bg-background-darken; /* doiuse-enable css-nesting */
   }
 
   .vio-border-darken {
-    @apply border-background-brighten dark:border-background-darken;
+    /* doiuse-disable css-nesting */
+    @apply border-background-brighten dark:border-background-darken; /* doiuse-enable css-nesting */
   }
 }

package/components/vio/_/VioApp.vue

@@ -38,6 +38,8 @@ const locale = i18n.locale as WritableComputedRef<Locale>
 
 // methods
 const init = () => {
+  $dayjs.locale(locale.value)
+
   if (process.client) {
     const cookieTimezone = useCookie(TIMEZONE_COOKIE_NAME, {
       // default: () => undefined, // setting `default` on the client side only does not write the cookie
@@ -78,7 +80,8 @@ defineOgImage({
   description: siteDescriptionProp.value,
 })
 useAppLayout()
-useFavicons() // TODO: move to head default
+useFavicons()
+usePolyfills()
 useSchemaOrg([
   defineWebSite({
     description: siteDescriptionProp,

package/components/vio/_/VioError.vue

@@ -3,7 +3,10 @@
   <div>
     {{ description }}
   </div>
-  <pre v-if="stack && !runtimeConfig.public.isInProduction" v-html="stack" />
+  <pre
+    v-if="stack && !runtimeConfig.public.vio.isInProduction"
+    v-html="stack"
+  />
 </template>
 
 <script setup lang="ts">

package/components/vio/_/VioLink.vue

@@ -1,9 +1,9 @@
 <template>
   <a
-    v-if="to.match(/^((ftp|http(s)?):\/\/|(mailto):)/)"
+    v-if="to?.toString().match(/^((ftp|http(s)?):\/\/|(mailto):)/)"
     :aria-label="ariaLabel"
     :class="classes"
-    :href="to"
+    :href="to.toString()"
     :rel="
       [...(nofollow ? ['nofollow'] : []), 'noopener', 'noreferrer'].join(' ')
     "
@@ -16,6 +16,7 @@
     v-else
     :aria-label="ariaLabel"
     :class="classes"
+    :locale="locale"
     :to="isToRelative ? append(route.path, to) : to"
     @click="emit('click')"
   >
@@ -24,19 +25,23 @@
 </template>
 
 <script setup lang="ts">
+import { NuxtLinkProps } from '#app'
+
 export interface Props {
   ariaLabel?: string
   isColored?: boolean
   isToRelative?: boolean
   isUnderlined?: boolean
+  locale?: string
   nofollow?: boolean
-  to: string
+  to: NuxtLinkProps['to']
 }
 const props = withDefaults(defineProps<Props>(), {
   ariaLabel: undefined,
   isColored: true,
   isToRelative: false,
   isUnderlined: false,
+  locale: undefined,
   nofollow: false,
 })
 

package/components/vio/form/VioForm.vue

@@ -9,7 +9,7 @@
     @submit="(e) => emit('submit', e)"
   >
     <VioCard class="flex flex-col" is-high>
-      <div class="flex flex-col min-h-0 overflow-y-auto gap-6">
+      <div class="flex min-h-0 flex-col gap-6 overflow-y-auto">
         <slot />
         <div class="flex flex-col items-center justify-between">
           <VioButtonColored

package/components/vio/form/input/VioFormInput.vue

@@ -51,7 +51,7 @@
           />
           <div v-if="validationProperty && isValidatable">
             <VioFormInputIconWrapper v-if="validationProperty.$pending">
-              <IconHourglass
+              <VioIconHourglass
                 class="text-blue-600"
                 :title="t('globalStatusLoading')"
               />
@@ -61,14 +61,14 @@
                 validationProperty.$model && !validationProperty.$invalid
               "
             >
-              <IconCheckCircle class="text-green-600" :title="t('valid')" />
+              <VioIconCheckCircle class="text-green-600" :title="t('valid')" />
             </VioFormInputIconWrapper>
             <VioFormInputIconWrapper
               v-else-if="
                 validationProperty.$model && validationProperty.$invalid
               "
             >
-              <IconExclamationCircle
+              <VioIconExclamationCircle
                 class="text-red-600"
                 :title="t('validNot')"
               />

package/components/vio/form/input/state/VioFormInputStateError.vue

@@ -11,7 +11,7 @@
     "
     class="text-red-600"
   >
-    <IconExclamationCircle v-if="formInput && validationProperty" />
+    <VioIconExclamationCircle v-if="formInput && validationProperty" />
     <slot />
   </VioFormInputState>
 </template>

package/components/vio/form/input/state/VioFormInputStateInfo.vue

@@ -11,7 +11,7 @@
     "
     class="text-gray-500 dark:text-gray-400"
   >
-    <IconInformationCircle />
+    <VioIconInformationCircle />
     <slot />
   </VioFormInputState>
 </template>

package/components/vio/icon/IconArrowRight.vue

@@ -1,5 +1,5 @@
 <template>
-  <IconContainer
+  <VioIconContainer
     fill="none"
     viewBox="0 0 24 24"
     stroke="currentColor"
@@ -11,7 +11,7 @@
       stroke-linejoin="round"
       d="M14 5l7 7m0 0l-7 7m7-7H3"
     />
-  </IconContainer>
+  </VioIconContainer>
 </template>
 
 <script setup lang="ts">

package/components/vio/icon/IconCalendar.vue

@@ -1,5 +1,5 @@
 <template>
-  <IconContainer
+  <VioIconContainer
     fill="none"
     viewBox="0 0 24 24"
     stroke="currentColor"
@@ -11,7 +11,7 @@
       stroke-width="2"
       d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
     />
-  </IconContainer>
+  </VioIconContainer>
 </template>
 
 <script setup lang="ts">

package/components/vio/icon/IconCheckCircle.vue

@@ -1,5 +1,5 @@
 <template>
-  <IconContainer
+  <VioIconContainer
     viewBox="0 0 20 20"
     fill="currentColor"
     :title="title || t('title')"
@@ -9,7 +9,7 @@
       d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
       clip-rule="evenodd"
     />
-  </IconContainer>
+  </VioIconContainer>
 </template>
 
 <script setup lang="ts">

package/components/vio/icon/IconDownload.vue

@@ -1,5 +1,5 @@
 <template>
-  <IconContainer
+  <VioIconContainer
     fill="none"
     viewBox="0 0 24 24"
     stroke="currentColor"
@@ -11,7 +11,7 @@
       stroke-width="2"
       d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
     />
-  </IconContainer>
+  </VioIconContainer>
 </template>
 
 <script setup lang="ts">

package/components/vio/icon/IconExclamationCircle.vue

@@ -1,5 +1,5 @@
 <template>
-  <IconContainer
+  <VioIconContainer
     viewBox="0 0 20 20"
     fill="currentColor"
     :title="title || t('title')"
@@ -9,7 +9,7 @@
       d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z"
       clip-rule="evenodd"
     />
-  </IconContainer>
+  </VioIconContainer>
 </template>
 
 <script setup lang="ts">

package/components/vio/icon/IconHome.vue

@@ -1,5 +1,5 @@
 <template>
-  <IconContainer
+  <VioIconContainer
     fill="none"
     viewBox="0 0 24 24"
     stroke="currentColor"
@@ -11,7 +11,7 @@
       stroke-width="2"
       d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
     />
-  </IconContainer>
+  </VioIconContainer>
 </template>
 
 <script setup lang="ts">

package/components/vio/icon/IconHourglass.vue

@@ -1,5 +1,5 @@
 <template>
-  <IconContainer
+  <VioIconContainer
     aria-hidden="true"
     focusable="false"
     data-prefix="fas"
@@ -12,7 +12,7 @@
       fill="currentColor"
       d="M352 0C369.7 0 384 14.33 384 32C384 49.67 369.7 64 352 64V74.98C352 117.4 335.1 158.1 305.1 188.1L237.3 256L305.1 323.9C335.1 353.9 352 394.6 352 437V448C369.7 448 384 462.3 384 480C384 497.7 369.7 512 352 512H32C14.33 512 0 497.7 0 480C0 462.3 14.33 448 32 448V437C32 394.6 48.86 353.9 78.86 323.9L146.7 256L78.86 188.1C48.86 158.1 32 117.4 32 74.98V64C14.33 64 0 49.67 0 32C0 14.33 14.33 0 32 0H352zM111.1 128H272C282.4 112.4 288 93.98 288 74.98V64H96V74.98C96 93.98 101.6 112.4 111.1 128zM111.1 384H272C268.5 378.7 264.5 373.7 259.9 369.1L192 301.3L124.1 369.1C119.5 373.7 115.5 378.7 111.1 384V384z"
     />
-  </IconContainer>
+  </VioIconContainer>
 </template>
 
 <script setup lang="ts">

package/components/vio/layout/VioLayoutBreadcrumbs.vue

@@ -6,7 +6,7 @@
       :is-colored="false"
       :to="localePath('/')"
     >
-      <IconHome classes="h-6 w-6" />
+      <VioIconHome classes="h-6 w-6" />
     </VioLink>
     <ul v-if="prefixes" class="flex items-center gap-2">
       <li

package/components/vio/layout/VioLayoutFooter.vue

@@ -3,7 +3,7 @@
     <div class="flex flex-col gap-8">
       <div class="flex items-center">
         <VioLayoutHr />
-        <IconLogo class="mx-12 h-12 w-12 brightness-0 opacity-60 invert" />
+        <slot name="logo" />
         <VioLayoutHr />
       </div>
       <!-- Justifying evenly, instead of "between", centers a single element. -->
@@ -24,11 +24,11 @@
 
 <script setup lang="ts">
 const { t } = useI18n()
-const config = useRuntimeConfig()
+const runtimeConfig = useRuntimeConfig()
 
 // computations
 const year = computed(() =>
-  config.public.isTesting ? 1337 : new Date().getFullYear(),
+  runtimeConfig.public.vio.isTesting ? 1337 : new Date().getFullYear(),
 )
 </script>
 

package/components/vio/layout/VioLayoutFooterCategory.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="flex flex-1 flex-col items-start p-4 basis-1/2 md:flex-none md:basis-auto gap-2"
+    class="flex flex-1 basis-1/2 flex-col items-start gap-2 p-4 md:flex-none md:basis-auto"
   >
     <span class="whitespace-nowrap text-lg font-medium leading-7">
       {{ heading }}

package/components/vio/loader/indicator/VioLoaderIndicator.vue

@@ -3,7 +3,7 @@
     class="flex h-full items-center justify-center"
     :title="t('globalStatusLoading')"
   >
-    <div class="flex items-center justify-center w-1/2">
+    <div class="flex w-1/2 items-center justify-center">
       <slot />
     </div>
   </div>

package/components/vio/loader/indicator/VioLoaderIndicatorPing.vue

@@ -1,7 +1,7 @@
 <template>
   <VioLoaderIndicator>
     <div
-      class="w-1/2 aspect-square animate-ping rounded-full bg-gray-500"
+      class="aspect-square w-1/2 animate-ping rounded-full bg-gray-500"
       :title="t('globalStatusLoading')"
     />
   </VioLoaderIndicator>

package/components/vio/page/VioPageLegalNotice.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="vio-prose">
+  <div class="vio-prose m-auto">
     <h1>{{ title }}</h1>
     <h2>{{ t('tmg') }}</h2>
     <address>
@@ -75,7 +75,7 @@ const { t } = useI18n()
 const title = t('title')
 
 // initialization
-useServerSeoMeta({ title })
+useHeadDefault({ title })
 </script>
 
 <i18n lang="yaml">

package/components/vio/page/VioPagePrivacyPolicy.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="vio-prose">
+  <div class="vio-prose m-auto">
     <h1>{{ title }}</h1>
     <ol v-if="isEnabled">
       <li v-if="isEnabled.summary">
@@ -509,7 +509,7 @@ const { t } = useI18n()
 const title = t('title')
 
 // initialization
-useServerSeoMeta({ title })
+useHeadDefault({ title })
 </script>
 
 <i18n lang="yaml">

package/composables/useGetServiceHref.ts

@@ -16,6 +16,6 @@ export const useGetServiceHref = () => {
       isSsr,
       name,
       port,
-      stagingHost: runtimeConfig.public.stagingHost,
+      stagingHost: runtimeConfig.public.vio.stagingHost,
     })
 }

package/composables/useHeadDefault.ts

@@ -17,5 +17,5 @@ export const useHeadDefault = ({
     twitterTitle: title,
   }
 
-  return useSeoMeta(defu(extension, defaults)) // TODO: use `useServerSeoMeta`
+  useSeoMeta(defu(extension, defaults)) // TODO: use `useServerSeoMeta` when Nuxt 3.7 is used
 }

package/composables/usePolyfills.ts

@@ -0,0 +1,23 @@
+export const usePolyfills = () => {
+  const polyfills =
+    'https://polyfill.io/v3/polyfill.min.js?features=Promise&flags=gated'
+
+  useServerHead({
+    link: [
+      {
+        rel: 'preload',
+        href: polyfills,
+        crossorigin: 'anonymous',
+        as: 'script',
+        'data-testid': 'polyfill-preload',
+      },
+    ],
+    script: [
+      {
+        src: polyfills,
+        crossorigin: 'anonymous',
+        'data-testid': 'polyfill-script',
+      },
+    ],
+  })
+}

package/nuxt.config.ts

@@ -1,177 +1,172 @@
 import { dirname, join } from 'node:path'
 import { fileURLToPath } from 'node:url'
 
+import { defu } from 'defu'
+
 import {
+  BASE_URL,
   I18N_COOKIE_NAME,
-  I18N_MODULE_CONFIG,
-  TIMEZONE_COOKIE_NAME,
   SITE_NAME,
+  TIMEZONE_COOKIE_NAME,
+  VIO_NUXT_BASE_CONFIG,
 } from './utils/constants'
 
 const currentDir = dirname(fileURLToPath(import.meta.url))
 
-const BASE_URL =
-  (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'
-        ? '3000'
-        : '3001'
-    }`)
-
 // https://v3.nuxtjs.org/api/configuration/nuxt.config
-export default defineNuxtConfig({
-  alias: {
-    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
-      },
-      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: {
-    compressPublicAssets: true,
-  },
-  runtimeConfig: {
-    public: {
-      googleAnalyticsId: '', // set via environment variable `NUXT_PUBLIC_GOOGLE_ANALYTICS_ID` only
-      i18n: {
-        baseUrl: BASE_URL,
-      },
-      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,
-    // tsConfig: {
-    //   compilerOptions: {
-    //     esModuleInterop: true,
-    //   },
-    // },
-  },
-
-  // modules
-  colorMode: {
-    classSuffix: '',
-  },
-  cookieControl: {
-    cookies: {
-      necessary: [
-        {
-          description: {
-            de: 'Dieser Cookie von uns speichert die Einstellungen, die in diesem Dialog getroffen werden.',
-            en: 'This cookie of ours stores the settings made in this dialog.',
-          },
-          id: 'c',
-          name: {
-            de: 'Cookie-Präferenzen',
-            en: 'Cookie Preferences',
+export default defineNuxtConfig(
+  defu(
+    {
+      alias: {
+        clipboard: 'clipboard',
+        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
           },
-          targetCookieIds: ['ncc_c', 'ncc_e'],
+          titleTemplate: '%s', // fully set in `composables/useAppLayout.ts`
         },
-        {
-          description: {
-            de: 'Dieser Cookie von uns speichert die Sprache, in der diese Webseite angezeigt wird.',
-            en: "This cookie of ours stores the language that's used to display this website.",
-          },
-          id: 'l',
-          name: {
-            de: 'Sprache',
-            en: 'Language',
-          },
-          targetCookieIds: [I18N_COOKIE_NAME],
+        pageTransition: {
+          name: 'layout',
         },
-        {
-          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],
+      },
+      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',
       ],
-      optional: [
-        {
-          description: {
-            de: 'Die Cookies vom Drittanbieter Google ermöglichen die Analyse von Nutzerverhalten. Diese Analyse hilft uns unsere Dienste zu verbessern, indem wir verstehen, wie diese Webseite genutzt wird.',
-            en: 'The third-party cookies by Google enable the analysis of user behavior. This analysis helps us to improve our services by understanding how this website is used.',
+      nitro: {
+        compressPublicAssets: true,
+      },
+      runtimeConfig: {
+        public: {
+          vio: {
+            googleAnalyticsId: '', // set via environment variable `NUXT_PUBLIC_GOOGLE_ANALYTICS_ID` only
+            isInProduction: process.env.NODE_ENV === 'production',
+            isTesting: false,
           },
-          id: 'ga',
-          links: {
-            'https://policies.google.com/privacy': 'Google Privacy Policy',
-            'https://policies.google.com/terms': 'Google Terms of Service',
+        },
+      },
+      typescript: {
+        shim: false,
+        tsConfig: {
+          compilerOptions: {
+            esModuleInterop: true,
+            // moduleResolution: 'bundler',
+            // noErrorTruncation: true,
           },
-          name: 'Analytics',
-          targetCookieIds: ['_ga', '_ga_K4R41W62BR'],
         },
-      ],
-    },
-    locales: ['en', 'de'],
-  },
-  htmlValidator: {
-    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,
+      },
+
+      // modules
+      colorMode: {
+        classSuffix: '',
+      },
+      cookieControl: {
+        cookies: {
+          necessary: [
+            {
+              description: {
+                de: 'Dieser Cookie von uns speichert die Einstellungen, die in diesem Dialog getroffen werden.',
+                en: 'This cookie of ours stores the settings made in this dialog.',
+              },
+              id: 'c',
+              name: {
+                de: 'Cookie-Präferenzen',
+                en: 'Cookie Preferences',
+              },
+              targetCookieIds: ['ncc_c', 'ncc_e'],
+            },
+            {
+              description: {
+                de: 'Dieser Cookie von uns speichert die Sprache, in der diese Webseite angezeigt wird.',
+                en: "This cookie of ours stores the language that's used to display this website.",
+              },
+              id: 'l',
+              name: {
+                de: 'Sprache',
+                en: 'Language',
+              },
+              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: [
+            {
+              description: {
+                de: 'Die Cookies vom Drittanbieter Google ermöglichen die Analyse von Nutzerverhalten. Diese Analyse hilft uns unsere Dienste zu verbessern, indem wir verstehen, wie diese Webseite genutzt wird.',
+                en: 'The third-party cookies by Google enable the analysis of user behavior. This analysis helps us to improve our services by understanding how this website is used.',
+              },
+              id: 'ga',
+              links: {
+                'https://policies.google.com/privacy': 'Google Privacy Policy',
+                'https://policies.google.com/terms': 'Google Terms of Service',
+              },
+              name: 'Analytics',
+              targetCookieIds: ['_ga', '_ga_K4R41W62BR'],
+            },
+          ],
+        },
+        locales: ['en', 'de'],
+      },
+      htmlValidator: {
+        failOnError: false, // TODO: fix invalid html in nuxt html template (https://github.com/nuxt/nuxt/issues/22526)
+        logLevel: 'warning',
+      },
+      i18n: {
+        defaultLocale: 'en', // Must be set for the default prefix_except_default prefix strategy.
+        detectBrowserLanguage: {
+          cookieKey: I18N_COOKIE_NAME,
+          cookieSecure: true,
+        },
+      },
+      linkChecker: {
+        debug: process.env.NODE_ENV === 'development',
+        failOnError: true,
+      },
+      seoKit: {
+        splash: false,
+      },
+      site: {
+        debug: process.env.NODE_ENV === 'development',
+        titleSeparator: '·',
+      },
+      sitemap: {
+        exclude: ['/api/pages/**'],
+      },
+      tailwindcss: {
+        cssPath: join(currentDir, './assets/css/tailwind.css'),
+      },
     },
-  },
-  linkChecker: {
-    debug: process.env.NODE_ENV === 'development',
-    failOnError: true,
-  },
-  seoKit: {
-    splash: false,
-  },
-  site: {
-    debug: process.env.NODE_ENV === 'development',
-    name: SITE_NAME,
-    titleSeparator: '·',
-    url: BASE_URL,
-  },
-  sitemap: {
-    exclude: ['/api/pages/**'],
-  },
-  tailwindcss: {
-    cssPath: join(currentDir, './assets/css/tailwind.css'),
-  },
-})
+    VIO_NUXT_BASE_CONFIG({
+      baseUrl: BASE_URL,
+      siteName: SITE_NAME,
+      stagingHost: 'localhost:3000',
+    }),
+  ),
+)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dargmuesli/nuxt-vio",
-  "version": "3.0.0-beta.9",
+  "version": "3.1.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -35,26 +35,26 @@
     "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": "lint-staged",
-    "lint:style": "stylelint **/*.{vue,css} --ignore-path .gitignore",
+    "lint:style": "stylelint --cache \"**/*.{vue,css}\" --ignore-path .gitignore",
     "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",
-    "@http-util/status-i18n": "0.7.0",
+    "@dargmuesli/nuxt-cookie-control": "6.4.1",
+    "@http-util/status-i18n": "0.8.1",
     "@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.2",
+    "@nuxtjs/i18n": "8.0.0-rc.3",
     "@nuxtjs/tailwindcss": "6.8.0",
     "@pinia/nuxt": "0.4.11",
-    "@tailwindcss/forms": "0.5.4",
+    "@tailwindcss/forms": "0.5.5",
     "@tailwindcss/typography": "0.5.9",
     "@urql/core": "4.1.1",
     "@urql/devtools": "2.0.3",
-    "@urql/exchange-graphcache": "6.3.1",
+    "@urql/exchange-graphcache": "6.3.2",
     "@urql/vue": "1.1.2",
     "@vuelidate/core": "2.0.3",
     "@vuelidate/validators": "2.0.3",
@@ -62,31 +62,32 @@
     "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",
+    "marked": "7.0.4",
+    "nuxt-seo-kit-module": "2.0.0-beta.13",
     "pinia": "2.1.6",
-    "sweetalert2": "11.7.20",
-    "vue-gtag": "2.0.1"
+    "sweetalert2": "11.7.27",
+    "vue-gtag": "2.0.1",
+    "vue-tsc": "1.8.8"
   },
   "devDependencies": {
     "@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": "8.47.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",
-    "lint-staged": "13.2.3",
+    "lint-staged": "14.0.1",
     "nuxt": "3.6.5",
-    "prettier": "3.0.1",
-    "stylelint": "15.10.2",
+    "prettier": "3.0.2",
+    "prettier-plugin-tailwindcss": "0.5.3",
+    "stylelint": "15.10.3",
     "stylelint-config-recommended-vue": "1.5.0",
     "stylelint-config-standard": "34.0.0",
     "stylelint-no-unsupported-browser-features": "7.0.0",
     "tailwindcss": "3.3.3",
-    "vue": "3.3.4",
-    "vue-tsc": "1.8.8"
+    "vue": "3.3.4"
   }
 }

package/plugins/gtag.client.ts

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

package/utils/constants.ts

@@ -1,5 +1,14 @@
 export const SITE_NAME = 'Vio'
 
+export const BASE_URL =
+  (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'
+        ? '3000'
+        : '3001'
+    }`)
 export const CACHE_VERSION = 'bOXMwoKlJr'
 export const COOKIE_PREFIX = SITE_NAME.toLocaleLowerCase()
 export const COOKIE_SEPARATOR = '_'
@@ -30,3 +39,44 @@ export const I18N_VUE_CONFIG = {
 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
+export const VIO_NUXT_BASE_CONFIG = ({
+  baseUrl,
+  siteName,
+  stagingHost,
+}: {
+  baseUrl?: string
+  siteName: string
+  stagingHost?: string
+}) =>
+  ({
+    app: {
+      head: {
+        title: SITE_NAME, // fallback data to prevent invalid html at generation
+      },
+    },
+    runtimeConfig: {
+      public: {
+        i18n: {
+          ...(baseUrl ? { baseUrl } : {}),
+        },
+        vio: {
+          ...(stagingHost
+            ? {
+                stagingHost:
+                  process.env.NODE_ENV !== 'production' &&
+                  !process.env.NUXT_PUBLIC_STACK_DOMAIN
+                    ? stagingHost
+                    : undefined,
+              }
+            : {}),
+        },
+      },
+    },
+
+    // modules
+    i18n: I18N_MODULE_CONFIG, // `langDir`, `lazy` and `locales` must be configured to extend a layer having lazy-loaded translations (https://v8.i18n.nuxtjs.org/guide/layers#locales)
+    site: {
+      name: siteName,
+      ...(baseUrl ? { url: baseUrl } : {}),
+    },
+  }) as Parameters<typeof defineNuxtConfig>[0]

package/utils/routing.ts

@@ -1,2 +1,4 @@
-export const append = (path: string, pathToAppend: string) =>
-  path + (path.endsWith('/') ? '' : '/') + pathToAppend
+import { RouteLocationRaw } from '#vue-router'
+
+export const append = (path: string, pathToAppend?: RouteLocationRaw) =>
+  path + (path.endsWith('/') ? '' : '/') + (pathToAppend ?? '')

package/components/vio/icon/IconLogo.vue

@@ -1,17 +0,0 @@
-<template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="1064pt"
-    height="1064pt"
-    version="1.1"
-    viewBox="0 0 1064 1064"
-  >
-    <g id="#9a9a9aff">
-      <path
-        fill="#ecc94b"
-        d="M 802.62 185.62 C 806.76 181.54 810.71 177.26 815.06 173.41 C 828.57 186.40 841.60 199.89 854.94 213.06 C 866.81 225.07 878.95 236.83 890.68 248.99 C 858.25 281.90 825.33 314.33 792.78 347.13 C 801.85 360.72 810.67 374.54 817.81 389.27 C 849.17 451.62 859.14 524.40 845.66 592.88 C 835.73 644.31 812.88 693.19 779.77 733.77 C 748.01 772.91 706.76 804.28 660.61 824.52 C 601.85 850.47 535.17 858.08 472.10 845.87 C 399.83 832.28 332.81 792.71 286.03 735.97 C 261.50 706.51 242.51 672.51 229.95 636.31 C 214.56 591.74 209.12 543.75 214.40 496.88 C 219.97 445.89 238.13 396.34 266.77 353.78 C 297.11 308.55 339.24 271.29 387.93 246.85 C 436.80 222.00 492.22 210.23 546.98 212.87 C 592.26 214.95 637.06 226.87 677.39 247.55 C 691.14 254.44 704.16 262.67 716.88 271.28 C 745.53 242.80 774.02 214.15 802.62 185.62 M 668.11 321.11 C 659.08 330.37 649.57 339.17 640.85 348.72 C 671.30 366.97 697.16 392.75 715.33 423.27 C 726.58 412.55 737.35 401.34 748.40 390.41 C 762.78 375.92 777.38 361.65 791.64 347.04 C 771.18 318.23 745.87 292.82 717.00 272.43 C 700.48 288.43 684.45 304.92 668.11 321.11 M 436.34 342.35 C 401.95 359.59 372.51 386.48 352.08 419.07 C 331.27 452.09 319.83 490.96 319.57 530.00 C 319.10 567.70 329.06 605.44 347.89 638.09 C 365.96 669.51 392.23 696.14 423.39 714.64 C 456.33 734.24 494.65 744.78 533.00 744.45 C 574.05 744.36 615.02 731.94 649.19 709.17 C 676.80 690.95 700.05 666.14 716.43 637.39 C 736.74 602.03 746.42 560.71 744.11 520.01 C 742.05 486.63 732.53 453.44 715.15 424.78 C 673.22 466.47 631.56 508.43 589.65 550.14 C 586.42 547.81 583.82 544.77 581.00 542.00 C 559.16 520.17 537.32 498.33 515.49 476.50 C 514.40 475.63 513.59 474.12 515.09 473.18 C 556.44 431.67 598.01 390.37 639.32 348.82 C 615.75 334.67 589.17 325.65 561.99 321.72 C 519.31 315.51 474.81 322.86 436.34 342.35 Z"
-        opacity="1"
-      />
-    </g>
-  </svg>
-</template>

package/components/vio/layout/VioLayoutHeader.vue

@@ -1,98 +0,0 @@
-<template>
-  <header class="flex items-center justify-between gap-4 mb-8">
-    <VioButton :aria-label="t('creal')" :to="localePath('/')">
-      <span class="text-lg font-bold">{{ t('creal') }}</span>
-      <template #prefix>
-        <IconLogo class="h-10 w-10" />
-      </template>
-    </VioButton>
-    <VioLink
-      v-if="eventsCurrentCount"
-      class="flex items-center gap-2 rounded-full border px-4 py-2 font-bold focus:rounded-full sm:px-4"
-      :is-colored="false"
-      :to="localePath('/events')"
-    >
-      <VioLayoutLivePulse />
-      <span class="hidden whitespace-nowrap sm:inline">
-        {{ t('live') }}
-      </span>
-    </VioLink>
-    <VioLink
-      v-else-if="eventsFutureCount"
-      class="flex items-center gap-2 rounded-full border px-2 py-2 font-bold focus:rounded-full sm:px-4"
-      :is-colored="false"
-      :to="localePath('/events')"
-    >
-      <VioLayoutLivePulse />
-      <span class="hidden whitespace-nowrap sm:inline">
-        {{ t('eventsFuture') }}
-      </span>
-    </VioLink>
-    <VioButton
-      :aria-label="t('bookCreal')"
-      class="basis-0 text-lg font-bold"
-      :is-colored="false"
-      :to="`mailto:e-mail+creal@jonas-thelemann.de?subject=${encodeURIComponent(
-        t('bookingSubject'),
-      )}`"
-    >
-      <span class="basis-0 whitespace-nowrap">{{ t('bookCreal') }}</span>
-      <template #suffix>
-        <IconArrowRight />
-      </template>
-    </VioButton>
-  </header>
-</template>
-
-<script setup lang="ts">
-const { $dayjs } = useNuxtApp()
-const { t } = useI18n()
-const localePath = useLocalePath()
-const strapiFetch = useStrapiFetch()
-
-// async data
-let eventsCurrentCount = 0
-let eventsFutureCount = 0
-
-// methods
-const init = async () => {
-  eventsCurrentCount = (
-    (await strapiFetch('/events', {
-      query: {
-        'filters[$and][0][dateStart][$lte]': $dayjs().toISOString(),
-        'filters[$and][1][$or][0][dateEnd][$gt]': $dayjs().toISOString(),
-        'filters[$and][1][$or][1][dateStart][$gte]': $dayjs()
-          .startOf('day')
-          .toISOString(),
-      },
-    })) as any
-  ).meta.pagination.total
-  eventsFutureCount = (
-    (await strapiFetch('/events', {
-      query: {
-        'filters[dateStart][$gt]': $dayjs().toISOString(),
-      },
-    })) as any
-  ).meta.pagination.total
-}
-
-// initialization
-try {
-  await init()
-} catch (error: any) {}
-</script>
-
-<i18n lang="yaml">
-en:
-  bookCreal: Book cReal
-  bookingSubject: Booking Request
-  creal: cReal
-  eventsFuture: Upcoming events
-  live: Live
-de:
-  bookCreal: cReal buchen
-  bookingSubject: Buchungsanfrage
-  creal: cReal
-  eventsFuture: Kommende Veranstaltungen
-  live: Live
-</i18n>