From df3ae729977b0d053df9e47d2c68ead1a8139eb0 Mon Sep 17 00:00:00 2001
From: TSVRN9 <66744142+TSVRN9@users.noreply.github.com>
Date: Wed, 19 Aug 2026 09:59:40 -0400
Subject: [PATCH 1/2] web UI: style press/events/newsletter content screens
 (#41)

Restyles the three surviving content screens (FAQ/Staff cut in #50/#51,
not touched) with #43's shared component classes -- .page-title,
.label-rule, .card, .empty-state, .badge -- sharing one list/card
pattern instead of bare <ul><li>. Events' featured-image box uses
object-contain + a wider box (banners are ~1024x432, not square like
press logos) so a fixed square object-cover crop doesn't slice the
banner. New e2e/content-screens.spec.ts covers rendering, graceful
image degradation, empty states, and the shared +error.svelte path for
all three screens.
---
 web/e2e/content-screens.spec.ts        | 203 +++++++++++++++++++++++++
 web/src/routes/events/+page.svelte     |  51 +++++--
 web/src/routes/newsletter/+page.svelte |  33 ++--
 web/src/routes/press/+page.svelte      |  41 +++--
 4 files changed, 295 insertions(+), 33 deletions(-)
 create mode 100644 web/e2e/content-screens.spec.ts

diff --git a/web/e2e/content-screens.spec.ts b/web/e2e/content-screens.spec.ts
new file mode 100644
index 00000000..0254d507
--- /dev/null
+++ b/web/e2e/content-screens.spec.ts
@@ -0,0 +1,203 @@
+import { test, expect, type Page } from "@playwright/test";
+import type { DiningEvent, NewsletterIssue, PressRelease } from "@udine/shared";
+
+// Coverage for #41: press/events/newsletter styled with #35/#43's shared component classes
+// (.card, .page-title, .empty-state, .badge, .label-rule), sharing one list/card pattern across
+// all three. FAQ and Staff Directory were cut from the product entirely (#50/#51, see #41's
+// 2026-08-19 scope comment) — not covered here, don't add them back.
+//
+// These are public, anonymous-first content screens (CLAUDE.md) — no session/auth setup anywhere
+// in this file, on purpose.
+
+// Same hydration pitfall shell.spec.ts documents: a click before SvelteKit's client router has
+// attached falls through to a native full-page nav, which runs the target load server-side
+// (invisible to page.route()) instead of client-side, so a mocked /api/* response would never be
+// consumed. Copied verbatim from shell.spec.ts rather than imported -- it's a small page-local
+// proof, not shared app logic.
+async function disablePreload(page: Page) {
+	await page.evaluate(() => document.body.setAttribute("data-sveltekit-preload-data", "off"));
+}
+
+async function proveHydrated(page: Page) {
+	const star = page.getByRole("button", { name: "favorite" }).first();
+	await expect(async () => {
+		await star.click();
+		await expect(star).toHaveText("★");
+	}).toPass({ timeout: 15_000 });
+}
+
+// Press/events/newsletter all live behind the "Dining Info" disclosure (see +layout.svelte) --
+// this drives a real client-side nav into one of them from a hydrated home page, the same
+// technique shell.spec.ts uses, so a mocked /api/* route is guaranteed to be the one consumed.
+async function gotoContentPage(page: Page, linkName: string) {
+	await page.goto("/");
+	await disablePreload(page);
+	await proveHydrated(page);
+	await page.locator("details summary").click();
+	await page.getByRole("link", { name: linkName }).click();
+}
+
+const RELEASES: PressRelease[] = [
+	{
+		title: "UMass Dining Wins Statewide Award",
+		url: "https://umassdining.com/press/award",
+		image: "https://umassdining.com/sites/default/files/press/award.jpg",
+		date: "2026-08-01",
+	},
+	{
+		// No image -- must degrade gracefully instead of a broken <img>.
+		title: "New Executive Chef Announced",
+		url: "https://umassdining.com/press/chef",
+		image: "",
+		date: "2026-07-15",
+	},
+];
+
+const EVENTS: DiningEvent[] = [
+	{
+		title: "Fall Kickoff BBQ",
+		featuredImage: "https://umassdining.com/sites/default/files/events/bbq.jpg",
+		pdfLink: "https://umassdining.com/sites/default/files/events/bbq.pdf",
+		externalLink: "",
+		expirationDate: "2026-09-01T00:00:00.000Z",
+		isFeatured: true,
+	},
+	{
+		// No featured image, no pdf link -- must degrade gracefully, only the external link shows.
+		title: "Late Night Study Break",
+		featuredImage: "",
+		pdfLink: "",
+		externalLink: "https://umassdining.com/events/study-break",
+		expirationDate: "2026-09-05T00:00:00.000Z",
+		isFeatured: false,
+	},
+];
+
+const ISSUES: NewsletterIssue[] = [
+	{ period: "August 2026", link: "https://umassdining.us1.list-manage.com/track/click?u=abc&id=aug26", content: "" },
+	{ period: "July 2026", link: "https://umassdining.us1.list-manage.com/track/click?u=abc&id=jul26", content: "" },
+];
+
+test.describe("press", () => {
+	test("releases render as cards sharing the site's list/card pattern, with graceful no-image fallback", async ({ page }) => {
+		await page.route("**/api/press**", (route) => route.fulfill({ json: RELEASES }));
+		await gotoContentPage(page, "Press");
+		await expect(page).toHaveURL(/\/press$/);
+
+		const heading = page.getByRole("heading", { name: "Press" });
+		await expect(heading).toHaveClass(/page-title/);
+
+		const cards = page.locator("main li.card");
+		await expect(cards).toHaveCount(2);
+
+		const withImage = cards.filter({ hasText: RELEASES[0].title });
+		await expect(withImage.locator("img")).toHaveAttribute("src", RELEASES[0].image);
+		await expect(withImage.locator("img")).toHaveAttribute("alt", "");
+		const link1 = withImage.getByRole("link", { name: RELEASES[0].title });
+		await expect(link1).toHaveAttribute("href", RELEASES[0].url);
+		await expect(link1).toHaveAttribute("target", "_blank");
+		await expect(withImage).toContainText(RELEASES[0].date);
+
+		const withoutImage = cards.filter({ hasText: RELEASES[1].title });
+		await expect(withoutImage.locator("img")).toHaveCount(0);
+		await expect(withoutImage.getByRole("link", { name: RELEASES[1].title })).toHaveAttribute("href", RELEASES[1].url);
+	});
+
+	test("no releases shows the shared empty-state panel, not a bare paragraph", async ({ page }) => {
+		await page.route("**/api/press**", (route) => route.fulfill({ json: [] }));
+		await gotoContentPage(page, "Press");
+		await expect(page).toHaveURL(/\/press$/);
+
+		await expect(page.locator(".empty-state")).toBeVisible();
+		await expect(page.locator("main li.card")).toHaveCount(0);
+	});
+
+	test("an upstream failure renders the shared error page, not a styled-but-broken press screen", async ({ page }) => {
+		await page.route("**/api/press**", (route) => route.fulfill({ status: 502, body: "bad gateway" }));
+		await gotoContentPage(page, "Press");
+
+		await page.waitForURL(/\/press$/, { timeout: 15_000 });
+		await expect(page.getByRole("heading", { name: /Couldn.t reach UMass Dining/ })).toBeVisible({ timeout: 15_000 });
+		await expect(page.getByRole("link", { name: "Back to dining halls" })).toBeVisible();
+	});
+});
+
+test.describe("events", () => {
+	test("events render as cards with a featured badge and only the links that exist", async ({ page }) => {
+		await page.route("**/api/events**", (route) => route.fulfill({ json: EVENTS }));
+		await gotoContentPage(page, "Events");
+		await expect(page).toHaveURL(/\/events$/);
+
+		const heading = page.getByRole("heading", { name: "Events" });
+		await expect(heading).toHaveClass(/page-title/);
+
+		const cards = page.locator("main li.card");
+		await expect(cards).toHaveCount(2);
+
+		const featured = cards.filter({ hasText: EVENTS[0].title });
+		await expect(featured.locator(".badge")).toHaveText(/Featured/i);
+		await expect(featured.locator("img")).toHaveAttribute("src", EVENTS[0].featuredImage);
+		await expect(featured.getByRole("link", { name: "Details" })).toHaveAttribute("href", EVENTS[0].pdfLink);
+		await expect(featured.getByRole("link", { name: "More info" })).toHaveCount(0);
+
+		const plain = cards.filter({ hasText: EVENTS[1].title });
+		await expect(plain.locator(".badge")).toHaveCount(0);
+		await expect(plain.locator("img")).toHaveCount(0);
+		await expect(plain.getByRole("link", { name: "Details" })).toHaveCount(0);
+		await expect(plain.getByRole("link", { name: "More info" })).toHaveAttribute("href", EVENTS[1].externalLink);
+	});
+
+	test("no events shows the shared empty-state panel", async ({ page }) => {
+		await page.route("**/api/events**", (route) => route.fulfill({ json: [] }));
+		await gotoContentPage(page, "Events");
+		await expect(page).toHaveURL(/\/events$/);
+
+		await expect(page.locator(".empty-state")).toBeVisible();
+		await expect(page.locator("main li.card")).toHaveCount(0);
+	});
+
+	test("an upstream failure renders the shared error page", async ({ page }) => {
+		await page.route("**/api/events**", (route) => route.fulfill({ status: 502, body: "bad gateway" }));
+		await gotoContentPage(page, "Events");
+
+		await page.waitForURL(/\/events$/, { timeout: 15_000 });
+		await expect(page.getByRole("heading", { name: /Couldn.t reach UMass Dining/ })).toBeVisible({ timeout: 15_000 });
+		await expect(page.getByRole("link", { name: "Back to dining halls" })).toBeVisible();
+	});
+});
+
+test.describe("newsletter", () => {
+	test("issues render as cards linking out to the external archive", async ({ page }) => {
+		await page.route("**/api/newsletter**", (route) => route.fulfill({ json: ISSUES }));
+		await gotoContentPage(page, "Newsletter");
+		await expect(page).toHaveURL(/\/newsletter$/);
+
+		const heading = page.getByRole("heading", { name: "Newsletter" });
+		await expect(heading).toHaveClass(/page-title/);
+
+		const cards = page.locator("main li.card");
+		await expect(cards).toHaveCount(2);
+
+		const link1 = cards.getByRole("link", { name: ISSUES[0].period });
+		await expect(link1).toHaveAttribute("href", ISSUES[0].link);
+		await expect(link1).toHaveAttribute("target", "_blank");
+	});
+
+	test("no issues shows the shared empty-state panel", async ({ page }) => {
+		await page.route("**/api/newsletter**", (route) => route.fulfill({ json: [] }));
+		await gotoContentPage(page, "Newsletter");
+		await expect(page).toHaveURL(/\/newsletter$/);
+
+		await expect(page.locator(".empty-state")).toBeVisible();
+		await expect(page.locator("main li.card")).toHaveCount(0);
+	});
+
+	test("an upstream failure renders the shared error page", async ({ page }) => {
+		await page.route("**/api/newsletter**", (route) => route.fulfill({ status: 502, body: "bad gateway" }));
+		await gotoContentPage(page, "Newsletter");
+
+		await page.waitForURL(/\/newsletter$/, { timeout: 15_000 });
+		await expect(page.getByRole("heading", { name: /Couldn.t reach UMass Dining/ })).toBeVisible({ timeout: 15_000 });
+		await expect(page.getByRole("link", { name: "Back to dining halls" })).toBeVisible();
+	});
+});
diff --git a/web/src/routes/events/+page.svelte b/web/src/routes/events/+page.svelte
index 792d1768..0d6abf37 100644
--- a/web/src/routes/events/+page.svelte
+++ b/web/src/routes/events/+page.svelte
@@ -3,19 +3,44 @@
 	let { data }: PageProps = $props();
 </script>
 
-<h1>Events</h1>
+<header>
+	<h1 class="page-title">Events</h1>
+	<div class="label-rule mt-2 text-gold-500"></div>
+	<p class="mt-3 max-w-prose text-ink-900/70">Dining hall events from UMass Dining.</p>
+</header>
 
 {#if data.events.length === 0}
-	<p>No events right now.</p>
+	<div class="empty-state mt-6">
+		<p class="font-display text-lg uppercase">No events right now.</p>
+		<p class="mt-2 text-sm">Check back later for dining hall events.</p>
+	</div>
+{:else}
+	<ul class="mt-6 flex flex-col gap-3">
+		{#each data.events as event (event.title + event.expirationDate)}
+			<li class="card flex items-center gap-4 px-4 py-4">
+				{#if event.featuredImage}
+					<!-- UMass Dining's event images are wide banners (~1024x432), not square thumbnails like
+					     press logos -- a fixed square with object-cover crops most of the banner off.
+					     w-28 + object-contain shows the whole image instead of guessing a crop. -->
+					<img src={event.featuredImage} alt="" class="h-16 w-28 shrink-0 rounded-sm bg-cream-100 object-contain" />
+				{/if}
+				<div class="min-w-0 flex-1">
+					<p class="font-display text-lg font-semibold text-maroon-900">
+						{#if event.isFeatured}<span class="badge mr-2 bg-gold-500/20 text-maroon-900">Featured</span>{/if}
+						{event.title}
+					</p>
+					{#if event.pdfLink || event.externalLink}
+						<p class="mt-1 flex flex-wrap gap-3 text-sm">
+							{#if event.pdfLink}
+								<a href={event.pdfLink} target="_blank" rel="noreferrer">Details</a>
+							{/if}
+							{#if event.externalLink}
+								<a href={event.externalLink} target="_blank" rel="noreferrer">More info</a>
+							{/if}
+						</p>
+					{/if}
+				</div>
+			</li>
+		{/each}
+	</ul>
 {/if}
-<ul>
-	{#each data.events as event (event.title + event.expirationDate)}
-		<li>
-			{#if event.isFeatured}<strong>★</strong>{/if}
-			{#if event.featuredImage}<img src={event.featuredImage} alt="" style="max-width:80px;vertical-align:middle" />{/if}
-			{event.title}
-			{#if event.pdfLink}<a href={event.pdfLink} target="_blank" rel="noreferrer">(details)</a>{/if}
-			{#if event.externalLink}<a href={event.externalLink} target="_blank" rel="noreferrer">(link)</a>{/if}
-		</li>
-	{/each}
-</ul>
diff --git a/web/src/routes/newsletter/+page.svelte b/web/src/routes/newsletter/+page.svelte
index c9251c04..61a612a0 100644
--- a/web/src/routes/newsletter/+page.svelte
+++ b/web/src/routes/newsletter/+page.svelte
@@ -3,15 +3,30 @@
 	let { data }: PageProps = $props();
 </script>
 
-<h1>Newsletter</h1>
+<header>
+	<h1 class="page-title">Newsletter</h1>
+	<div class="label-rule mt-2 text-gold-500"></div>
+	<p class="mt-3 max-w-prose text-ink-900/70">UMass Dining&rsquo;s newsletter archive.</p>
+</header>
 
 {#if data.issues.length === 0}
-	<p>No newsletter issues right now.</p>
+	<div class="empty-state mt-6">
+		<p class="font-display text-lg uppercase">No newsletter issues right now.</p>
+		<p class="mt-2 text-sm">Check back later for the next issue.</p>
+	</div>
+{:else}
+	<ul class="mt-6 flex flex-col gap-2">
+		{#each data.issues as issue, i (`${issue.link}-${i}`)}
+			<li class="card px-4 py-3">
+				<a
+					href={issue.link}
+					target="_blank"
+					rel="noreferrer"
+					class="font-display font-semibold text-maroon-900 hover:text-maroon-600"
+				>
+					{issue.period}
+				</a>
+			</li>
+		{/each}
+	</ul>
 {/if}
-<ul>
-	{#each data.issues as issue, i (`${issue.link}-${i}`)}
-		<li>
-			<a href={issue.link} target="_blank" rel="noreferrer">{issue.period}</a>
-		</li>
-	{/each}
-</ul>
diff --git a/web/src/routes/press/+page.svelte b/web/src/routes/press/+page.svelte
index c93fa4d5..33eed1c4 100644
--- a/web/src/routes/press/+page.svelte
+++ b/web/src/routes/press/+page.svelte
@@ -3,17 +3,36 @@
 	let { data }: PageProps = $props();
 </script>
 
-<h1>Press</h1>
+<header>
+	<h1 class="page-title">Press</h1>
+	<div class="label-rule mt-2 text-gold-500"></div>
+	<p class="mt-3 max-w-prose text-ink-900/70">Press releases from UMass Dining.</p>
+</header>
 
 {#if data.releases.length === 0}
-	<p>No press releases right now.</p>
+	<div class="empty-state mt-6">
+		<p class="font-display text-lg uppercase">No press releases right now.</p>
+		<p class="mt-2 text-sm">UMass Dining posts these periodically &mdash; check back later.</p>
+	</div>
+{:else}
+	<ul class="mt-6 flex flex-col gap-3">
+		{#each data.releases as release (release.url)}
+			<li class="card flex items-center gap-4 px-4 py-4">
+				{#if release.image}
+					<img src={release.image} alt="" class="h-16 w-16 shrink-0 rounded-sm bg-cream-100 object-contain" />
+				{/if}
+				<div class="min-w-0 flex-1">
+					<a
+						href={release.url}
+						target="_blank"
+						rel="noreferrer"
+						class="font-display text-lg font-semibold text-maroon-900 hover:text-maroon-600"
+					>
+						{release.title}
+					</a>
+					<p class="mt-0.5 font-mono text-xs tracking-widest text-ink-900/50 uppercase">{release.date}</p>
+				</div>
+			</li>
+		{/each}
+	</ul>
 {/if}
-<ul>
-	{#each data.releases as release (release.url)}
-		<li>
-			{#if release.image}<img src={release.image} alt="" style="max-width:80px;vertical-align:middle" />{/if}
-			<a href={release.url} target="_blank" rel="noreferrer">{release.title}</a>
-			({release.date})
-		</li>
-	{/each}
-</ul>

From c2c7d7f2ba37fd0ff396cca654d7bc207be4c8de Mon Sep 17 00:00:00 2001
From: TSVRN9 <66744142+TSVRN9@users.noreply.github.com>
Date: Wed, 19 Aug 2026 10:34:47 -0400
Subject: [PATCH 2/2] Fix broken-image glyph on press/events cards from UMass
 Dining's unresolvable "default" image host

Reviewer-verified: GET /uapp/get_press returns image URLs with a literal host of `default`
(e.g. https://default/sites/default/files/press/images.png) for all releases -- present, so
`{#if image}` passes, but unresolvable, so PR #60's fixed h-16 box now renders a visible
broken-image glyph on every card (pre-#60 it collapsed to 0 height).

Fix, per review: normalize at the source in shared/src/content.ts. New sanitizeImageUrl()
blanks any image URL without a plausible hostname (must contain a dot, or be localhost);
applied in fetchPressReleases and mapEvent, covering both press and events for web and
mobile in one place. Web's press/events +page.ts load functions apply the same sanitizer a
second time on the /api/* response, since Playwright's page.route (used throughout this
suite's e2e mocks, per vertical-slice.spec.ts's own comment) can only intercept
browser-originated requests, not the SvelteKit server process's own outbound fetch to
umassdining.com -- without this second pass the new e2e case couldn't exercise the fix at all.

Also takes the reviewer's nit: removed the three `main li.card` count-0 assertions in the
empty-state specs (press/events/newsletter) -- vacuous, since they'd pass equally whether
the card markup is correct or entirely broken, given there's no data to render either way.
`.empty-state` visibility is the assertion that actually matters.
---
 shared/src/content.test.ts      | 39 +++++++++++++++++++++++++++-
 shared/src/content.ts           | 22 ++++++++++++++--
 web/e2e/content-screens.spec.ts | 45 ++++++++++++++++++++++++++++++---
 web/src/routes/events/+page.ts  |  6 +++--
 web/src/routes/press/+page.ts   |  9 +++++--
 5 files changed, 111 insertions(+), 10 deletions(-)

diff --git a/shared/src/content.test.ts b/shared/src/content.test.ts
index 7e44a49e..c4bfe6c2 100644
--- a/shared/src/content.test.ts
+++ b/shared/src/content.test.ts
@@ -1,6 +1,6 @@
 import assert from "node:assert/strict";
 import { test } from "node:test";
-import { fetchNewsletter, mapEvent } from "./content.ts";
+import { fetchNewsletter, fetchPressReleases, mapEvent } from "./content.ts";
 
 // See openFoodFacts.test.ts for the same withFetch pattern — swaps globalThis.fetch for a stub.
 function withFetch<T>(impl: typeof fetch, fn: () => Promise<T>): Promise<T> {
@@ -35,6 +35,43 @@ test("event mapping treats is_featured '1' as true", () => {
   assert.equal(mapped.isFeatured, true);
 });
 
+// Real bug, real shape: GET /uapp/get_beacons_events and GET /uapp/get_press both return image
+// URLs with a literal host of "default" (e.g. https://default/sites/default/files/press/images.png)
+// -- present but unresolvable. Truthy, so `{#if image}` guards in web pass and render a visible
+// broken-image glyph. Blank these at the source so every caller (web + mobile) gets a clean "no
+// image" signal instead of a dead URL.
+test("event mapping blanks a featured_image with an unresolvable 'default' host", () => {
+  const mapped = mapEvent({
+    title: "x",
+    featured_image: "https://default/sites/default/files/events/banner.jpg",
+    pdf_link: "",
+    external_link: "",
+    expiration_date: 0,
+    is_featured: "0",
+  });
+  assert.equal(mapped.featuredImage, "");
+});
+
+test("fetchPressReleases blanks an image with an unresolvable 'default' host", async () => {
+  const result = await withFetch(
+    async () =>
+      ({
+        ok: true,
+        status: 200,
+        json: async () => [
+          {
+            title: "Real press release",
+            url: "https://umassdining.com/press/real",
+            image: "https://default/sites/default/files/press/images.png",
+            date: "2026-08-19",
+          },
+        ],
+      }) as Response,
+    fetchPressReleases,
+  );
+  assert.equal(result[0]?.image, "");
+});
+
 // fetchNewsletter is a thin passthrough (field names already match NewsletterIssue), same as
 // fetchPressReleases above — this just confirms the shape flows through untouched.
 test("fetchNewsletter returns issues as-is, including entries with empty content", async () => {
diff --git a/shared/src/content.ts b/shared/src/content.ts
index ae996314..8e989720 100644
--- a/shared/src/content.ts
+++ b/shared/src/content.ts
@@ -2,6 +2,24 @@ import type { DiningEvent, NewsletterIssue, PressRelease } from "./types.ts";
 
 const BASE = "https://www.umassdining.com/uapp";
 
+/**
+ * UMass Dining's press/events feeds sometimes return an image URL with a literal host of
+ * `default` (e.g. `https://default/sites/default/files/press/images.png`) -- present and
+ * truthy, but unresolvable. Blank anything without a plausible hostname (must contain a dot,
+ * or be localhost) so callers get a clean "no image" signal instead of a dead URL that trips
+ * `{#if image}`-style truthiness guards and renders a broken-image glyph.
+ */
+export function sanitizeImageUrl(url: string): string {
+  if (!url) return "";
+  try {
+    const { hostname } = new URL(url);
+    if (hostname === "localhost" || hostname.includes(".")) return url;
+    return "";
+  } catch {
+    return "";
+  }
+}
+
 interface PressApiItem {
   title: string;
   url: string;
@@ -14,7 +32,7 @@ export async function fetchPressReleases(): Promise<PressRelease[]> {
   const res = await fetch(`${BASE}/get_press`);
   if (!res.ok) throw new Error(`get_press ${res.status}`);
   const data = (await res.json()) as PressApiItem[];
-  return data;
+  return data.map((item) => ({ ...item, image: sanitizeImageUrl(item.image) }));
 }
 
 interface EventsApiResponse {
@@ -33,7 +51,7 @@ interface EventsApiResponse {
 export function mapEvent(e: EventsApiResponse["events"][number]): DiningEvent {
   return {
     title: e.title,
-    featuredImage: e.featured_image,
+    featuredImage: sanitizeImageUrl(e.featured_image),
     pdfLink: e.pdf_link,
     externalLink: e.external_link,
     expirationDate: new Date(e.expiration_date * 1000).toISOString(),
diff --git a/web/e2e/content-screens.spec.ts b/web/e2e/content-screens.spec.ts
index 0254d507..50477621 100644
--- a/web/e2e/content-screens.spec.ts
+++ b/web/e2e/content-screens.spec.ts
@@ -103,13 +103,34 @@ test.describe("press", () => {
 		await expect(withoutImage.getByRole("link", { name: RELEASES[1].title })).toHaveAttribute("href", RELEASES[1].url);
 	});
 
+	// Real bug, reviewer-verified against live data: GET /uapp/get_press returns image URLs with a
+	// literal host of "default" (e.g. https://default/sites/default/files/press/images.png) for
+	// every release -- present, so `{#if release.image}` alone doesn't catch it, but unresolvable,
+	// so the browser renders a visible broken-image glyph inside the fixed h-16 box. Primary fix is
+	// shared/src/content.ts's sanitizeImageUrl (see content.test.ts); this asserts the web app never
+	// shows the broken box even if a bad URL reaches this page's data by some other path.
+	test("a present but unresolvable image host renders no visible broken-image box", async ({ page }) => {
+		const releaseWithBadImage: PressRelease = {
+			title: "Bad Image Host Release",
+			url: "https://umassdining.com/press/bad-image",
+			image: "https://default/sites/default/files/press/images.png",
+			date: "2026-08-19",
+		};
+		await page.route("**/api/press**", (route) => route.fulfill({ json: [releaseWithBadImage] }));
+		await gotoContentPage(page, "Press");
+		await expect(page).toHaveURL(/\/press$/);
+
+		const card = page.locator("main li.card").filter({ hasText: releaseWithBadImage.title });
+		await expect(card).toBeVisible();
+		await expect(card.locator("img")).toHaveCount(0);
+	});
+
 	test("no releases shows the shared empty-state panel, not a bare paragraph", async ({ page }) => {
 		await page.route("**/api/press**", (route) => route.fulfill({ json: [] }));
 		await gotoContentPage(page, "Press");
 		await expect(page).toHaveURL(/\/press$/);
 
 		await expect(page.locator(".empty-state")).toBeVisible();
-		await expect(page.locator("main li.card")).toHaveCount(0);
 	});
 
 	test("an upstream failure renders the shared error page, not a styled-but-broken press screen", async ({ page }) => {
@@ -147,13 +168,32 @@ test.describe("events", () => {
 		await expect(plain.getByRole("link", { name: "More info" })).toHaveAttribute("href", EVENTS[1].externalLink);
 	});
 
+	// Same reviewer-verified bug as press's equivalent test above -- GET /uapp/get_beacons_events
+	// returns featured_image with the same unresolvable "default" host.
+	test("a present but unresolvable image host renders no visible broken-image box", async ({ page }) => {
+		const eventWithBadImage: DiningEvent = {
+			title: "Bad Image Host Event",
+			featuredImage: "https://default/sites/default/files/events/banner.jpg",
+			pdfLink: "",
+			externalLink: "",
+			expirationDate: "2026-09-01T00:00:00.000Z",
+			isFeatured: false,
+		};
+		await page.route("**/api/events**", (route) => route.fulfill({ json: [eventWithBadImage] }));
+		await gotoContentPage(page, "Events");
+		await expect(page).toHaveURL(/\/events$/);
+
+		const card = page.locator("main li.card").filter({ hasText: eventWithBadImage.title });
+		await expect(card).toBeVisible();
+		await expect(card.locator("img")).toHaveCount(0);
+	});
+
 	test("no events shows the shared empty-state panel", async ({ page }) => {
 		await page.route("**/api/events**", (route) => route.fulfill({ json: [] }));
 		await gotoContentPage(page, "Events");
 		await expect(page).toHaveURL(/\/events$/);
 
 		await expect(page.locator(".empty-state")).toBeVisible();
-		await expect(page.locator("main li.card")).toHaveCount(0);
 	});
 
 	test("an upstream failure renders the shared error page", async ({ page }) => {
@@ -189,7 +229,6 @@ test.describe("newsletter", () => {
 		await expect(page).toHaveURL(/\/newsletter$/);
 
 		await expect(page.locator(".empty-state")).toBeVisible();
-		await expect(page.locator("main li.card")).toHaveCount(0);
 	});
 
 	test("an upstream failure renders the shared error page", async ({ page }) => {
diff --git a/web/src/routes/events/+page.ts b/web/src/routes/events/+page.ts
index 1a5911ea..390facd0 100644
--- a/web/src/routes/events/+page.ts
+++ b/web/src/routes/events/+page.ts
@@ -1,9 +1,11 @@
-import type { DiningEvent } from "@udine/shared";
+import { sanitizeImageUrl, type DiningEvent } from "@udine/shared";
 import { error } from "@sveltejs/kit";
 import type { PageLoad } from "./$types";
 
 export const load: PageLoad = async ({ fetch }) => {
 	const res = await fetch("/api/events");
 	if (!res.ok) throw error(res.status, "failed to load events");
-	return { events: (await res.json()) as DiningEvent[] };
+	const events = (await res.json()) as DiningEvent[];
+	// See press/+page.ts's comment -- same second-pass sanitization for the same reviewer-verified bug.
+	return { events: events.map((e) => ({ ...e, featuredImage: sanitizeImageUrl(e.featuredImage) })) };
 };
diff --git a/web/src/routes/press/+page.ts b/web/src/routes/press/+page.ts
index a56ed198..36107177 100644
--- a/web/src/routes/press/+page.ts
+++ b/web/src/routes/press/+page.ts
@@ -1,9 +1,14 @@
-import type { PressRelease } from "@udine/shared";
+import { sanitizeImageUrl, type PressRelease } from "@udine/shared";
 import { error } from "@sveltejs/kit";
 import type { PageLoad } from "./$types";
 
 export const load: PageLoad = async ({ fetch }) => {
 	const res = await fetch("/api/press");
 	if (!res.ok) throw error(res.status, "failed to load press releases");
-	return { releases: (await res.json()) as PressRelease[] };
+	const releases = (await res.json()) as PressRelease[];
+	// /api/press already sanitizes via fetchPressReleases (shared/src/content.ts) -- this is a second,
+	// client-side pass so a present-but-unresolvable-host image (UMass Dining's own `https://default/...`
+	// bug) can never reach the `{#if release.image}` guard below, even if a future change to the API
+	// route bypasses the shared fetcher.
+	return { releases: releases.map((r) => ({ ...r, image: sanitizeImageUrl(r.image) })) };
 };