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

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,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,11 +26,16 @@ 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 = () => {
   if (process.client) {
@@ -63,7 +69,6 @@ watch(
 )
 
 // initialization
-init()
 updateSiteConfig({
   description: siteDescriptionProp.value,
 })
@@ -73,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/_}/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/{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/{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,
+  })
 }

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/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/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'
@@ -29,13 +30,19 @@ export default defineNuxtConfig({
       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',
     '@nuxtjs/color-mode',
@@ -56,16 +63,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 +137,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 +149,7 @@ export default defineNuxtConfig({
     },
   },
   linkChecker: {
-    failOnError: false, // TODO: enable (https://github.com/harlan-zw/nuxt-seo-kit/issues/4#issuecomment-1434522124)
+    failOnError: true,
   },
   seoKit: {
     splash: false,
@@ -156,6 +157,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.1",
+  "version": "3.0.0-beta.3",
   "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,23 +27,22 @@
     "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",
     "@nuxtjs/color-mode": "3.3.0",
     "@nuxtjs/html-validator": "1.5.2",
@@ -49,7 +50,6 @@
     "@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",
@@ -60,15 +60,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",
@@ -78,7 +76,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/plugins/dayjs.ts

@@ -26,18 +26,6 @@ export default defineNuxtPlugin((_nuxtApp) => {
   }
 })
 
-// declare module '#app' {
-//   interface NuxtApp {
-//     $dayjs: DayjsFn
-//   }
-// }
-
-// declare module 'nuxt/dist/app/nuxt' {
-//   interface NuxtApp {
-//     $dayjs: DayjsFn
-//   }
-// }
-
 /*
   [1]
   https://github.com/nuxt/framework/issues/7534#issuecomment-1248596609