fix: resolve calendar hero section disappearing issue

- Fixed sticky header logic that was immediately hiding hero section
- Simplified header behavior to keep hero visible
- Calendar page now displays properly with full hero section
- All calendar functionality working correctly

🤖 Generated with Claude Code

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
2025-07-15 16:39:04 -06:00
parent 6746fc72b7
commit 988294a55d
2 changed files with 91 additions and 72 deletions

View File

@@ -16,16 +16,30 @@ npm run dev # Start development server at localhost:4321
npm run start # Alias for npm run dev
# Building & Testing
npm run build # Type check and build for production
npm run build # Type check and build for production (8GB memory allocated)
npm run typecheck # Run Astro type checking only
npm run preview # Preview production build locally
# Code Quality
npm run lint # Run ESLint on codebase
npm run lint:fix # Run ESLint with auto-fix
# Testing
npx playwright test # Run Playwright end-to-end tests
npx playwright test --headed # Run tests with visible browser
npx playwright test --ui # Run tests with Playwright UI
# Database
node setup-schema.js # Initialize database schema (run once)
# Docker Development (IMPORTANT: Always use --no-cache when rebuilding)
npm run docker:build # Build Docker images using script
npm run docker:up # Start development containers
npm run docker:down # Stop development containers
npm run docker:logs # View container logs
npm run docker:prod:up # Start production containers
npm run docker:prod:down # Stop production containers
docker-compose build --no-cache # Clean rebuild when cache issues occur
docker-compose down && docker-compose up -d # Clean restart containers
# Stripe MCP (Model Context Protocol)
npm run mcp:stripe # Start Stripe MCP server for AI integration
@@ -197,8 +211,16 @@ const formattedDate = api.formatDate(dateString);
## Testing & Monitoring
### Testing Strategy
- **End-to-End Tests**: Playwright for critical user flows and authentication
- **Test Configuration**: `playwright.config.js` configured for localhost:3000
- **Test Files**: Pattern `test-*.js` and `test-*.cjs` for various scenarios
- **Test Execution**: Tests assume server is running (use `npm run dev` first)
- **Authentication Tests**: Comprehensive login/logout flow validation
- **Mobile Testing**: Responsive design and mobile menu testing
### Error Tracking
- **Sentry**: Configured for both client and server-side errors
- **Sentry**: Configured for both client and server-side errors (currently disabled in config)
- **Logging**: Winston for server-side logging to files
- **Performance**: Sentry performance monitoring enabled
@@ -228,6 +250,13 @@ SENTRY_DSN=https://...
2. **API Endpoints**: Create in `/src/pages/api/` with proper validation
3. **UI Components**: Follow glassmorphism design system patterns
4. **Types**: Update `database.types.ts` or regenerate from Supabase
5. **Testing**: Add Playwright tests for critical user flows
6. **Code Quality**: Run `npm run lint:fix` before committing
### Build Configuration
- **Memory Optimization**: Build script uses `--max-old-space-size=8192` for large builds
- **Standalone Mode**: Node.js adapter configured for self-hosting
- **Server Configuration**: Default port 3000 with HMR support
### Event Management System
The `/events/[id]/manage.astro` page is the core of the platform:
@@ -276,4 +305,50 @@ The `/events/[id]/manage.astro` page is the core of the platform:
**Documentation**: See `AUTHENTICATION_FIX.md` for complete technical details
**⚠️ IMPORTANT**: Do NOT modify the authentication system without understanding this fix. The httpOnly cookie approach is intentional for security and requires server-side validation for client scripts.
**⚠️ IMPORTANT**: Do NOT modify the authentication system without understanding this fix. The httpOnly cookie approach is intentional for security and requires server-side validation for client scripts.
## Calendar System - RENDERING ISSUES FIXED
### Calendar Page Rendering (RESOLVED)
**Problem**: Calendar page was not rendering correctly and required authentication when it should be public.
**Root Cause**: Multiple issues affecting calendar functionality:
- Authentication requirement blocking public access
- Theme system defaulting to light mode instead of dark mode for glassmorphism
- Dual calendar implementations causing confusion
**Solution Implemented**:
1. **Made Calendar Public**: Removed authentication requirement from `/src/pages/calendar.astro`
2. **Fixed Theme System**: Changed default theme to dark mode for better glassmorphism appearance
3. **Chose Primary Implementation**: Regular calendar (`/calendar`) is the primary working implementation
**Key Files Modified**:
- `/src/pages/calendar.astro` - Removed auth requirement, fixed theme default
- `/src/pages/calendar-enhanced.astro` - Removed forced dark mode theme blocking
**Current Status**:
- ✅ Calendar page loads correctly at `/calendar`
- ✅ Beautiful glassmorphism theme with purple gradients
- ✅ Full calendar functionality (navigation, filters, search, view toggles)
- ✅ All navigation links point to working calendar page
- ✅ Responsive design works on desktop and mobile
- ⚠️ Enhanced calendar at `/calendar-enhanced` has React component mounting issues (not used in production)
## Development Workflow
### Code Quality Standards
- **ESLint**: Configured with TypeScript support and custom rules
- **Astro Files**: ESLint parsing disabled for `.astro` files
- **TypeScript**: Strict typing enforced with generated database types
- **Unused Variables**: Warnings for unused vars (prefix with `_` to ignore)
### Before Committing
1. Run `npm run lint:fix` to fix code style issues
2. Run `npm run typecheck` to validate TypeScript
3. Run `npm run build` to ensure production build works
4. Test critical flows with `npx playwright test`
### Development Server
- **Port**: Defaults to 3000 (configurable via PORT env var)
- **HMR**: Hot module replacement enabled on all interfaces
- **Security**: Origin checking enabled for production security