@dargmuesli/nuxt-vio 3.0.0-beta.15 → 3.0.0-beta.17

package/components/vio/layout/VioLayoutFooter.vue

@@ -3,7 +3,7 @@
     <div class="flex flex-col gap-8">
       <div class="flex items-center">
         <VioLayoutHr />
-        <VioIconLogo class="mx-12 h-12 w-12 opacity-60 brightness-0 invert" />
+        <slot name="logo" />
         <VioLayoutHr />
       </div>
       <!-- Justifying evenly, instead of "between", centers a single element. -->

package/components/vio/page/VioPageLegalNotice.vue

@@ -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

@@ -509,7 +509,7 @@ const { t } = useI18n()
 const title = t('title')
 
 // initialization
-useServerSeoMeta({ title })
+useHeadDefault({ title })
 </script>
 
 <i18n lang="yaml">

package/composables/useHeadDefault.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dargmuesli/nuxt-vio",
-  "version": "3.0.0-beta.15",
+  "version": "3.0.0-beta.17",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -42,7 +42,7 @@
     "preview": "nuxt preview .playground"
   },
   "dependencies": {
-    "@dargmuesli/nuxt-cookie-control": "6.4.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",
@@ -50,7 +50,7 @@
     "@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",

package/utils/constants.ts

@@ -30,3 +30,48 @@ 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,
+      },
+      vio: {
+        stagingHost:
+          process.env.NODE_ENV !== 'production' &&
+          !process.env.NUXT_PUBLIC_STACK_DOMAIN
+            ? stagingHost
+            : undefined,
+      },
+    },
+  },
+  typescript: {
+    tsConfig: {
+      compilerOptions: {
+        esModuleInterop: true,
+        // moduleResolution: 'bundler',
+        // noErrorTruncation: true,
+      },
+    },
+  },
+
+  // 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,
+    url: baseUrl,
+  },
+})

package/components/vio/layout/VioLayoutHeader.vue

@@ -1,101 +0,0 @@
-<template>
-  <header class="mb-8 flex items-center justify-between gap-4">
-    <VioButton :aria-label="t('creal')" :to="localePath('/')">
-      <span class="text-lg font-bold">{{ t('creal') }}</span>
-      <template #prefix>
-        <VioIconLogo 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>
-        <VioIconArrowRight />
-      </template>
-    </VioButton>
-  </header>
-</template>
-
-<script setup lang="ts">
-const { t } = useI18n()
-const localePath = useLocalePath()
-const strapiFetch = useStrapiFetch()
-const dateTime = useDateTime()
-
-// async data
-let eventsCurrentCount = 0
-let eventsFutureCount = 0
-
-// data
-const now = dateTime()
-
-// methods
-const init = async () => {
-  eventsCurrentCount = (
-    (await strapiFetch('/events', {
-      query: {
-        'filters[$and][0][dateStart][$lte]': now.toISOString(),
-        'filters[$and][1][$or][0][dateEnd][$gt]': now.toISOString(),
-        'filters[$and][1][$or][1][dateStart][$gte]': now
-          .startOf('day')
-          .toISOString(),
-      },
-    })) as any
-  ).meta.pagination.total
-  eventsFutureCount = (
-    (await strapiFetch('/events', {
-      query: {
-        'filters[dateStart][$gt]': now.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>