Competition Page Dynamic OG Image - Implementation Plan

competition-og-image-plan.md

Competition Page Dynamic OG Image

Issue ID: thewodapp-0fa
Status: Closed
Priority: P2

Overview

Add dynamic Open Graph images for competition pages that display competition-specific branding, dates, and registration status.

---

Current State

• Competition page at /compete/[slug]/page.tsx has basic generateMetadata
• OG image uses generic route: /api/og?title={name}
• Competition schema has: profileImageUrl, bannerImageUrl, name, description, startDate, endDate, registrationOpensAt, registrationClosesAt

Available Data for Dynamic OG

Field	Usage
competition.profileImageUrl	Logo (fallback to wodsmith logo)
competition.name	Title
competition.startDate / endDate	Competition dates
competition.registrationOpensAt / registrationClosesAt	Registration badge

---

Implementation Plan

Files Created

• apps/wodsmith/src/app/api/og/competition/route.tsx

Files Modified

• apps/wodsmith/src/app/(compete)/compete/[slug]/page.tsx (generateMetadata only)

Data Flow

1. Competition page generates OG URL: /api/og/competition?slug={slug}
2. OG route calls getCompetition(slug) to fetch data
3. Renders ImageResponse with competition branding

---

Task 1: Create OG Route

Issue ID: thewodapp-0fa.1

Query Parameters

• slug (required) - competition slug used to fetch competition data

Design Elements

1. Logo section (top-left)

   • Use competition.profileImageUrl if set
   • Fall back to SITE_URL/wodsmith-logo-no-text.png

2. Title section

   • competition.name prominently displayed

3. Dates section

   • Competition dates: startDate - endDate (always shown)
   • Format: MMM DD - DD, YYYY or MMM DD, YYYY for single-day events

4. Registration badge (conditional)

   • Show if registrationOpensAt and registrationClosesAt are set
   • States: Registration Open, Opens {date}, Registration Closed
   • Include registration dates when open

Visual Layout (1200x630)

┌────────────────────────────────────────────────────────────┐
│                                                            │
│   ┌──────┐                                                 │
│   │ LOGO │  Competition Title                              │
│   └──────┘  (large, bold)                                  │
│                                                            │
│                                                            │
│   ┌─────────────────────────────────────────────────┐      │
│   │  📅 Jan 15 - 17, 2026                           │      │
│   │                                                 │      │
│   │  Registration Open: Dec 1 - Jan 10              │      │
│   └─────────────────────────────────────────────────┘      │
│                                                            │
│   [wodsmith logo] Wodsmith                                 │
│▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓│
└────────────────────────────────────────────────────────────┘

Registration Badge States

State	Color	Display
Open	Green	Registration Open: Dec 1 - Jan 10
Opens soon	Yellow	Registration Opens Dec 1
Closed	Gray	Registration Closed
No registration	-	Badge omitted

---

Task 2: Update Competition Page Metadata

Issue ID: thewodapp-0fa.2
Depends on: thewodapp-0fa.1

Update /compete/[slug]/page.tsx generateMetadata function:

// Before
url: `/api/og?title=${encodeURIComponent(competition.name)}`

// After
url: `/api/og/competition?slug=${encodeURIComponent(slug)}`

---

Implementation Notes

• Approach: Fetch competition data in OG route (Option A)
  • Cleaner URLs
  • Always fresh data
  • Can add caching if needed
• Calendar icon uses SVG (white #e5e5e5 to match text)
• Single-day events display as Dec 18, 2025 instead of Dec 18 - 18, 2025
• Registration status badges have no indicator dots (clean text only)