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

package/plugins/dayjs.ts

@@ -0,0 +1,46 @@
+import dayjs, { extend, locale } from 'dayjs'
+
+// workaround for [1]
+import de from 'dayjs/locale/de'
+// import 'dayjs/locale/de' does not make locale available
+
+import isSameOrBefore from 'dayjs/plugin/isSameOrBefore'
+import localizedFormat from 'dayjs/plugin/localizedFormat'
+import timezone from 'dayjs/plugin/timezone'
+import utc from 'dayjs/plugin/utc'
+
+export default defineNuxtPlugin((_nuxtApp) => {
+  extend(isSameOrBefore)
+  extend(localizedFormat)
+  extend(timezone)
+  extend(utc)
+
+  // workaround for [1]
+  locale(de)
+  // dayjs.locale(en) makes `format` error
+
+  return {
+    provide: {
+      dayjs,
+    },
+  }
+})
+
+// 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
+  https://github.com/nuxt/framework/issues/7206
+  https://github.com/maevsi/maevsi/issues/956
+*/

package/plugins/i18n.ts

@@ -0,0 +1,5 @@
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.hook('i18n:localeSwitched', ({ newLocale }) => {
+    nuxtApp.vueApp.$nuxt.$dayjs.locale(newLocale)
+  })
+})

package/plugins/marked.ts

@@ -0,0 +1,9 @@
+import { marked } from 'marked'
+
+export default defineNuxtPlugin((_nuxtApp) => {
+  return {
+    provide: {
+      marked: marked.parse,
+    },
+  }
+})

package/server/middleware/headers.ts

@@ -1,13 +1,44 @@
-import { defineEventHandler } from 'h3'
+import { appendHeader, defineEventHandler } from 'h3'
+import type { H3Event } from 'h3'
+import { AppConfig } from 'nuxt/schema'
 
-export default defineEventHandler((event) => {
-  const { res } = event.node
+import { TIMEZONE_HEADER_KEY } from '../../utils/constants'
+import { getTimezone } from '../../utils/networking'
 
-  res.setHeader('Permissions-Policy', '')
-
-  // // Disabled until there is better browser support (https://caniuse.com/?search=report-to)
-  // res.setHeader(
-  //   'Report-To',
-  //   '{"group":"default","max_age":31536000,"endpoints":[{"url":"https://dargmuesli.report-uri.com/a/d/g"}],"include_subdomains":true}'
-  // )
+export default defineEventHandler(async (event) => {
+  setRequestHeader(event, TIMEZONE_HEADER_KEY, await getTimezone(event))
+  // setContentSecurityPolicy(event);
+  setResponseHeaders(event)
 })
+
+// const setContentSecurityPolicy = (event: H3Event) => {
+//   const config = useAppConfig();
+
+//   appendHeader(
+//     event,
+//     "Content-Security-Policy",
+//     getCspAsString(config.public.vio.server.middleware.headers.csp)
+//   );
+// };
+
+const setRequestHeader = (event: H3Event, name: string, value: string) => {
+  event.node.req.headers[name] = value
+}
+
+const setResponseHeaders = (event: H3Event) => {
+  const config = useAppConfig() as AppConfig
+
+  for (const entry of Object.entries(
+    config.vio.server.middleware.headers.csp.default,
+  )) {
+    appendHeader(event, entry[0], entry[1])
+  }
+
+  if (process.env.NODE_ENV === 'production') {
+    for (const entry of Object.entries(
+      config.vio.server.middleware.headers.csp.production,
+    )) {
+      appendHeader(event, entry[0], entry[1])
+    }
+  }
+}

package/tailwind.config.ts

@@ -1,13 +1,16 @@
+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'
 
-const heading = (theme: PluginAPI['theme']) =>
-  ({
-    fontWeight: theme('fontWeight.bold'),
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-  }) as Record<string, string>
+const heading = (theme: PluginAPI['theme']): Record<string, string> => ({
+  fontWeight: theme('fontWeight.bold'),
+  // marginBottom: theme('margin.1'),
+  // marginTop: theme('margin.4'),
+  // set overflow truncate/ellipsis in the surrounding container, or larger fonts will be cut off due to their line-heights
+})
 
 const gray = colors.gray // or slate, zinc, neutral, stone
 
@@ -39,14 +42,43 @@ const prose = (theme: PluginAPI['theme']) => ({
 })
 
 export default {
+  content: [
+    './components/**/*.{js,vue,ts}',
+    './composables/**/*.{js,vue,ts}',
+    './layouts/**/*.vue',
+    './pages/**/*.vue',
+    './plugins/**/*.{js,ts}',
+    // './nuxt.config.{js,ts}', // Does not work with i18n as of 2022-12-01
+    './app.vue',
+  ],
   darkMode: 'class',
   plugins: [
+    formsPlugin,
+    lineClampPlugin,
     typographyPlugin,
-    ({ addBase, addComponents, theme }: PluginAPI) => {
+    ({ addBase, addComponents, addUtilities, theme }: PluginAPI) => {
       addBase({
+        ':disabled': {
+          cursor: theme('cursor.not-allowed'),
+          opacity: theme('opacity.50'),
+        },
+        'a[target="_blank"]:after': {
+          backgroundColor: 'currentColor',
+          content: '""',
+          display: 'inline-table', // inline-table centers the element vertically in the tiptap text area, instead of inline-block
+          mask: 'url(data:image/svg+xml;base64,PHN2ZyBhcmlhLWhpZGRlbj0idHJ1ZSIgZm9jdXNhYmxlPSJmYWxzZSIgZGF0YS1wcmVmaXg9ImZhcyIgZGF0YS1pY29uPSJhcnJvdy11cC1yaWdodC1mcm9tLXNxdWFyZSIgY2xhc3M9InN2Zy1pbmxpbmUtLWZhIGZhLWFycm93LXVwLXJpZ2h0LWZyb20tc3F1YXJlIiByb2xlPSJpbWciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDUxMiA1MTIiPjxwYXRoIGZpbGw9ImN1cnJlbnRDb2xvciIgZD0iTTM4NCAzMjBjLTE3LjY3IDAtMzIgMTQuMzMtMzIgMzJ2OTZINjRWMTYwaDk2YzE3LjY3IDAgMzItMTQuMzIgMzItMzJzLTE0LjMzLTMyLTMyLTMyTDY0IDk2Yy0zNS4zNSAwLTY0IDI4LjY1LTY0IDY0VjQ0OGMwIDM1LjM0IDI4LjY1IDY0IDY0IDY0aDI4OGMzNS4zNSAwIDY0LTI4LjY2IDY0LTY0di05NkM0MTYgMzM0LjMgNDAxLjcgMzIwIDM4NCAzMjB6TTUwMi42IDkuMzY3QzQ5Ni44IDMuNTc4IDQ4OC44IDAgNDgwIDBoLTE2MGMtMTcuNjcgMC0zMS4xIDE0LjMyLTMxLjEgMzEuMWMwIDE3LjY3IDE0LjMyIDMxLjEgMzEuOTkgMzEuMWg4Mi43NUwxNzguNyAyOTAuN2MtMTIuNSAxMi41LTEyLjUgMzIuNzYgMCA0NS4yNkMxOTEuMiAzNDguNSAyMTEuNSAzNDguNSAyMjQgMzM2bDIyNC0yMjYuOFYxOTJjMCAxNy42NyAxNC4zMyAzMS4xIDMxLjEgMzEuMVM1MTIgMjA5LjcgNTEyIDE5MlYzMS4xQzUxMiAyMy4xNiA1MDguNCAxNS4xNiA1MDIuNiA5LjM2N3oiPjwvcGF0aD48L3N2Zz4K) no-repeat 50% 50%',
+          maskSize: 'cover',
+          height: theme('fontSize.xs'),
+          marginLeft: '5px',
+          width: theme('fontSize.xs'),
+        },
+        address: {
+          margin: theme('margin.4'),
+        },
         h1: {
           ...heading(theme),
           fontSize: theme('fontSize.4xl'),
+          // marginBottom: theme('margin.4'),
           textAlign: 'center',
         },
         h2: {
@@ -70,14 +102,77 @@ export default {
         },
       })
       addComponents({
+        '::placeholder': {
+          fontStyle: 'italic',
+          '.form-input&,.form-textarea&': {
+            opacity: '0.5',
+          },
+        },
+        '.form-input': {
+          appearance: 'none',
+          backgroundColor: theme('colors.gray.50'),
+          borderColor: theme('colors.gray.300'),
+          borderRadius: theme('borderRadius.DEFAULT'),
+          borderWidth: theme('borderWidth.DEFAULT'),
+          boxShadow: theme('boxShadow.sm'),
+          color: theme('colors.text.dark'),
+          lineHeight: theme('lineHeight.tight'),
+          padding: theme('padding.2') + ' ' + theme('padding.4'),
+          width: theme('width.full'),
+          '&:focus': {
+            backgroundColor: theme('colors.white'),
+          },
+        },
+        '.form-input-error': {
+          input: {
+            borderColor: theme('colors.red.500'),
+          },
+        },
+        '.form-input-success': {
+          input: {
+            borderColor: theme('colors.green.600'),
+          },
+        },
+        '.form-input-warning': {
+          input: {
+            borderColor: theme('colors.yellow.600'),
+          },
+        },
+        '.fullscreen': {
+          bottom: '0',
+          height: theme('height.full'),
+          left: '0',
+          position: 'absolute',
+          right: '0',
+          top: '0',
+          width: theme('width.full'),
+        },
         '.object-position-custom': {
           objectPosition: '50% 30%',
         },
       })
+      addUtilities({
+        '.disabled': {
+          cursor: theme('cursor.not-allowed'),
+          opacity: theme('opacity.50'),
+        },
+        '.max-w-xxs': {
+          maxWidth: '15rem',
+        },
+        '.min-w-xxs': {
+          minWidth: '15rem',
+        },
+        '.mb-20vh': {
+          marginBottom: '20vh',
+        },
+      })
     },
   ],
   theme: {
     extend: {
+      animation: {
+        shake: 'shake 0.6s ease-in-out 0s 1 normal forwards running',
+      },
       colors: {
         background: {
           bright: colors.white,
@@ -94,6 +189,34 @@ export default {
           dark: gray['900'],
         },
       },
+      keyframes: {
+        shake: {
+          '0%': {
+            transform: 'translateX(0)',
+          },
+          '15%': {
+            transform: 'translateX(0.375rem)',
+          },
+          '30%': {
+            transform: 'translateX(-0.375rem)',
+          },
+          '45%': {
+            transform: 'translateX(0.375rem)',
+          },
+          '60%': {
+            transform: 'translateX(-0.375rem)',
+          },
+          '75%': {
+            transform: 'translateX(0.375rem)',
+          },
+          '90%': {
+            transform: 'translateX(-0.375rem)',
+          },
+          '100%': {
+            transform: 'translateX(0)',
+          },
+        },
+      },
       screens: {
         12: { raw: '(min-aspect-ratio: 2/1)' },
       },
@@ -107,4 +230,4 @@ export default {
       }),
     },
   },
-}
+} as Config

package/utils/constants.ts

@@ -1,3 +1,9 @@
+export const SITE_NAME = 'Vio'
+
+export const COOKIE_PREFIX = SITE_NAME.toLocaleLowerCase()
+export const COOKIE_SEPARATOR = '_'
+export const FETCH_RETRY_AMOUNT = 3
+export const I18N_COOKIE_NAME = 'i18n_r'
 export const I18N_MODULE_CONFIG = {
   langDir: 'locales',
   lazy: true,
@@ -20,4 +26,6 @@ export const I18N_VUE_CONFIG = {
   fallbackWarn: false, // covered by linting
   missingWarn: false, // covered by linting
 }
-export const SITE_NAME = 'Vio'
+export const TIMEZONE_COOKIE_NAME = [COOKIE_PREFIX, 'tz'].join(COOKIE_SEPARATOR)
+export const TIMEZONE_HEADER_KEY = `X-${SITE_NAME}-Timezone`
+export const VALIDATION_SUGGESTION_TITLE_LENGTH_MAXIMUM = 300

package/utils/form.ts

@@ -0,0 +1,19 @@
+import type { ApiData } from '../types/api'
+
+export const formPreSubmit = async (
+  api: ApiData,
+  v$: any,
+  isFormSent: Ref<boolean>,
+): Promise<boolean> => {
+  api.value.errors = []
+  v$.value.$touch()
+
+  const isFormValid = await v$.value.$validate()
+  isFormSent.value = isFormValid
+
+  if (!isFormValid) {
+    throw new Error('Form is invalid!')
+  }
+
+  return isFormValid
+}

package/utils/networking.ts

@@ -1,7 +1,89 @@
 import { IncomingMessage } from 'node:http'
 
+import { CombinedError } from '@urql/core'
+import { H3Event, getCookie } from 'h3'
+
+import { ofetch } from 'ofetch'
+import { Ref } from 'vue'
+
+import type { BackendError } from '../types/api'
+import { TIMEZONE_COOKIE_NAME } from './constants'
+
+export const getApiMeta = (
+  queries?: {
+    error: Ref<CombinedError | undefined>
+    fetching: Ref<boolean>
+  }[],
+) => ({
+  errors: queries
+    ? queries.reduce((p, c) => {
+        if (c.error.value) {
+          return [...p, c.error.value]
+        } else {
+          return p
+        }
+      }, [] as BackendError[])
+    : [],
+  isFetching: queries
+    ? queries.reduce((p, c) => p || c.fetching.value, false)
+    : false,
+})
+
+export const getCombinedErrorMessages = (
+  errors: BackendError[],
+  pgIds?: Record<string, string>,
+) => {
+  const errorMessages: string[] = []
+
+  for (const error of errors) {
+    if ('errcode' in error) {
+      const translation = pgIds && pgIds[`postgres${error.errcode}`]
+
+      if (translation) {
+        errorMessages.push(translation)
+      } else {
+        errorMessages.push(error.message)
+      }
+    } else {
+      const combinedError = error
+
+      if (combinedError.networkError) {
+        errorMessages.push(combinedError.message)
+      }
+
+      for (const graphqlError of combinedError.graphQLErrors) {
+        errorMessages.push(graphqlError.message)
+      }
+    }
+  }
+
+  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('.')
+
+  if (/^localhost(:[0-9]+)?$/.test(hostParts[hostParts.length - 1]))
+    return hostParts[hostParts.length - 1]
+
+  if (hostParts.length === 1) throw new Error('Host is too short!')
+
+  return `${hostParts[hostParts.length - 2]}.${hostParts[hostParts.length - 1]}`
+}
+
 export const getHost = (req: IncomingMessage) => {
   if (!req.headers.host) throw new Error('Host header is not given!')
 
   return req.headers.host
 }
+
+export const getTimezone = async (event: H3Event) =>
+  getCookie(event, TIMEZONE_COOKIE_NAME) ||
+  (
+    await ofetch(
+      `http://ip-api.com/json/${event.node.req.headers['x-real-ip']}`,
+    )
+  ).timezone

package/utils/text.ts

@@ -0,0 +1,20 @@
+import Clipboard from 'clipboard'
+
+export const copyText = (text: string) =>
+  new Promise((resolve, reject) => {
+    const fakeElement = document.createElement('button')
+    const clipboard = new Clipboard(fakeElement, {
+      text: () => text,
+      action: () => 'copy',
+      container: document.body,
+    })
+    clipboard.on('success', (e) => {
+      clipboard.destroy()
+      resolve(e)
+    })
+    clipboard.on('error', (e) => {
+      clipboard.destroy()
+      reject(e)
+    })
+    fakeElement.click()
+  })