monacousa-portal/nuxt.config.ts

export default defineNuxtConfig({
  ssr: false,
  compatibilityDate: "2024-11-01",
  devtools: { enabled: true },
  
  // Add startup logging
  hooks: {
    'ready': () => {
      console.log('🚀 MonacoUSA Portal Nuxt is ready!')
      console.log('Environment:', process.env.NODE_ENV)
      console.log('Port:', process.env.NUXT_PORT || process.env.PORT || 3000)
    },
    'listen': (server, { host, port }) => {
      console.log(`🌐 Server listening on http://${host}:${port}`)
    }
  },
  modules: ["vuetify-nuxt-module", "@vueuse/motion/nuxt"],
  css: ["~/assets/css/tailwind.css", "~/assets/scss/main.scss"],
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  },
  app: {
    head: {
      titleTemplate: "%s • MonacoUSA Portal",
      title: "MonacoUSA Portal",
      meta: [
        { property: "og:title", content: "MonacoUSA Portal" },
        { property: "og:image", content: "/MONACOUSA-Flags_376x376.png" },
        { name: "twitter:card", content: "summary_large_image" },
        { name: "viewport", content: "width=device-width, initial-scale=1" },
        { name: "apple-mobile-web-app-capable", content: "yes" },
        { name: "apple-mobile-web-app-status-bar-style", content: "default" },
        { name: "apple-mobile-web-app-title", content: "MonacoUSA Portal" },
        { name: "theme-color", content: "#a31515" },
      ],
      link: [
        { rel: "icon", type: "image/png", sizes: "32x32", href: "/favicon-32x32.png" },
        { rel: "icon", type: "image/png", sizes: "192x192", href: "/icon-192x192.png" },
        { rel: "apple-touch-icon", sizes: "180x180", href: "/apple-touch-icon.png" },
        { rel: "shortcut icon", href: "/favicon-32x32.png" },
      ],
      htmlAttrs: {
        lang: "en",
      },
    },
  },
  nitro: {
    experimental: {
      wasm: true
    }
  },
  vite: {
    optimizeDeps: {
      exclude: ['sharp']
    }
  },
  runtimeConfig: {
    // Server-side configuration
    keycloak: {
      issuer: process.env.NUXT_KEYCLOAK_ISSUER || "",
      clientId: process.env.NUXT_KEYCLOAK_CLIENT_ID || "monacousa-portal",
      clientSecret: process.env.NUXT_KEYCLOAK_CLIENT_SECRET || "",
      callbackUrl: process.env.NUXT_KEYCLOAK_CALLBACK_URL || "https://portal.monacousa.org/auth/callback",
    },
    keycloakAdmin: {
      issuer: process.env.NUXT_KEYCLOAK_ISSUER || "",
      clientId: process.env.NUXT_KEYCLOAK_ADMIN_CLIENT_ID || "admin-cli",
      clientSecret: process.env.NUXT_KEYCLOAK_ADMIN_CLIENT_SECRET || "",
    },
    nocodb: {
      url: process.env.NUXT_NOCODB_URL || "",
      token: process.env.NUXT_NOCODB_TOKEN || "",
      baseId: process.env.NUXT_NOCODB_BASE_ID || "",
      eventsBaseId: process.env.NUXT_NOCODB_EVENTS_BASE_ID || "",
      eventsTableId: process.env.NUXT_NOCODB_EVENTS_TABLE_ID || "",
      rsvpTableId: process.env.NUXT_NOCODB_RSVP_TABLE_ID || "",
    },
    minio: {
      endPoint: process.env.NUXT_MINIO_ENDPOINT || "s3.monacousa.org",
      port: parseInt(process.env.NUXT_MINIO_PORT || "443"),
      useSSL: process.env.NUXT_MINIO_USE_SSL !== "false",
      accessKey: process.env.NUXT_MINIO_ACCESS_KEY || "",
      secretKey: process.env.NUXT_MINIO_SECRET_KEY || "",
      bucketName: process.env.NUXT_MINIO_BUCKET_NAME || "monacousa-portal",
    },
    sessionSecret: process.env.NUXT_SESSION_SECRET || "",
    encryptionKey: process.env.NUXT_ENCRYPTION_KEY || "",
    jwtSecret: process.env.NUXT_JWT_SECRET || process.env.NUXT_SESSION_SECRET || "",
    public: {
      // Client-side configuration
      appName: "MonacoUSA Portal",
      domain: process.env.NUXT_PUBLIC_DOMAIN || "https://portal.monacousa.org",
      keycloakIssuer: process.env.NUXT_KEYCLOAK_ISSUER || "https://auth.monacousa.org/realms/monacousa",
      motion: {
        directives: {
          'pop-bottom': {
            initial: {
              scale: 0,
              opacity: 0,
              y: 100
            },
            visible: {
              scale: 1,
              opacity: 1,
              y: 0,
              transition: {
                type: 'spring',
                stiffness: 250,
                damping: 25
              }
            }
          },
          'fade-in': {
            initial: {
              opacity: 0
            },
            enter: {
              opacity: 1,
              transition: {
                duration: 600
              }
            }
          },
          'slide-up': {
            initial: {
              y: 100,
              opacity: 0
            },
            enter: {
              y: 0,
              opacity: 1,
              transition: {
                type: 'spring',
                stiffness: 100,
                damping: 20
              }
            }
          },
          'glass-fade': {
            initial: {
              opacity: 0,
              scale: 0.95,
              filter: 'blur(10px)'
            },
            enter: {
              opacity: 1,
              scale: 1,
              filter: 'blur(0px)',
              transition: {
                duration: 500,
                type: 'spring',
                stiffness: 200
              }
            }
          }
        }
      }
    },
  },
  vuetify: {
    vuetifyOptions: {
      theme: {
        defaultTheme: "monacousa",
        themes: {
          monacousa: {
            dark: false,
            colors: {
              // Refined Monaco Red Spectrum
              primary: "#dc2626",         // Professional primary
              'primary-50': "#fef2f2",
              'primary-100': "#fee2e2",
              'primary-200': "#fecaca",
              'primary-300': "#fca5a5",
              'primary-400': "#f87171",
              'primary-500': "#ef4444",
              'primary-600': "#dc2626",   // Primary Brand Color
              'primary-700': "#b91c1c",
              'primary-800': "#991b1b",
              'primary-900': "#7f1d1d",
              
              // Improved Neutral Palette
              secondary: "#64748b",        // Neutral gray for secondary
              accent: "#dc2626",          // Monaco red as accent
              background: "#fafafa",      // Light gray background
              surface: "#ffffff",         // Pure white surfaces
              'on-background': "#1f2937", // Darker text on background
              'on-surface': "#1f2937",    // Darker text on surface
              
              // Semantic Colors - More Professional
              error: "#dc2626",
              warning: "#f59e0b",
              info: "#3b82f6",
              success: "#22c55e",
              
              // Custom Properties for Glass Effects
              'glass-bg': "rgba(255, 255, 255, 0.85)",
              'glass-border': "rgba(255, 255, 255, 0.18)",
              'glass-dark': "rgba(17, 24, 39, 0.6)",
            },
            variables: {
              'border-color': '#e5e7eb',
              'border-opacity': 0.08,
              'high-emphasis-opacity': 0.95,
              'medium-emphasis-opacity': 0.70,
              'disabled-opacity': 0.45,
              'idle-opacity': 0.02,
              'hover-opacity': 0.04,
              'focus-opacity': 0.08,
              'selected-opacity': 0.08,
              'activated-opacity': 0.10,
              'pressed-opacity': 0.12,
              'dragged-opacity': 0.06,
              'shadow-glass': '0 8px 32px rgba(31, 41, 55, 0.08)',
              'shadow-monaco': '0 10px 40px rgba(185, 28, 28, 0.1)',
              'shadow-elevated': '0 20px 25px -5px rgba(0, 0, 0, 0.1)',
            },
          },
          monacousa_dark: {
            dark: true,
            colors: {
              // Dark theme aligned with design system
              primary: "#ef4444",         // Brighter red for dark mode
              'primary-600': "#dc2626",
              'primary-700': "#b91c1c",
              
              secondary: "#fafafa",
              accent: "#3f3f46",
              background: "#18181b",      // gray-900
              surface: "#27272a",         // gray-800
              'on-background': "#fafafa",
              'on-surface': "#f4f4f5",
              
              error: "#f87171",
              warning: "#fbbf24",
              info: "#38bdf8",
              success: "#34d399",
              
              'glass-bg': "rgba(0, 0, 0, 0.7)",
              'glass-border': "rgba(255, 255, 255, 0.1)",
            },
          },
        },
        variations: {
          colors: ['primary', 'secondary', 'accent'],
          lighten: 4,
          darken: 4,
        },
      },
      defaults: {
        VCard: {
          elevation: 0,
          rounded: 'xl',
          class: 'card-modern',
        },
        VBtn: {
          elevation: 0,
          rounded: 'lg',
          class: 'text-none font-medium',
          size: 'default',
          density: 'comfortable',
        },
        VNavigationDrawer: {
          elevation: 0,
          class: 'sidebar-modern',
        },
        VAppBar: {
          elevation: 0,
          flat: true,
          class: 'appbar-modern',
          density: 'comfortable',
        },
        VTextField: {
          variant: 'outlined',
          rounded: 'lg',
          density: 'comfortable',
          class: 'input-modern',
        },
        VSelect: {
          variant: 'outlined',
          rounded: 'lg',
          density: 'comfortable',
          class: 'select-modern',
        },
        VDataTable: {
          class: 'table-modern',
          fixedHeader: true,
          hover: true,
        },
        VChip: {
          rounded: 'lg',
          size: 'default',
          class: 'chip-modern',
        },
        VDialog: {
          class: 'dialog-modern',
          maxWidth: '600',
        },
        VAlert: {
          rounded: 'lg',
          variant: 'tonal',
          class: 'alert-modern',
        },
        VProgressLinear: {
          rounded: true,
          height: '6',
        },
        VProgressCircular: {
          width: '3',
        },
      },
    },
  },
});