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

package/app.config.ts

@@ -2,11 +2,8 @@ import { useServerSeoMeta } from '@unhead/vue'
 
 export default defineAppConfig({
   vio: {
-    legalNotice: undefined,
-    privacyPolicy: undefined,
-    seoMeta: {
-      twitterSite: '@dargmuesli',
-    },
+    pages: undefined,
+    seoMeta: undefined,
     server: {
       middleware: {
         headers: {
@@ -37,55 +34,57 @@ export default defineAppConfig({
         },
       },
     },
-    themeColor: '#202020',
+    themeColor: undefined,
   },
 })
 
 declare module 'nuxt/schema' {
-  interface AppConfig {
+  interface AppConfigInput {
     vio: {
-      legalNotice?: {
-        contact: {
-          email: string
-        }
-        responsibility: {
-          address: {
-            city: string
-            name: string
-            street: string
-          }
-        }
-        tmg: {
-          address: {
-            city: string
-            name: string
-            street: string
+      pages?: {
+        legalNotice?: {
+          contact: {
+            email: string
           }
-        }
-      }
-      privacyPolicy?: {
-        hostingCdn?: {
-          external: {
+          responsibility: {
             address: {
               city: string
               name: string
               street: string
             }
           }
-        }
-        mandatoryInfo?: {
-          responsible: {
+          tmg: {
             address: {
               city: string
-              email: string
               name: string
               street: string
             }
           }
         }
+        privacyPolicy?: {
+          hostingCdn?: {
+            external: {
+              address: {
+                city: string
+                name: string
+                street: string
+              }
+            }
+          }
+          mandatoryInfo?: {
+            responsible: {
+              address: {
+                city: string
+                email: string
+                name: string
+                street: string
+              }
+            }
+          }
+        }
       }
       seoMeta?: Parameters<typeof useServerSeoMeta>[0]
-      server: {
+      server?: {
         middleware: {
           headers: {
             csp: {

package/components/{_ → vio/_}/VioApp.vue

@@ -3,15 +3,16 @@
     <NuxtLayout>
       <!-- `NuxtLayout` can't have mulitple child nodes (https://github.com/nuxt/nuxt/issues/21759) -->
       <div>
-        <NuxtPage />
-        <CookieControl :locale="locale as Locale" />
+        <NuxtPage :site-description="siteDescriptionProp" />
+        <CookieControl :locale="locale" />
       </div>
     </NuxtLayout>
   </div>
 </template>
 
 <script setup lang="ts">
-import { Locale } from '@dargmuesli/nuxt-cookie-control/dist/runtime/types'
+import type { Locale } from '@dargmuesli/nuxt-cookie-control/dist/runtime/types'
+import type { WritableComputedRef } from 'vue'
 
 export interface Props {
   ogImageAlt: string
@@ -25,13 +26,20 @@ const ogImageAltProp = toRef(() => props.ogImageAlt)
 const ogImageComponentProp = toRef(() => props.ogImageComponent)
 const siteDescriptionProp = toRef(() => props.siteDescription)
 
-const { locale } = useI18n()
+const { $dayjs } = useNuxtApp()
+const i18n = useI18n()
 const cookieControl = useCookieControl()
+const siteConfig = useSiteConfig()
 
 const { loadingIds, indicateLoadingDone } = useLoadingDoneIndicator('app')
 
+// data
+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
@@ -63,7 +71,6 @@ watch(
 )
 
 // initialization
-init()
 updateSiteConfig({
   description: siteDescriptionProp.value,
 })
@@ -74,4 +81,14 @@ defineOgImage({
 })
 useAppLayout()
 useFavicons()
+usePolyfills()
+useSchemaOrg([
+  defineWebSite({
+    description: siteDescriptionProp,
+    inLanguage: locale,
+    name: siteConfig.name,
+  }),
+  defineWebPage(),
+])
+init()
 </script>

package/components/{_ → vio/_}/VioError.vue

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

package/components/{_ → vio/_}/VioLink.vue

@@ -12,7 +12,7 @@
   >
     <slot />
   </a>
-  <NuxtLink
+  <NuxtLinkLocale
     v-else
     :aria-label="ariaLabel"
     :class="classes"
@@ -20,7 +20,7 @@
     @click="emit('click')"
   >
     <slot />
-  </NuxtLink>
+  </NuxtLinkLocale>
 </template>
 
 <script setup lang="ts">

package/components/{form → 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
@@ -43,7 +43,7 @@
 <script setup lang="ts">
 import type { BaseValidation } from '@vuelidate/core'
 
-import type { BackendError } from '~/../types/api'
+import type { BackendError } from '../../../types/api'
 
 export interface Props {
   errors?: BackendError[]

package/components/{form → vio/form}/input/VioFormInput.vue

@@ -53,7 +53,7 @@
             <VioFormInputIconWrapper v-if="validationProperty.$pending">
               <IconHourglass
                 class="text-blue-600"
-                :title="t('globalLoading')"
+                :title="t('globalStatusLoading')"
               />
             </VioFormInputIconWrapper>
             <VioFormInputIconWrapper
@@ -91,7 +91,7 @@
       <div class="md:w-2/3">
         <slot name="stateInfo" />
         <VioFormInputStateInfo v-if="value?.$pending">
-          {{ t('globalLoading') }}
+          {{ t('globalStatusLoading') }}
         </VioFormInputStateInfo>
       </div>
       <div class="md:w-1/3" />

package/components/{layout → vio/layout}/VioLayout.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="p-4 md:px-8">
+  <div class="container mx-auto p-4 md:px-8">
     <main>
       <slot />
     </main>

package/components/{layout → 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" />
+        <IconLogo class="mx-12 h-12 w-12 opacity-60 brightness-0 invert" />
         <VioLayoutHr />
       </div>
       <!-- Justifying evenly, instead of "between", centers a single element. -->

package/components/{layout → 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/{layout → vio/layout}/VioLayoutHeader.vue

@@ -1,5 +1,5 @@
 <template>
-  <header class="flex items-center justify-between gap-4 mb-8">
+  <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>

package/components/{loader → vio/loader}/indicator/VioLoaderIndicator.vue

@@ -1,9 +1,9 @@
 <template>
   <div
     class="flex h-full items-center justify-center"
-    :title="t('globalLoading')"
+    :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/{loader → vio/loader}/indicator/VioLoaderIndicatorPing.vue

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

package/components/{page → 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>

package/components/{page → 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>

package/composables/useAppLayout.ts

@@ -1,5 +1,6 @@
 export const useAppLayout = () => {
   const appConfig = useAppConfig()
+  const siteConfig = useSiteConfig()
 
   useServerHeadSafe({
     ...useLocaleHead({ addSeoAttributes: true }).value,
@@ -7,23 +8,16 @@ export const useAppLayout = () => {
       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) {
-    useServerSeoMeta(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/useFavicons.ts

@@ -4,46 +4,18 @@ export const useFavicons = () => {
   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.vio.themeColor,
-        href: '/assets/static/favicon/safari-pinned-tab.svg?v=bOXMwoKlJr',
+        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/useGetServiceHref.ts

@@ -1,6 +1,6 @@
 export const useGetServiceHref = () => {
   const host = useHost()
-  const config = useRuntimeConfig()
+  const runtimeConfig = useRuntimeConfig()
 
   return ({
     isSsr = true,
@@ -16,32 +16,6 @@ export const useGetServiceHref = () => {
       isSsr,
       name,
       port,
-      stagingHost: config.public.stagingHost,
+      stagingHost: runtimeConfig.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

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

@@ -18,6 +18,8 @@ export interface Props {
 const props = withDefaults(defineProps<Props>(), {})
 const errorProp = toRef(() => props.error)
 
+// initialization
+useAppLayout()
 useServerHeadSafe({
   title: `${errorProp.value.statusCode} - ${errorProp.value.message}`,
 })

package/locales/de.json

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

package/locales/en.json

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