feat: Nuxt UI Version 3 einsetzen

app.config.ts

@@ -1,16 +1,76 @@
 export default defineAppConfig({
-  ui: {
-    primary: 'nuxt-ui-primary',
-    // gray: 'nuxt-ui-grey',
-    variables: {
-      light: {
-        background: '255 255 255',
-        foreground: '000 000 000'
-      },
-      dark: {
-        background: '255 255 255',
-        foreground: '000 000 000'
-      },
-    }
-  }
+    uiPro: {
+        blogPost: {
+            slots: {
+                authors: 'pt-4',
+                body: 'sm:p-3!',
+                description: 'mb-0 text-xs text-pretty jm-contrast-black color-jm-contrast-black',
+                image: 'object-fill w-full max-w-full h-full block bg-center bg-cover bg-no-repeat',
+                meta: 'gap-1 px-0',
+                root: 'relative group/blog-post flex flex-col overflow-hidden p-0 test',
+                title: 'text-xl uppercase font-extrabold leading-6',
+            },
+        }
+    },
+
+    ui: {
+        container: {
+            base: 'max-w-(--container-3xl) mx-auto px-4 sm:px-6 lg:px-8',
+        },
+        colors: {
+            primary: 'nuxt-ui-primary',
+            secondary: 'nuxt-ui-brown',
+        },
+        button: {
+            defaultVariants: {
+                color: "secondary",
+            },
+            slots: {
+                base: 'inline-block border-[3px] border-jm-primary-brown rounded px-3 py-2 uppercase font-[800] text-sm text-jm-primary-brown hover:text-jm-secondary-white hover:bg-jm-primary-brown transition',
+            }
+        },
+        size: {
+            xs: {
+                base: 'px-2 py-1 text-xs gap-1',
+                leadingIcon: 'size-4',
+                leadingAvatarSize: '3xs',
+                trailingIcon: 'size-4'
+            },
+            sm: {
+                base: 'px-2.5 py-1.5 text-xs gap-1.5',
+                leadingIcon: 'size-4',
+                leadingAvatarSize: '3xs',
+                trailingIcon: 'size-4'
+            },
+            md: {
+                base: 'px-2.5 py-1.5 text-sm gap-1.5',
+                leadingIcon: 'size-5',
+                leadingAvatarSize: '2xs',
+                trailingIcon: 'size-5'
+            },
+            lg: {
+                base: 'px-3 py-2 text-sm gap-2',
+                leadingIcon: 'size-5',
+                leadingAvatarSize: '2xs',
+                trailingIcon: 'size-5'
+            },
+            xl: {
+                base: 'px-3 py-2 text-base gap-2',
+                leadingIcon: 'size-6',
+                leadingAvatarSize: 'xs',
+                trailingIcon: 'size-6'
+            }
+        },
+        variables: {
+            light: {
+                background: '255 255 255',
+                foreground: '000 000 000'
+            },
+            dark: {
+                background: '255 255 255',
+                foreground: '000 000 000'
+            },
+        }
+    },
+
 })

app.vue

@@ -1,13 +1,44 @@
 <template>
-  <div class="custom-cursor overflow-x-hidden scroll-smooth"
-       :class="{'cursor-down': isMouseDown, 'cursor-show': isMouseShow}"
-       :style="{ '--mouse-x': cursorX + 'px', '--mouse-y': cursorY + 'px' }">
-    <NuxtLayout>
-      <NuxtPage/>
-    </NuxtLayout>
-  </div>
+  <UApp>
+    <div :class="{'cursor-down': isMouseDown, 'cursor-show': isMouseShow}"
+         :style="{ '--mouse-x': cursorX + 'px', '--mouse-y': cursorY + 'px' }"
+         class="custom-cursor overflow-hidden scroll-smooth">
+      <NuxtLayout>
+        <UMain>
+          <NuxtPage/>
+        </UMain>
+      </NuxtLayout>
+    </div>
+  </UApp>
 </template>
-<script setup lang="ts">
+<script lang="ts" setup>
+
+
+const router = useRouter()
+const pageTransition = ref(false)
+const ROUTING_DELAY = 1000
+
+router.beforeEach((to, from, next) => {
+
+  if (pageTransition.value) return next()
+
+  pageTransition.value = true
+
+  setTimeout(() => {
+    next()
+  }, ROUTING_DELAY)
+})
+
+watch(pageTransition, (newVal) => {
+
+  if (newVal) {
+    setTimeout(() => {
+      pageTransition.value = false
+    }, 600)
+  }
+})
+
+
 const cursorX = ref(0);
 const cursorY = ref(0);
 const isMouseDown = ref(false);
@@ -83,13 +114,21 @@ onUnmounted(() => {
   }
 
 }
+
 .page-enter-active,
 .page-leave-active {
-  transition: all 0.4s;
+  transition: transform 0.4s ease-in-out;
 }
+
 .page-enter-from,
 .page-leave-to {
-  opacity: 0;
-  filter: blur(1rem);
+  transform: translateY(100%);
 }
+
+.page-enter-to,
+.page-leave-from {
+  transform: translateY(0%);
+}
+
+
 </style>

app/router.options.ts

@@ -1,14 +1,61 @@
-import type {RouterConfig} from "@nuxt/schema";
+import type {RouterConfig} from '@nuxt/schema'
+
+const FIXED_OFFSET = 60
+
+function calculateDynamicDelay(): number {
+    const complexityFactor = document.querySelectorAll('*').length / 1000
+    return Math.min(200, Math.max(50, complexityFactor * 50))
+}
+
+function findHashPosition(hash: string): { el: any, behavior: ScrollBehavior, top: number } | undefined {
+    const el = document.querySelector(hash)
+    if (el) {
+        return {
+            el: el,
+            behavior: 'smooth',
+            top: FIXED_OFFSET
+        }
+    }
+}
 
 export default <RouterConfig>{
-    async scrollBehavior(to, from, savedPosition) {
+    scrollBehavior(to, from, savedPosition) {
+        const nuxtApp = useNuxtApp()
+
+        if (history.state && history.state.stop)
+            return
+
+        if (history.state && history.state.smooth) {
+            return {
+                el: history.state.smooth,
+                behavior: 'smooth',
+            }
+        }
+
         if (savedPosition) {
-            return savedPosition;
+            return new Promise((resolve) => {
+                nuxtApp.hooks.hookOnce('page:finish', () => {
+                    setTimeout(() => resolve(savedPosition), 250)
+                })
+            })
         }
-        if (to.path.startsWith('/blog/')) {
-            return {top: 0};
-        } else if (to.path.startsWith('/blog')) {
-            return {top: 0};
+
+        if (to.hash) {
+            return new Promise((resolve) => {
+                if (to.path === from.path) {
+                    setTimeout(() => resolve(findHashPosition(to.hash)), calculateDynamicDelay())
+                } else {
+                    nuxtApp.hooks.hookOnce('page:finish', () => {
+                        setTimeout(() => resolve(findHashPosition(to.hash)), calculateDynamicDelay())
+                    })
+                }
+            })
         }
+
+        return new Promise((resolve) => {
+            setTimeout(() => {
+                resolve({top: 0})
+            }, 250)
+        })
     },
-};
+}

assets/css/main.css

@@ -0,0 +1,125 @@
+@import "tailwindcss";
+@import 'tailwindcss/theme' layer(theme);
+@import 'tailwindcss/utilities' layer(utilities);
+@import 'tailwindcss/preflight' layer(base);
+@import '@nuxt/ui-pro';
+
+@layer theme, base, components, utilities;
+
+@plugin '@tailwindcss/typography';
+
+
+:root {
+    --ui-text-muted: #000000;
+    --ui-text-highlighted: 104 126 94;
+    --ui-foreground: #000000;
+    --ui-primary: #9B9371;
+    --ui-bg: var(--color-jm-secondary-grey-lighter);
+    /* Font Families */
+    --font-family-sans: 'Open Sans', sans-serif;
+
+    /* Colors */
+    --color-nuxt-ui-primary-50: #687E5E;
+    --color-nuxt-ui-primary-100: #687E5E;
+    --color-nuxt-ui-primary-200: #687E5E;
+    --color-nuxt-ui-primary-300: #687E5E;
+    --color-nuxt-ui-primary-400: #687E5E;
+    --color-nuxt-ui-primary-500: #687E5E;
+    --color-nuxt-ui-primary-600: #687E5E;
+    --color-nuxt-ui-primary-700: #687E5E;
+    --color-nuxt-ui-primary-800: #687E5E;
+    --color-nuxt-ui-primary-900: #687E5E;
+    --color-nuxt-ui-primary-950: #687E5E;
+
+    --color-nuxt-ui-grey-50: #7C7B7B;
+    --color-nuxt-ui-grey-100: #7C7B7B;
+    --color-nuxt-ui-grey-200: #7C7B7B;
+    --color-nuxt-ui-grey-300: #7C7B7B;
+    --color-nuxt-ui-grey-400: #7C7B7B;
+    --color-nuxt-ui-grey-500: #7C7B7B;
+    --color-nuxt-ui-grey-600: #7C7B7B;
+    --color-nuxt-ui-grey-700: #7C7B7B;
+    --color-nuxt-ui-grey-800: #7C7B7B;
+    --color-nuxt-ui-grey-900: #7C7B7B;
+    --color-nuxt-ui-grey-950: #7C7B7B;
+
+    --color-nuxt-ui-brown-50: #9B9371;
+    --color-nuxt-ui-brown-100: #9B9371;
+    --color-nuxt-ui-brown-200: #9B9371;
+    --color-nuxt-ui-brown-300: #9B9371;
+    --color-nuxt-ui-brown-400: #9B9371;
+    --color-nuxt-ui-brown-500: #9B9371;
+    --color-nuxt-ui-brown-600: #9B9371;
+    --color-nuxt-ui-brown-700: #9B9371;
+    --color-nuxt-ui-brown-800: #9B9371;
+    --color-nuxt-ui-brown-900: #9B9371;
+    --color-nuxt-ui-brown-950: #9B9371;
+
+    --color-jm-primary-brown: #9B9371;
+    --color-jm-primary-brown-light: #C3C2B4;
+    --color-jm-primary-brown-lighter: #DBDAD2;
+
+    --color-jm-primary-grey: #7C7B7B;
+    --color-jm-primary-grey-light: #B5B7B5;
+    --color-jm-primary-grey-lighter: #D2D4D3;
+
+    --color-jm-primary-green: #687E5E;
+    --color-jm-primary-green-light: #AEB9AC;
+    --color-jm-primary-green-lighter: #CFD5CD;
+
+    --color-jm-secondary-grey: #C9CAC9;
+    --color-jm-secondary-grey-light: #DDDEDC;
+    --color-jm-secondary-grey-lighter: #EAEBEA;
+
+    --color-jm-secondary-white: #FFFFFF;
+
+    --color-jm-contrast-blue: #3B5B5D;
+    --color-jm-contrast-blue-light: #9BA7A7;
+    --color-jm-contrast-blue-lighter: #C3CACA;
+
+    --color-jm-contrast-black: #000000;
+    --color-jm-contrast-black-light: #808082;
+    --color-jm-contrast-black-lighter: #B3B3B4;
+}
+
+
+@font-face {
+    font-family: 'Open Sans';
+    font-style: normal;
+    font-weight: 300 800;
+    font-stretch: 100%;
+    font-display: swap;
+    src: url(../fonts/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS-mu0SC55I.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+
+@layer utilities {
+    .no-scrollbar::-webkit-scrollbar {
+        display: none;
+    }
+
+    .no-scrollbar {
+        -ms-overflow-style: none; /* IE and Edge */
+        scrollbar-width: none; /* Firefox */
+    }
+}
+
+html {
+    font-size: 20px;
+
+    @media (max-width: 768px) {
+        font-size: 18px;
+    }
+}
+
+body {
+    --tw-bg-opacity: 1;
+    font-family: Open Sans, sans-serif;
+    --tw-text-opacity: 1;
+    color: rgb(var(--ui-foreground) / var(--tw-text-opacity, 1));
+}
+
+b, strong {
+    font-weight: 800;
+}