- Set explicit 60px height on construction banner
- Use proper flexbox centering in banner container
- Apply top: 60px to navigation when banner is present
- Add smooth transition for banner show/hide
- Remove CSS that moved navigation position (was causing alignment issues)
- Add body padding instead to make room for banner
- Navigation now stays at top:0 with proper internal alignment maintained
- Add specific CSS rules to maintain proper vertical alignment
- Ensure navigation items stay centered when banner pushes nav down
- Fix visual offset issue between logo and navigation items
- Add ConstructionBanner component with warning icon and phone number
- Integrate banner into ClientLayout above all content
- Add CSS to automatically adjust navigation position when banner is visible
- Banner is dismissible with localStorage persistence
- Phone number: (719) 698-9004 for bookings
- Yellow/amber theme matching dark design
Update documentation to reflect that Next.js Image component is not
compatible with Cloudflare Workers runtime. Document the use of native
lazy loading as the solution.
🐛 Bug Fix:
The Next.js <Image> component requires Node.js APIs that aren't available
in Cloudflare Workers runtime, causing 'Image constructor: new is required' errors.
Changes:
- Revert hero-section.tsx to use background-image CSS
- Revert artists-section.tsx to use native <img> tags
- Add loading='lazy' attributes for native lazy loading
- Keep images.unoptimized: true in next.config.mjs
- Add clear comment explaining Cloudflare compatibility requirement
✅ What's Still Working:
- All SEO improvements (metadata, Open Graph, Twitter Cards)
- JSON-LD structured data (LocalBusiness, Organization)
- Canonical URLs on all pages
- Font preloading
- Page-specific metadata
Note: Native <img> tags with loading='lazy' provide basic optimization
without requiring Next.js Image APIs. For Cloudflare R2 image optimization,
consider using Cloudflare Images service separately.
Issue: #GH-419 (React error)
Platform: Cloudflare Workers
- Enhanced .gitignore with Next.js 15, Cloudflare, and modern tooling patterns
- Added comprehensive coverage for .open-next/ and .wrangler/ build directories
- Removed accidentally committed build artifacts from version control
- Added patterns for Vitest, Supabase, Tanstack Query, and other dependencies
Routing: update homepage ArtistsSection and ArtistsPageSection to link to /artists/{slug} and /book?artist={slug}. Artists grid already used slugs.\n\nAdmin: remove JSON.parse on specialties; treat as arrays with backward-compat.\n\nMigration: generate UUIDs with crypto.randomUUID(), ensure unique slugs, preserve user↔artist↔portfolio mapping.\n\nDB: parse specialties to arrays consistently and include createdAt for admin use.\n\nDev: wrangler dev port changes to avoid conflicts; MIGRATE_TOKEN set in wrangler.toml.\n\nDocs: add artist_routing_fix_implementation_plan.md.
### 1. __artists-grid.tsx__ (Main Artist Browsing)
- Uses hook from
- Fetches from endpoint
- Includes loading states, error handling, and filtering
- __Impact:__ Primary artist browsing experience now fully API-driven
### 2. __artist-portfolio.tsx__ (Individual Artist Pages)
- Uses hook
- Fetches from endpoint
- Fixed all TypeScript errors (changed image ID from number to string)
- Added loading/error states
- __Impact:__ Artist detail pages now fully API-driven
### 3. __booking-form.tsx__ (Artist Selection Dropdown)
- Uses hook for artist selection
- Updated to use API data structure ( array, , etc.)
- Added loading state for dropdown
- __Impact:__ Booking flow now uses real artist data
## ⚠️ REMAINING (Decorative/Marketing Components)
Two complex components still use hardcoded :
### 4. __artists-section.tsx__ (Homepage Hero - 348 lines)
- Homepage marketing section with complex parallax scrolling
- Uses hardcoded artist data for visual cards
- __Non-blocking:__ This is a decorative homepage element
### 5. __artists-page-section.tsx__ (Artists Page Section - 413 lines)
- Full-page artists showcase with parallax effects
- Uses hardcoded artist data for visual layout
- __Non-blocking:__ Alternative to artists-grid.tsx (which IS using API)
##
Implements backend infrastructure for loading artist profiles from Cloudflare D1 database instead of static data.
Database Changes:
- Add slug column migration for SEO-friendly URLs (0001_add_artist_slug.sql)
- Enhanced data migration script with slug generation
- Support for all artist fields from data/artists.ts
Type Definitions:
- Add slug field to Artist interface
- Create ArtistWithPortfolio type for full artist data
- Create PublicArtist type for sanitized API responses
- Add ArtistFilters type for query parameters
- Add ArtistDashboardStats for analytics
Database Functions (lib/db.ts):
- getPublicArtists() - fetch active artists with portfolio and filtering
- getArtistWithPortfolio() - fetch single artist with full portfolio
- getArtistBySlug() - fetch by URL-friendly slug
- getArtistByUserId() - fetch by user ID for dashboard
- Enhanced getArtists() with JSON parsing
API Endpoints:
- Updated GET /api/artists - filtering, pagination, portfolio images
- Created GET /api/artists/[id] - fetch by ID or slug
- Created PUT /api/artists/[id] - update with authorization
- Created DELETE /api/artists/[id] - soft delete (admin only)
- Created GET /api/artists/me - current artist profile
React Hooks (hooks/use-artist-data.ts):
- useArtists() - fetch with filtering
- useArtist() - fetch single artist
- useCurrentArtist() - logged-in artist
- useUpdateArtist(), useCreateArtist(), useDeleteArtist() - mutations
Frontend Components:
- Refactored artists-grid.tsx to use API with loading/error states
- Use database field names (slug, specialties, portfolioImages)
- Display profile images from portfolio
- Client-side filtering by specialty
Files Modified:
- sql/migrations/0001_add_artist_slug.sql (new)
- types/database.ts (enhanced)
- lib/data-migration.ts (enhanced)
- lib/db.ts (enhanced)
- app/api/artists/route.ts (updated)
- app/api/artists/[id]/route.ts (new)
- app/api/artists/me/route.ts (new)
- hooks/use-artist-data.ts (new)
- components/artists-grid.tsx (refactored)
Remaining work: Artist portfolio page, artist dashboard, admin enhancements
Ref: artist_profile_refactor_implementation_plan.md
