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

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',
@@ -59,13 +68,12 @@ export default defineNuxtConfig({
       stagingHost:
         process.env.NODE_ENV !== 'production' &&
         !process.env.NUXT_PUBLIC_STACK_DOMAIN
-          ? 'jonas-thelemann.de'
+          ? 'localhost:3000'
           : undefined,
     },
   },
   typescript: {
     shim: false,
-    strict: true,
     // tsConfig: {
     //   compilerOptions: {
     //     esModuleInterop: true,
@@ -136,7 +144,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 +156,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,10 +165,11 @@ export default defineNuxtConfig({
   site: {
     debug: process.env.NODE_ENV === 'development',
     name: SITE_NAME,
+    titleSeparator: '·',
     url: BASE_URL,
   },
   sitemap: {
-    exclude: ['/api/**'],
+    exclude: ['/api/pages/**'],
   },
   tailwindcss: {
     cssPath: join(currentDir, './assets/css/tailwind.css'),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dargmuesli/nuxt-vio",
-  "version": "3.0.0-beta.1",
+  "version": "3.0.0-beta.11",
   "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,50 +27,49 @@
     "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:staged": "lint-staged",
     "lint:style": "stylelint **/*.{vue,css} --ignore-path .gitignore",
-    "lint:ts": "nuxt typecheck"
+    "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",
+    "@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/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",
     "@urql/exchange-graphcache": "6.3.1",
     "@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",
+    "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"
+    "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",
@@ -78,17 +79,15 @@
     "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",
+    "prettier-plugin-tailwindcss": "0.5.3",
     "stylelint": "15.10.2",
     "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"
   }
 }

package/plugins/dayjs.ts

@@ -1,4 +1,4 @@
-import dayjs, { extend, locale } from 'dayjs'
+import dayjs from 'dayjs'
 
 // workaround for [1]
 import de from 'dayjs/locale/de'
@@ -10,13 +10,13 @@ import timezone from 'dayjs/plugin/timezone'
 import utc from 'dayjs/plugin/utc'
 
 export default defineNuxtPlugin((_nuxtApp) => {
-  extend(isSameOrBefore)
-  extend(localizedFormat)
-  extend(timezone)
-  extend(utc)
+  dayjs.extend(isSameOrBefore)
+  dayjs.extend(localizedFormat)
+  dayjs.extend(timezone)
+  dayjs.extend(utc)
 
   // workaround for [1]
-  locale(de)
+  dayjs.locale(de)
   // dayjs.locale(en) makes `format` error
 
   return {
@@ -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

package/plugins/gtag.client.ts

@@ -11,6 +11,9 @@ export default defineNuxtPlugin((nuxtApp) => {
       bootstrap: !!cookieControl.cookiesEnabledIds.value?.includes('ga'),
       config: {
         id: config.public.googleAnalyticsId,
+        params: {
+          cookie_flags: 'secure;samesite=strict',
+        },
       },
     },
     router,

package/server/middleware/headers.ts

@@ -21,7 +21,7 @@ export default defineEventHandler(async (event) => {
 //   );
 // };
 
-const setRequestHeader = (event: H3Event, name: string, value: string) => {
+const setRequestHeader = (event: H3Event, name: string, value?: string) => {
   event.node.req.headers[name] = value
 }
 

package/server/tsconfig.json

@@ -1,3 +1,3 @@
 {
-  "extends": "../.nuxt/tsconfig.server.json"
+  "extends": "../.playground/.nuxt/tsconfig.server.json"
 }

package/server/utils/util.ts

@@ -0,0 +1,2 @@
+export const getCspAsString = (csp = {} as Record<string, Array<string>>) =>
+  Object.keys(csp).reduce((p, c) => (p += `${c} ${csp[c].join(' ')};`), '')

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/tailwind.config.ts

@@ -1,9 +1,8 @@
-import { Config } from 'tailwindcss'
-import colors from 'tailwindcss/colors'
-import { PluginAPI } from 'tailwindcss/types/config'
 import formsPlugin from '@tailwindcss/forms'
-import lineClampPlugin from '@tailwindcss/line-clamp'
 import typographyPlugin from '@tailwindcss/typography'
+import type { Config } from 'tailwindcss'
+import colors from 'tailwindcss/colors'
+import type { PluginAPI } from 'tailwindcss/types/config'
 
 const heading = (theme: PluginAPI['theme']): Record<string, string> => ({
   fontWeight: theme('fontWeight.bold'),
@@ -54,7 +53,6 @@ export default {
   darkMode: 'class',
   plugins: [
     formsPlugin,
-    lineClampPlugin,
     typographyPlugin,
     ({ addBase, addComponents, addUtilities, theme }: PluginAPI) => {
       addBase({

package/types/api.d.ts

@@ -0,0 +1,9 @@
+import type { CombinedError } from '@urql/core'
+
+export type ApiData = ComputedRef<{
+  data?: Object
+  errors: BackendError[]
+  isFetching: boolean
+}>
+
+export type BackendError = CombinedError | { errcode: string; message: string }

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
+}

package/utils/constants.ts

@@ -1,5 +1,6 @@
 export const SITE_NAME = 'Vio'
 
+export const CACHE_VERSION = 'bOXMwoKlJr'
 export const COOKIE_PREFIX = SITE_NAME.toLocaleLowerCase()
 export const COOKIE_SEPARATOR = '_'
 export const FETCH_RETRY_AMOUNT = 3

package/utils/networking.ts

@@ -60,9 +60,6 @@ export const getCombinedErrorMessages = (
   return errorMessages
 }
 
-export const getCspAsString = (csp = {} as Record<string, Array<string>>) =>
-  Object.keys(csp).reduce((p, c) => (p += `${c} ${csp[c].join(' ')};`), '')
-
 export const getDomainTldPort = (host: string) => {
   const hostParts = host.split('.')
 
@@ -80,10 +77,48 @@ export const getHost = (req: IncomingMessage) => {
   return req.headers.host
 }
 
-export const getTimezone = async (event: H3Event) =>
-  getCookie(event, TIMEZONE_COOKIE_NAME) ||
-  (
-    await ofetch(
+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)}`
+  }
+}
+
+export const getTimezone = async (event: H3Event) => {
+  const timezoneCookie = getCookie(event, TIMEZONE_COOKIE_NAME)
+
+  if (timezoneCookie) {
+    return timezoneCookie
+  }
+
+  if (event.node.req.headers['x-real-ip']) {
+    const ipApiResult = await ofetch<{ timezone: string }>(
       `http://ip-api.com/json/${event.node.req.headers['x-real-ip']}`,
-    )
-  ).timezone
+    ).catch(() => {})
+
+    if (ipApiResult) {
+      return ipApiResult.timezone
+    }
+  }
+
+  return undefined
+}