@dargmuesli/nuxt-vio 2.0.0 → 3.0.0-beta.1

package/components/layout/VioLayoutHeader.vue

@@ -0,0 +1,98 @@
+<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>

package/components/layout/VioLayoutSpanList.vue

@@ -0,0 +1,20 @@
+<template>
+  <span v-if="span instanceof String">
+    {{ span }}
+  </span>
+  <span v-else-if="Array.isArray(span) && span.length === 1">
+    {{ span[0] }}
+  </span>
+  <ol v-else-if="Array.isArray(span)" class="list-decimal">
+    <li v-for="spanItem in span" :key="spanItem.toString()">
+      {{ spanItem }}
+    </li>
+  </ol>
+</template>
+
+<script setup lang="ts">
+export interface Props {
+  span: Array<string | Array<string>>
+}
+withDefaults(defineProps<Props>(), {})
+</script>

package/components/loader/indicator/VioLoaderIndicator.vue

@@ -0,0 +1,14 @@
+<template>
+  <div
+    class="flex h-full items-center justify-center"
+    :title="t('globalLoading')"
+  >
+    <div class="flex items-center justify-center w-1/2">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const { t } = useI18n()
+</script>

package/components/loader/indicator/VioLoaderIndicatorPing.vue

@@ -0,0 +1,12 @@
+<template>
+  <VioLoaderIndicator>
+    <div
+      class="w-1/2 aspect-square animate-ping rounded-full bg-gray-500"
+      :title="t('globalLoading')"
+    />
+  </VioLoaderIndicator>
+</template>
+
+<script setup lang="ts">
+const { t } = useI18n()
+</script>

package/components/loader/indicator/VioLoaderIndicatorSpinner.vue

@@ -0,0 +1,24 @@
+<template>
+  <VioLoaderIndicator>
+    <svg
+      class="animate-spin text-black dark:text-white"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+    >
+      <circle
+        class="opacity-25"
+        cx="12"
+        cy="12"
+        r="10"
+        stroke="currentColor"
+        stroke-width="4"
+      />
+      <path
+        class="opacity-75"
+        fill="currentColor"
+        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+      />
+    </svg>
+  </VioLoaderIndicator>
+</template>

package/components/{VioLegalNotice.vue → page/VioPageLegalNotice.vue}

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

package/components/{VioPrivacyPolicy.vue → page/VioPagePrivacyPolicy.vue}

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

package/composables/useAppLayout.ts

@@ -1,7 +1,7 @@
 export const useAppLayout = () => {
   const appConfig = useAppConfig()
 
-  useHead({
+  useServerHeadSafe({
     ...useLocaleHead({ addSeoAttributes: true }).value,
     bodyAttrs: {
       class:
@@ -24,6 +24,6 @@ export const useAppLayout = () => {
   })
 
   if (appConfig.seoMeta) {
-    useSeoMeta(appConfig.seoMeta)
+    useServerSeoMeta(appConfig.seoMeta)
   }
 }

package/composables/useDateTime.ts

@@ -0,0 +1,17 @@
+import { Dayjs } from 'dayjs'
+
+export const useDateTime = () => {
+  const event = useRequestEvent()
+  const { $dayjs } = useNuxtApp()
+  const timezoneCookie = useCookie(TIMEZONE_COOKIE_NAME)
+
+  const timezoneHeader = event?.node.req.headers[TIMEZONE_HEADER_KEY]
+  const timezone =
+    timezoneHeader && !Array.isArray(timezoneHeader)
+      ? timezoneHeader
+      : timezoneCookie.value || undefined
+
+  return (dateTime?: string | number | Dayjs | Date | null) =>
+    // @ts-ignore `tz` should be part of `$dayjs` (https://github.com/iamkun/dayjs/issues/2106)
+    $dayjs(dateTime).tz(timezone)
+}

package/composables/useFavicons.ts

@@ -1,7 +1,7 @@
 export const useFavicons = () => {
   const appConfig = useAppConfig()
 
-  useHead({
+  useServerHeadSafe({
     link: [
       {
         href: '/assets/static/favicon/apple-touch-icon.png?v=bOXMwoKlJr',
@@ -30,7 +30,7 @@ export const useFavicons = () => {
         rel: 'manifest',
       },
       {
-        color: appConfig.themeColor,
+        color: appConfig.vio.themeColor,
         href: '/assets/static/favicon/safari-pinned-tab.svg?v=bOXMwoKlJr',
         rel: 'mask-icon',
       },

package/composables/useFireError.ts

@@ -0,0 +1,17 @@
+import { consola } from 'consola'
+import Swal from 'sweetalert2'
+import { Ref } from 'vue'
+
+export const useFireError = () => {
+  const { t } = useI18n()
+
+  return ({ error }: { error: Error }, api?: Ref<any>) => {
+    Swal.fire({
+      icon: 'error',
+      title: t('globalStatusError'),
+      text: error.message,
+    })
+    api?.value.errors.push(error)
+    consola.error(error)
+  }
+}

package/composables/useGetServiceHref.ts

@@ -0,0 +1,47 @@
+export const useGetServiceHref = () => {
+  const host = useHost()
+  const config = useRuntimeConfig()
+
+  return ({
+    isSsr = true,
+    name,
+    port,
+  }: {
+    isSsr?: boolean
+    name?: string
+    port?: number
+  }) =>
+    getServiceHref({
+      host,
+      isSsr,
+      name,
+      port,
+      stagingHost: config.public.stagingHost,
+    })
+}
+
+export const getServiceHref = ({
+  host,
+  isSsr = true,
+  name,
+  port,
+  stagingHost,
+}: {
+  host: string
+  isSsr?: boolean
+  name?: string
+  port?: number
+  stagingHost?: string
+}) => {
+  const nameSubdomain = name?.replaceAll('_', '-')
+  const nameSubdomainString = nameSubdomain ? `${nameSubdomain}.` : ''
+  const portString = port ? `:${port}` : ''
+
+  if (stagingHost) {
+    return `https://${nameSubdomainString}${stagingHost}`
+  } else if (isSsr && process.server) {
+    return `http://${name}${portString}`
+  } else {
+    return `https://${nameSubdomainString}${getDomainTldPort(host)}`
+  }
+}

package/composables/useHeadDefault.ts

@@ -0,0 +1,34 @@
+import { defu } from 'defu'
+import type { UseHeadSafeInput } from '@unhead/vue'
+import type { ComputedRef } from 'vue'
+
+export const useHeadDefault = (
+  title: string | ComputedRef<string>,
+  extension?: UseHeadSafeInput,
+) => {
+  const host = useHost()
+  const router = useRouter()
+
+  const defaults: UseHeadSafeInput = {
+    meta: [
+      {
+        id: 'og:title',
+        property: 'og:title',
+        content: title,
+      },
+      {
+        id: 'og:url',
+        property: 'og:url',
+        content: `https://${host}${router.currentRoute.value.fullPath}`,
+      },
+      {
+        id: 'twitter:title',
+        property: 'twitter:title',
+        content: title,
+      },
+    ],
+    title,
+  }
+
+  return useServerHeadSafe(defu(extension, defaults))
+}

package/composables/useHeadLayout.ts

@@ -0,0 +1,67 @@
+export const useHeadLayout = () => {
+  const head = useLocaleHead({ addSeoAttributes: true })
+
+  useServerHeadSafe(head.value)
+  useServerHeadSafe({
+    bodyAttrs: {
+      class:
+        'bg-background-bright dark:bg-background-dark font-sans text-text-dark dark:text-text-bright',
+    },
+    // link: [
+    //   {
+    //     href: '/assets/static/favicon/apple-touch-icon.png?v=eEYRGn5b9R',
+    //     rel: 'apple-touch-icon',
+    //     sizes: '180x180',
+    //   },
+    //   {
+    //     href: '/assets/static/favicon/favicon-16x16.png?v=eEYRGn5b9R',
+    //     rel: 'icon',
+    //     sizes: '16x16',
+    //     type: 'image/png',
+    //   },
+    //   {
+    //     href: '/assets/static/favicon/favicon-32x32.png?v=eEYRGn5b9R',
+    //     rel: 'icon',
+    //     sizes: '32x32',
+    //     type: 'image/png',
+    //   },
+    //   {
+    //     href: '/favicon.ico?v=eEYRGn5b9R',
+    //     rel: 'icon',
+    //     type: 'image/x-icon',
+    //   },
+    //   {
+    //     href: '/assets/static/favicon/site.webmanifest?v=eEYRGn5b9R',
+    //     rel: 'manifest',
+    //   },
+    //   {
+    //     color: '#202020',
+    //     href: '/assets/static/favicon/safari-pinned-tab.svg?v=eEYRGn5b9R',
+    //     rel: 'mask-icon',
+    //   },
+    //   {
+    //     href: '/favicon.ico?v=eEYRGn5b9R',
+    //     rel: 'shortcut icon',
+    //   },
+    // ],
+    // meta: [
+    //   {
+    //     content: '/assets/static/favicon/browserconfig.xml?v=eEYRGn5b9R',
+    //     name: 'msapplication-config',
+    //   },
+    //   {
+    //     content: '#202020',
+    //     name: 'msapplication-TileColor',
+    //   },
+    //   {
+    //     content: '#202020',
+    //     name: 'theme-color',
+    //   },
+    // ],
+    // titleTemplate: (titleChunk?: string) => {
+    //   return titleChunk && titleChunk !== title
+    //     ? `${titleChunk} · ${title}`
+    //     : title
+    // },
+  })
+}

package/composables/useStrapiFetch.ts

@@ -0,0 +1,10 @@
+import { ofetch } from 'ofetch'
+
+export const useStrapiFetch = () => {
+  const getServiceHref = useGetServiceHref()
+
+  // TODO: switch back to $fetch (https://github.com/unjs/nitro/issues/470)
+  return ofetch.create({
+    baseURL: getServiceHref({ name: 'creal_strapi', port: 1337 }) + '/api',
+  })
+}

package/error.vue

@@ -16,8 +16,9 @@ export interface Props {
   error: NuxtError
 }
 const props = withDefaults(defineProps<Props>(), {})
+const errorProp = toRef(() => props.error)
 
-useHead({
-  title: `${props.error.statusCode} - ${props.error.message}`,
+useServerHeadSafe({
+  title: `${errorProp.value.statusCode} - ${errorProp.value.message}`,
 })
 </script>

package/locales/de.json

@@ -1,3 +1,9 @@
 {
-  "globalLoading": "Lade..."
+  "globalLoading": "Lade...",
+  "globalPlaceholderUrl": "https://websei.te",
+  "globalStatusError": "Fehler",
+  "globalValidationFailed": "Bitte überprüfe deine Eingaben 🙈",
+  "globalValidationFormatUrlHttps": "Muss mit \"https://\" beginnen",
+  "globalValidationLength": "Zu lang",
+  "globalValidationRequired": "Pflichtfeld"
 }

package/locales/en.json

@@ -1,3 +1,9 @@
 {
-  "globalLoading": "Loading..."
+  "globalLoading": "Loading...",
+  "globalPlaceholderUrl": "https://websi.te",
+  "globalStatusError": "Error",
+  "globalValidationFailed": "Please check your input 🙈",
+  "globalValidationFormatUrlHttps": "Must start with \"https://\"",
+  "globalValidationLength": "Too long",
+  "globalValidationRequired": "Required"
 }

package/nuxt.config.ts

@@ -1,7 +1,12 @@
 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))
 
@@ -27,12 +32,17 @@ export default defineNuxtConfig({
       titleTemplate: `%s`,
       title: SITE_NAME, // fallback data to prevent invalid html at generation
     },
+    pageTransition: {
+      name: 'layout',
+    },
   },
   modules: [
     '@dargmuesli/nuxt-cookie-control',
+    '@nuxtjs/color-mode',
     '@nuxtjs/html-validator',
     '@nuxtjs/i18n',
     '@nuxtjs/tailwindcss',
+    '@pinia/nuxt',
     'nuxt-seo-kit-module',
   ],
   nitro: {
@@ -46,14 +56,27 @@ export default defineNuxtConfig({
       },
       isInProduction: process.env.NODE_ENV === 'production',
       isTesting: false,
+      stagingHost:
+        process.env.NODE_ENV !== 'production' &&
+        !process.env.NUXT_PUBLIC_STACK_DOMAIN
+          ? 'jonas-thelemann.de'
+          : undefined,
     },
   },
   typescript: {
     shim: false,
     strict: true,
+    // tsConfig: {
+    //   compilerOptions: {
+    //     esModuleInterop: true,
+    //   },
+    // },
   },
 
   // modules
+  colorMode: {
+    classSuffix: '',
+  },
   cookieControl: {
     cookies: {
       necessary: [
@@ -79,7 +102,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: [
@@ -108,6 +143,7 @@ export default defineNuxtConfig({
     ...I18N_MODULE_CONFIG,
     defaultLocale: 'en', // Must be set for the default prefix_except_default prefix strategy.
     detectBrowserLanguage: {
+      cookieKey: I18N_COOKIE_NAME,
       cookieSecure: true,
     },
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dargmuesli/nuxt-vio",
-  "version": "2.0.0",
+  "version": "3.0.0-beta.1",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -8,7 +8,7 @@
   "engines": {
     "node": "20"
   },
-  "packageManager": "pnpm@8.6.11",
+  "packageManager": "pnpm@8.6.12",
   "files": [
     "assets",
     "components",
@@ -43,11 +43,26 @@
     "@dargmuesli/nuxt-cookie-control": "6.1.5",
     "@dargmuesli/nuxt-vio": "link:",
     "@http-util/status-i18n": "0.7.0",
+    "@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/line-clamp": "0.4.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",
+    "clipboard": "2.0.11",
+    "dayjs": "1.11.9",
+    "is-https": "4.0.0",
+    "jose": "4.14.4",
+    "marked": "7.0.0",
     "nuxt-seo-kit-module": "2.0.0-beta.9",
+    "pinia": "2.1.6",
     "sweetalert2": "11.7.20",
     "vue-gtag": "2.0.1"
   },
@@ -56,25 +71,24 @@
     "@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",
+    "tailwindcss": "3.3.3",
     "typescript": "5.1.6",
+    "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,