@dargmuesli/nuxt-vio 1.6.1 → 1.7.1

package/components/VioError.vue

@@ -0,0 +1,28 @@
+<template>
+  <h1>{{ statusCode ? `${statusCode} - ` : '' }}{{ statusReason }}</h1>
+</template>
+
+<script setup lang="ts">
+import { status } from '@http-util/status-i18n'
+
+export interface Props {
+  statusCode?: number
+}
+const props = withDefaults(defineProps<Props>(), {
+  statusCode: undefined,
+})
+
+const { locale, t } = useI18n()
+
+// computations
+const statusReason = computed(() => {
+  return status(props.statusCode, locale) || t('error')
+})
+</script>
+
+<i18n lang="yaml">
+de:
+  error: Fehler
+en:
+  error: Error
+</i18n>

package/error.vue

@@ -0,0 +1,21 @@
+<template>
+  <NuxtLayout>
+    <VioError
+      :status-code="error?.statusCode ? +error?.statusCode : undefined"
+    />
+  </NuxtLayout>
+</template>
+
+<script setup lang="ts">
+export type Error = { statusCode: string }
+export interface Props {
+  error?: Error
+}
+const props = withDefaults(defineProps<Props>(), {
+  error: undefined,
+})
+
+useHead({
+  title: props.error?.statusCode?.toString(),
+})
+</script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dargmuesli/nuxt-vio",
-  "version": "1.6.1",
+  "version": "1.7.1",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -17,7 +17,9 @@
     "server",
     "plugins",
     "utils",
-    "nuxt.config.ts"
+    "error.vue",
+    "nuxt.config.ts",
+    "tailwind.config.ts"
   ],
   "main": "./nuxt.config.ts",
   "scripts": {
@@ -34,6 +36,7 @@
   },
   "dependencies": {
     "@dargmuesli/nuxt-cookie-control": "5.4.0",
+    "@http-util/status-i18n": "0.6.2",
     "@nuxtjs/html-validator": "1.2.4",
     "@nuxtjs/i18n": "8.0.0-beta.10",
     "@nuxtjs/tailwindcss": "6.6.5",

package/tailwind.config.ts

@@ -0,0 +1,110 @@
+import colors from 'tailwindcss/colors'
+import { PluginAPI } from 'tailwindcss/types/config'
+import typographyPlugin from '@tailwindcss/typography'
+
+const heading = (theme: PluginAPI['theme']) =>
+  ({
+    fontWeight: theme('fontWeight.bold'),
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+  } as Record<string, string>)
+
+const gray = colors.gray // or slate, zinc, neutral, stone
+
+const prose = (theme: PluginAPI['theme']) => ({
+  css: {
+    a: {
+      color: theme('colors.link'),
+      textDecoration: 'none',
+    },
+    h1: {
+      lineHeight: theme('lineHeight.snug'),
+    },
+    h2: {
+      lineHeight: theme('lineHeight.snug'),
+    },
+    h3: {
+      lineHeight: theme('lineHeight.snug'),
+    },
+    h4: {
+      lineHeight: theme('lineHeight.snug'),
+    },
+    h5: {
+      lineHeight: theme('lineHeight.snug'),
+    },
+    h6: {
+      lineHeight: theme('lineHeight.snug'),
+    },
+  },
+})
+
+export default {
+  darkMode: 'class',
+  plugins: [
+    typographyPlugin,
+    ({ addBase, addComponents, theme }: PluginAPI) => {
+      addBase({
+        h1: {
+          ...heading(theme),
+          fontSize: theme('fontSize.4xl'),
+          textAlign: 'center',
+        },
+        h2: {
+          ...heading(theme),
+          fontSize: theme('fontSize.3xl'),
+        },
+        h3: {
+          ...heading(theme),
+          fontSize: theme('fontSize.2xl'),
+        },
+        h4: {
+          ...heading(theme),
+          fontSize: theme('fontSize.xl'),
+        },
+        h5: {
+          ...heading(theme),
+          fontSize: theme('fontSize.lg'),
+        },
+        h6: {
+          ...heading(theme),
+        },
+      })
+      addComponents({
+        '.object-position-custom': {
+          objectPosition: '50% 30%',
+        },
+      })
+    },
+  ],
+  theme: {
+    extend: {
+      colors: {
+        background: {
+          bright: colors.white,
+          brighten: gray['200'],
+          dark: gray['800'],
+          darken: gray['700'],
+        },
+        link: {
+          bright: colors.blue['400'],
+          dark: colors.blue['600'],
+        },
+        text: {
+          bright: gray['50'],
+          dark: gray['900'],
+        },
+      },
+      screens: {
+        12: { raw: '(min-aspect-ratio: 2/1)' },
+      },
+      typography: (theme: PluginAPI['theme']) => ({
+        DEFAULT: prose(theme),
+        sm: prose(theme),
+        base: prose(theme),
+        lg: prose(theme),
+        xl: prose(theme),
+        '2xl': prose(theme),
+      }),
+    },
+  },
+}