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

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.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))
+  useSeoMeta(defu(extension, defaults)) // TODO: use `useServerSeoMeta` when Nuxt 3.7 is used
 }

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/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",

package/nuxt.config.ts

@@ -1,167 +1,172 @@
 import { dirname, join } from 'node:path'
 import { fileURLToPath } from 'node:url'
 
+import { defu } from 'defu'
+
 import {
+  BASE_URL,
   I18N_COOKIE_NAME,
-  I18N_MODULE_CONFIG,
-  TIMEZONE_COOKIE_NAME,
   SITE_NAME,
+  TIMEZONE_COOKIE_NAME,
+  VIO_NUXT_BASE_CONFIG,
 } from './utils/constants'
 
 const currentDir = dirname(fileURLToPath(import.meta.url))
 
-const BASE_URL =
-  'https://' +
-  (process.env.NUXT_PUBLIC_STACK_DOMAIN ||
-    `${process.env.HOST || 'localhost'}:${
-      !process.env.NODE_ENV || process.env.NODE_ENV === 'development'
-        ? '3000'
-        : '3001'
-    }`)
-
 // https://v3.nuxtjs.org/api/configuration/nuxt.config
-export default defineNuxtConfig({
-  alias: {
-    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
-    },
-    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: {
-    compressPublicAssets: true,
-  },
-  runtimeConfig: {
-    public: {
-      googleAnalyticsId: '', // set via environment variable `NUXT_PUBLIC_GOOGLE_ANALYTICS_ID` only
-      i18n: {
-        baseUrl: BASE_URL,
-      },
-      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: [
-        {
-          description: {
-            de: 'Dieser Cookie von uns speichert die Einstellungen, die in diesem Dialog getroffen werden.',
-            en: 'This cookie of ours stores the settings made in this dialog.',
-          },
-          id: 'c',
-          name: {
-            de: 'Cookie-Präferenzen',
-            en: 'Cookie Preferences',
+export default defineNuxtConfig(
+  defu(
+    {
+      alias: {
+        clipboard: 'clipboard',
+        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
           },
-          targetCookieIds: ['ncc_c', 'ncc_e'],
+          titleTemplate: '%s', // fully set in `composables/useAppLayout.ts`
         },
-        {
-          description: {
-            de: 'Dieser Cookie von uns speichert die Sprache, in der diese Webseite angezeigt wird.',
-            en: "This cookie of ours stores the language that's used to display this website.",
-          },
-          id: 'l',
-          name: {
-            de: 'Sprache',
-            en: 'Language',
-          },
-          targetCookieIds: [I18N_COOKIE_NAME],
+        pageTransition: {
+          name: 'layout',
         },
-        {
-          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],
+      },
+      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',
+        '@nuxtjs/tailwindcss',
+        '@pinia/nuxt',
+        'nuxt-seo-kit-module',
       ],
-      optional: [
-        {
-          description: {
-            de: 'Die Cookies vom Drittanbieter Google ermöglichen die Analyse von Nutzerverhalten. Diese Analyse hilft uns unsere Dienste zu verbessern, indem wir verstehen, wie diese Webseite genutzt wird.',
-            en: 'The third-party cookies by Google enable the analysis of user behavior. This analysis helps us to improve our services by understanding how this website is used.',
+      nitro: {
+        compressPublicAssets: true,
+      },
+      runtimeConfig: {
+        public: {
+          vio: {
+            googleAnalyticsId: '', // set via environment variable `NUXT_PUBLIC_GOOGLE_ANALYTICS_ID` only
+            isInProduction: process.env.NODE_ENV === 'production',
+            isTesting: false,
           },
-          id: 'ga',
-          links: {
-            'https://policies.google.com/privacy': 'Google Privacy Policy',
-            'https://policies.google.com/terms': 'Google Terms of Service',
+        },
+      },
+      typescript: {
+        shim: false,
+        tsConfig: {
+          compilerOptions: {
+            esModuleInterop: true,
+            // moduleResolution: 'bundler',
+            // noErrorTruncation: true,
           },
-          name: 'Analytics',
-          targetCookieIds: ['_ga', '_ga_K4R41W62BR'],
         },
-      ],
-    },
-    locales: ['en', 'de'],
-  },
-  htmlValidator: {
-    // failOnError: true,
-    logLevel: 'warning',
-  },
-  i18n: {
-    ...I18N_MODULE_CONFIG,
-    defaultLocale: 'en', // Must be set for the default prefix_except_default prefix strategy.
-    detectBrowserLanguage: {
-      cookieKey: I18N_COOKIE_NAME,
-      cookieSecure: true,
+      },
+
+      // modules
+      colorMode: {
+        classSuffix: '',
+      },
+      cookieControl: {
+        cookies: {
+          necessary: [
+            {
+              description: {
+                de: 'Dieser Cookie von uns speichert die Einstellungen, die in diesem Dialog getroffen werden.',
+                en: 'This cookie of ours stores the settings made in this dialog.',
+              },
+              id: 'c',
+              name: {
+                de: 'Cookie-Präferenzen',
+                en: 'Cookie Preferences',
+              },
+              targetCookieIds: ['ncc_c', 'ncc_e'],
+            },
+            {
+              description: {
+                de: 'Dieser Cookie von uns speichert die Sprache, in der diese Webseite angezeigt wird.',
+                en: "This cookie of ours stores the language that's used to display this website.",
+              },
+              id: 'l',
+              name: {
+                de: 'Sprache',
+                en: 'Language',
+              },
+              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: [
+            {
+              description: {
+                de: 'Die Cookies vom Drittanbieter Google ermöglichen die Analyse von Nutzerverhalten. Diese Analyse hilft uns unsere Dienste zu verbessern, indem wir verstehen, wie diese Webseite genutzt wird.',
+                en: 'The third-party cookies by Google enable the analysis of user behavior. This analysis helps us to improve our services by understanding how this website is used.',
+              },
+              id: 'ga',
+              links: {
+                'https://policies.google.com/privacy': 'Google Privacy Policy',
+                'https://policies.google.com/terms': 'Google Terms of Service',
+              },
+              name: 'Analytics',
+              targetCookieIds: ['_ga', '_ga_K4R41W62BR'],
+            },
+          ],
+        },
+        locales: ['en', 'de'],
+      },
+      htmlValidator: {
+        failOnError: false, // TODO: fix invalid html in nuxt html template (https://github.com/nuxt/nuxt/issues/22526)
+        logLevel: 'warning',
+      },
+      i18n: {
+        defaultLocale: 'en', // Must be set for the default prefix_except_default prefix strategy.
+        detectBrowserLanguage: {
+          cookieKey: I18N_COOKIE_NAME,
+          cookieSecure: true,
+        },
+      },
+      linkChecker: {
+        debug: process.env.NODE_ENV === 'development',
+        failOnError: true,
+      },
+      seoKit: {
+        splash: false,
+      },
+      site: {
+        debug: process.env.NODE_ENV === 'development',
+        titleSeparator: '·',
+      },
+      sitemap: {
+        exclude: ['/api/pages/**'],
+      },
+      tailwindcss: {
+        cssPath: join(currentDir, './assets/css/tailwind.css'),
+      },
     },
-  },
-  linkChecker: {
-    failOnError: false, // TODO: enable (https://github.com/harlan-zw/nuxt-seo-kit/issues/4#issuecomment-1434522124)
-  },
-  seoKit: {
-    splash: false,
-  },
-  site: {
-    debug: process.env.NODE_ENV === 'development',
-    name: SITE_NAME,
-    url: BASE_URL,
-  },
-  sitemap: {
-    exclude: ['/api/**'],
-  },
-  tailwindcss: {
-    cssPath: join(currentDir, './assets/css/tailwind.css'),
-  },
-})
+    VIO_NUXT_BASE_CONFIG({
+      baseUrl: BASE_URL,
+      siteName: SITE_NAME,
+      stagingHost: 'localhost:3000',
+    }),
+  ),
+)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dargmuesli/nuxt-vio",
-  "version": "3.0.0-beta.2",
+  "version": "3.0.0-beta.20",
   "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,69 +27,67 @@
     "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",
-    "lint": "pnpm lint:js && pnpm lint:ts && pnpm lint:style",
+    "build": "nuxt build .playground",
+    "dev": "nuxt dev .playground",
+    "generate": "nuxt generate .playground",
     "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:style": "stylelint **/*.{vue,css} --ignore-path .gitignore",
-    "lint:ts": "nuxt typecheck"
+    "lint:staged": "lint-staged",
+    "lint:style": "stylelint --cache {,**/}*.{vue,css} --ignore-path .gitignore",
+    "lint:ts": "nuxt typecheck",
+    "lint": "pnpm lint:js && pnpm lint:ts && pnpm lint:style",
+    "prepare": "nuxt prepare .playground",
+    "preview": "nuxt preview .playground"
   },
   "dependencies": {
-    "@dargmuesli/nuxt-cookie-control": "6.1.5",
-    "@dargmuesli/nuxt-vio": "link:",
-    "@http-util/status-i18n": "0.7.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",
     "@nuxtjs/html-validator": "1.5.2",
-    "@nuxtjs/i18n": "8.0.0-rc.2",
+    "@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",
-    "@urql/exchange-graphcache": "6.3.1",
+    "@urql/exchange-graphcache": "6.3.2",
     "@urql/vue": "1.1.2",
     "@vuelidate/core": "2.0.3",
+    "@vuelidate/validators": "2.0.3",
     "clipboard": "2.0.11",
-    "dayjs": "1.11.9",
+    "dayjs": "2.0.0-alpha.4",
     "is-https": "4.0.0",
     "jose": "4.14.4",
-    "marked": "7.0.0",
-    "nuxt-seo-kit-module": "2.0.0-beta.9",
+    "marked": "7.0.4",
+    "nuxt-seo-kit-module": "2.0.0-beta.13",
     "pinia": "2.1.6",
-    "sweetalert2": "11.7.20",
-    "vue-gtag": "2.0.1"
+    "sweetalert2": "11.7.27",
+    "vue-gtag": "2.0.1",
+    "vue-tsc": "1.8.8"
   },
   "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",
-    "eslint": "8.46.0",
+    "eslint": "8.47.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",
+    "lint-staged": "14.0.1",
     "nuxt": "3.6.5",
-    "prettier": "3.0.1",
-    "stylelint": "15.10.2",
+    "prettier": "3.0.2",
+    "prettier-plugin-tailwindcss": "0.5.3",
+    "stylelint": "15.10.3",
     "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"
+    "vue": "3.3.4"
   }
 }