@dargmuesli/nuxt-vio 3.0.0-beta.2 → 3.0.0-beta.4

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,58 @@ export default defineAppConfig({
         },
       },
     },
-    themeColor: '#202020',
+    stagingHost: undefined,
+    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: {
@@ -95,6 +95,7 @@ declare module 'nuxt/schema' {
           }
         }
       }
+      stagingHost?: string
       themeColor?: string
     }
   }

package/components/vio/_/VioApp.vue

@@ -3,7 +3,7 @@
     <NuxtLayout>
       <!-- `NuxtLayout` can't have mulitple child nodes (https://github.com/nuxt/nuxt/issues/21759) -->
       <div>
-        <NuxtPage />
+        <NuxtPage :site-description="siteDescriptionProp" />
         <CookieControl :locale="locale" />
       </div>
     </NuxtLayout>
@@ -29,6 +29,7 @@ const siteDescriptionProp = toRef(() => props.siteDescription)
 const { $dayjs } = useNuxtApp()
 const i18n = useI18n()
 const cookieControl = useCookieControl()
+const siteConfig = useSiteConfig()
 
 const { loadingIds, indicateLoadingDone } = useLoadingDoneIndicator('app')
 
@@ -68,7 +69,6 @@ watch(
 )
 
 // initialization
-init()
 updateSiteConfig({
   description: siteDescriptionProp.value,
 })
@@ -78,5 +78,14 @@ defineOgImage({
   description: siteDescriptionProp.value,
 })
 useAppLayout()
-useFavicons()
+useFavicons() // TODO: move to head default
+useSchemaOrg([
+  defineWebSite({
+    description: siteDescriptionProp,
+    inLanguage: locale,
+    name: siteConfig.name,
+  }),
+  defineWebPage(),
+])
+init()
 </script>

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/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/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,
+  })
 }

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 appConfig = useAppConfig()
 
   return ({
     isSsr = true,
@@ -16,32 +16,6 @@ export const useGetServiceHref = () => {
       isSsr,
       name,
       port,
-      stagingHost: config.public.stagingHost,
+      stagingHost: appConfig.vio.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))
+  return useSeoMeta(defu(extension, defaults)) // TODO: use `useServerSeoMeta`
 }

package/nuxt.config.ts

@@ -11,7 +11,8 @@ import {
 const currentDir = dirname(fileURLToPath(import.meta.url))
 
 const BASE_URL =
-  'https://' +
+  (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'
@@ -22,22 +23,30 @@ const BASE_URL =
 // https://v3.nuxtjs.org/api/configuration/nuxt.config
 export default defineNuxtConfig({
   alias: {
-    sweetalert2: 'sweetalert2', // TODO: remove (https://github.com/nuxt/nuxt/issues/19426)
-  },
+    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
       },
-      titleTemplate: `%s`,
       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',
@@ -56,16 +65,10 @@ 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,
@@ -136,7 +139,7 @@ export default defineNuxtConfig({
     locales: ['en', 'de'],
   },
   htmlValidator: {
-    // failOnError: true,
+    failOnError: false, // TODO: fix invalid html in nuxt html template (https://github.com/nuxt/nuxt/issues/22526)
     logLevel: 'warning',
   },
   i18n: {
@@ -148,7 +151,8 @@ export default defineNuxtConfig({
     },
   },
   linkChecker: {
-    failOnError: false, // TODO: enable (https://github.com/harlan-zw/nuxt-seo-kit/issues/4#issuecomment-1434522124)
+    debug: process.env.NODE_ENV === 'development',
+    failOnError: true,
   },
   seoKit: {
     splash: false,
@@ -156,6 +160,7 @@ export default defineNuxtConfig({
   site: {
     debug: process.env.NODE_ENV === 'development',
     name: SITE_NAME,
+    titleSeparator: '·',
     url: BASE_URL,
   },
   sitemap: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dargmuesli/nuxt-vio",
-  "version": "3.0.0-beta.2",
+  "version": "3.0.0-beta.4",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -15,9 +15,11 @@
     "composables",
     "layouts",
     "locales",
-    "server",
     "pages",
     "plugins",
+    "server",
+    "store",
+    "types",
     "utils",
     "app.config.ts",
     "error.vue",
@@ -25,24 +27,24 @@
     "nuxt.config.ts",
     "tailwind.config.ts"
   ],
-  "main": "./nuxt.config.ts",
+  "main": "nuxt.config.ts",
   "scripts": {
     "dev": "nuxi dev .playground",
     "build": "nuxi build .playground",
     "generate": "nuxi generate .playground",
     "preview": "nuxi preview .playground",
-    "prepare": "pnpm husky install && pnpm nuxt prepare .playground",
+    "prepare": "nuxi prepare .playground",
     "lint": "pnpm lint:js && pnpm lint:ts && pnpm lint:style",
     "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": "pnpm lint-staged",
+    "lint:staged": "lint-staged",
     "lint:style": "stylelint **/*.{vue,css} --ignore-path .gitignore",
-    "lint:ts": "nuxt typecheck"
+    "lint:ts": "nuxi typecheck"
   },
   "dependencies": {
     "@dargmuesli/nuxt-cookie-control": "6.1.5",
-    "@dargmuesli/nuxt-vio": "link:",
     "@http-util/status-i18n": "0.7.0",
+    "@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",
@@ -59,15 +61,13 @@
     "dayjs": "1.11.9",
     "is-https": "4.0.0",
     "jose": "4.14.4",
-    "marked": "7.0.0",
+    "marked": "7.0.1",
     "nuxt-seo-kit-module": "2.0.0-beta.9",
     "pinia": "2.1.6",
     "sweetalert2": "11.7.20",
     "vue-gtag": "2.0.1"
   },
   "devDependencies": {
-    "@commitlint/cli": "17.6.7",
-    "@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",
@@ -77,7 +77,6 @@
     "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.1",

package/store/auth.ts

@@ -0,0 +1,32 @@
+import { decodeJwt, JWTPayload } from 'jose'
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+export const useVioAuthStore = defineStore('vio-auth', () => {
+  const jwt = ref<string>()
+  const jwtDecoded = ref<JWTPayload>()
+  const signedInUsername = ref<string>()
+
+  const jwtRemove = () => jwtSet(undefined)
+
+  const jwtSet = (jwtNew?: string) => {
+    const jwtDecodedNew = jwtNew !== undefined ? decodeJwt(jwtNew) : undefined
+
+    jwt.value = jwtNew
+    jwtDecoded.value = jwtDecodedNew
+    signedInUsername.value =
+      jwtDecodedNew?.role === 'vio_account' &&
+      jwtDecodedNew.exp !== undefined &&
+      jwtDecodedNew.exp > Math.floor(Date.now() / 1000)
+        ? (jwtDecodedNew.username as string | undefined)
+        : undefined
+  }
+
+  return {
+    jwt,
+    jwtDecoded,
+    signedInUsername,
+    jwtRemove,
+    jwtSet,
+  }
+})

package/types/api.d.ts

@@ -0,0 +1,7 @@
+export type BackendError = CombinedError | { errcode: string; message: string }
+
+export type ApiData = ComputedRef<{
+  data?: Object
+  errors: BackendError[]
+  isFetching: boolean
+}>

package/types/fetch.d.ts

@@ -0,0 +1,8 @@
+export interface StrapiResult<T> {
+  data: CollectionItem<T>[]
+  meta: {
+    pagination: {
+      total: number
+    }
+  }
+}

package/types/modules/gql.d.ts

@@ -0,0 +1,6 @@
+declare module '*.gql' {
+  import { DocumentNode } from 'graphql'
+
+  const content: DocumentNode
+  export default content
+}

package/types/modules/graphql.d.ts

@@ -0,0 +1,6 @@
+declare module '*.graphql' {
+  import { DocumentNode } from 'graphql'
+
+  const content: DocumentNode
+  export default content
+}