@dargmuesli/nuxt-vio 1.6.0 → 1.7.0

package/assets/css/tailwind.css

@@ -0,0 +1,47 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  a:focus {
+    @apply outline-none ring;
+  }
+
+  button:focus {
+    @apply outline-none ring;
+  }
+
+  thead {
+    @apply sticky top-0 z-10 vio-bg-darken;
+  }
+
+  tbody {
+    @apply divide-y vio-divide-darken;
+  }
+}
+
+@layer utilities {
+  .vio-prose {
+    @apply m-auto prose prose-sm sm:prose-base lg:prose-lg xl:prose-xl; /* 2xl:prose-2xl */
+  }
+
+  .vio-prose-scheme {
+    @apply vio-prose dark:prose-invert;
+  }
+
+  .vio-prose-fullwidth {
+    @apply vio-prose max-w-full sm:max-w-full md:max-w-full xl:max-w-full 2xl:max-w-full;
+  }
+
+  .vio-divide-darken {
+    @apply divide-background-brighten dark:divide-background-darken;
+  }
+
+  .vio-bg-darken {
+    @apply bg-background-brighten dark:bg-background-darken;
+  }
+
+  .vio-border-darken {
+    @apply border-background-brighten dark:border-background-darken;
+  }
+}

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

@@ -1,5 +1,10 @@
+import { dirname, join } from 'node:path'
+import { fileURLToPath } from 'node:url'
+
 import { LOCALES, SITE_NAME } from './utils/constants'
 
+const currentDir = dirname(fileURLToPath(import.meta.url))
+
 const BASE_URL =
   'https://' +
   (process.env.NUXT_PUBLIC_STACK_DOMAIN ||
@@ -111,4 +116,7 @@ export default defineNuxtConfig({
   site: {
     splash: false,
   },
+  tailwindcss: {
+    cssPath: join(currentDir, './assets/css/tailwind.css'),
+  },
 })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dargmuesli/nuxt-vio",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -10,13 +10,15 @@
   },
   "packageManager": "pnpm@8.2.0",
   "files": [
+    "assets",
     "components",
     "composables",
     "layouts",
     "server",
     "plugins",
     "utils",
-    "nuxt.config.ts"
+    "nuxt.config.ts",
+    "tailwind.config.ts"
   ],
   "main": "./nuxt.config.ts",
   "scripts": {
@@ -25,11 +27,15 @@
     "generate": "nuxi generate .playground",
     "preview": "nuxi preview .playground",
     "prepare": "pnpm husky install && pnpm nuxt prepare .playground",
-    "lint": "eslint --cache --ext .js,.ts,.vue --ignore-path .gitignore .",
-    "lint:staged": "pnpm lint-staged"
+    "lint": "pnpm lint:js && pnpm lint:ts && pnpm lint:style",
+    "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": "pnpm nuxt typecheck"
   },
   "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",
@@ -51,6 +57,11 @@
     "lint-staged": "13.2.1",
     "nuxt": "3.4.0",
     "prettier": "2.8.7",
-    "typescript": "5.0.4"
+    "stylelint": "15.4.0",
+    "stylelint-config-recommended-vue": "1.4.0",
+    "stylelint-config-standard": "32.0.0",
+    "stylelint-no-unsupported-browser-features": "6.1.0",
+    "typescript": "5.0.4",
+    "vue-tsc": "1.2.0"
   }
 }

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