From c2b1d1a6876f347d8957511031d970e77d5be159 Mon Sep 17 00:00:00 2001
From: Sabine Maennel <5292683+sabinem@users.noreply.github.com>
Date: Tue, 1 Sep 2026 19:34:22 +0200
Subject: [PATCH 01/10] feat(frontend): image fields catch a share link before
 it is saved
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Nothing on the platform is uploaded. `Hackathon.logo` and `Project.image`
are single string columns with no file storage behind them, so every
picture is a URL somebody typed — and the commonest thing typed is a
*share* link, the page a cloud drive shows after pressing Share. That
serves HTML rather than bytes: dropped into an `<img>` it fails, and the
only sign of it is a broken-image glyph on somebody else's page, long
after the form was submitted and with no hint of which link did it.

The four forms taking a picture — create hackathon, edit hackathon,
propose project and the project editor — now share one `ImageUrlField`.
It loads the address as it is typed, which is the only honest test:
pattern-matching names the hosts people paste, but cannot tell a direct
URL that 404s from one that works, and those are half the failures. An
`<img>` is also the one probe with no CORS to satisfy and no server of
ours in the middle.

`adviseImageUrl` reports only what is certain — Drive, Photos, OneDrive,
SharePoint, Imgur, Flickr and Unsplash page URLs are known to answer with
a web page. GitHub `blob` and Dropbox links get the direct address
offered as a one-press correction, never applied silently: the address
stays the one the person put there until they say otherwise. Nothing is
rewritten where no documented, stable direct form exists.
---
 .../lib/components/forms/ImageUrlField.svelte | 141 ++++++++++++++++
 .../components/forms/ImageUrlField.test.ts    | 150 ++++++++++++++++++
 .../hackathon/ProjectEditForm.svelte          |  20 +--
 .../frontend/src/lib/utils/imageUrl.test.ts   | 126 +++++++++++++++
 components/frontend/src/lib/utils/imageUrl.ts | 148 +++++++++++++++++
 .../(app)/hackathons/create/+page.svelte      |   6 +-
 .../hackathon/[id]/manage/edit/+page.svelte   |  19 ++-
 .../[id]/projects/propose/+page.svelte        |  13 +-
 8 files changed, 589 insertions(+), 34 deletions(-)
 create mode 100644 components/frontend/src/lib/components/forms/ImageUrlField.svelte
 create mode 100644 components/frontend/src/lib/components/forms/ImageUrlField.test.ts
 create mode 100644 components/frontend/src/lib/utils/imageUrl.test.ts
 create mode 100644 components/frontend/src/lib/utils/imageUrl.ts

diff --git a/components/frontend/src/lib/components/forms/ImageUrlField.svelte b/components/frontend/src/lib/components/forms/ImageUrlField.svelte
new file mode 100644
index 00000000..2a02dd5a
--- /dev/null
+++ b/components/frontend/src/lib/components/forms/ImageUrlField.svelte
@@ -0,0 +1,141 @@
+<script lang="ts">
+    import { adviseImageUrl, usableImage } from '$lib/utils/imageUrl';
+    import { isHttpUrl } from '$lib/utils/url';
+
+    let {
+        name,
+        label,
+        value = '',
+        placeholder = 'https://…',
+        fieldClass = 'field',
+        labelClass = 'field-label',
+        class: wrapperClass = '',
+    }: {
+        name: string;
+        /** The caption above the input, e.g. "Logo URL (optional)". */
+        label: string;
+        value?: string;
+        placeholder?: string;
+        /** The host form's input and label classes — two of the four forms using
+         *  this still carry their own pair rather than the `field`/`field-label`
+         *  utilities, and a field ignoring them would be the one odd control on
+         *  the page. */
+        fieldClass?: string;
+        labelClass?: string;
+        class?: string;
+    } = $props();
+
+    // A wrapping <label> would have to contain the button below, and a label
+    // holding interactive content is a trap for anyone reaching it by keyboard.
+    // Explicit `for` instead — the same shape the markdown fields already use.
+    const fieldId = `image-url-${name}`;
+
+    // There is no upload anywhere on the platform: the picture is whatever URL
+    // this field ends up holding. So the field has to be where a bad link is
+    // caught — after the save there is nothing left but a broken image on
+    // somebody else's page, with no hint of which link did it.
+    let url = $state(value);
+
+    // The address the preview is currently trying. A beat behind the field, so a
+    // half-typed host is not requested character by character and the verdict
+    // below does not contradict itself mid-word.
+    let probed = $state(value.trim());
+    $effect(() => {
+        const next = url.trim();
+        const timer = setTimeout(() => (probed = next), 500);
+        return () => clearTimeout(timer);
+    });
+
+    // Loading it is the only honest test. Pattern-matching names the share links
+    // people actually paste, but it cannot tell a direct URL that 404s from one
+    // that works, and those are half the failures. An `<img>` is also the one
+    // probe with no CORS to satisfy and no server of ours in the middle: exactly
+    // what the real page will do, done early enough to fix.
+    //
+    // Both recorded as *which* address settled rather than as a boolean, so
+    // correcting the field leaves the verdict behind on its own.
+    let loaded = $state('');
+    let failed = $state('');
+
+    const advice = $derived(adviseImageUrl(probed));
+    const previewable = $derived(probed !== '' && isHttpUrl(probed));
+    const showImage = $derived(previewable && usableImage(probed, failed));
+    const checking = $derived(showImage && loaded !== probed);
+</script>
+
+<div class="{labelClass} {wrapperClass}">
+    <label for={fieldId}>{label}</label>
+    <input
+        id={fieldId}
+        type="url"
+        {name}
+        {placeholder}
+        bind:value={url}
+        class={fieldClass}
+    />
+
+    <span class="font-normal text-ink-3">
+        A link to the image file itself — a share or page link will not render.
+    </span>
+
+    {#if probed !== ''}
+        <!-- Deliberately not `aria-live`: this settles a beat after typing stops
+             and would interrupt somebody still filling the form in. It sits
+             beside the field they are already looking at. -->
+        <div class="flex items-start gap-3 pt-1 font-normal">
+            {#if showImage}
+                <span
+                    class="flex h-16 w-16 shrink-0 items-center justify-center overflow-hidden
+                           border border-line bg-raised"
+                >
+                    <!-- Kept in the tree while it loads rather than swapped in on
+                         success: the load *is* the check, so something has to be
+                         doing it. -->
+                    <img
+                        src={probed}
+                        alt=""
+                        onload={() => (loaded = probed)}
+                        onerror={() => (failed = probed)}
+                        class="h-full w-full object-contain"
+                        class:opacity-0={checking}
+                    />
+                </span>
+            {/if}
+
+            <span class="flex min-w-0 flex-col items-start gap-1">
+                {#if checking}
+                    <span class="text-ink-3">Checking the link…</span>
+                {:else if showImage}
+                    <span class="text-ink-2">This is what will be shown.</span>
+                {:else}
+                    <!-- Two separate claims, so two lines: the first is
+                         demonstrated, the second is a guess at the cause and is
+                         only offered for an address whose shape we recognise. -->
+                    <span class="text-danger-ink">
+                        {previewable
+                            ? 'This link does not load as an image.'
+                            : 'This is not a link a browser can open.'}
+                    </span>
+                {/if}
+
+                {#if advice.problem}
+                    <span class="text-ink-3">{advice.problem}</span>
+                {/if}
+
+                {#if advice.direct}
+                    <!-- Offered, not applied. Rewriting the field under someone
+                         mid-form takes the address away from them; a button they
+                         press leaves them holding the decision, with the preview
+                         beside it showing what pressing it gets. -->
+                    <button
+                        type="button"
+                        class="btn btn-sm btn-outline"
+                        onclick={() => (url = advice.direct ?? url)}
+                    >
+                        Use the direct link
+                    </button>
+                {/if}
+            </span>
+        </div>
+    {/if}
+</div>
diff --git a/components/frontend/src/lib/components/forms/ImageUrlField.test.ts b/components/frontend/src/lib/components/forms/ImageUrlField.test.ts
new file mode 100644
index 00000000..152c1e6b
--- /dev/null
+++ b/components/frontend/src/lib/components/forms/ImageUrlField.test.ts
@@ -0,0 +1,150 @@
+import { fireEvent, render, screen } from "@testing-library/svelte"
+import { tick } from "svelte"
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest"
+
+import ImageUrlField from "./ImageUrlField.svelte"
+
+/*
+ * The advice itself is covered in utils/imageUrl.test.ts. What is left to prove
+ * here is the part that cannot be a pure function: that the preview is what
+ * decides, that its verdict follows the field rather than sticking to the first
+ * address typed, and that the field warns without ever blocking the submit.
+ *
+ * jsdom loads nothing, so neither `load` nor `error` ever fires on its own. The
+ * events are dispatched by hand, which is what a real browser does a moment
+ * later; the component cannot tell the difference.
+ */
+
+beforeEach(() => vi.useFakeTimers())
+afterEach(() => vi.useRealTimers())
+
+/** Renders, types `value`, and lets the debounce elapse. */
+async function typing(value: string, initial = "") {
+  const { container } = render(ImageUrlField, {
+    props: { name: "logo", label: "Logo URL (optional)", value: initial },
+  })
+  const input = container.querySelector("input")!
+
+  if (value !== initial) await fireEvent.input(input, { target: { value } })
+  await vi.advanceTimersByTimeAsync(600)
+  await tick()
+
+  return { input, container }
+}
+
+const preview = (container: HTMLElement) =>
+  container.querySelector<HTMLImageElement>("img")
+
+describe("ImageUrlField", () => {
+  it("posts the typed address under the given name", async () => {
+    const { input } = await typing("https://example.org/logo.png")
+
+    expect(input.name).toBe("logo")
+    expect(input.value).toBe("https://example.org/logo.png")
+  })
+
+  it("says nothing at all while the field is empty", async () => {
+    const { container } = await typing("")
+
+    expect(preview(container)).toBeNull()
+    expect(screen.queryByText(/does not load/)).toBeNull()
+  })
+
+  it("tries to load what was typed", async () => {
+    const { container } = await typing("https://example.org/logo.png")
+
+    expect(preview(container)?.src).toBe("https://example.org/logo.png")
+    expect(screen.getByText(/Checking the link/)).toBeTruthy()
+  })
+
+  it("waits for typing to stop before requesting anything", async () => {
+    const { container } = render(ImageUrlField, {
+      props: { name: "logo", label: "Logo URL" },
+    })
+    const input = container.querySelector("input")!
+
+    await fireEvent.input(input, { target: { value: "https://exa" } })
+    await vi.advanceTimersByTimeAsync(200)
+    await tick()
+
+    expect(preview(container)).toBeNull()
+  })
+
+  it("shows the picture once it loads", async () => {
+    const { container } = await typing("https://example.org/logo.png")
+
+    await fireEvent.load(preview(container)!)
+    await tick()
+
+    expect(screen.getByText(/what will be shown/)).toBeTruthy()
+    expect(preview(container)).not.toBeNull()
+  })
+
+  it("reports an address that will not load, and drops the preview", async () => {
+    const { container } = await typing("https://example.org/not-an-image")
+
+    await fireEvent.error(preview(container)!)
+    await tick()
+
+    expect(screen.getByText(/does not load as an image/)).toBeTruthy()
+    expect(preview(container)).toBeNull()
+  })
+
+  it("explains a share link once the preview has failed", async () => {
+    const { container } = await typing(
+      "https://drive.google.com/file/d/1AbC/view",
+    )
+
+    await fireEvent.error(preview(container)!)
+    await tick()
+
+    expect(screen.getByText(/Google Drive share link/)).toBeTruthy()
+  })
+
+  it("tries again when the address is corrected", async () => {
+    const { input, container } = await typing("https://example.org/bad.png")
+
+    await fireEvent.error(preview(container)!)
+    await tick()
+    expect(preview(container)).toBeNull()
+
+    await fireEvent.input(input, {
+      target: { value: "https://example.org/good.png" },
+    })
+    await vi.advanceTimersByTimeAsync(600)
+    await tick()
+
+    expect(preview(container)?.src).toBe("https://example.org/good.png")
+  })
+
+  it("swaps in the direct link when offered one, and only when pressed", async () => {
+    const { input } = await typing(
+      "https://github.com/acme/site/blob/main/logo.png",
+    )
+
+    expect(input.value).toBe("https://github.com/acme/site/blob/main/logo.png")
+
+    await fireEvent.click(screen.getByText(/Use the direct link/))
+    await tick()
+
+    expect(input.value).toBe(
+      "https://raw.githubusercontent.com/acme/site/main/logo.png",
+    )
+  })
+
+  it("refuses to preview something that is not a web address", async () => {
+    const { container } = await typing("logo.png")
+
+    expect(preview(container)).toBeNull()
+    expect(screen.getByText(/not a link a browser can open/)).toBeTruthy()
+  })
+
+  it("previews an address it was given, without waiting to be typed into", async () => {
+    const { container } = await typing(
+      "https://example.org/saved.png",
+      "https://example.org/saved.png",
+    )
+
+    expect(preview(container)?.src).toBe("https://example.org/saved.png")
+  })
+})
diff --git a/components/frontend/src/lib/components/hackathon/ProjectEditForm.svelte b/components/frontend/src/lib/components/hackathon/ProjectEditForm.svelte
index 4006252a..fab6005c 100644
--- a/components/frontend/src/lib/components/hackathon/ProjectEditForm.svelte
+++ b/components/frontend/src/lib/components/hackathon/ProjectEditForm.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
     import { resolve } from '$app/paths';
+    import ImageUrlField from '$lib/components/forms/ImageUrlField.svelte';
     import MarkdownEditor from '$lib/components/forms/MarkdownEditor.svelte';
 
     let {
@@ -81,19 +82,12 @@
             </label>
         {/if}
 
-        <label class="field-label {tracks.length > 0 ? '' : 'sm:col-span-2'}">
-            Image URL (optional)
-            <input
-                type="url"
-                name="image"
-                placeholder="https://…"
-                value={project.image ?? ''}
-                class="field"
-            />
-            <span class="font-normal text-ink-3">
-                A link to the image file itself — a share or page link will not render.
-            </span>
-        </label>
+        <ImageUrlField
+            name="image"
+            label="Image URL (optional)"
+            value={project.image ?? ''}
+            class={tracks.length > 0 ? '' : 'sm:col-span-2'}
+        />
     </div>
 
     <!-- Last and full width: the only field with no natural size, and the one
diff --git a/components/frontend/src/lib/utils/imageUrl.test.ts b/components/frontend/src/lib/utils/imageUrl.test.ts
new file mode 100644
index 00000000..aa9846c0
--- /dev/null
+++ b/components/frontend/src/lib/utils/imageUrl.test.ts
@@ -0,0 +1,126 @@
+import { describe, it, expect } from "vitest"
+import { adviseImageUrl, usableImage } from "./imageUrl"
+
+describe("adviseImageUrl", () => {
+  it("says nothing about an empty field", () => {
+    expect(adviseImageUrl("")).toEqual({})
+    expect(adviseImageUrl("   ")).toEqual({})
+  })
+
+  it("says nothing about an ordinary image address", () => {
+    expect(adviseImageUrl("https://example.org/logo.png")).toEqual({})
+  })
+
+  it("ignores surrounding whitespace from a paste", () => {
+    expect(adviseImageUrl("  https://example.org/logo.png  ")).toEqual({})
+  })
+
+  it("rejects what is not a web address", () => {
+    expect(adviseImageUrl("logo.png").problem).toMatch(/https:\/\//)
+    expect(adviseImageUrl("/images/logos/psi.png").problem).toMatch(
+      /https:\/\//,
+    )
+  })
+
+  it("rejects a non-http scheme", () => {
+    expect(adviseImageUrl("javascript:alert(1)").problem).toBeDefined()
+    expect(adviseImageUrl("data:image/png;base64,AAAA").problem).toBeDefined()
+  })
+
+  it("turns a GitHub blob page into its raw address", () => {
+    expect(
+      adviseImageUrl("https://github.com/acme/site/blob/main/docs/logo.png"),
+    ).toEqual({
+      problem: expect.stringContaining("GitHub"),
+      direct: "https://raw.githubusercontent.com/acme/site/main/docs/logo.png",
+    })
+  })
+
+  it("leaves a raw.githubusercontent address alone", () => {
+    expect(
+      adviseImageUrl(
+        "https://raw.githubusercontent.com/acme/site/main/logo.png",
+      ),
+    ).toEqual({})
+  })
+
+  it("leaves a GitHub address that is not a blob page alone", () => {
+    expect(adviseImageUrl("https://github.com/acme/site")).toEqual({})
+  })
+
+  it("turns a Dropbox share link into the inline form", () => {
+    const advice = adviseImageUrl("https://www.dropbox.com/s/abc/logo.png?dl=0")
+    expect(advice.problem).toContain("Dropbox")
+    expect(advice.direct).toBe("https://www.dropbox.com/s/abc/logo.png?raw=1")
+  })
+
+  it("leaves a Dropbox link that already asks for raw alone", () => {
+    expect(
+      adviseImageUrl("https://www.dropbox.com/s/abc/logo.png?raw=1"),
+    ).toEqual({})
+  })
+
+  it("refuses Google Drive without offering a rewrite", () => {
+    const advice = adviseImageUrl(
+      "https://drive.google.com/file/d/1AbC/view?usp=sharing",
+    )
+    expect(advice.problem).toContain("Drive")
+    expect(advice.direct).toBeUndefined()
+  })
+
+  it("names the other share-link hosts", () => {
+    expect(
+      adviseImageUrl("https://photos.app.goo.gl/abc").problem,
+    ).toBeDefined()
+    expect(adviseImageUrl("https://1drv.ms/i/s!abc").problem).toBeDefined()
+    expect(
+      adviseImageUrl("https://acme.sharepoint.com/sites/x/logo.png").problem,
+    ).toBeDefined()
+    expect(adviseImageUrl("https://imgur.com/a/abc").problem).toBeDefined()
+    expect(
+      adviseImageUrl("https://www.flickr.com/photos/someone/123").problem,
+    ).toBeDefined()
+    expect(
+      adviseImageUrl("https://unsplash.com/photos/a-cat-abc123").problem,
+    ).toBeDefined()
+  })
+
+  it("leaves the image hosts of those services alone", () => {
+    expect(adviseImageUrl("https://i.imgur.com/abc.png")).toEqual({})
+    expect(adviseImageUrl("https://live.staticflickr.com/1/2_b.jpg")).toEqual(
+      {},
+    )
+    expect(adviseImageUrl("https://images.unsplash.com/photo-123")).toEqual({})
+  })
+
+  it("does not mistake a lookalike domain for the real host", () => {
+    // `endsWith('.github.com')` rather than `includes('github.com')`: a host
+    // ending in `notgithub.com` is somebody else's site entirely.
+    expect(
+      adviseImageUrl("https://notgithub.com/acme/site/blob/main/logo.png"),
+    ).toEqual({})
+  })
+})
+
+describe("usableImage", () => {
+  it("refuses an absent or empty address", () => {
+    expect(usableImage(undefined, undefined)).toBe(false)
+    expect(usableImage("", undefined)).toBe(false)
+  })
+
+  it("accepts an address that has not failed", () => {
+    expect(usableImage("https://example.org/a.png", undefined)).toBe(true)
+  })
+
+  it("refuses the exact address that failed", () => {
+    expect(
+      usableImage("https://example.org/a.png", "https://example.org/a.png"),
+    ).toBe(false)
+  })
+
+  it("tries a corrected address even though the previous one failed", () => {
+    expect(
+      usableImage("https://example.org/b.png", "https://example.org/a.png"),
+    ).toBe(true)
+  })
+})
diff --git a/components/frontend/src/lib/utils/imageUrl.ts b/components/frontend/src/lib/utils/imageUrl.ts
new file mode 100644
index 00000000..22b8f4cc
--- /dev/null
+++ b/components/frontend/src/lib/utils/imageUrl.ts
@@ -0,0 +1,148 @@
+// Nobody can upload a picture: `Project.image` and `Hackathon.logo` are single
+// string columns, and there is no file storage behind them. So every image on
+// the platform is a URL somebody typed, and the commonest thing they type is a
+// *share* link — the page their cloud drive showed them after pressing Share.
+//
+// A share link serves HTML, not bytes. Dropped into an `<img>` it fails, and
+// the only sign of it is a broken-image glyph on the page the picture was meant
+// for, long after the form was submitted. These helpers move that discovery back
+// into the form: `adviseImageUrl` names the mistake before the save, and
+// `usableImage` keeps the failure from ever reaching a reader.
+
+import { isHttpUrl } from "./url"
+
+export interface ImageUrlAdvice {
+  /**
+   * Why this address will not load as an image, in our words — absent when
+   * nothing is known to be wrong with it. Knowing nothing is not the same as
+   * approval: only the preview can actually tell whether a URL serves an image.
+   */
+  problem?: string
+  /**
+   * The same picture as bytes, when it can be derived from what was typed.
+   * Offered as a one-press correction, never applied silently — the address in
+   * the field should stay the one the person put there until they say so.
+   */
+  direct?: string
+}
+
+/** Whether `host` is `domain` itself or a subdomain of it. */
+function isHost(host: string, domain: string): boolean {
+  return host === domain || host.endsWith(`.${domain}`)
+}
+
+/**
+ * What is wrong with `value` as an image address, as far as can be told without
+ * fetching it.
+ *
+ * Only reports what is *certain*: every case below is a URL whose server is
+ * known to answer with a web page. A URL that passes still has to prove itself
+ * by loading — see `ImageUrlField`, where this advice explains a failure the
+ * preview has already demonstrated.
+ */
+export function adviseImageUrl(value: string): ImageUrlAdvice {
+  const trimmed = value.trim()
+  if (trimmed === "") return {}
+
+  if (!isHttpUrl(trimmed)) {
+    return {
+      problem: "This is not a web address — it has to start with https://",
+    }
+  }
+
+  const url = new URL(trimmed)
+  const host = url.hostname.toLowerCase()
+  const path = url.pathname
+
+  // GitHub's `blob` URL is the file *viewer*. The same path under
+  // raw.githubusercontent.com is the file, which is a documented, stable
+  // rewrite — hence the only two corrections offered here are this and Dropbox.
+  if (isHost(host, "github.com")) {
+    const blob = path.match(/^\/([^/]+)\/([^/]+)\/blob\/(.+)$/)
+    if (blob) {
+      return {
+        problem:
+          "A GitHub file page shows the picture inside GitHub's own page.",
+        direct: `https://raw.githubusercontent.com/${blob[1]}/${blob[2]}/${blob[3]}`,
+      }
+    }
+  }
+
+  if (isHost(host, "dropbox.com")) {
+    // `?dl=0` is the preview page and `?dl=1` forces a download; `raw=1` is the
+    // file served inline, which is the one an `<img>` can use.
+    if (url.searchParams.get("raw") !== "1") {
+      const direct = new URL(trimmed)
+      direct.searchParams.delete("dl")
+      direct.searchParams.set("raw", "1")
+      return {
+        problem: "A Dropbox share link opens Dropbox's preview page.",
+        direct: direct.toString(),
+      }
+    }
+    return {}
+  }
+
+  // No correction for the rest. Google Drive's old `uc?export=view` trick is
+  // rate-limited and increasingly refused, and the others have no documented
+  // direct form at all — offering a rewrite that works today and breaks next
+  // month is worse than saying plainly that this kind of link cannot be used.
+  if (isHost(host, "drive.google.com") || isHost(host, "docs.google.com")) {
+    return {
+      problem:
+        "A Google Drive share link opens Drive, and Drive will not serve the " +
+        "file to another site. Put the picture somewhere it is published on its own.",
+    }
+  }
+  if (isHost(host, "photos.google.com") || isHost(host, "photos.app.goo.gl")) {
+    return {
+      problem:
+        "A Google Photos link opens the Photos viewer, not the picture itself.",
+    }
+  }
+  if (
+    isHost(host, "onedrive.live.com") ||
+    isHost(host, "1drv.ms") ||
+    isHost(host, "sharepoint.com")
+  ) {
+    return {
+      problem: "A OneDrive or SharePoint share link opens their viewer page.",
+    }
+  }
+  // i.imgur.com is the image host; imgur.com itself serves album and gallery
+  // pages, and a bare post page too.
+  if (isHost(host, "imgur.com") && host !== "i.imgur.com") {
+    return {
+      problem:
+        "This is an Imgur page rather than the image file on i.imgur.com.",
+    }
+  }
+  if (isHost(host, "flickr.com") && path.startsWith("/photos/")) {
+    return { problem: "A Flickr photo page is a web page, not the image file." }
+  }
+  if (isHost(host, "unsplash.com") && path.startsWith("/photos/")) {
+    return {
+      problem:
+        "An Unsplash photo page is a web page — the Download button gives the image address.",
+    }
+  }
+
+  return {}
+}
+
+/**
+ * Whether `src` should be put in front of a reader.
+ *
+ * `failedSrc` is the address whose `<img>` last raised `error`, recorded by the
+ * component drawing it. Comparing against it — rather than keeping a boolean —
+ * is what lets a corrected address be tried afresh: a component reused down a
+ * list of rows, or re-rendered after an edit, must not stay failed because some
+ * earlier URL was.
+ *
+ * Every surface showing a stored image address goes through this, because the
+ * alternative is the browser's broken-image glyph, which reads as a bug in the
+ * app rather than as a bad link somebody typed.
+ */
+export function usableImage(src?: string, failedSrc?: string): boolean {
+  return src !== undefined && src !== "" && failedSrc !== src
+}
diff --git a/components/frontend/src/routes/(app)/hackathons/create/+page.svelte b/components/frontend/src/routes/(app)/hackathons/create/+page.svelte
index bf088500..d01b1810 100644
--- a/components/frontend/src/routes/(app)/hackathons/create/+page.svelte
+++ b/components/frontend/src/routes/(app)/hackathons/create/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
     import { resolve } from '$app/paths';
+    import ImageUrlField from '$lib/components/forms/ImageUrlField.svelte';
     import MarkdownEditor from '$lib/components/forms/MarkdownEditor.svelte';
     import type { ActionData } from './$types';
 
@@ -68,10 +69,7 @@
                 <input type="date" name="endsAt" class="field" />
             </label>
 
-            <label class="field-label sm:col-span-2">
-                Logo URL (optional)
-                <input type="url" name="logo" placeholder="https://…" class="field" />
-            </label>
+            <ImageUrlField name="logo" label="Logo URL (optional)" class="sm:col-span-2" />
         </div>
 
         <!-- Last and full width: the only field with no natural size, and the one
diff --git a/components/frontend/src/routes/(app)/my/hackathon/[id]/manage/edit/+page.svelte b/components/frontend/src/routes/(app)/my/hackathon/[id]/manage/edit/+page.svelte
index 5f68ba2b..ba2256a7 100644
--- a/components/frontend/src/routes/(app)/my/hackathon/[id]/manage/edit/+page.svelte
+++ b/components/frontend/src/routes/(app)/my/hackathon/[id]/manage/edit/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
     import { resolve } from '$app/paths';
+    import ImageUrlField from '$lib/components/forms/ImageUrlField.svelte';
     import MarkdownEditor from '$lib/components/forms/MarkdownEditor.svelte';
     import type { ActionData, PageData } from './$types';
 
@@ -111,16 +112,14 @@
                 </p>
             {/if}
 
-            <label class="{LABEL_CLASS} sm:col-span-2">
-                Logo URL (optional)
-                <input
-                    type="url"
-                    name="logo"
-                    placeholder="https://…"
-                    value={hackathon.logo ?? ''}
-                    class={FIELD_CLASS}
-                />
-            </label>
+            <ImageUrlField
+                name="logo"
+                label="Logo URL (optional)"
+                value={hackathon.logo ?? ''}
+                fieldClass={FIELD_CLASS}
+                labelClass={LABEL_CLASS}
+                class="sm:col-span-2"
+            />
         </div>
 
         <!-- Last and full width: the only field with no natural size, and the one
diff --git a/components/frontend/src/routes/(app)/my/hackathon/[id]/projects/propose/+page.svelte b/components/frontend/src/routes/(app)/my/hackathon/[id]/projects/propose/+page.svelte
index 92669945..faa803bc 100644
--- a/components/frontend/src/routes/(app)/my/hackathon/[id]/projects/propose/+page.svelte
+++ b/components/frontend/src/routes/(app)/my/hackathon/[id]/projects/propose/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
     import { resolve } from '$app/paths';
+    import ImageUrlField from '$lib/components/forms/ImageUrlField.svelte';
     import MarkdownEditor from '$lib/components/forms/MarkdownEditor.svelte';
     import type { ActionData, PageData } from './$types';
 
@@ -63,13 +64,11 @@
                     </label>
                 {/if}
 
-                <label class="field-label {data.tracks.length > 0 ? '' : 'sm:col-span-2'}">
-                    Image URL (optional)
-                    <input type="url" name="image" placeholder="https://…" class="field" />
-                    <span class="font-normal text-ink-3">
-                        A link to the image file itself — a share or page link will not render.
-                    </span>
-                </label>
+                <ImageUrlField
+                    name="image"
+                    label="Image URL (optional)"
+                    class={data.tracks.length > 0 ? '' : 'sm:col-span-2'}
+                />
             </div>
 
             <!-- Last and full width: the only field with no natural size, and the one

From 9a87a98404e51470569b1f4588de56377f0cef71 Mon Sep 17 00:00:00 2001
From: Sabine Maennel <5292683+sabinem@users.noreply.github.com>
Date: Tue, 1 Sep 2026 19:35:22 +0200
Subject: [PATCH 02/10] feat(frontend): hackathon logos show in rows and
 survive a bad link
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

A hackathon's logo was stored, editable, and drawn almost nowhere. List
rows showed a generated gradient whether or not a logo was set, and the
public hackathon page did not carry the field out of its loader at all.

Rows on the dashboard and the landing page now draw the logo when there
is one, `object-contain` on a plain ground rather than `cover`: a
hackathon logo is usually wide and often carries its own background, and
a square crop would cut the wordmark in half. The gradient stays the
answer for a hackathon with no logo — it is not a placeholder waiting to
be replaced.

Every surface drawing a stored address now goes through `usableImage`, so
a link that turns out to serve a web page leaves the gradient, or the
hero it never filled, rather than the browser's broken-image glyph. The
tall hero drops `min-h-96` along with the image: a 24rem band holding
nothing is worse than the short hero a hackathon without a logo already
gets.
---
 .../components/dashboard/DashboardView.svelte |  4 ++
 .../components/hackathon/HackathonRow.svelte  | 37 +++++++++++++++++--
 .../components/hackathon/HeroCompact.svelte   | 20 +++++++++-
 .../components/hackathon/RoundMedia.svelte    | 10 ++---
 .../(public)/hackathon/[id]/+page.server.ts   |  1 +
 .../(public)/hackathon/[id]/+page.svelte      |  1 +
 6 files changed, 62 insertions(+), 11 deletions(-)

diff --git a/components/frontend/src/lib/components/dashboard/DashboardView.svelte b/components/frontend/src/lib/components/dashboard/DashboardView.svelte
index 09934437..fb97ebbc 100644
--- a/components/frontend/src/lib/components/dashboard/DashboardView.svelte
+++ b/components/frontend/src/lib/components/dashboard/DashboardView.svelte
@@ -23,6 +23,8 @@
     interface HackathonEntry {
         id: string;
         name: string;
+        /** The hackathon's logo, drawn in the row's thumbnail when it loads. */
+        logo?: string;
         startsAt?: Date;
         endsAt?: Date;
         status: number;
@@ -229,6 +231,7 @@
                                 <HackathonRow
                                     {href}
                                     name={h.name}
+                                    imageUrl={h.logo}
                                     meta={formatMeta(h)}
                                     badge={statusLabel(h.status)}
                                     badgeVariant={statusBadgeVariant(h.status)}
@@ -285,6 +288,7 @@
                                      403. Joining is the only thing offered here. -->
                                 <HackathonRow
                                     name={h.name}
+                                    imageUrl={h.logo}
                                     meta={formatMeta(h)}
                                     badge={statusLabel(h.status)}
                                     badgeVariant={statusBadgeVariant(h.status)}
diff --git a/components/frontend/src/lib/components/hackathon/HackathonRow.svelte b/components/frontend/src/lib/components/hackathon/HackathonRow.svelte
index 027b7bdc..06c7177a 100644
--- a/components/frontend/src/lib/components/hackathon/HackathonRow.svelte
+++ b/components/frontend/src/lib/components/hackathon/HackathonRow.svelte
@@ -1,12 +1,14 @@
 <script lang="ts">
     import { resolve } from '$app/paths';
     import { Users } from 'lucide-svelte';
+    import { usableImage } from '$lib/utils/imageUrl';
 
     let {
         href,
         name,
         org,
         meta,
+        imageUrl,
         badge,
         badgeVariant = 'badge-accent',
         count,
@@ -23,6 +25,12 @@
         name: string;
         org?: string;
         meta: string;
+        /**
+         * The hackathon's logo. The gradient below is not a placeholder waiting
+         * to be replaced — it stays the answer for a hackathon with no logo, and
+         * for one whose logo does not load.
+         */
+        imageUrl?: string;
         badge?: string;
         badgeVariant?: string;
         count?: string;
@@ -31,6 +39,11 @@
         size?: 'default' | 'compact';
     } = $props();
 
+    // A logo is typed in, never uploaded, so a link that serves a web page is
+    // the ordinary mistake rather than the rare one; the gradient absorbs it.
+    let failedSrc: string | undefined = $state(undefined);
+    const hasImage = $derived(usableImage(imageUrl, failedSrc));
+
     const thumbSize = size === 'compact' ? 'h-9 w-9' : 'h-12 w-12';
     // A floor rather than a fixed height: with `org` set the row carries three
     // stacked lines, which a fixed height would clip.
@@ -51,10 +64,26 @@
 {/if}
 
 {#snippet row()}
-    <div
-        class="{thumbSize} shrink-0 rounded-field"
-        style="background: linear-gradient(135deg, {gradFrom}, {gradTo})"
-    ></div>
+    {#if hasImage}
+        <!-- `contain` on a plain ground, not `cover`: a hackathon logo is
+             usually wide and often has its own background, and cropping it to a
+             square would cut the wordmark in half. -->
+        <div
+            class="{thumbSize} shrink-0 overflow-hidden rounded-field border border-line bg-raised"
+        >
+            <img
+                src={imageUrl}
+                alt=""
+                onerror={() => (failedSrc = imageUrl)}
+                class="h-full w-full object-contain"
+            />
+        </div>
+    {:else}
+        <div
+            class="{thumbSize} shrink-0 rounded-field"
+            style="background: linear-gradient(135deg, {gradFrom}, {gradTo})"
+        ></div>
+    {/if}
     <div class="flex min-w-0 flex-1 flex-col gap-0.5">
         <!-- The organisation is an eyebrow above the name rather than sharing a
              line behind a slash, so the hackathon's own name gets the line to
diff --git a/components/frontend/src/lib/components/hackathon/HeroCompact.svelte b/components/frontend/src/lib/components/hackathon/HeroCompact.svelte
index 0cb32561..6af7bef5 100644
--- a/components/frontend/src/lib/components/hackathon/HeroCompact.svelte
+++ b/components/frontend/src/lib/components/hackathon/HeroCompact.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+    import { usableImage } from '$lib/utils/imageUrl';
+
     let {
         title,
         dates,
@@ -24,6 +26,15 @@
         badges?: { label: string; variant: string }[];
     } = $props();
 
+    // The logo is a URL an organiser typed — there is no upload — so "not an
+    // image" is an ordinary outcome, not an edge case. Without this the hero
+    // kept a bordered box holding the browser's broken-image glyph, which reads
+    // as a bug in the platform rather than as a link that needs fixing. Dropping
+    // the box entirely leaves the hero looking as it does for the hackathons
+    // that never set one.
+    let failedSrc: string | undefined = $state(undefined);
+    const hasImage = $derived(usableImage(imageUrl, failedSrc));
+
     // The description is deliberately not here. It is markdown — headings,
     // lists, links — and this hero rendered it as plain text in a two-line
     // clamp, so a member read `## About` and `- item` as literal characters.
@@ -35,12 +46,17 @@
     class="flex flex-col gap-4 bg-raised px-4 py-4 sm:px-10 sm:py-6 md:flex-row md:items-center
            md:gap-8 md:px-20 md:py-4 min-h-0 md:min-h-44"
 >
-    {#if imageUrl}
+    {#if hasImage}
         <div
             class="aspect-[4/3] w-full max-w-md shrink-0 overflow-hidden border
                    border-line sm:aspect-auto sm:max-w-none sm:h-36 sm:w-56"
         >
-            <img src={imageUrl} alt={title} class="h-full w-full object-cover" />
+            <img
+                src={imageUrl}
+                alt={title}
+                onerror={() => (failedSrc = imageUrl)}
+                class="h-full w-full object-cover"
+            />
         </div>
     {/if}
 
diff --git a/components/frontend/src/lib/components/hackathon/RoundMedia.svelte b/components/frontend/src/lib/components/hackathon/RoundMedia.svelte
index 267fcfd1..e9daf820 100644
--- a/components/frontend/src/lib/components/hackathon/RoundMedia.svelte
+++ b/components/frontend/src/lib/components/hackathon/RoundMedia.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+    import { usableImage } from '$lib/utils/imageUrl';
+
     let {
         src,
         initials,
@@ -16,12 +18,10 @@
     // otherwise leave the browser's broken-image glyph in the circle — which
     // looks like a bug in the app rather than a bad link. `image` is free text
     // the proposer types, so this is the ordinary case, not the edge one.
-    //
-    // Recorded as *which* src failed rather than a boolean, so a new src is tried
-    // afresh: a component reused across rows (or an image corrected by an edit)
-    // must not stay failed because an earlier URL was.
+    // `usableImage` is where the rule lives; every surface drawing a stored
+    // address shares it.
     let failedSrc: string | undefined = $state(undefined);
-    const usable = $derived(src !== undefined && src !== '' && failedSrc !== src);
+    const usable = $derived(usableImage(src, failedSrc));
 </script>
 
 <!--
diff --git a/components/frontend/src/routes/(public)/hackathon/[id]/+page.server.ts b/components/frontend/src/routes/(public)/hackathon/[id]/+page.server.ts
index 157816bc..a656247c 100644
--- a/components/frontend/src/routes/(public)/hackathon/[id]/+page.server.ts
+++ b/components/frontend/src/routes/(public)/hackathon/[id]/+page.server.ts
@@ -102,6 +102,7 @@ export const load: PageServerLoad = async (event) => {
       id: hackathon.id,
       name: hackathon.name,
       description: hackathon.description ?? "",
+      logo: hackathon.logo,
       startsAt: hackathon.startsAt,
       endsAt: hackathon.endsAt,
       status: hackathon.status,
diff --git a/components/frontend/src/routes/(public)/hackathon/[id]/+page.svelte b/components/frontend/src/routes/(public)/hackathon/[id]/+page.svelte
index 4f1c28ba..911c27c0 100644
--- a/components/frontend/src/routes/(public)/hackathon/[id]/+page.svelte
+++ b/components/frontend/src/routes/(public)/hackathon/[id]/+page.svelte
@@ -14,6 +14,7 @@
 <HeroSection
     title={hackathon.name}
     dates={formatDateRange(hackathon)}
+    imageUrl={hackathon.logo}
     status={statusLabel(hackathon.status)}
     breadcrumbs={[
         { label: 'Hackathons', href: '/' },

From 882353b268b7537b46068e5adb9385f8696f7d65 Mon Sep 17 00:00:00 2001
From: Sabine Maennel <5292683+sabinem@users.noreply.github.com>
Date: Tue, 1 Sep 2026 19:35:59 +0200
Subject: [PATCH 03/10] feat(frontend): the About page leads with the
 hackathon's picture
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

A member opening About — the one page in the member area whose subject is
the hackathon itself — got a heading and a wall of markdown, no picture,
while the overview one click away showed that same logo as a crisp
thumbnail. The layout draws its hero on /overview alone, and deliberately
so: repeating the hackathon's identity above Participants or Teams pushes
someone's actual errand down the screen. About is the exception that rule
was always going to need.

Shown as a bounded banner rather than the hero's treatment. In a hero the
image is a backdrop with text over it and has to be dimmed to keep that
text legible; here nothing sits on top of it, so there is no contrast to
protect and no reason to dim. Capped at the measure the description below
already uses, so the picture and the prose share one left edge.

The layout's load already carried the hackathon, so this needs no new RPC
and no backend change — About was simply not passing `logo` through.
---
 .../my/hackathon/[id]/about/+page.server.ts   |  4 +++
 .../my/hackathon/[id]/about/+page.svelte      | 36 +++++++++++++++++++
 2 files changed, 40 insertions(+)

diff --git a/components/frontend/src/routes/(app)/my/hackathon/[id]/about/+page.server.ts b/components/frontend/src/routes/(app)/my/hackathon/[id]/about/+page.server.ts
index bf169409..e5a97192 100644
--- a/components/frontend/src/routes/(app)/my/hackathon/[id]/about/+page.server.ts
+++ b/components/frontend/src/routes/(app)/my/hackathon/[id]/about/+page.server.ts
@@ -15,5 +15,9 @@ export const load: PageServerLoad = async (event) => {
   return {
     name: hackathon.name,
     description: hackathon.description,
+    // The same address the overview's hero draws. Carried here because About is
+    // the one member page whose subject *is* the hackathon — everywhere else the
+    // picture would be decoration above someone's real errand.
+    logo: hackathon.logo,
   }
 }
diff --git a/components/frontend/src/routes/(app)/my/hackathon/[id]/about/+page.svelte b/components/frontend/src/routes/(app)/my/hackathon/[id]/about/+page.svelte
index 35bee41c..9311c87a 100644
--- a/components/frontend/src/routes/(app)/my/hackathon/[id]/about/+page.svelte
+++ b/components/frontend/src/routes/(app)/my/hackathon/[id]/about/+page.svelte
@@ -1,11 +1,47 @@
 <script lang="ts">
     import MarkdownContent from '$lib/components/forms/MarkdownContent.svelte';
+    import { usableImage } from '$lib/utils/imageUrl';
     import type { PageData } from './$types';
 
     let { data }: { data: PageData } = $props();
+
+    // Same rule every surface drawing a stored address uses: a URL somebody
+    // typed may serve a web page rather than bytes, and the broken-image glyph
+    // reads as a fault in the app instead of a bad link. Recorded as *which*
+    // address failed so a corrected one is tried afresh.
+    let failedSrc: string | undefined = $state(undefined);
+    const hasImage = $derived(usableImage(data.logo, failedSrc));
 </script>
 
+<!--
+  The hackathon's picture is shown here and, among the member pages, only here.
+  The layout draws its hero on /overview alone (see `showHero`), deliberately:
+  repeating the hackathon's identity above Participants or Teams pushes someone's
+  actual errand down the screen. About is the exception that rule was always
+  going to need — it is the one member page whose subject *is* the hackathon.
+
+  A bounded banner rather than the hero's treatment. In the hero the image is a
+  backdrop with text over it, so it is dimmed to a wash to keep that text legible
+  — on the public detail page to 9% of itself. Here nothing sits on top of it, so
+  there is no contrast to protect and no reason to dim: this is the one place a
+  reader can see what the organizers actually chose.
+
+  Capped at max-w-3xl to share the description's measure below it, so the two
+  line up on one left edge rather than the picture overhanging the prose.
+-->
 <div class="flex flex-col gap-6 px-4 py-6 sm:px-10 md:px-20">
+    {#if hasImage}
+        <!-- Decorative: the hackathon's name is the very next element, so alt
+             text here would have a screen reader say it twice. -->
+        <img
+            src={data.logo}
+            alt=""
+            onerror={() => (failedSrc = data.logo)}
+            class="aspect-[3/1] w-full max-w-3xl rounded-card border border-line
+                   object-cover"
+        />
+    {/if}
+
     <h1 class="text-title">About {data.name}</h1>
 
     {#if data.description}

From 14ce17847a5a4166cbee7554e721711fbe99ec0d Mon Sep 17 00:00:00 2001
From: Sabine Maennel <5292683+sabinem@users.noreply.github.com>
Date: Tue, 1 Sep 2026 19:36:23 +0200
Subject: [PATCH 04/10] style(frontend): hero images are dimmed once rather
 than twice
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Both public heroes dim their image twice: an opacity on the `<img>` and
then a scrim over it. It is the product of the two that reaches the
reader, and nothing in either number says so. The hackathon page ran 30%
under a 70% scrim — 9% of the picture — and the landing page 40% under
65%, or 14%. At 9% an image is not a backdrop but a faint tint, and reads
as something that failed to load.

Both now sit at 55% under a 55% scrim: about a quarter of the picture,
18% in dark mode, and the same pair on both surfaces, which they were not
before. The text still sits on `canvas` with the scrim between it and the
image, so the contrast the scrim was protecting is unchanged.

Both files now carry the arithmetic in a comment: neither number means
anything on its own, and the two have to move together.
---
 .../components/hackathon/HeroSection.svelte   | 25 ++++++++++++++++---
 .../frontend/src/routes/(public)/+page.svelte |  8 ++++--
 2 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/components/frontend/src/lib/components/hackathon/HeroSection.svelte b/components/frontend/src/lib/components/hackathon/HeroSection.svelte
index 8dad008d..92f80d6e 100644
--- a/components/frontend/src/lib/components/hackathon/HeroSection.svelte
+++ b/components/frontend/src/lib/components/hackathon/HeroSection.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
     import { resolve } from '$app/paths';
     import { Calendar, MapPin, Users } from 'lucide-svelte';
+    import { usableImage } from '$lib/utils/imageUrl';
 
     // Only the name and the breadcrumbs are required. Everything else is
     // optional because a hackathon may genuinely not have it: dates are
@@ -28,6 +29,14 @@
         capacity?: number;
     } = $props();
 
+    // The banner is a URL an organiser typed — there is no upload — so a link
+    // that serves a web page instead of an image is the ordinary mistake. It
+    // has to switch off `min-h-96` as well as the `<img>`: a 24rem band holding
+    // a broken image, or nothing at all, is worse than the short hero every
+    // hackathon without a logo already gets.
+    let failedSrc: string | undefined = $state(undefined);
+    const hasImage = $derived(usableImage(imageUrl, failedSrc));
+
     // Only a pair says anything; one half of it is a fragment, not a fact.
     const hasCounts = $derived(registered !== undefined && capacity !== undefined);
     const hasMeta = $derived(Boolean(dates) || Boolean(venue) || hasCounts);
@@ -39,18 +48,26 @@
 <section
     class="relative flex flex-col justify-end gap-4 overflow-hidden px-4 pt-8 pb-12
            sm:px-10 md:px-20"
-    class:min-h-96={imageUrl}
+    class:min-h-96={hasImage}
 >
-    {#if imageUrl}
+    <!-- Two dimmers stack here, and it is their product that matters: the image
+         at 55% under a 55%-opaque scrim shows about a quarter of itself (0.55 x
+         0.45), 18% in dark mode. It was 30% under a 70% scrim — 9% — which is
+         not a picture but a faint tint, and read as a rendering fault rather
+         than a backdrop. Raise either number alone and the pair drifts apart
+         again, so change them together. The same values are on the landing
+         page's hero, which is the only other surface doing this. -->
+    {#if hasImage}
         <img
             src={imageUrl}
             alt=""
-            class="pointer-events-none absolute inset-0 h-full w-full object-cover opacity-30 dark:opacity-20"
+            onerror={() => (failedSrc = imageUrl)}
+            class="pointer-events-none absolute inset-0 h-full w-full object-cover opacity-55 dark:opacity-40"
         />
     {/if}
     <!-- One scrim, not a light/dark pair: `canvas` already flips with the mode,
          so the two variants collapse into a single token. -->
-    <div class="pointer-events-none absolute inset-0 bg-canvas/70"></div>
+    <div class="pointer-events-none absolute inset-0 bg-canvas/55"></div>
 
     <div class="relative z-10 flex flex-col gap-4">
         <nav class="flex items-center gap-1.5 text-xs text-ink-2">
diff --git a/components/frontend/src/routes/(public)/+page.svelte b/components/frontend/src/routes/(public)/+page.svelte
index c0bfe748..c492b80d 100644
--- a/components/frontend/src/routes/(public)/+page.svelte
+++ b/components/frontend/src/routes/(public)/+page.svelte
@@ -70,12 +70,15 @@
     class="relative flex min-h-[30rem] flex-col items-center justify-center gap-6 overflow-hidden
            px-4 pt-8 pb-12 text-center sm:px-10 md:px-20"
 >
+    <!-- Image opacity and scrim multiply out to ~25% of the picture (18% dark),
+         matching HeroSection — see the arithmetic there. Change the two
+         together. -->
     <img
         src="/images/hackathon-ord-2024/ambiance/ambiance_1.webp"
         alt=""
-        class="pointer-events-none absolute inset-0 h-full w-full object-cover opacity-40 dark:opacity-25"
+        class="pointer-events-none absolute inset-0 h-full w-full object-cover opacity-55 dark:opacity-40"
     />
-    <div class="pointer-events-none absolute inset-0 bg-canvas/65"></div>
+    <div class="pointer-events-none absolute inset-0 bg-canvas/55"></div>
 
     <div class="relative z-10 flex flex-col items-center gap-6">
         <h1 class="max-w-2xl text-5xl font-bold leading-tight">
@@ -158,6 +161,7 @@
             <HackathonRow
                 href="/hackathon/{h.id}"
                 name={h.name}
+                imageUrl={h.logo}
                 meta={formatDateRange(h)}
                 badge={statusLabel(h.status)}
                 badgeVariant={statusBadgeVariant(h.status)}

From ba567ec2cc858c0cb12330de776ddcd347aa5814 Mon Sep 17 00:00:00 2001
From: Sabine Maennel <5292683+sabinem@users.noreply.github.com>
Date: Tue, 1 Sep 2026 20:55:08 +0200
Subject: [PATCH 05/10] =?UTF-8?q?feat(frontend):=20a=20hackathon's=20pictu?=
 =?UTF-8?q?re=20keeps=20its=20own=20shape=20everywhere=20One=20field,=20`H?=
 =?UTF-8?q?ackathon.logo`,=20was=20drawn=20four=20ways:=20a=2048px=20conta?=
 =?UTF-8?q?ined=20square=20in=20list=20rows,=20a=20224x144=20cover=20crop?=
 =?UTF-8?q?=20in=20the=20member=20hero,=20a=20full-bleed=20wallpaper=20at?=
 =?UTF-8?q?=209%=20behind=20the=20public=20page's=20title,=20and=20a=203:1?=
 =?UTF-8?q?=20cover=20banner=20on=20About.=20Same=20URL,=20four=20pictures?=
 =?UTF-8?q?=20=E2=80=94=20and=20three=20of=20them=20cropped,=20so=20a=20sq?=
 =?UTF-8?q?uare=20wordmark=20lost=20its=20top=20and=20bottom=20while=20a?=
 =?UTF-8?q?=20portrait=20poster=20lost=20most=20of=20itself.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

There is no ratio that serves what people actually paste: wide event
banners, square wordmarks with transparent backgrounds, 16:9 photographs
and the occasional poster. A fixed box crops half of them with `cover` or
strands the other half in bars with `contain`. So `StoredImage` imposes no
ratio. The picture keeps its own proportions, bounded by the wrapper's
width and one max-height, and the browser scales it down to fit both —
whole, never cropped, and predictable from a sentence: your picture, at
most this tall, at most this wide.

The public hero stops being wallpaper as a result, which removes the half
of 14ce17847a that dimmed it; the landing page's ambiance photo is a
static asset rather than anyone's logo and keeps that change. The hero is
also centred now: left-aligned, the text hung off the edge of a picture
whose width varies with what was pasted, so the column's edge moved from
hackathon to hackathon.
---
 .../components/hackathon/HeroCompact.svelte   |  30 +---
 .../components/hackathon/HeroSection.svelte   | 145 ++++++++----------
 .../components/hackathon/StoredImage.svelte   |  81 ++++++++++
 .../my/hackathon/[id]/about/+page.svelte      |  31 +---
 4 files changed, 161 insertions(+), 126 deletions(-)
 create mode 100644 components/frontend/src/lib/components/hackathon/StoredImage.svelte

diff --git a/components/frontend/src/lib/components/hackathon/HeroCompact.svelte b/components/frontend/src/lib/components/hackathon/HeroCompact.svelte
index 6af7bef5..f3aa5e4b 100644
--- a/components/frontend/src/lib/components/hackathon/HeroCompact.svelte
+++ b/components/frontend/src/lib/components/hackathon/HeroCompact.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { usableImage } from '$lib/utils/imageUrl';
+    import StoredImage from './StoredImage.svelte';
 
     let {
         title,
@@ -26,15 +26,6 @@
         badges?: { label: string; variant: string }[];
     } = $props();
 
-    // The logo is a URL an organiser typed — there is no upload — so "not an
-    // image" is an ordinary outcome, not an edge case. Without this the hero
-    // kept a bordered box holding the browser's broken-image glyph, which reads
-    // as a bug in the platform rather than as a link that needs fixing. Dropping
-    // the box entirely leaves the hero looking as it does for the hackathons
-    // that never set one.
-    let failedSrc: string | undefined = $state(undefined);
-    const hasImage = $derived(usableImage(imageUrl, failedSrc));
-
     // The description is deliberately not here. It is markdown — headings,
     // lists, links — and this hero rendered it as plain text in a two-line
     // clamp, so a member read `## About` and `- item` as literal characters.
@@ -46,19 +37,12 @@
     class="flex flex-col gap-4 bg-raised px-4 py-4 sm:px-10 sm:py-6 md:flex-row md:items-center
            md:gap-8 md:px-20 md:py-4 min-h-0 md:min-h-44"
 >
-    {#if hasImage}
-        <div
-            class="aspect-[4/3] w-full max-w-md shrink-0 overflow-hidden border
-                   border-line sm:aspect-auto sm:max-w-none sm:h-36 sm:w-56"
-        >
-            <img
-                src={imageUrl}
-                alt={title}
-                onerror={() => (failedSrc = imageUrl)}
-                class="h-full w-full object-cover"
-            />
-        </div>
-    {/if}
+    <!-- The same picture, drawn the same way, as the public page and About. It
+         used to be `object-cover` in a fixed 224x144 box, which cropped whatever
+         was pasted to that shape — a square wordmark lost its top and bottom.
+         The height cap keeps this hero's height where it was; the width now
+         follows the image instead of the other way round. -->
+    <StoredImage src={imageUrl} alt={title} maxHeight="max-h-36" class="shrink-0" />
 
     <div class="flex min-w-0 flex-1 flex-col gap-1.5">
         <span class="text-xs font-semibold text-accent-ink">{dates}</span>
diff --git a/components/frontend/src/lib/components/hackathon/HeroSection.svelte b/components/frontend/src/lib/components/hackathon/HeroSection.svelte
index 92f80d6e..14c411b5 100644
--- a/components/frontend/src/lib/components/hackathon/HeroSection.svelte
+++ b/components/frontend/src/lib/components/hackathon/HeroSection.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { resolve } from '$app/paths';
     import { Calendar, MapPin, Users } from 'lucide-svelte';
-    import { usableImage } from '$lib/utils/imageUrl';
+    import StoredImage from './StoredImage.svelte';
 
     // Only the name and the breadcrumbs are required. Everything else is
     // optional because a hackathon may genuinely not have it: dates are
@@ -29,93 +29,80 @@
         capacity?: number;
     } = $props();
 
-    // The banner is a URL an organiser typed — there is no upload — so a link
-    // that serves a web page instead of an image is the ordinary mistake. It
-    // has to switch off `min-h-96` as well as the `<img>`: a 24rem band holding
-    // a broken image, or nothing at all, is worse than the short hero every
-    // hackathon without a logo already gets.
-    let failedSrc: string | undefined = $state(undefined);
-    const hasImage = $derived(usableImage(imageUrl, failedSrc));
-
     // Only a pair says anything; one half of it is a fragment, not a fact.
     const hasCounts = $derived(registered !== undefined && capacity !== undefined);
     const hasMeta = $derived(Boolean(dates) || Boolean(venue) || hasCounts);
 </script>
 
-<!-- The tall variant is for the image: 24rem of canvas is what gives a banner
-     room to read as one. With no image there is nothing filling it, so the
-     section falls back to its content's own height. -->
+<!--
+  The hackathon's picture is shown, not used as wallpaper.
+
+  It used to be an `<img>` stretched behind this whole section at 30% opacity
+  under a 70% scrim — 9% of the picture, which is a tint rather than an image and
+  read as something failing to load. Being `object-cover` across a 24rem band, it
+  also cropped whatever was pasted to the band's shape: a square wordmark lost its
+  top and bottom.
+
+  Now it is drawn by `StoredImage`, at its own proportions, exactly as the
+  member's About page and the organiser's preview draw it. One field, one
+  appearance, wherever the reader meets it.
+
+  Centred as a block — breadcrumbs, picture, status, title and dates on one
+  axis — which is the landing page's hero treatment too. Left-aligned it hung off
+  the edge of a picture whose width now varies with whatever was pasted, so the
+  column's edge moved from hackathon to hackathon.
+-->
 <section
-    class="relative flex flex-col justify-end gap-4 overflow-hidden px-4 pt-8 pb-12
-           sm:px-10 md:px-20"
-    class:min-h-96={hasImage}
+    class="flex flex-col items-center gap-4 px-4 pt-8 pb-12 text-center sm:px-10
+           md:px-20"
 >
-    <!-- Two dimmers stack here, and it is their product that matters: the image
-         at 55% under a 55%-opaque scrim shows about a quarter of itself (0.55 x
-         0.45), 18% in dark mode. It was 30% under a 70% scrim — 9% — which is
-         not a picture but a faint tint, and read as a rendering fault rather
-         than a backdrop. Raise either number alone and the pair drifts apart
-         again, so change them together. The same values are on the landing
-         page's hero, which is the only other surface doing this. -->
-    {#if hasImage}
-        <img
-            src={imageUrl}
-            alt=""
-            onerror={() => (failedSrc = imageUrl)}
-            class="pointer-events-none absolute inset-0 h-full w-full object-cover opacity-55 dark:opacity-40"
-        />
-    {/if}
-    <!-- One scrim, not a light/dark pair: `canvas` already flips with the mode,
-         so the two variants collapse into a single token. -->
-    <div class="pointer-events-none absolute inset-0 bg-canvas/55"></div>
+    <nav class="flex items-center gap-1.5 text-xs text-ink-2">
+        {#each breadcrumbs as crumb, i (i)}
+            {#if i > 0}
+                <span>/</span>
+            {/if}
+            <a href={resolve(crumb.href)} class="no-underline hover:text-accent-ink"
+                >{crumb.label}</a
+            >
+        {/each}
+    </nav>
 
-    <div class="relative z-10 flex flex-col gap-4">
-        <nav class="flex items-center gap-1.5 text-xs text-ink-2">
-            {#each breadcrumbs as crumb, i (i)}
-                {#if i > 0}
-                    <span>/</span>
-                {/if}
-                <a href={resolve(crumb.href)} class="no-underline hover:text-accent-ink">{crumb.label}</a>
-            {/each}
-        </nav>
+    <StoredImage src={imageUrl} maxHeight="max-h-64" class="max-w-3xl" />
 
-        {#if status}
-            <span class="badge badge-outline-accent w-fit">
-                <span class="h-1.5 w-1.5 rounded-full bg-accent"></span>
-                <span>{status}</span>
-            </span>
-        {/if}
+    {#if status}
+        <span class="badge badge-outline-accent w-fit">
+            <span class="h-1.5 w-1.5 rounded-full bg-accent"></span>
+            <span>{status}</span>
+        </span>
+    {/if}
 
-        <h1
-            class="max-w-2xl text-3xl font-bold leading-tight whitespace-pre-line sm:text-4xl"
-        >
-            {title}
-        </h1>
+    <h1 class="max-w-2xl text-3xl font-bold leading-tight whitespace-pre-line sm:text-4xl">
+        {title}
+    </h1>
 
-        {#if hasMeta}
-            <div
-                class="flex flex-col gap-3 text-sm text-ink-2 sm:flex-row sm:flex-wrap
-                       sm:items-center sm:gap-6"
-            >
-                {#if dates}
-                    <span class="flex min-w-0 items-center gap-2">
-                        <Calendar class="h-4 w-4 shrink-0 text-accent-ink" />
-                        {dates}
-                    </span>
-                {/if}
-                {#if venue}
-                    <span class="flex min-w-0 items-center gap-2">
-                        <MapPin class="h-4 w-4 shrink-0 text-accent-ink" />
-                        {venue}
-                    </span>
-                {/if}
-                {#if hasCounts}
-                    <span class="flex min-w-0 items-center gap-2">
-                        <Users class="h-4 w-4 shrink-0 text-accent-ink" />
-                        {registered} / {capacity} registered
-                    </span>
-                {/if}
-            </div>
-        {/if}
-    </div>
+    {#if hasMeta}
+        <div
+            class="flex flex-col items-center gap-3 text-sm text-ink-2 sm:flex-row
+                   sm:flex-wrap sm:items-center sm:justify-center sm:gap-6"
+        >
+            {#if dates}
+                <span class="flex min-w-0 items-center gap-2">
+                    <Calendar class="h-4 w-4 shrink-0 text-accent-ink" />
+                    {dates}
+                </span>
+            {/if}
+            {#if venue}
+                <span class="flex min-w-0 items-center gap-2">
+                    <MapPin class="h-4 w-4 shrink-0 text-accent-ink" />
+                    {venue}
+                </span>
+            {/if}
+            {#if hasCounts}
+                <span class="flex min-w-0 items-center gap-2">
+                    <Users class="h-4 w-4 shrink-0 text-accent-ink" />
+                    {registered} / {capacity} registered
+                </span>
+            {/if}
+        </div>
+    {/if}
 </section>
diff --git a/components/frontend/src/lib/components/hackathon/StoredImage.svelte b/components/frontend/src/lib/components/hackathon/StoredImage.svelte
new file mode 100644
index 00000000..fba0181f
--- /dev/null
+++ b/components/frontend/src/lib/components/hackathon/StoredImage.svelte
@@ -0,0 +1,81 @@
+<script lang="ts">
+    import { usableImage } from '$lib/utils/imageUrl';
+
+    let {
+        src,
+        alt = '',
+        maxHeight = 'max-h-56',
+        class: extra = '',
+        onload,
+        onerror,
+    }: {
+        src?: string;
+        alt?: string;
+        /**
+         * The one dimension a caller gets to choose. A Tailwind `max-h-*` class
+         * rather than a number, so it goes through the same scale as everything
+         * else on the page.
+         */
+        maxHeight?: string;
+        /**
+         * Classes for the *wrapper*, which is where a width cap belongs. Putting
+         * one on the image would collide with its own `max-w-full` — two
+         * `max-width` utilities on one element, resolved by stylesheet order
+         * rather than by intent, which is how a picture meant to stop at 48rem
+         * ends up spanning the window.
+         */
+        class?: string;
+        /** For a caller using the load itself as a check — see `ImageUrlField`. */
+        onload?: () => void;
+        onerror?: () => void;
+    } = $props();
+
+    // The shared rule for an address somebody typed: show nothing rather than
+    // the browser's broken-image glyph, and record *which* address failed so a
+    // corrected one is tried afresh.
+    let failedSrc: string | undefined = $state(undefined);
+    const usable = $derived(usableImage(src, failedSrc));
+</script>
+
+<!--
+  A picture stored as a URL somebody typed — a hackathon's logo, a project's
+  image — drawn the same way everywhere it appears, including in the form where
+  the address is entered.
+
+  There is one field per picture and no way to know what shape it holds.
+  Organisers paste wide event banners, square wordmarks with transparent
+  backgrounds, 16:9 photographs and the occasional portrait poster. Any fixed
+  aspect box crops at least two of those badly with `cover`, or strands them in
+  bars with `contain`. There is no ratio that serves all four.
+
+  So no ratio is imposed. The image keeps its own proportions, bounded by the
+  wrapper's width and one max-height, and the browser scales it down to fit both.
+  A banner comes out wide and short, a wordmark square, a poster tall and narrow
+  — each of them whole, none of them cropped, and the rule fits in a sentence
+  somebody can predict from: *your picture, at most this tall, at most this
+  wide.* That is also what makes the form's preview honest — it is this
+  component, not an impression of it.
+
+  The ground behind it is not decoration: a wordmark saved as a transparent PNG
+  has to land on something, and on the bare canvas it would appear to float. The
+  hairline gives a photograph an edge for the same reason.
+
+  Not used for the row thumbnails in a list — those need a fixed square footprint
+  to keep the rows aligned, which is a different problem. `HackathonRow` solves
+  it with the same `object-contain` rule inside a fixed box.
+-->
+{#if usable}
+    <div class={extra}>
+        <img
+            {src}
+            {alt}
+            onload={() => onload?.()}
+            onerror={() => {
+                failedSrc = src;
+                onerror?.();
+            }}
+            class="block h-auto w-auto max-w-full rounded-card border border-line
+                   bg-raised {maxHeight}"
+        />
+    </div>
+{/if}
diff --git a/components/frontend/src/routes/(app)/my/hackathon/[id]/about/+page.svelte b/components/frontend/src/routes/(app)/my/hackathon/[id]/about/+page.svelte
index 9311c87a..f4e98506 100644
--- a/components/frontend/src/routes/(app)/my/hackathon/[id]/about/+page.svelte
+++ b/components/frontend/src/routes/(app)/my/hackathon/[id]/about/+page.svelte
@@ -1,16 +1,9 @@
 <script lang="ts">
     import MarkdownContent from '$lib/components/forms/MarkdownContent.svelte';
-    import { usableImage } from '$lib/utils/imageUrl';
+    import StoredImage from '$lib/components/hackathon/StoredImage.svelte';
     import type { PageData } from './$types';
 
     let { data }: { data: PageData } = $props();
-
-    // Same rule every surface drawing a stored address uses: a URL somebody
-    // typed may serve a web page rather than bytes, and the broken-image glyph
-    // reads as a fault in the app instead of a bad link. Recorded as *which*
-    // address failed so a corrected one is tried afresh.
-    let failedSrc: string | undefined = $state(undefined);
-    const hasImage = $derived(usableImage(data.logo, failedSrc));
 </script>
 
 <!--
@@ -20,27 +13,17 @@
   actual errand down the screen. About is the exception that rule was always
   going to need — it is the one member page whose subject *is* the hackathon.
 
-  A bounded banner rather than the hero's treatment. In the hero the image is a
-  backdrop with text over it, so it is dimmed to a wash to keep that text legible
-  — on the public detail page to 9% of itself. Here nothing sits on top of it, so
-  there is no contrast to protect and no reason to dim: this is the one place a
-  reader can see what the organizers actually chose.
+  Drawn by `StoredImage`, which is also what the public page and the
+  organiser's preview of it use. An organiser pastes one URL and sees one
+  picture, whatever shape it turned out to be.
 
   Capped at max-w-3xl to share the description's measure below it, so the two
   line up on one left edge rather than the picture overhanging the prose.
 -->
 <div class="flex flex-col gap-6 px-4 py-6 sm:px-10 md:px-20">
-    {#if hasImage}
-        <!-- Decorative: the hackathon's name is the very next element, so alt
-             text here would have a screen reader say it twice. -->
-        <img
-            src={data.logo}
-            alt=""
-            onerror={() => (failedSrc = data.logo)}
-            class="aspect-[3/1] w-full max-w-3xl rounded-card border border-line
-                   object-cover"
-        />
-    {/if}
+    <!-- Decorative: the hackathon's name is the very next element, so alt text
+         here would have a screen reader say it twice. -->
+    <StoredImage src={data.logo} maxHeight="max-h-64" class="max-w-3xl" />
 
     <h1 class="text-title">About {data.name}</h1>
 

From 147e811eaf21a825ff8add09344637520aeb559b Mon Sep 17 00:00:00 2001
From: Sabine Maennel <5292683+sabinem@users.noreply.github.com>
Date: Tue, 1 Sep 2026 20:55:51 +0200
Subject: [PATCH 06/10] feat(frontend): the public hackathon page is defined in
 one place The public route's body moves into `PublicHackathonView`, leaving
 the route a twenty-line caller of it. On its own that is a refactor; the
 reason for it is the organiser's preview in the next commit, which renders
 this same component rather than a copy of the markup.
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

A preview built from its own markup looks right the day it is written and
lies by the end of the month, and it lies worst exactly where it matters
here — the picture, whose shape nobody can predict from the URL they
pasted. Dates and the status label are derived inside the component for
the same reason, rather than passed in.

`preview` marks the organiser's rendering: the view goes `inert`, so
nothing in it can be clicked, and the Join block is left out — it says the
same thing for every hackathon and nothing on the editor's form changes
it.
---
 .../hackathon/PublicHackathonView.svelte      | 95 +++++++++++++++++++
 .../(public)/hackathon/[id]/+page.svelte      | 55 +++--------
 2 files changed, 107 insertions(+), 43 deletions(-)
 create mode 100644 components/frontend/src/lib/components/hackathon/PublicHackathonView.svelte

diff --git a/components/frontend/src/lib/components/hackathon/PublicHackathonView.svelte b/components/frontend/src/lib/components/hackathon/PublicHackathonView.svelte
new file mode 100644
index 00000000..3612a740
--- /dev/null
+++ b/components/frontend/src/lib/components/hackathon/PublicHackathonView.svelte
@@ -0,0 +1,95 @@
+<script lang="ts">
+    import MarkdownContent from '$lib/components/forms/MarkdownContent.svelte';
+    import HeroSection from './HeroSection.svelte';
+    import JoinCta from './JoinCta.svelte';
+    import { formatDateRange } from '$lib/utils/hackathonDates';
+    import { statusLabel } from '$lib/utils/hackathonStatus';
+
+    let {
+        id,
+        name,
+        description,
+        logo,
+        startsAt,
+        endsAt,
+        status,
+        signedIn,
+        preview = false,
+    }: {
+        id: string;
+        name: string;
+        description: string;
+        logo?: string;
+        startsAt?: Date;
+        endsAt?: Date;
+        /** Raw HackathonStatus number, as the loader returns it. */
+        status: number;
+        /** Unused when `preview` is set — the preview draws no Join block. */
+        signedIn?: boolean;
+        /**
+         * Drawn for an organiser checking their own page rather than for a
+         * visitor. Everything is rendered the same; only the interaction is
+         * withdrawn, because a Join button that works inside the editor would
+         * enrol the organiser in their own hackathon by accident.
+         */
+        preview?: boolean;
+    } = $props();
+
+    // Derived here, not passed in, for the same reason the whole view is one
+    // component: a preview that formats its own dates or labels its own status
+    // is a second implementation, and second implementations drift.
+    const dates = $derived(formatDateRange({ startsAt, endsAt }));
+</script>
+
+<!--
+  What a visitor sees at /hackathon/<id>, defined once.
+
+  The public route renders this, and so does the organiser's Public page editor.
+  That is the whole point: a preview built from its own markup looks right on the
+  day it is written and lies by the end of the month, and the lie is worst
+  exactly where it matters — the picture, whose shape nobody can predict from the
+  URL they pasted.
+-->
+<div inert={preview}>
+    <HeroSection
+        title={name}
+        {dates}
+        imageUrl={logo}
+        status={statusLabel(status)}
+        breadcrumbs={[
+            { label: 'Hackathons', href: '/' },
+            { label: name, href: `/hackathon/${id}` },
+        ]}
+    />
+
+    <div class="mx-auto w-full max-w-7xl">
+        <section class="px-4 py-12 sm:px-10 md:px-20">
+            {#if description}
+                <!-- The organizer's own markdown, through the same component the
+                     editor previews with, so what they wrote is what shows. -->
+                <div class="max-w-3xl">
+                    <MarkdownContent content={description} />
+                </div>
+            {:else}
+                <!-- Said plainly rather than filled with something inviting: this
+                     page has one job, and an empty description means the organizer
+                     has not done it yet. -->
+                <p class="m-0 text-sm text-ink-3">
+                    The organizers have not written a description for this hackathon yet.
+                </p>
+            {/if}
+        </section>
+
+        <!-- The way in, at the foot of the page: everything above is what the
+             hackathon is, and this is what to do about it. One `btn-solid` on the
+             page, which is the theme's rule — the hero above carries no action.
+
+             Left out of the preview: it is the same block for every hackathon and
+             nothing on the form beside it changes what it says, so in the editor
+             it is a fixed footer taking the room the organiser wants for their
+             own content. -->
+        {#if !preview}
+            <JoinCta hackathonId={id} {name} {status} signedIn={signedIn ?? false} />
+        {/if}
+    </div>
+</div>
diff --git a/components/frontend/src/routes/(public)/hackathon/[id]/+page.svelte b/components/frontend/src/routes/(public)/hackathon/[id]/+page.svelte
index 911c27c0..2a114b06 100644
--- a/components/frontend/src/routes/(public)/hackathon/[id]/+page.svelte
+++ b/components/frontend/src/routes/(public)/hackathon/[id]/+page.svelte
@@ -1,9 +1,5 @@
 <script lang="ts">
-    import HeroSection from '$lib/components/hackathon/HeroSection.svelte';
-    import JoinCta from '$lib/components/hackathon/JoinCta.svelte';
-    import MarkdownContent from '$lib/components/forms/MarkdownContent.svelte';
-    import { formatDateRange } from '$lib/utils/hackathonDates';
-    import { statusLabel } from '$lib/utils/hackathonStatus';
+    import PublicHackathonView from '$lib/components/hackathon/PublicHackathonView.svelte';
     import type { PageData } from './$types';
 
     let { data }: { data: PageData } = $props();
@@ -11,42 +7,15 @@
     const hackathon = $derived(data.hackathon);
 </script>
 
-<HeroSection
-    title={hackathon.name}
-    dates={formatDateRange(hackathon)}
-    imageUrl={hackathon.logo}
-    status={statusLabel(hackathon.status)}
-    breadcrumbs={[
-        { label: 'Hackathons', href: '/' },
-        { label: hackathon.name, href: `/hackathon/${hackathon.id}` },
-    ]}
+<!-- The page itself is the component, so the organiser's preview of it cannot
+     be showing something else. See PublicHackathonView. -->
+<PublicHackathonView
+    id={hackathon.id}
+    name={hackathon.name}
+    description={hackathon.description}
+    logo={hackathon.logo}
+    startsAt={hackathon.startsAt}
+    endsAt={hackathon.endsAt}
+    status={hackathon.status}
+    signedIn={data.signedIn}
 />
-
-<div class="mx-auto w-full max-w-7xl">
-    <section class="px-4 py-12 sm:px-10 md:px-20">
-        {#if hackathon.description}
-            <!-- The organizer's own markdown, through the same component the
-                 editor previews with, so what they wrote is what shows. -->
-            <div class="max-w-3xl">
-                <MarkdownContent content={hackathon.description} />
-            </div>
-        {:else}
-            <!-- Said plainly rather than filled with something inviting: this
-                 page has one job, and an empty description means the organizer
-                 has not done it yet. -->
-            <p class="text-sm text-ink-3">
-                The organizers have not written a description for this hackathon yet.
-            </p>
-        {/if}
-    </section>
-
-    <!-- The way in, at the foot of the page: everything above is what the
-         hackathon is, and this is what to do about it. One `btn-solid` on the
-         page, which is the theme's rule — the hero above carries no action. -->
-    <JoinCta
-        hackathonId={hackathon.id}
-        name={hackathon.name}
-        status={hackathon.status}
-        signedIn={data.signedIn}
-    />
-</div>

From 8c110e730c6bf2437028fc96f95866988c26c708 Mon Sep 17 00:00:00 2001
From: Sabine Maennel <5292683+sabinem@users.noreply.github.com>
Date: Tue, 1 Sep 2026 20:56:49 +0200
Subject: [PATCH 07/10] =?UTF-8?q?feat(frontend):=20the=20public=20page=20e?=
 =?UTF-8?q?ditor=20shows=20what=20it=20is=20about=20to=20publish=20Editing?=
 =?UTF-8?q?=20a=20hackathon=20meant=20typing=20a=20logo=20URL=20into=20a?=
 =?UTF-8?q?=20field=20and=20finding=20out=20what=20it=20looked=20like=20by?=
 =?UTF-8?q?=20visiting=20the=20page=20afterwards.=20The=20form=20now=20sit?=
 =?UTF-8?q?s=20beside=20the=20public=20page=20itself,=20rendered=20from=20?=
 =?UTF-8?q?what=20is=20currently=20typed=20and=20updating=20as=20it=20is?=
 =?UTF-8?q?=20typed=20=E2=80=94=20the=20same=20component=20the=20public=20?=
 =?UTF-8?q?route=20renders,=20not=20an=20impression=20of=20it.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

`value` becomes a `$bindable` prop on ImageUrlField and MarkdownEditor so
the preview reads the fields rather than keeping a second copy that can
disagree with them. Callers passing `value` one-way are unaffected.

The field's own preview was a 64px square box captioned "This is what will
be shown", which was true of no shape but a square. It draws with
`StoredImage` now, so the form, About and the public page agree. The help
text also says how to get a direct link at all — right-click the picture
and choose Copy image address — because that menu item is the whole
difference between a working URL and a share link, and it is not something
most people have had a reason to notice.

The page was still written against the Skeleton palette it was built on —
`text-surface-950-50`, `border-surface-200-800`, `preset-filled-primary-500`
— none of which exist as utilities any more, so the form had been
rendering unstyled. It is on the theme's own `field`, `field-label`,
`btn-solid` and `--hk-*` tokens now.
---
 .../lib/components/forms/ImageUrlField.svelte |  55 ++--
 .../components/forms/MarkdownEditor.svelte    |  19 +-
 .../hackathon/[id]/manage/edit/+page.svelte   | 244 +++++++++++-------
 3 files changed, 192 insertions(+), 126 deletions(-)

diff --git a/components/frontend/src/lib/components/forms/ImageUrlField.svelte b/components/frontend/src/lib/components/forms/ImageUrlField.svelte
index 2a02dd5a..bd1e9258 100644
--- a/components/frontend/src/lib/components/forms/ImageUrlField.svelte
+++ b/components/frontend/src/lib/components/forms/ImageUrlField.svelte
@@ -1,11 +1,12 @@
 <script lang="ts">
     import { adviseImageUrl, usableImage } from '$lib/utils/imageUrl';
     import { isHttpUrl } from '$lib/utils/url';
+    import StoredImage from '$lib/components/hackathon/StoredImage.svelte';
 
     let {
         name,
         label,
-        value = '',
+        value = $bindable(''),
         placeholder = 'https://…',
         fieldClass = 'field',
         labelClass = 'field-label',
@@ -34,14 +35,17 @@
     // this field ends up holding. So the field has to be where a bad link is
     // caught — after the save there is nothing left but a broken image on
     // somebody else's page, with no hint of which link did it.
-    let url = $state(value);
+    //
+    // `value` is that text and it is bindable, so a page previewing what it is
+    // about to save reads the address from the field itself rather than keeping
+    // a second copy of it that can drift.
 
     // The address the preview is currently trying. A beat behind the field, so a
     // half-typed host is not requested character by character and the verdict
     // below does not contradict itself mid-word.
     let probed = $state(value.trim());
     $effect(() => {
-        const next = url.trim();
+        const next = value.trim();
         const timer = setTimeout(() => (probed = next), 500);
         return () => clearTimeout(timer);
     });
@@ -70,36 +74,41 @@
         type="url"
         {name}
         {placeholder}
-        bind:value={url}
+        bind:value={value}
         class={fieldClass}
     />
 
+    <!-- The instruction, not just the rule. "A link to the image file itself"
+         describes the destination without saying how to get one, and the way to
+         get one is a menu item most people have never had a reason to notice. -->
     <span class="font-normal text-ink-3">
-        A link to the image file itself — a share or page link will not render.
+        A link to the image file itself — a share or page link will not render. In
+        most browsers: right-click the picture and choose
+        <span class="text-ink-2">Copy image address</span>
+        (Firefox calls it <span class="text-ink-2">Copy Image Link</span>).
     </span>
 
     {#if probed !== ''}
         <!-- Deliberately not `aria-live`: this settles a beat after typing stops
              and would interrupt somebody still filling the form in. It sits
              beside the field they are already looking at. -->
-        <div class="flex items-start gap-3 pt-1 font-normal">
+        <div class="flex flex-col items-start gap-2 pt-1 font-normal">
             {#if showImage}
-                <span
-                    class="flex h-16 w-16 shrink-0 items-center justify-center overflow-hidden
-                           border border-line bg-raised"
-                >
-                    <!-- Kept in the tree while it loads rather than swapped in on
-                         success: the load *is* the check, so something has to be
-                         doing it. -->
-                    <img
-                        src={probed}
-                        alt=""
-                        onload={() => (loaded = probed)}
-                        onerror={() => (failed = probed)}
-                        class="h-full w-full object-contain"
-                        class:opacity-0={checking}
-                    />
-                </span>
+                <!-- The same component the public page and About draw with, at a
+                     smaller height cap. A 64px square box stood here saying "this
+                     is what will be shown", which was true of no shape but a
+                     square: a wide banner was boxed and a poster shrunk to a
+                     stamp, and neither looked like the page it was previewing.
+                     Kept in the tree while it loads rather than swapped in on
+                     success — the load *is* the check, so something has to be
+                     doing it, which is what the opacity is for. -->
+                <StoredImage
+                    src={probed}
+                    maxHeight="max-h-40"
+                    class="max-w-sm {checking ? 'opacity-0' : ''}"
+                    onload={() => (loaded = probed)}
+                    onerror={() => (failed = probed)}
+                />
             {/if}
 
             <span class="flex min-w-0 flex-col items-start gap-1">
@@ -130,7 +139,7 @@
                     <button
                         type="button"
                         class="btn btn-sm btn-outline"
-                        onclick={() => (url = advice.direct ?? url)}
+                        onclick={() => (value = advice.direct ?? value)}
                     >
                         Use the direct link
                     </button>
diff --git a/components/frontend/src/lib/components/forms/MarkdownEditor.svelte b/components/frontend/src/lib/components/forms/MarkdownEditor.svelte
index bea451e1..f895f70e 100644
--- a/components/frontend/src/lib/components/forms/MarkdownEditor.svelte
+++ b/components/frontend/src/lib/components/forms/MarkdownEditor.svelte
@@ -28,7 +28,7 @@
     let {
         id,
         name,
-        value = '',
+        value = $bindable(''),
         rows = 8,
         placeholder = '',
         required = false,
@@ -46,7 +46,6 @@
         maxlength?: number;
     } = $props();
 
-    let text = $state(value);
     let mode: 'write' | 'preview' = $state('write');
     let area: HTMLTextAreaElement | undefined = $state();
 
@@ -98,10 +97,10 @@
     async function apply(transform: (edit: Edit) => Edit | null) {
         if (!area) return;
 
-        const next = transform({ value: text, start: area.selectionStart, end: area.selectionEnd });
+        const next = transform({ value, start: area.selectionStart, end: area.selectionEnd });
         if (!next) return;
 
-        const { from, to, text: inserted } = diffRange(text, next.value);
+        const { from, to, text: inserted } = diffRange(value, next.value);
         // No transform currently returns its input unchanged, but if one ever
         // does, `execCommand('delete')` on a collapsed selection below would eat
         // the character before the caret instead of doing nothing.
@@ -116,7 +115,7 @@
                 ? document.execCommand('insertText', false, inserted)
                 : document.execCommand('delete'));
 
-        if (!undoable) text = next.value;
+        if (!undoable) value = next.value;
 
         await tick();
         area.setSelectionRange(next.start, next.end);
@@ -132,7 +131,7 @@
             // the decision and the edit cannot disagree.
             if (!area) return;
             const next = continueList({
-                value: text,
+                value,
                 start: area.selectionStart,
                 end: area.selectionEnd,
             });
@@ -151,7 +150,7 @@
         void apply(run);
     }
 
-    const remaining = $derived(maxlength ? maxlength - text.length : 0);
+    const remaining = $derived(maxlength ? maxlength - value.length : 0);
 </script>
 
 <div class="flex flex-col gap-2">
@@ -220,7 +219,7 @@
         {id}
         {name}
         bind:this={area}
-        bind:value={text}
+        bind:value={value}
         {rows}
         {placeholder}
         {required}
@@ -246,8 +245,8 @@
              markup behind `display: none`. On the 10,000-character
              descriptions four of these forms allow, that is not free. -->
         {#if mode === 'preview'}
-            {#if text.trim()}
-                <MarkdownContent content={text} />
+            {#if value.trim()}
+                <MarkdownContent content={value} />
             {:else}
                 <p class="m-0 text-ink-3">Nothing to preview yet.</p>
             {/if}
diff --git a/components/frontend/src/routes/(app)/my/hackathon/[id]/manage/edit/+page.svelte b/components/frontend/src/routes/(app)/my/hackathon/[id]/manage/edit/+page.svelte
index ba2256a7..8536120e 100644
--- a/components/frontend/src/routes/(app)/my/hackathon/[id]/manage/edit/+page.svelte
+++ b/components/frontend/src/routes/(app)/my/hackathon/[id]/manage/edit/+page.svelte
@@ -2,6 +2,7 @@
     import { resolve } from '$app/paths';
     import ImageUrlField from '$lib/components/forms/ImageUrlField.svelte';
     import MarkdownEditor from '$lib/components/forms/MarkdownEditor.svelte';
+    import PublicHackathonView from '$lib/components/hackathon/PublicHackathonView.svelte';
     import type { ActionData, PageData } from './$types';
 
     let { data, form }: { data: PageData; form: ActionData } = $props();
@@ -17,127 +18,184 @@
         return new Date(date.getTime() - offset * 60_000).toISOString().slice(0, 10);
     }
 
+    // Built as a local date rather than through `new Date('2026-10-24')`, which
+    // parses as UTC midnight and can render as the day before in a western
+    // timezone. The preview would then show a date the form does not.
+    function fromDateInputValue(v: string): Date | undefined {
+        const m = v.match(/^(\d{4})-(\d{2})-(\d{2})$/);
+        if (!m) return undefined;
+        return new Date(Number(m[1]), Number(m[2]) - 1, Number(m[3]));
+    }
+
     // TODO(backend: hackathon-edit-clear-dates): once a hackathon has dates,
     // emptying both fields is silently ignored rather than clearing them — see
     // the matching TODO in +page.server.ts. Naming the limitation here beats
     // letting someone clear the fields and believe it worked.
     const hasDates = $derived(Boolean(hackathon.startsAt || hackathon.endsAt));
 
-    const FIELD_CLASS =
-        'h-9 w-full rounded-none border border-surface-200-800 bg-surface-50-950 px-3 text-xs ' +
-        'text-surface-950-50 placeholder:text-surface-700-300 focus:border-primary-500 ' +
-        'focus:outline-none';
-    const LABEL_CLASS = 'flex flex-col gap-1 text-xs font-semibold text-surface-500';
+    // Every field the public page reads, held here so the preview beside the
+    // form can be driven by what is typed rather than by what was last saved.
+    // The inputs keep their `name` attributes and the form still posts normally
+    // — this is a second reader of the same controls, not a replacement for
+    // them.
+    let draft = $state({
+        name: hackathon.name,
+        visibility: hackathon.visibility === PRIVATE ? 'private' : 'public',
+        startsAt: toDateInputValue(hackathon.startsAt),
+        endsAt: toDateInputValue(hackathon.endsAt),
+        logo: hackathon.logo ?? '',
+        description: hackathon.description ?? '',
+    });
+
+    const isPublic = $derived(draft.visibility === 'public');
 </script>
 
+<!--
+  The organiser's view of their own public page: the fields on the left, and on
+  the right the page itself, rendered from what is currently typed.
+
+  The preview is `PublicHackathonView` — the same component the public route
+  renders, not a mock-up of it. That is the point of the screen. A picture whose
+  shape nobody can predict from the URL they pasted is exactly the thing a
+  hand-built preview gets wrong, and it would get it wrong quietly.
+
+  Side by side from xl up, where there is room for both; stacked below it. The
+  preview is `inert`, so nothing in it can be clicked from here — a working Join
+  button would enrol the organiser in their own hackathon.
+-->
 <div class="flex w-full flex-col gap-6 px-4 py-8 sm:px-10 md:px-20">
     <div class="flex flex-col gap-1">
         <!-- Back where the form is reached from, which is Settings —
              /overview is the member's page and offers no way in here. -->
         <a
             href={resolve(`/my/hackathon/${hackathon.id}/manage`)}
-            class="w-fit text-xs font-semibold text-primary-700-300 no-underline hover:underline"
+            class="w-fit text-xs font-semibold text-accent-ink no-underline hover:underline"
         >
             &larr; Back to Settings
         </a>
-        <h1 class="m-0 text-lg font-bold text-surface-950-50">Edit Hackathon</h1>
+        <h1 class="m-0 text-title text-ink">Public page</h1>
+        <p class="m-0 text-xs text-ink-3">
+            The name, dates, picture and description everyone sees — visitors on the
+            hackathon's public page, and members on About.
+        </p>
     </div>
 
-    <!-- Server-side validation only: every rule here is one the action repeats,
-         and the action is what the backend actually sees. -->
-    <form method="POST" action="?/edit" class="flex w-full flex-col gap-6">
-        {#if form?.message}
-            <p class="m-0 text-xs text-error-500" role="alert">{form.message}</p>
-        {/if}
-
-        <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
-            <label class="{LABEL_CLASS} sm:col-span-2">
-                Name
-                <input
-                    type="text"
-                    name="name"
-                    required
-                    minlength="3"
-                    maxlength="255"
-                    value={hackathon.name}
-                    class={FIELD_CLASS}
-                />
-            </label>
+    <div class="grid gap-8 xl:grid-cols-[minmax(0,24rem)_minmax(0,1fr)] xl:items-start">
+        <!-- Server-side validation only: every rule here is one the action repeats,
+             and the action is what the backend actually sees. -->
+        <form method="POST" action="?/edit" class="flex w-full flex-col gap-6">
+            {#if form?.message}
+                <p class="m-0 text-xs text-danger-ink" role="alert">{form.message}</p>
+            {/if}
 
-            <fieldset class="m-0 flex flex-col gap-1 border-0 p-0 sm:col-span-2">
-                <legend class="mb-1 p-0 text-xs font-semibold text-surface-500">Visibility</legend>
-                <label class="flex items-center gap-2 text-xs text-surface-950-50">
+            <div class="grid gap-4 sm:grid-cols-2">
+                <label class="field-label sm:col-span-2">
+                    Name
                     <input
-                        type="radio"
-                        name="visibility"
-                        value="public"
-                        checked={hackathon.visibility !== PRIVATE}
+                        type="text"
+                        name="name"
+                        required
+                        minlength="3"
+                        maxlength="255"
+                        bind:value={draft.name}
+                        class="field"
                     />
-                    Public — anyone can see it and ask to join
                 </label>
-                <label class="flex items-center gap-2 text-xs text-surface-950-50">
-                    <input
-                        type="radio"
-                        name="visibility"
-                        value="private"
-                        checked={hackathon.visibility === PRIVATE}
-                    />
-                    Private — only people you give access to
+
+                <fieldset class="m-0 flex flex-col gap-1 border-0 p-0 sm:col-span-2">
+                    <legend class="mb-1 p-0 text-xs font-semibold text-ink-3">Visibility</legend>
+                    <label class="flex items-center gap-2 text-xs text-ink">
+                        <input
+                            type="radio"
+                            name="visibility"
+                            value="public"
+                            bind:group={draft.visibility}
+                        />
+                        Public — anyone can see it and ask to join
+                    </label>
+                    <label class="flex items-center gap-2 text-xs text-ink">
+                        <input
+                            type="radio"
+                            name="visibility"
+                            value="private"
+                            bind:group={draft.visibility}
+                        />
+                        Private — only people you give access to
+                    </label>
+                </fieldset>
+
+                <label class="field-label">
+                    Starts at (optional)
+                    <input type="date" name="startsAt" bind:value={draft.startsAt} class="field" />
                 </label>
-            </fieldset>
-
-            <label class={LABEL_CLASS}>
-                Starts at (optional)
-                <input
-                    type="date"
-                    name="startsAt"
-                    value={toDateInputValue(hackathon.startsAt)}
-                    class={FIELD_CLASS}
+
+                <label class="field-label">
+                    Ends at (optional)
+                    <input type="date" name="endsAt" bind:value={draft.endsAt} class="field" />
+                </label>
+
+                {#if hasDates}
+                    <p class="m-0 text-xs text-ink-3 sm:col-span-2">
+                        Dates can be changed but not removed.
+                    </p>
+                {/if}
+
+                <ImageUrlField
+                    name="logo"
+                    label="Logo URL (optional)"
+                    bind:value={draft.logo}
+                    class="sm:col-span-2"
                 />
-            </label>
-
-            <label class={LABEL_CLASS}>
-                Ends at (optional)
-                <input
-                    type="date"
-                    name="endsAt"
-                    value={toDateInputValue(hackathon.endsAt)}
-                    class={FIELD_CLASS}
+            </div>
+
+            <!-- Last and full width: the only field with no natural size, and the one
+                 where the room is worth having for the source and its preview both. -->
+            <div class="field-label w-full">
+                <label for="hackathon-description">Description (optional)</label>
+                <MarkdownEditor
+                    id="hackathon-description"
+                    name="description"
+                    bind:value={draft.description}
+                    rows={12}
+                    maxlength={10000}
+                    placeholder="What is this hackathon about?"
                 />
-            </label>
+            </div>
 
-            {#if hasDates}
-                <p class="m-0 text-xs text-surface-500 sm:col-span-2">
-                    Dates can be changed but not removed.
-                </p>
-            {/if}
+            <button type="submit" class="btn btn-sm btn-solid self-start">Save changes</button>
+        </form>
 
-            <ImageUrlField
-                name="logo"
-                label="Logo URL (optional)"
-                value={hackathon.logo ?? ''}
-                fieldClass={FIELD_CLASS}
-                labelClass={LABEL_CLASS}
-                class="sm:col-span-2"
-            />
-        </div>
+        <div class="flex min-w-0 flex-col gap-2 xl:sticky xl:top-6">
+            <!-- No link out to the live page: this *is* the live page, drawn by
+                 the component the public route renders. A link beside it would
+                 offer a second look at what is already on the screen. -->
+            <h2 class="m-0 text-section text-ink">What visitors see</h2>
 
-        <!-- Last and full width: the only field with no natural size, and the one
-             where the room is worth having for the source and its preview both. -->
-        <div class="{LABEL_CLASS} w-full">
-            <label for="hackathon-description">Description (optional)</label>
-            <MarkdownEditor
-                id="hackathon-description"
-                name="description"
-                value={hackathon.description ?? ''}
-                rows={16}
-                maxlength={10000}
-                placeholder="What is this hackathon about?"
-            />
-        </div>
+            <!-- Said here rather than left to be discovered: everything below is
+                 drawn exactly as a visitor would see it, and for a private
+                 hackathon no visitor can reach it at all. -->
+            <p class="m-0 text-xs text-ink-3">
+                {#if isPublic}
+                    Updates as you type. Nothing here is saved until you press Save
+                    changes.
+                {:else}
+                    This hackathon is private, so nobody can reach this page yet — it
+                    is how it would look once you make it public.
+                {/if}
+            </p>
 
-        <button type="submit" class="btn btn-sm preset-filled-primary-500 self-start">
-            Save changes
-        </button>
-    </form>
+            <div class="card overflow-hidden">
+                <PublicHackathonView
+                    id={hackathon.id}
+                    name={draft.name}
+                    description={draft.description}
+                    logo={draft.logo}
+                    startsAt={fromDateInputValue(draft.startsAt)}
+                    endsAt={fromDateInputValue(draft.endsAt)}
+                    status={hackathon.status}
+                    preview
+                />
+            </div>
+        </div>
+    </div>
 </div>

From c7105d349881d3ccd022b80069feeff9c88cb9c9 Mon Sep 17 00:00:00 2001
From: Sabine Maennel <5292683+sabinem@users.noreply.github.com>
Date: Tue, 1 Sep 2026 20:58:14 +0200
Subject: [PATCH 08/10] feat(frontend): Manage Public Page is a tab rather than
 a pencil The editor was reached from a pencil button beside the Settings
 heading. That was the right shape while it was a form for correcting a name;
 it is the wrong one now that it carries a preview of the page, which is
 somewhere an organiser goes back to rather than a correction to the heading
 it sat on.
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

It carries its own gate, which is the per-entry check `manageNav`'s own
note anticipated: `canEditHackathon` additionally requires the owner be
confirmed, and that route's load answers anyone else with a 403. Listing
it unconditionally would break the stronger promise the section keeps —
never offer a link that then refuses.

Two tests recorded the old arrangement and now record the new one: a
waitlisted owner is withheld exactly this one entry and no other, and
`/manage/edit` lights the tab rather than leaving Settings lit beneath it.
---
 .../frontend/src/lib/navigation/items.test.ts | 25 ++++++++-----
 .../frontend/src/lib/navigation/items.ts      | 36 +++++++++++++++----
 .../my/hackathon/[id]/manage/+page.svelte     | 21 +++--------
 3 files changed, 51 insertions(+), 31 deletions(-)

diff --git a/components/frontend/src/lib/navigation/items.test.ts b/components/frontend/src/lib/navigation/items.test.ts
index d040fffa..f0e605e4 100644
--- a/components/frontend/src/lib/navigation/items.test.ts
+++ b/components/frontend/src/lib/navigation/items.test.ts
@@ -498,10 +498,19 @@ describe("manageNav", () => {
 
   // Mirrors the backend, which does not consult isWaiting for track:write or
   // phase:write either.
-  it("does not withhold management from a waitlisted owner", () => {
-    expect(
-      idsOf(manageNav("hack-1", { role: ROLE_OWNER, isWaiting: true }, false)),
-    ).toEqual(idsOf(manageNav("hack-1", owner, false)))
+  // Manage Public Page is the one entry a waitlisted owner does not get, because
+  // its page answers anyone unconfirmed with a 403 (`canEditHackathon`, enforced
+  // in that route's load). Withholding it is the nav keeping its stronger
+  // promise — never offer a link that then refuses. Every other entry is offered
+  // to a waitlisted owner exactly as to a confirmed one.
+  it("withholds only the public-page entry from a waitlisted owner", () => {
+    const waiting = idsOf(
+      manageNav("hack-1", { role: ROLE_OWNER, isWaiting: true }, false),
+    )
+    const confirmed = idsOf(manageNav("hack-1", owner, false))
+
+    expect(confirmed).toContain("manage:public")
+    expect(waiting).toEqual(confirmed.filter((id) => id !== "manage:public"))
   })
 
   // The exact paths are the compiler's job — `resolve()` takes SvelteKit's
@@ -558,11 +567,11 @@ describe("manageNav", () => {
         "manage:participants",
       ],
       ["/my/hackathon/hack-1/teams/manage", "manage:teams"],
-      // The hackathon's own edit form, for the same reason as the phase forms
-      // below: it is reached from Settings and nests under it, so that entry
-      // stays lit rather than nothing being lit at all.
       ["/my/hackathon/hack-1/manage", "manage:settings"],
-      ["/my/hackathon/hack-1/manage/edit", "manage:settings"],
+      // The public page editor has an entry of its own now, so it lights that
+      // rather than leaving Settings lit beneath it. It still nests under
+      // `/manage`, which is what longest-match has to resolve correctly.
+      ["/my/hackathon/hack-1/manage/edit", "manage:public"],
       // Nested under Settings too, but with an entry of its own — longest match
       // is what keeps Settings from swallowing it.
       ["/my/hackathon/hack-1/manage/forms", "manage:forms"],
diff --git a/components/frontend/src/lib/navigation/items.ts b/components/frontend/src/lib/navigation/items.ts
index ffdd3bfb..8428d640 100644
--- a/components/frontend/src/lib/navigation/items.ts
+++ b/components/frontend/src/lib/navigation/items.ts
@@ -13,6 +13,7 @@
 import type { ComponentType } from "svelte"
 import { resolve } from "$app/paths"
 import {
+  canEditHackathon,
   canManageHackathon,
   type ViewerMembership,
 } from "$lib/utils/hackathonRole"
@@ -28,6 +29,7 @@ import UserRoundCog from "lucide-svelte/icons/user-round-cog"
 import Send from "lucide-svelte/icons/send"
 import Ticket from "lucide-svelte/icons/ticket"
 import CalendarClock from "lucide-svelte/icons/calendar-clock"
+import Globe from "lucide-svelte/icons/globe"
 import CalendarCog from "lucide-svelte/icons/calendar-cog"
 import FileText from "lucide-svelte/icons/file-text"
 import Info from "lucide-svelte/icons/info"
@@ -307,13 +309,14 @@ export function platformNav(roles: { isGlobalAdmin: boolean }): NavItem[] {
  * management route's own load, all reduce to owner-or-admin — casbin grants
  * `hackathon:write` / `phase:write` / `page:write` / `track:write` to `Owner`
  * outright and to an admin through the global escape hatch, with no capability
- * gating any of them. So this never offers a link that then refuses. Add a
- * per-entry gate the day an entry needs a narrower one rather than widening this
- * one: `/edit` would be the first, since `canEditHackathon` also requires the
- * owner be confirmed — which is why it is offered on the Settings page itself,
- * behind that check of its own, rather than listed here. It nests under
- * `/manage` like every other single-record form, so Settings stays lit while it
- * is open. `isWaiting` is deliberately not consulted; nor does the backend.
+ * gating any of them. So this never offers a link that then refuses. Where an
+ * entry needs a narrower gate it carries its own rather than widening this one:
+ * Manage Public Page is the one such entry, because `canEditHackathon` also
+ * requires the owner be confirmed. It nests under `/manage` like every other
+ * single-record form, but it is a destination of its own, so it is listed here
+ * rather than reached from a control on the Settings page. `isWaiting` is not
+ * consulted for any other entry, and nor does the backend consult it for the
+ * capabilities behind them.
  *
  * Entries follow the order of the participant entries they extend, and most are
  * nested under that entry's route (`/teams/manage` under `/teams`) so
@@ -388,6 +391,25 @@ export function manageNav(
         ? { badge: "!", badgeVariant: "badge-warning" as const }
         : {}),
     },
+    // The hackathon as everyone outside it sees it: the name, dates, picture and
+    // description on the public page, with that page previewed beside the fields
+    // as they are typed. A tab of its own rather than a pencil tucked into
+    // Settings — it is a destination an organiser returns to, not a one-off
+    // correction to the row it sat on.
+    // Gated on its own rather than on the section gate above, which is the
+    // per-entry check the note on `manageNav` anticipated: `canEditHackathon`
+    // additionally requires the owner be confirmed, so listing it unconditionally
+    // would offer a manager a form the backend then refuses.
+    ...(canEditHackathon(membership, isGlobalAdmin)
+      ? [
+          {
+            id: "manage:public",
+            label: "Manage Public Page",
+            icon: Globe,
+            href: resolve(`/my/hackathon/${hackathonId}/manage/edit`),
+          },
+        ]
+      : []),
     // Both halves of the roster: the confirmed people, and the queue waiting to
     // be let in, as two tabs of the one destination. The participant page lists
     // the same confirmed people and offers nothing to act on — every decision
diff --git a/components/frontend/src/routes/(app)/my/hackathon/[id]/manage/+page.svelte b/components/frontend/src/routes/(app)/my/hackathon/[id]/manage/+page.svelte
index d41bb8e5..f41d477d 100644
--- a/components/frontend/src/routes/(app)/my/hackathon/[id]/manage/+page.svelte
+++ b/components/frontend/src/routes/(app)/my/hackathon/[id]/manage/+page.svelte
@@ -1,9 +1,8 @@
 <script lang="ts">
-    import { ArrowRight, Pencil, Plus } from 'lucide-svelte';
+    import { ArrowRight, Plus } from 'lucide-svelte';
     import { resolve } from '$app/paths';
     import CapabilitiesPanel from '$lib/components/hackathon/CapabilitiesPanel.svelte';
     import { manageNav } from '$lib/navigation/items';
-    import { canEditHackathon } from '$lib/utils/hackathonRole';
     import { isPrivate } from '$lib/utils/hackathonStatus';
     import { formatPhaseRange } from '$lib/utils/phase';
     import type { ActionData, PageData } from './$types';
@@ -16,7 +15,6 @@
     // owner-or-admin: `hackathon:write` also wants the owner confirmed, so a
     // waitlisted owner reaches this page and would land on a 403 in the form.
     // The backend decides either way; this only decides whether to offer it.
-    const mayEdit = $derived(canEditHackathon(data.myMembership ?? undefined, data.isGlobalAdmin));
 
     // The other organiser destinations, minus this page. Read from `manageNav`
     // rather than listed again here, so an entry added to the sidebar reaches
@@ -102,10 +100,10 @@
 -->
 <div class="flex flex-col gap-6 px-4 py-8 sm:px-10 md:px-20">
     <!-- Editing the hackathon's own record — name, dates, visibility, logo,
-         description — rides in the heading rather than among the tiles below:
-         those lead to the things *inside* a hackathon, this one changes the
-         hackathon itself, which is what this page is named after. Outline, not
-         solid: advancing the phase below is this view's one solid action. -->
+         description — is Manage Public Page in the sidebar, not a control up
+         here. It stopped being one the moment it grew a preview: a pencil beside
+         a heading reads as a correction to that heading, and this is a page an
+         organiser goes back to. -->
     <div class="flex flex-wrap items-start justify-between gap-3">
         <div class="flex min-w-0 flex-col gap-1">
             <h2 class="m-0 text-title text-ink">Settings</h2>
@@ -114,15 +112,6 @@
                 projects are grouped.
             </span>
         </div>
-        {#if mayEdit}
-            <a
-                href={resolve(`/my/hackathon/${data.hackathonId}/manage/edit`)}
-                class="btn btn-sm btn-outline no-underline"
-            >
-                <Pencil class="h-3 w-3 shrink-0" aria-hidden="true" />
-                Edit details
-            </a>
-        {/if}
     </div>
 
     <!-- The phase marker. Its own box above the switches, because the two are

From bf9bce0cdf002bde8e82e215e1d75e41c90b6ab1 Mon Sep 17 00:00:00 2001
From: Sabine Maennel <5292683+sabinem@users.noreply.github.com>
Date: Tue, 1 Sep 2026 20:59:11 +0200
Subject: [PATCH 09/10] fix(frontend): a hackathon row shows its own picture or
 none at all
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

A hackathon without a logo got a generated gradient tile, and which
gradient was chosen by the row's index in the list. The loaders pass the
backend's order through unsorted, so a hackathon's colour changed whenever
that order did — a picture nobody chose, and a different one from one
visit to the next.

The tile is now an empty ground of the same size. It keeps rows with and
without a logo on one left edge, and it invents nothing: the only picture
a row shows is the one an organiser set.
---
 .../components/dashboard/DashboardView.svelte | 24 ++-----------------
 .../components/hackathon/HackathonRow.svelte  | 22 ++++++++---------
 .../frontend/src/routes/(public)/+page.svelte | 18 +-------------
 3 files changed, 13 insertions(+), 51 deletions(-)

diff --git a/components/frontend/src/lib/components/dashboard/DashboardView.svelte b/components/frontend/src/lib/components/dashboard/DashboardView.svelte
index fb97ebbc..8bfa33d2 100644
--- a/components/frontend/src/lib/components/dashboard/DashboardView.svelte
+++ b/components/frontend/src/lib/components/dashboard/DashboardView.svelte
@@ -91,22 +91,6 @@
     // the section vanish entirely for everyone else.
     const adminItems = $derived(platformNav({ isGlobalAdmin }));
 
-    // Decorative thumbnails for hackathons with no image of their own. Each
-    // stop is derived from a theme token and darkened rather than naming a
-    // palette step, so the set retunes with the theme instead of drifting from
-    // it — and so it survives the secondary/tertiary palettes being removed.
-    const GRADIENTS = [
-        { from: 'var(--color-accent)', to: 'color-mix(in oklab, var(--color-accent) 35%, black)' },
-        { from: 'var(--color-info)', to: 'color-mix(in oklab, var(--color-info) 35%, black)' },
-        {
-            from: 'var(--color-success)',
-            to: 'color-mix(in oklab, var(--color-success) 35%, black)',
-        },
-    ];
-
-    function gradient(i: number) {
-        return GRADIENTS[i % GRADIENTS.length]!;
-    }
 
     function formatMeta(h: HackathonEntry): string {
         const fmt = (d: Date) =>
@@ -192,7 +176,7 @@
                 <p class="text-sm text-ink-3">You are not connected to any hackathons yet.</p>
             {:else}
                 <div class="card overflow-hidden">
-                    {#each myHackathons as h, i (h.id)}
+                    {#each myHackathons as h (h.id)}
                         {@const mem = h.viewerMembership}
                         <!-- Two questions, not one: whether the row is a link at
                              all, and which page it opens. Someone who runs this
@@ -235,8 +219,6 @@
                                     meta={formatMeta(h)}
                                     badge={statusLabel(h.status)}
                                     badgeVariant={statusBadgeVariant(h.status)}
-                                    gradFrom={gradient(i).from}
-                                    gradTo={gradient(i).to}
                                 />
                             </div>
                             <!-- The row's only trailing element. Editing a
@@ -279,7 +261,7 @@
                 <p class="text-sm text-ink-3">No other hackathons available.</p>
             {:else}
                 <div class="card overflow-hidden">
-                    {#each otherHackathons as h, i (h.id)}
+                    {#each otherHackathons as h (h.id)}
                         <div class="flex items-center border-b border-line last:border-0">
                             <div class="flex-1">
                                 <!-- No href: a non-member holds no `hackathon:read`
@@ -292,8 +274,6 @@
                                     meta={formatMeta(h)}
                                     badge={statusLabel(h.status)}
                                     badgeVariant={statusBadgeVariant(h.status)}
-                                    gradFrom={gradient(i).from}
-                                    gradTo={gradient(i).to}
                                 />
                             </div>
                             <!-- A finished hackathon gets no button and no label:
diff --git a/components/frontend/src/lib/components/hackathon/HackathonRow.svelte b/components/frontend/src/lib/components/hackathon/HackathonRow.svelte
index 06c7177a..5c27fb3f 100644
--- a/components/frontend/src/lib/components/hackathon/HackathonRow.svelte
+++ b/components/frontend/src/lib/components/hackathon/HackathonRow.svelte
@@ -12,8 +12,6 @@
         badge,
         badgeVariant = 'badge-accent',
         count,
-        gradFrom,
-        gradTo,
         size = 'default',
     }: {
         /**
@@ -26,21 +24,19 @@
         org?: string;
         meta: string;
         /**
-         * The hackathon's logo. The gradient below is not a placeholder waiting
-         * to be replaced — it stays the answer for a hackathon with no logo, and
-         * for one whose logo does not load.
+         * The hackathon's logo — the picture an organiser chose, and the only
+         * picture this row ever shows. A hackathon without one gets an empty
+         * ground of the same size rather than a generated stand-in.
          */
         imageUrl?: string;
         badge?: string;
         badgeVariant?: string;
         count?: string;
-        gradFrom: string;
-        gradTo: string;
         size?: 'default' | 'compact';
     } = $props();
 
     // A logo is typed in, never uploaded, so a link that serves a web page is
-    // the ordinary mistake rather than the rare one; the gradient absorbs it.
+    // the ordinary mistake rather than the rare one; the empty ground absorbs it.
     let failedSrc: string | undefined = $state(undefined);
     const hasImage = $derived(usableImage(imageUrl, failedSrc));
 
@@ -79,10 +75,12 @@
             />
         </div>
     {:else}
-        <div
-            class="{thumbSize} shrink-0 rounded-field"
-            style="background: linear-gradient(135deg, {gradFrom}, {gradTo})"
-        ></div>
+        <!-- An empty ground, not a generated picture. The colour used to be
+             picked by the row's position in the list, so a hackathon's tile
+             changed colour whenever the backend returned the list in another
+             order — a picture nobody chose, and a different one each visit. The
+             box stays so rows with and without a logo keep one left edge. -->
+        <div class="{thumbSize} shrink-0 rounded-field border border-line bg-overlay"></div>
     {/if}
     <div class="flex min-w-0 flex-1 flex-col gap-0.5">
         <!-- The organisation is an eyebrow above the name rather than sharing a
diff --git a/components/frontend/src/routes/(public)/+page.svelte b/components/frontend/src/routes/(public)/+page.svelte
index c492b80d..13985bdb 100644
--- a/components/frontend/src/routes/(public)/+page.svelte
+++ b/components/frontend/src/routes/(public)/+page.svelte
@@ -49,20 +49,6 @@
             ),
     );
 
-    // See DashboardView for why these are token-derived rather than palette steps.
-    const GRADIENTS = [
-        { from: 'var(--color-accent)', to: 'color-mix(in oklab, var(--color-accent) 35%, black)' },
-        { from: 'var(--color-info)', to: 'color-mix(in oklab, var(--color-info) 35%, black)' },
-        {
-            from: 'var(--color-success)',
-            to: 'color-mix(in oklab, var(--color-success) 35%, black)',
-        },
-    ];
-
-    function gradient(i: number) {
-        return GRADIENTS[i % GRADIENTS.length]!;
-    }
-
 </script>
 
 <!-- Hero (full-bleed width) -->
@@ -157,7 +143,7 @@
 
 {#snippet rows(items: Hackathon[])}
     <div class="mt-6 divide-y divide-line">
-        {#each items as h, i (h.id)}
+        {#each items as h (h.id)}
             <HackathonRow
                 href="/hackathon/{h.id}"
                 name={h.name}
@@ -165,8 +151,6 @@
                 meta={formatDateRange(h)}
                 badge={statusLabel(h.status)}
                 badgeVariant={statusBadgeVariant(h.status)}
-                gradFrom={gradient(i).from}
-                gradTo={gradient(i).to}
             />
         {/each}
     </div>

From d838a2609684b142002c0d597db314fbf4378cbf Mon Sep 17 00:00:00 2001
From: Sabine Maennel <5292683+sabinem@users.noreply.github.com>
Date: Tue, 1 Sep 2026 21:07:14 +0200
Subject: [PATCH 10/10] fix(frontend): the image field claims only what it can
 see
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

"This is what will be shown" was a promise about a page, and the field is
in no position to make one: a hackathon's picture is drawn whole, and a
project's is cropped to a round thumbnail, from the same field. It now
says the link works and shows the picture it loads, which is true wherever
the field appears. The claim about a page belongs to the preview on Manage
Public Page, which is an actual rendering of that page.

Both project forms name the field for what it holds — a project image
rather than an image — since the hackathon forms next door ask for a logo.
---
 .../src/lib/components/forms/ImageUrlField.svelte      | 10 +++++++++-
 .../src/lib/components/forms/ImageUrlField.test.ts     |  5 ++++-
 .../lib/components/hackathon/ProjectEditForm.svelte    |  2 +-
 .../my/hackathon/[id]/projects/propose/+page.svelte    |  2 +-
 4 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/components/frontend/src/lib/components/forms/ImageUrlField.svelte b/components/frontend/src/lib/components/forms/ImageUrlField.svelte
index bd1e9258..d01393a1 100644
--- a/components/frontend/src/lib/components/forms/ImageUrlField.svelte
+++ b/components/frontend/src/lib/components/forms/ImageUrlField.svelte
@@ -115,7 +115,15 @@
                 {#if checking}
                     <span class="text-ink-3">Checking the link…</span>
                 {:else if showImage}
-                    <span class="text-ink-2">This is what will be shown.</span>
+                    <!-- What this field can honestly claim: the address loads, and
+                         this is the picture it loads. Not "this is what will be
+                         shown" — that is a promise about a page, and it only held
+                         where the page draws with `StoredImage` too. A project's
+                         image is still cropped to a round thumbnail, so the
+                         sentence was false there. The page-level claim belongs to
+                         the preview on Manage Public Page, which is an actual
+                         rendering of the page. -->
+                    <span class="text-ink-2">The link works — this is the picture.</span>
                 {:else}
                     <!-- Two separate claims, so two lines: the first is
                          demonstrated, the second is a guess at the cause and is
diff --git a/components/frontend/src/lib/components/forms/ImageUrlField.test.ts b/components/frontend/src/lib/components/forms/ImageUrlField.test.ts
index 152c1e6b..9368b70d 100644
--- a/components/frontend/src/lib/components/forms/ImageUrlField.test.ts
+++ b/components/frontend/src/lib/components/forms/ImageUrlField.test.ts
@@ -76,7 +76,10 @@ describe("ImageUrlField", () => {
     await fireEvent.load(preview(container)!)
     await tick()
 
-    expect(screen.getByText(/what will be shown/)).toBeTruthy()
+    // The wording is deliberately about the link and the picture rather than
+    // about the page: the field cannot promise how a given page draws it, and
+    // a project still crops its image to a round thumbnail.
+    expect(screen.getByText(/this is the picture/i)).toBeTruthy()
     expect(preview(container)).not.toBeNull()
   })
 
diff --git a/components/frontend/src/lib/components/hackathon/ProjectEditForm.svelte b/components/frontend/src/lib/components/hackathon/ProjectEditForm.svelte
index fab6005c..74ad525a 100644
--- a/components/frontend/src/lib/components/hackathon/ProjectEditForm.svelte
+++ b/components/frontend/src/lib/components/hackathon/ProjectEditForm.svelte
@@ -84,7 +84,7 @@
 
         <ImageUrlField
             name="image"
-            label="Image URL (optional)"
+            label="Project image URL (optional)"
             value={project.image ?? ''}
             class={tracks.length > 0 ? '' : 'sm:col-span-2'}
         />
diff --git a/components/frontend/src/routes/(app)/my/hackathon/[id]/projects/propose/+page.svelte b/components/frontend/src/routes/(app)/my/hackathon/[id]/projects/propose/+page.svelte
index faa803bc..856342f0 100644
--- a/components/frontend/src/routes/(app)/my/hackathon/[id]/projects/propose/+page.svelte
+++ b/components/frontend/src/routes/(app)/my/hackathon/[id]/projects/propose/+page.svelte
@@ -66,7 +66,7 @@
 
                 <ImageUrlField
                     name="image"
-                    label="Image URL (optional)"
+                    label="Project image URL (optional)"
                     class={data.tracks.length > 0 ? '' : 'sm:col-span-2'}
                 />
             </div>