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

package/components/vio/layout/VioLayoutFooter.vue

@@ -0,0 +1,40 @@
+<template>
+  <footer class="text-sm leading-6">
+    <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" />
+        <VioLayoutHr />
+      </div>
+      <!-- Justifying evenly, instead of "between", centers a single element. -->
+      <div class="flex flex-wrap justify-evenly">
+        <slot />
+      </div>
+      <p class="text-center text-gray-500 dark:text-gray-400">
+        {{
+          t('copyright', {
+            name: 'Jonas Thelemann',
+            year,
+          })
+        }}
+      </p>
+    </div>
+  </footer>
+</template>
+
+<script setup lang="ts">
+const { t } = useI18n()
+const config = useRuntimeConfig()
+
+// computations
+const year = computed(() =>
+  config.public.isTesting ? 1337 : new Date().getFullYear(),
+)
+</script>
+
+<i18n lang="yaml">
+de:
+  copyright: © {year} {name}. Alle Rechte vorbehalten.
+en:
+  copyright: © {year} {name}. All rights reserved.
+</i18n>

package/components/vio/layout/VioLayoutFooterCategory.vue

@@ -0,0 +1,17 @@
+<template>
+  <div
+    class="flex flex-1 flex-col items-start p-4 basis-1/2 md:flex-none md:basis-auto gap-2"
+  >
+    <span class="whitespace-nowrap text-lg font-medium leading-7">
+      {{ heading }}
+    </span>
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+export interface Props {
+  heading: string
+}
+withDefaults(defineProps<Props>(), {})
+</script>

package/components/vio/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/vio/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/vio/loader/indicator/VioLoaderIndicator.vue

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

package/components/vio/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('globalStatusLoading')"
+    />
+  </VioLoaderIndicator>
+</template>
+
+<script setup lang="ts">
+const { t } = useI18n()
+</script>

package/components/vio/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 → vio/page/VioPageLegalNotice.vue}

@@ -9,13 +9,13 @@
           <br />
         </template>
         <template #city>
-          {{ appConfig.legalNotice.tmg.address.city }}
+          {{ appConfig.vio.pages.legalNotice.tmg.address.city }}
         </template>
         <template #name>
-          {{ appConfig.legalNotice.tmg.address.name }}
+          {{ appConfig.vio.pages.legalNotice.tmg.address.name }}
         </template>
         <template #street>
-          {{ appConfig.legalNotice.tmg.address.street }}
+          {{ appConfig.vio.pages.legalNotice.tmg.address.street }}
         </template>
       </i18n-t>
     </address>
@@ -24,7 +24,9 @@
     <p>
       <slot v-if="$slots.contactEmail" name="contactEmail" />
       <span v-else>
-        {{ t('email', { email: appConfig.legalNotice.contact.email }) }}
+        {{
+          t('email', { email: appConfig.vio.pages.legalNotice.contact.email })
+        }}
       </span>
     </p>
 
@@ -36,13 +38,13 @@
           <br />
         </template>
         <template #city>
-          {{ appConfig.legalNotice.responsibility.address.city }}
+          {{ appConfig.vio.pages.legalNotice.responsibility.address.city }}
         </template>
         <template #name>
-          {{ appConfig.legalNotice.responsibility.address.name }}
+          {{ appConfig.vio.pages.legalNotice.responsibility.address.name }}
         </template>
         <template #street>
-          {{ appConfig.legalNotice.responsibility.address.street }}
+          {{ appConfig.vio.pages.legalNotice.responsibility.address.street }}
         </template>
       </i18n-t>
     </address>
@@ -73,7 +75,7 @@ const { t } = useI18n()
 const title = t('title')
 
 // initialization
-useSeoMeta({ title })
+useServerSeoMeta({ title })
 </script>
 
 <i18n lang="yaml">

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

@@ -64,14 +64,21 @@
                   <br />
                 </template>
                 <template #city>
-                  {{ appConfig.privacyPolicy.hostingCdn.external.address.city }}
+                  {{
+                    appConfig.vio.pages.privacyPolicy.hostingCdn.external
+                      .address.city
+                  }}
                 </template>
                 <template #name>
-                  {{ appConfig.privacyPolicy.hostingCdn.external.address.name }}
+                  {{
+                    appConfig.vio.pages.privacyPolicy.hostingCdn.external
+                      .address.name
+                  }}
                 </template>
                 <template #street>
                   {{
-                    appConfig.privacyPolicy.hostingCdn.external.address.street
+                    appConfig.vio.pages.privacyPolicy.hostingCdn.external
+                      .address.street
                   }}
                 </template>
               </i18n-t>
@@ -109,29 +116,29 @@
                 </template>
                 <template #city>
                   {{
-                    appConfig.privacyPolicy.mandatoryInfo.responsible.address
-                      .city
+                    appConfig.vio.pages.privacyPolicy.mandatoryInfo.responsible
+                      .address.city
                   }}
                 </template>
                 <template #email>
                   {{
                     t('email', {
                       email:
-                        appConfig.privacyPolicy.mandatoryInfo.responsible
-                          .address.email,
+                        appConfig.vio.pages.privacyPolicy.mandatoryInfo
+                          .responsible.address.email,
                     })
                   }}
                 </template>
                 <template #name>
                   {{
-                    appConfig.privacyPolicy.mandatoryInfo.responsible.address
-                      .name
+                    appConfig.vio.pages.privacyPolicy.mandatoryInfo.responsible
+                      .address.name
                   }}
                 </template>
                 <template #street>
                   {{
-                    appConfig.privacyPolicy.mandatoryInfo.responsible.address
-                      .street
+                    appConfig.vio.pages.privacyPolicy.mandatoryInfo.responsible
+                      .address.street
                   }}
                 </template>
               </i18n-t>
@@ -502,7 +509,7 @@ const { t } = useI18n()
 const title = t('title')
 
 // initialization
-useSeoMeta({ title })
+useServerSeoMeta({ title })
 </script>
 
 <i18n lang="yaml">

package/composables/useAppLayout.ts

@@ -1,29 +1,23 @@
 export const useAppLayout = () => {
   const appConfig = useAppConfig()
+  const siteConfig = useSiteConfig()
 
-  useHead({
+  useServerHeadSafe({
     ...useLocaleHead({ addSeoAttributes: true }).value,
     bodyAttrs: {
       class:
         'bg-background-bright dark:bg-background-dark font-sans text-text-dark dark:text-text-bright',
     },
-    ...(appConfig.themeColor
-      ? {
-          meta: [
-            {
-              content: appConfig.themeColor,
-              name: 'msapplication-TileColor',
-            },
-            {
-              content: appConfig.themeColor,
-              name: 'theme-color',
-            },
-          ],
-        }
-      : {}),
   })
 
-  if (appConfig.seoMeta) {
-    useSeoMeta(appConfig.seoMeta)
-  }
+  useServerSeoMeta({
+    msapplicationTileColor: appConfig.vio.themeColor,
+    themeColor: appConfig.vio.themeColor,
+    titleTemplate: (titleChunk) => {
+      return titleChunk && titleChunk !== siteConfig.name
+        ? `${titleChunk} ${siteConfig.titleSeparator} ${siteConfig.name}`
+        : siteConfig.name
+    },
+    ...(appConfig.vio.seoMeta ? appConfig.vio.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,49 +1,21 @@
 export const useFavicons = () => {
   const appConfig = useAppConfig()
 
-  useHead({
+  useServerHeadSafe({
     link: [
       {
-        href: '/assets/static/favicon/apple-touch-icon.png?v=bOXMwoKlJr',
-        rel: 'apple-touch-icon',
-        sizes: '180x180',
-      },
-      {
-        href: '/assets/static/favicon/favicon-16x16.png?v=bOXMwoKlJr',
-        rel: 'icon',
-        sizes: '16x16',
-        type: 'image/png',
-      },
-      {
-        href: '/assets/static/favicon/favicon-32x32.png?v=bOXMwoKlJr',
-        rel: 'icon',
-        sizes: '32x32',
-        type: 'image/png',
-      },
-      {
-        href: '/favicon.ico',
-        rel: 'icon',
-        type: 'image/x-icon',
-      },
-      {
-        href: '/assets/static/favicon/site.webmanifest?v=bOXMwoKlJr',
+        href: `/assets/static/favicon/site.webmanifest?v=${CACHE_VERSION}`,
         rel: 'manifest',
       },
       {
-        color: appConfig.themeColor,
-        href: '/assets/static/favicon/safari-pinned-tab.svg?v=bOXMwoKlJr',
+        color: appConfig.vio.themeColor,
+        href: `/assets/static/favicon/safari-pinned-tab.svg?v=${CACHE_VERSION}`,
         rel: 'mask-icon',
       },
       {
-        href: '/favicon.ico?v=bOXMwoKlJr',
+        href: `/favicon.ico?v=${CACHE_VERSION}`,
         rel: 'shortcut icon',
       },
     ],
-    meta: [
-      {
-        content: '/assets/static/favicon/browserconfig.xml?v=bOXMwoKlJr',
-        name: 'msapplication-config',
-      },
-    ],
   })
 }

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,21 @@
+export const useGetServiceHref = () => {
+  const host = useHost()
+  const runtimeConfig = useRuntimeConfig()
+
+  return ({
+    isSsr = true,
+    name,
+    port,
+  }: {
+    isSsr?: boolean
+    name?: string
+    port?: number
+  }) =>
+    getServiceHref({
+      host,
+      isSsr,
+      name,
+      port,
+      stagingHost: runtimeConfig.public.stagingHost,
+    })
+}

package/composables/useHeadDefault.ts

@@ -0,0 +1,21 @@
+import { defu } from 'defu'
+import type { ComputedRef } from 'vue'
+
+export const useHeadDefault = ({
+  extension,
+  title,
+}: {
+  extension?: Parameters<typeof useServerSeoMeta>[0]
+  title: string | ComputedRef<string>
+}) => {
+  const attrs = useAttrs()
+
+  const defaults: Parameters<typeof useServerSeoMeta>[0] = {
+    msapplicationConfig: `/assets/static/favicon/browserconfig.xml?v=${CACHE_VERSION}`,
+    title,
+    twitterDescription: attrs['site-description'] as string,
+    twitterTitle: title,
+  }
+
+  useServerSeoMeta(defu(extension, defaults))
+}

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/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,11 @@ export interface Props {
   error: NuxtError
 }
 const props = withDefaults(defineProps<Props>(), {})
+const errorProp = toRef(() => props.error)
 
-useHead({
-  title: `${props.error.statusCode} - ${props.error.message}`,
+// initialization
+useAppLayout()
+useServerHeadSafe({
+  title: `${errorProp.value.statusCode} - ${errorProp.value.message}`,
 })
 </script>

package/locales/de.json

@@ -1,3 +1,9 @@
 {
-  "globalLoading": "Lade..."
+  "globalPlaceholderUrl": "https://websei.te",
+  "globalStatusError": "Fehler",
+  "globalStatusLoading": "Lade...",
+  "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..."
+  "globalPlaceholderUrl": "https://websi.te",
+  "globalStatusError": "Error",
+  "globalStatusLoading": "Loading...",
+  "globalValidationFailed": "Please check your input 🙈",
+  "globalValidationFormatUrlHttps": "Must start with \"https://\"",
+  "globalValidationLength": "Too long",
+  "globalValidationRequired": "Required"
 }