Sail JADA — Engineering Log

Technical work on sailjada.com and the JADA booking systems

Building Themed Event Pages for Rady Shell Summer Series: Infrastructure, Modals, and CloudFront Deployment

What Was Done

The Queen of San Diego website required expansion to support six additional artists performing at the Rady Shell during summer 2024. The existing event infrastructure only had individual artist pages for Bob Dylan, Paul Simon, Kool and the Gang, Gipsy Kings, and Brandi Carlile. We created new themed pages for Wynonna & Melissa, Sarah McLachlan, Buddy Guy, Weird Al Yankovic, Mariachi USA, and Bonnie Raitt—each with custom CSS theming, integrated booking modals, and proper infrastructure provisioning across S3, CloudFront, and Route53.

Additionally, we resolved a critical UX issue: the "Reserve Now" buttons on all event pages were functioning as anchor tags (using href="#book"), scrolling users down the page rather than opening the booking modal. We unified the button behavior across all 10 artist pages to invoke the modal consistently.

Technical Architecture and Implementation

Page Generation and Theming Strategy

Rather than manually creating 10 individual HTML files, we leveraged the existing render pipeline. The template-based approach lives in /Users/cb/Documents/repos/sites/queenofsandiego.com/rady-shell-events/ with a render script that generates artist pages from a configuration file.

Each artist page follows this structure:

  • Custom CSS theme variables (primary color, accent colors, background imagery)
  • Hero section with artist branding
  • Event details (date, time, venue) pulled from events.json
  • Booking modal (Stripe integration via Google Apps Script)
  • Sticky navigation bar with themed CTA button
  • Responsive design optimized for mobile

The critical decision was to avoid hand-coding HTML for each artist. Instead, we created a templating system where CSS classes like .artist-theme-wynonnamelissa encapsulate all visual customization. This allowed us to:

  • Apply consistent theming across pages in ~30 lines of CSS per artist
  • Deploy all pages through a single build process
  • Maintain a single source of truth for modal behavior and booking logic

Modal Implementation and Button Wiring

The booking modal is powered by a Google Apps Script backend (file: RadyShellEvents.gs) that:

  • Fetches real-time event pricing and availability from a configuration object
  • Validates passenger contact information
  • Processes Stripe payments
  • Returns event_status (available, sold_out, not_started) to the frontend

Button wiring required fixing two distinct behaviors:

  • Book Now buttons: Already correctly invoked the modal via JavaScript event listeners
  • Reserve Now buttons: Were anchor tags with href="#book"—we replaced these with button elements and bound them to the same modal trigger function

The unified approach meant running a patch script (/tmp/patch_artist_pages.py) across all 10 pages to:

  • Find all anchor tags with href="#book"
  • Convert them to <button> elements with class open-modal
  • Ensure consistent styling via existing CSS rules

Example modal trigger in the HTML:

<button class="cta-button open-modal" data-event="bob-dylan">
  Book Now
</button>

Corresponding JavaScript event listener:

document.querySelectorAll('.open-modal').forEach(btn => {
  btn.addEventListener('click', () => {
    showBookingModal(btn.dataset.event);
  });
});

CSS Theme Customization

Each artist's visual identity was preserved through scoped CSS variables. For example, the Wynonna & Melissa page uses:

  • Primary color: Deep purple (#6B4C9A)
  • Accent: Rose gold (#D4A574)
  • Background imagery: Concert photography licensed from artist promotional materials

These are applied at the page level using a body class:

<body class="artist-theme-wynonnamelissa">

The CSS then scopes all elements:

.artist-theme-wynonnamelissa .hero-section {
  background-color: #6B4C9A;
  background-image: url('/assets/wynonnamelissa/hero-bg.jpg');
}

.artist-theme-wynonnamelissa .cta-button {
  background-color: #D4A574;
}

Infrastructure Provisioning

DNS and SSL Certificate Setup

Each new artist page required a dedicated subdomain. Using Route53 in the queenofsandiego.com hosted zone, we created six CNAME records:

  • wynonnamelissa.queenofsandiego.com → CloudFront distribution alias
  • sarahmclachlan.queenofsandiego.com → CloudFront distribution alias
  • buddyguy.queenofsandiego.com → CloudFront distribution alias
  • weirdal.queenofsandiego.com → CloudFront distribution alias
  • mariachiusa.queenofsandiego.com → CloudFront distribution alias
  • bonnieraitt.queenofsandiego.com → CloudFront distribution alias

AWS Certificate Manager provisioned a wildcard certificate (*.queenofsandiego.com) covering all subdomains. This approach avoided the overhead of managing six separate certificates while maintaining TLS encryption for all artist pages.

S3 and CloudFront Configuration

Each artist page is deployed to a subdirectory in the primary S3 bucket: queenofsandiego-event-pages. Structure:

s3://queenofsandiego-event-pages/
  ├── bobdylan/
  │   ├── index.html
  │   ├── assets/
  │   └── styles.css
  ├── wynonnamelissa/
  ├── sarahmclachlan/
  ├── buddyguy/
  ├── weirdal/
  ├── mariachiusa/
  └── bonnieraitt/

Six CloudFront distributions were created, each with:

  • Origin: S3 bucket subdirectory (via Origin Path)
  • Default Root Object: index.html
  • CNAME Alias: Artist subdomain
  • SSL Certificate: Wildcard certificate from ACM
  • Cache Behavior: 5-minute TTL for HTML, 30-day TTL for assets