feat: add race cover image extraction

backend/migrations/003_cover_image_url.sql

@@ -0,0 +1,2 @@
+ALTER TABLE races
+  ADD COLUMN IF NOT EXISTS cover_image_url TEXT;

backend/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "calendar-run-backend",
-  "version": "1.2.2",
+  "version": "1.3.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "calendar-run-backend",
-      "version": "1.2.2",
+      "version": "1.3.0",
       "dependencies": {
         "cors": "^2.8.5",
         "csv-parse": "^5.6.0",

backend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "calendar-run-backend",
-  "version": "1.2.2",
+  "version": "1.3.0",
   "private": true,
   "scripts": {
     "build": "tsc",

backend/src/db.ts

@@ -24,6 +24,7 @@ function mockRowFromInsert(sql: string, params: unknown[]): RaceRow {
       distance_km: "0",
       status: null,
       official_url: null,
+      cover_image_url: null,
       start_time: null,
       cluster_schedule: null,
       bib_pickup: null,
@@ -47,6 +48,7 @@ function mockRowFromInsert(sql: string, params: unknown[]): RaceRow {
     distance_km: String(row.distance_km ?? "0"),
     status: row.status != null ? String(row.status) : null,
     official_url: row.official_url != null ? String(row.official_url) : null,
+    cover_image_url: row.cover_image_url != null ? String(row.cover_image_url) : null,
     start_time: row.start_time != null ? String(row.start_time) : null,
     cluster_schedule: row.cluster_schedule != null ? String(row.cluster_schedule) : null,
     bib_pickup: row.bib_pickup != null ? String(row.bib_pickup) : null,
@@ -108,7 +110,19 @@ function createMockPool(): Pool {
       if (!existing) {
         return emptyResult();
       }
+      const setMatch = sql.match(/UPDATE races SET (.+) WHERE id =/);
       const updated = { ...existing, updated_at: new Date() };
+      const setColumns =
+        setMatch?.[1]
+          .split(",")
+          .map((part) => part.trim())
+          .filter((part) => !part.startsWith("updated_at"))
+          .map((part) => part.split("=")[0]?.trim())
+          .filter((col): col is string => Boolean(col)) ?? [];
+
+      setColumns.forEach((col, index) => {
+        (updated as unknown as Record<string, unknown>)[col] = p[index] ?? null;
+      });
       store.set(id, updated);
       return {
         rows: [updated as unknown as T],

backend/src/mappers/race.ts

@@ -9,6 +9,7 @@ export interface RaceRow {
   distance_km: string;
   status: string | null;
   official_url: string | null;
+  cover_image_url: string | null;
   start_time: string | null;
   cluster_schedule: string | null;
   bib_pickup: string | null;
@@ -28,6 +29,7 @@ export interface RaceDto {
   distanceKm: number;
   status: string | null;
   officialUrl: string | null;
+  coverImageUrl: string | null;
   startTime: string | null;
   clusterSchedule: string | null;
   bibPickup: string | null;
@@ -64,6 +66,7 @@ export function rowToDto(row: RaceRow): RaceDto {
     distanceKm: parseFloat(row.distance_km),
     status: row.status,
     officialUrl: row.official_url,
+    coverImageUrl: row.cover_image_url,
     startTime: row.start_time,
     clusterSchedule: row.cluster_schedule,
     bibPickup: row.bib_pickup,
@@ -83,6 +86,7 @@ const FIELD_MAP: Record<string, string> = {
   distanceKm: "distance_km",
   status: "status",
   officialUrl: "official_url",
+  coverImageUrl: "cover_image_url",
   startTime: "start_time",
   clusterSchedule: "cluster_schedule",
   bibPickup: "bib_pickup",

backend/src/raceCoverImage.ts

@@ -0,0 +1,103 @@
+const IMAGE_META_KEYS = new Set([
+  "og:image",
+  "og:image:url",
+  "twitter:image",
+  "twitter:image:src",
+]);
+
+const FETCH_TIMEOUT_MS = 5_000;
+
+function getAttribute(tag: string, name: string): string | null {
+  const pattern = new RegExp(`${name}\\s*=\\s*["']([^"']+)["']`, "i");
+  return tag.match(pattern)?.[1] ?? null;
+}
+
+function toHttpUrl(value: string, baseUrl: string): string | null {
+  try {
+    const url = new URL(value, baseUrl);
+    return url.protocol === "http:" || url.protocol === "https:" ? url.href : null;
+  } catch {
+    return null;
+  }
+}
+
+function isRuncRunUrl(value: string): boolean {
+  try {
+    const hostname = new URL(value).hostname.toLowerCase();
+    return hostname === "runc.run" || hostname.endsWith(".runc.run");
+  } catch {
+    return false;
+  }
+}
+
+function findRuncIntroImage(html: string, baseUrl: string): string | null {
+  const introMatch = html.match(/<div\b[^>]*class=["'][^"']*\brun-intro__image\b[^"']*["'][^>]*>[\s\S]*?<img\b[^>]*>/i);
+  if (!introMatch) {
+    return null;
+  }
+
+  const src = getAttribute(introMatch[0], "src");
+  return src ? toHttpUrl(src, baseUrl) : null;
+}
+
+function findMetaImage(html: string, baseUrl: string): string | null {
+  const tags = html.match(/<meta\b[^>]*>/gi) ?? [];
+
+  for (const tag of tags) {
+    const key = (getAttribute(tag, "property") || getAttribute(tag, "name") || "").toLowerCase();
+    if (!IMAGE_META_KEYS.has(key)) {
+      continue;
+    }
+
+    const content = getAttribute(tag, "content");
+    if (!content) {
+      continue;
+    }
+
+    const imageUrl = toHttpUrl(content, baseUrl);
+    if (imageUrl) {
+      return imageUrl;
+    }
+  }
+
+  return null;
+}
+
+export function extractRaceCoverImageFromHtml(html: string, pageUrl: string): string | null {
+  if (isRuncRunUrl(pageUrl)) {
+    const runcImage = findRuncIntroImage(html, pageUrl);
+    if (runcImage) {
+      return runcImage;
+    }
+  }
+
+  return findMetaImage(html, pageUrl);
+}
+
+export async function extractRaceCoverImage(officialUrl: string): Promise<string | null> {
+  const normalizedUrl = toHttpUrl(officialUrl, officialUrl);
+  if (!normalizedUrl) {
+    return null;
+  }
+
+  const controller = new AbortController();
+  const timeout = setTimeout(() => controller.abort(), FETCH_TIMEOUT_MS);
+
+  try {
+    const response = await fetch(normalizedUrl, {
+      redirect: "follow",
+      signal: controller.signal,
+    });
+
+    if (!response.ok) {
+      return null;
+    }
+
+    const html = await response.text();
+    return extractRaceCoverImageFromHtml(html, response.url || normalizedUrl);
+  } catch {
+    return null;
+  } finally {
+    clearTimeout(timeout);
+  }
+}

backend/src/routes/races.ts

@@ -1,6 +1,7 @@
 import { Router, Request, Response } from "express";
 import { pool } from "../db";
 import { rowToDto, bodyToColumns, RaceRow } from "../mappers/race";
+import { extractRaceCoverImage } from "../raceCoverImage";
 
 const router = Router();
 
@@ -117,7 +118,15 @@ router.post("/races", async (req: Request, res: Response) => {
     return;
   }
 
-  const { columns, values } = bodyToColumns(body);
+  const payload = { ...body };
+  const hasManualCover = typeof payload.coverImageUrl === "string" && payload.coverImageUrl.trim() !== "";
+  const hasOfficialUrl = typeof payload.officialUrl === "string" && payload.officialUrl.trim() !== "";
+
+  if (!hasManualCover && hasOfficialUrl) {
+    payload.coverImageUrl = await extractRaceCoverImage(payload.officialUrl);
+  }
+
+  const { columns, values } = bodyToColumns(payload);
   columns.unshift("id");
   values.unshift(body.id);
 

backend/test/app.test.ts

@@ -2,6 +2,7 @@ import assert from "node:assert/strict";
 import { test } from "node:test";
 import request from "supertest";
 import { createApp } from "../src/app";
+import { extractRaceCoverImageFromHtml } from "../src/raceCoverImage";
 
 const app = createApp();
 
@@ -45,3 +46,124 @@ test("GET /api/races/:id returns not_found", async () => {
   assert.equal(res.body.error, "not_found");
   assert.ok(Array.isArray(res.body.details));
 });
+
+test("extractRaceCoverImageFromHtml prefers runc.run intro image", () => {
+  const html = `
+    <meta property="og:image" content="https://example.com/og.jpg">
+    <div class="run-intro__image">
+      <div class="run-intro__image-left-shadow"></div>
+      <img src="/uploads/race_landing_header_backgrounds/header.jpg" alt="">
+      <div class="run-intro__image-right-shadow"></div>
+    </div>
+  `;
+
+  assert.equal(
+    extractRaceCoverImageFromHtml(html, "https://aprilrun5km.runc.run/"),
+    "https://aprilrun5km.runc.run/uploads/race_landing_header_backgrounds/header.jpg",
+  );
+});
+
+test("extractRaceCoverImageFromHtml reads Open Graph and Twitter images", () => {
+  assert.equal(
+    extractRaceCoverImageFromHtml(
+      '<meta property="og:image" content="/cover.png">',
+      "https://example.com/race",
+    ),
+    "https://example.com/cover.png",
+  );
+  assert.equal(
+    extractRaceCoverImageFromHtml(
+      '<meta name="twitter:image" content="https://cdn.example.com/twitter.jpg">',
+      "https://example.com/race",
+    ),
+    "https://cdn.example.com/twitter.jpg",
+  );
+});
+
+test("POST /api/races stores manual coverImageUrl", async () => {
+  const coverImageUrl = "https://example.com/manual.jpg";
+  const res = await request(app)
+    .post("/api/races")
+    .send({
+      id: "2026-06-01-manual-cover",
+      date: "2026-06-01",
+      title: "Manual Cover",
+      distanceKm: 10,
+      officialUrl: "https://example.com/race",
+      coverImageUrl,
+    })
+    .expect(201);
+
+  assert.equal(res.body.coverImageUrl, coverImageUrl);
+});
+
+test("POST /api/races auto extracts coverImageUrl from officialUrl", async () => {
+  const originalFetch = globalThis.fetch;
+  globalThis.fetch = async () =>
+    new Response('<meta property="og:image" content="/auto.jpg">', {
+      status: 200,
+      headers: { "content-type": "text/html" },
+    });
+
+  try {
+    const res = await request(app)
+      .post("/api/races")
+      .send({
+        id: "2026-06-02-auto-cover",
+        date: "2026-06-02",
+        title: "Auto Cover",
+        distanceKm: 21.1,
+        officialUrl: "https://example.com/race",
+      })
+      .expect(201);
+
+    assert.equal(res.body.coverImageUrl, "https://example.com/auto.jpg");
+  } finally {
+    globalThis.fetch = originalFetch;
+  }
+});
+
+test("POST /api/races succeeds when cover extraction fails", async () => {
+  const originalFetch = globalThis.fetch;
+  globalThis.fetch = async () => {
+    throw new Error("network down");
+  };
+
+  try {
+    const res = await request(app)
+      .post("/api/races")
+      .send({
+        id: "2026-06-03-cover-fail",
+        date: "2026-06-03",
+        title: "Cover Fail",
+        distanceKm: 5,
+        officialUrl: "https://example.com/race",
+      })
+      .expect(201);
+
+    assert.equal(res.body.coverImageUrl, null);
+  } finally {
+    globalThis.fetch = originalFetch;
+  }
+});
+
+test("PATCH /api/races/:id updates coverImageUrl explicitly", async () => {
+  const id = "2026-06-04-patch-cover";
+  await request(app)
+    .post("/api/races")
+    .send({
+      id,
+      date: "2026-06-04",
+      title: "Patch Cover",
+      distanceKm: 10,
+    })
+    .expect(201);
+
+  const coverImageUrl = "https://example.com/patched.jpg";
+  const res = await request(app)
+    .patch(`/api/races/${id}`)
+    .send({ coverImageUrl })
+    .expect(200);
+
+  assert.equal(res.body.coverImageUrl, coverImageUrl);
+});