From f200cec87c12e6545dcfa8e85a8d0524ed08a1c3 Mon Sep 17 00:00:00 2001
From: Sabine Maennel <5292683+sabinem@users.noreply.github.com>
Date: Tue, 8 Sep 2026 17:08:10 +0200
Subject: [PATCH] feat(backend): private hackathons confirm their joiners on
 the spot
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

A private hackathon can only be joined with a valid invitation (or by
someone who already holds hackathon:read), so the organizer has already
decided who takes part by the time Join runs. Asking for a second
confirmation left the invitee holding no casbin role, which meant the
event they had just been invited to was filtered out of every list they
could see — the invitation link was the only trace of it.

Join now grants membership itself when the hackathon is private. Public
hackathons are unchanged: there the door stood open to everyone, which
makes the organizer's confirmation the only point at which anybody
chooses.

- Extracts the shared confirmation into grantMembership, used by both
  Join and ApproveParticipant. It adds the Member role *before* clearing
  is_waiting, reversing ApproveParticipant's old order: casbin cannot
  join an ent transaction, and a half-failure that shows someone as
  waitlisted-but-able-to-act is repairable by the Approve button, where
  the reverse leaves a roster saying "Approved" over an account with no
  read access and no control that fixes it.
- Auto-approval failure is logged, not returned. It leaves exactly the
  state a public join produces, which the invite page already reads
  correctly.
- Extracts Join's invite-token gate into inviteAdmits, which the feature
  needed to stay under the cyclomatic limit and which retires two
  nolint directives.
- The invite page now says "Join" rather than "Request a place" for a
  private hackathon. Kept conditional on visibility: CreateInvite
  performs no visibility check, so a public hackathon's link still
  waitlists.
- H5's seeded waitlist moves out of the fixture; dana is now a confirmed
  member and the waitlist-to-approve case lives in H1, which is public.
---
 components/backend/cmd/service/main.go        | 42 ++++++++-
 .../backend/internal/middleware/rbac.go       | 88 ++++++++++++++++---
 .../backend/internal/middleware/rbac_test.go  | 53 +++++++++++
 .../hackathon/PublicHackathonTabs.svelte      | 58 ++++++++++++
 .../hackathon/PublicHackathonView.svelte      | 18 ++++
 .../frontend/src/lib/server/grpc/client.ts    | 18 ++++
 .../{+page.server.ts => +layout.server.ts}    | 57 +++++++++++-
 .../(public)/hackathon/[id]/+page.svelte      | 10 ++-
 .../[id]/pages/[pageId]/+page.server.ts       | 51 +++++++++++
 .../[id]/pages/[pageId]/+page.svelte          | 59 +++++++++++++
 10 files changed, 435 insertions(+), 19 deletions(-)
 create mode 100644 components/frontend/src/lib/components/hackathon/PublicHackathonTabs.svelte
 rename components/frontend/src/routes/(public)/hackathon/[id]/{+page.server.ts => +layout.server.ts} (68%)
 create mode 100644 components/frontend/src/routes/(public)/hackathon/[id]/pages/[pageId]/+page.server.ts
 create mode 100644 components/frontend/src/routes/(public)/hackathon/[id]/pages/[pageId]/+page.svelte

diff --git a/components/backend/cmd/service/main.go b/components/backend/cmd/service/main.go
index 97bb0896..33b61d83 100644
--- a/components/backend/cmd/service/main.go
+++ b/components/backend/cmd/service/main.go
@@ -10,10 +10,12 @@ import (
 
 	_ "github.com/lib/pq"
 	"github.com/swissdatasciencecenter/hackagon/components/backend/ent"
+	enthackathon "github.com/swissdatasciencecenter/hackagon/components/backend/ent/hackathon"
 	_ "github.com/swissdatasciencecenter/hackagon/components/backend/ent/runtime" // registers schema hooks and default values
 	"github.com/swissdatasciencecenter/hackagon/components/backend/ent/user"
 	"github.com/swissdatasciencecenter/hackagon/components/backend/internal/config"
 	"github.com/swissdatasciencecenter/hackagon/components/backend/internal/logx"
+	mw "github.com/swissdatasciencecenter/hackagon/components/backend/internal/middleware"
 	"github.com/swissdatasciencecenter/hackagon/components/backend/internal/service"
 )
 
@@ -41,6 +43,38 @@ func seedAdminUser(ctx context.Context, dbClient *ent.Client, cfg *config.Config
 	return nil
 }
 
+// reconcilePublicAccess re-grants the public casbin rows for every hackathon
+// whose visibility already says public.
+//
+// Visibility is stored on the hackathon row, but what it *does* is a set of
+// casbin rows written at the moment Create or Edit runs. The two can therefore
+// disagree, and today they do: `page:read` only recently joined that set, so
+// every hackathon made public before it carries the old half-grant and answers
+// an anonymous PageService.List with PermissionDenied. Nothing re-runs Edit on
+// those, so nothing would ever repair them.
+//
+// It runs on every boot rather than as a migration script somebody has to
+// remember per environment, which it can afford to do because
+// AllowPublicHackathonAccess is a no-op per row that already exists. It also
+// makes the DB the authority: whatever the casbin table holds, visibility wins.
+func reconcilePublicAccess(ctx context.Context, dbClient *ent.Client, enf *mw.Enforcer) error {
+	public, err := dbClient.Hackathon.Query().
+		Where(enthackathon.VisibilityEQ(enthackathon.VisibilityPublic)).
+		IDs(ctx)
+	if err != nil {
+		return fmt.Errorf("query public hackathons: %w", err)
+	}
+
+	for _, id := range public {
+		if _, err := enf.AllowPublicHackathonAccess(id.String()); err != nil {
+			return fmt.Errorf("grant public access to hackathon %s: %w", id, err)
+		}
+	}
+	slog.Info("reconciled public hackathon access", "hackathons", len(public))
+
+	return nil
+}
+
 func main() {
 	logx.Setup("")
 
@@ -72,12 +106,18 @@ func main() {
 	}
 
 	// Create server with all middleware and services
-	server, cleanup, _, err := service.NewServer(dbClient, cfg, nil)
+	server, cleanup, enforcer, err := service.NewServer(dbClient, cfg, nil)
 	if err != nil {
 		logx.Fatal("create server", "err", err)
 	}
 	defer cleanup()
 
+	// After NewServer, because that is what builds the enforcer, and before
+	// Serve, so no request is answered against a half-written policy table.
+	if err := reconcilePublicAccess(context.Background(), dbClient, enforcer); err != nil {
+		logx.Fatal("reconcile public hackathon access", "err", err)
+	}
+
 	// Listen
 	lc := net.ListenConfig{} //nolint:exhaustruct // all fields optional
 	lis, err := lc.Listen(context.Background(), "tcp", fmt.Sprintf(":%s", cfg.Server.Port))
diff --git a/components/backend/internal/middleware/rbac.go b/components/backend/internal/middleware/rbac.go
index a454bd90..dbf0e28f 100644
--- a/components/backend/internal/middleware/rbac.go
+++ b/components/backend/internal/middleware/rbac.go
@@ -25,6 +25,11 @@ var modelFile string
 
 const minPolicyFields = 2 // casbin policy tuples have at least 2 fields: subject and role
 
+// anySubject is the policy subject the matcher treats as "any caller at all"
+// (`p.sub=="*"` in casbin_model.conf), the anonymous one included. It is how a
+// grant is made to the public rather than to a role.
+const anySubject = "*"
+
 type Role int
 
 const (
@@ -333,22 +338,77 @@ func (e *Enforcer) RemoveGlobalRole(user string, role Role) (bool, error) {
 	return e.enforcer.RemoveNamedGroupingPolicy("g2", user, role.String())
 }
 
+// publicGrant is one row of what "this hackathon is public" means, written with
+// the `*` subject the matcher reads as "any caller" (casbin_model.conf). An
+// unauthenticated request is not rejected — the auth interceptor gives it the
+// subject `anonymous` (auth.go) and lets casbin decide — so these rows are what
+// an anonymous visitor's reads actually rest on.
+type publicGrant struct {
+	obj  ObjectType
+	perm Permission
+}
+
+// publicHackathonGrants is the whole of that meaning, in one place, so allowing
+// and revoking cannot drift apart.
+//
+// `page:read` sits beside `hackathon:read` because a public hackathon whose
+// information pages answer PermissionDenied is not much of a public hackathon:
+// the landing page could name the event but not show its schedule, rules or
+// FAQ. Granting it wholesale is safe — PageService.List drops pages with
+// `visible = false` for every caller that lacks `page:write`, and no anonymous
+// caller will ever hold write, so an organizer's drafts stay unpublished.
+//
+// This is hackathon-wide on purpose: every visible page of a public hackathon
+// is public. Marking individual pages public while their siblings stay
+// members-only needs a field on the page itself, which is a schema change and a
+// separate piece of work.
+var publicHackathonGrants = []publicGrant{
+	{Hackathon, Read},
+	{Page, Read},
+}
+
+// AllowPublicHackathonAccess grants every publicHackathonGrants row to `*`.
+//
+// One AddPolicy per row rather than AddPolicies: the batch form is all-or-
+// nothing and reports failure if *any* row is already present, which is exactly
+// the state a hackathon made public before `page:read` joined this list is in.
+// Row by row, an existing row is simply a no-op, which is what makes this safe
+// to call on a hackathon that is already public — the reconcile at startup
+// depends on that.
 func (e *Enforcer) AllowPublicHackathonAccess(hackathonId string) (bool, error) {
-	return e.enforcer.AddPolicy(
-		"*",
-		hackathonIdToPath(hackathonId),
-		Hackathon.String(),
-		Read.String(),
-	)
+	domain := hackathonIdToPath(hackathonId)
+	changed := false
+	for _, g := range publicHackathonGrants {
+		added, err := e.enforcer.AddPolicy(anySubject, domain, g.obj.String(), g.perm.String())
+		if err != nil {
+			return changed, err
+		}
+		changed = changed || added
+	}
+
+	return changed, nil
 }
 
+// RemovePublicHackathonAccess revokes what AllowPublicHackathonAccess granted.
+// Row by row for the mirror-image reason: a hackathon that never had the
+// `page:read` row must still lose its `hackathon:read` one.
 func (e *Enforcer) RemovePublicHackathonAccess(hackathonId string) (bool, error) {
-	return e.enforcer.RemovePolicy(
-		"*",
-		hackathonIdToPath(hackathonId),
-		Hackathon.String(),
-		Read.String(),
-	)
+	domain := hackathonIdToPath(hackathonId)
+	changed := false
+	for _, g := range publicHackathonGrants {
+		removed, err := e.enforcer.RemovePolicy(
+			anySubject,
+			domain,
+			g.obj.String(),
+			g.perm.String(),
+		)
+		if err != nil {
+			return changed, err
+		}
+		changed = changed || removed
+	}
+
+	return changed, nil
 }
 
 func (e *Enforcer) AddPolicy(
@@ -360,7 +420,7 @@ func (e *Enforcer) AddPolicy(
 ) error {
 	var actualRole string
 	if role == nil {
-		actualRole = "*"
+		actualRole = anySubject
 	} else {
 		actualRole = role.String()
 	}
@@ -378,7 +438,7 @@ func (e *Enforcer) RemovePolicy(
 ) error {
 	var actualRole string
 	if role == nil {
-		actualRole = "*"
+		actualRole = anySubject
 	} else {
 		actualRole = role.String()
 	}
diff --git a/components/backend/internal/middleware/rbac_test.go b/components/backend/internal/middleware/rbac_test.go
index f580b887..e9fdc460 100644
--- a/components/backend/internal/middleware/rbac_test.go
+++ b/components/backend/internal/middleware/rbac_test.go
@@ -118,7 +118,60 @@ var _ = Describe("RBAC Enforcer", func() {
 			Entry("eve owner reads h2", "eve", "h2", Hackathon, Read, true),
 			Entry("eve owner writes h2", "eve", "h2", Hackathon, Write, true),
 			Entry("eve cannot read h1", "eve", "h1", Hackathon, Read, false),
+
+			// The anonymous subject is what an unauthenticated call arrives as
+			// (auth.go), so these are the entries that say what a visitor with no
+			// account can actually do. Reading the hackathon was never enough on
+			// its own: a landing page that cannot name the schedule or the rules
+			// is a public hackathon in name only.
+			Entry("anonymous reads public h2", AnonSubject, "h2", Hackathon, Read, true),
+			Entry("anonymous reads public h2 pages", AnonSubject, "h2", Page, Read, true),
+			// Private stays private, and the page grant is scoped to the one
+			// hackathon that was made public — not to `/hackathon/*`.
+			Entry("anonymous cannot read h1", AnonSubject, "h1", Hackathon, Read, false),
+			Entry("anonymous cannot read h1 pages", AnonSubject, "h1", Page, Read, false),
+			// Load-bearing, not a formality: PageService.List decides whether to
+			// filter out `visible: false` pages by asking for `page:write`
+			// (page_service.go). If the public grant ever reached write, every
+			// unpublished draft would be served to the internet.
+			Entry("anonymous cannot write public h2 pages", AnonSubject, "h2", Page, Write, false),
 		)
+
+		It("revokes page read along with hackathon read", func() {
+			ctx := CtxWithClaims(AnonSubject)
+
+			// Both halves of the grant go, so a hackathon flipped back to private
+			// cannot keep serving its pages to anonymous readers — the failure
+			// that a per-row revoke written to match a per-row grant is there to
+			// prevent.
+			_, err := enf.RemovePublicHackathonAccess("h2")
+			Expect(err).NotTo(HaveOccurred())
+
+			Expect(enf.Enforce(ctx, "h2", Hackathon, Read)).To(BeFalse())
+			Expect(enf.Enforce(ctx, "h2", Page, Read)).To(BeFalse())
+		})
+
+		It("is idempotent over a hackathon that predates the page grant", func() {
+			ctx := CtxWithClaims(AnonSubject)
+
+			// The state every hackathon made public before `page:read` joined the
+			// grant is in: one row present, one missing. A batch AddPolicies
+			// refuses the pair outright in that case and repairs nothing, which
+			// is why the grant is written row by row and why the startup
+			// reconcile in cmd/service can afford to run on every boot.
+			_, err := enf.RemovePublicHackathonAccess("h2")
+			Expect(err).NotTo(HaveOccurred())
+			Expect(
+				enf.AddPolicy(nil, "h2", Hackathon, Read),
+			).To(Succeed())
+			Expect(enf.Enforce(ctx, "h2", Page, Read)).To(BeFalse())
+
+			_, err = enf.AllowPublicHackathonAccess("h2")
+			Expect(err).NotTo(HaveOccurred())
+
+			Expect(enf.Enforce(ctx, "h2", Hackathon, Read)).To(BeTrue())
+			Expect(enf.Enforce(ctx, "h2", Page, Read)).To(BeTrue())
+		})
 	})
 
 	Describe("Admin Access", func() {
diff --git a/components/frontend/src/lib/components/hackathon/PublicHackathonTabs.svelte b/components/frontend/src/lib/components/hackathon/PublicHackathonTabs.svelte
new file mode 100644
index 00000000..1831ab61
--- /dev/null
+++ b/components/frontend/src/lib/components/hackathon/PublicHackathonTabs.svelte
@@ -0,0 +1,58 @@
+<script lang="ts">
+    import { resolve } from '$app/paths';
+
+    let {
+        hackathonId,
+        pages,
+        current,
+    }: {
+        hackathonId: string;
+        /** Public pages, already ordered by the backend. */
+        pages: { id: string; title: string }[];
+        /** `'overview'`, or the id of the page being rendered. */
+        current: string;
+    } = $props();
+</script>
+
+<!--
+  The way around a public hackathon: its landing page, then whatever information
+  pages the organisers published — Schedule, Rules, FAQ, Venue.
+
+  A strip rather than a sidebar, because the (public) shell deliberately has none
+  (`showNav={false}` in (public)/+layout.svelte) and the member rail's entries all
+  point into /my/, which is exactly where a visitor cannot go.
+
+  `.chip` is this theme's segmented-control vocabulary, the same one
+  ParticipantsManageTabs uses, and `aria-current="page"` is the accessible form
+  of "you are here" for a link.
+
+  Wraps rather than scrolls. A horizontally scrolling strip centred on the page
+  clips its own first entry at the moment it overflows, and page titles are the
+  organiser's prose — six of them, any length. Wrapping has no such edge.
+
+  Drawn only when there is somewhere to go: a lone "Overview" chip on a hackathon
+  that has published nothing is a control that does not control anything.
+-->
+{#if pages.length > 0}
+    <nav
+        class="flex flex-wrap justify-center gap-1 px-4 sm:px-10 md:px-20"
+        aria-label="Hackathon pages"
+    >
+        <a
+            href={resolve(`/hackathon/${hackathonId}`)}
+            aria-current={current === 'overview' ? 'page' : undefined}
+            class="chip no-underline {current === 'overview' ? 'chip-active' : ''}"
+        >
+            Overview
+        </a>
+        {#each pages as page (page.id)}
+            <a
+                href={resolve(`/hackathon/${hackathonId}/pages/${page.id}`)}
+                aria-current={current === page.id ? 'page' : undefined}
+                class="chip no-underline {current === page.id ? 'chip-active' : ''}"
+            >
+                {page.title}
+            </a>
+        {/each}
+    </nav>
+{/if}
diff --git a/components/frontend/src/lib/components/hackathon/PublicHackathonView.svelte b/components/frontend/src/lib/components/hackathon/PublicHackathonView.svelte
index 3612a740..65a88d6b 100644
--- a/components/frontend/src/lib/components/hackathon/PublicHackathonView.svelte
+++ b/components/frontend/src/lib/components/hackathon/PublicHackathonView.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+    import type { Snippet } from 'svelte';
     import MarkdownContent from '$lib/components/forms/MarkdownContent.svelte';
     import HeroSection from './HeroSection.svelte';
     import JoinCta from './JoinCta.svelte';
@@ -15,6 +16,7 @@
         status,
         signedIn,
         preview = false,
+        nav,
     }: {
         id: string;
         name: string;
@@ -33,6 +35,18 @@
          * enrol the organiser in their own hackathon by accident.
          */
         preview?: boolean;
+        /**
+         * Navigation drawn between the hero and the description — the public
+         * route's tab strip.
+         *
+         * A snippet the caller supplies rather than a `pages` prop this
+         * component turns into links: what it *is* belongs to the route that
+         * knows which entry is current, and this component's job is where it
+         * sits. The preview passes none, for the same reason it draws no Join
+         * block: chrome that leads somewhere is not something an organiser
+         * checking their own copy should be able to click out through.
+         */
+        nav?: Snippet;
     } = $props();
 
     // Derived here, not passed in, for the same reason the whole view is one
@@ -62,6 +76,10 @@
         ]}
     />
 
+    {#if nav}
+        {@render nav()}
+    {/if}
+
     <div class="mx-auto w-full max-w-7xl">
         <section class="px-4 py-12 sm:px-10 md:px-20">
             {#if description}
diff --git a/components/frontend/src/lib/server/grpc/client.ts b/components/frontend/src/lib/server/grpc/client.ts
index ae5a3385..11b9573f 100644
--- a/components/frontend/src/lib/server/grpc/client.ts
+++ b/components/frontend/src/lib/server/grpc/client.ts
@@ -33,6 +33,24 @@ export function publicHackathonClient() {
   )
 }
 
+// Unauthenticated page client, for the content pages of a *public* hackathon.
+//
+// The backend decides, not this client: making a hackathon public writes a
+// `*, /hackathon/<id>, page, read` casbin row alongside the hackathon one
+// (`AllowPublicHackathonAccess`), and without that row these calls come back
+// PERMISSION_DENIED. So a private hackathon's pages stay refused even though
+// the call carries no token, and pages an organizer has marked `visible: false`
+// are filtered out server-side, because that filter keys off `page:write`,
+// which nobody anonymous will ever hold.
+//
+// Used even for a signed-in visitor on the public route. They are, by
+// definition, not a member — members are redirected to /my/hackathon/<id> — so
+// their token would buy them nothing here, and one code path is one behaviour
+// to reason about.
+export function publicPageClient() {
+  return createClientFactory().create(PageServiceDefinition, backendChannel())
+}
+
 // Per-request authorized client bundle (created by hooks.server.ts)
 export interface AuthorizedGrpc {
   user: UserServiceClient
diff --git a/components/frontend/src/routes/(public)/hackathon/[id]/+page.server.ts b/components/frontend/src/routes/(public)/hackathon/[id]/+layout.server.ts
similarity index 68%
rename from components/frontend/src/routes/(public)/hackathon/[id]/+page.server.ts
rename to components/frontend/src/routes/(public)/hackathon/[id]/+layout.server.ts
index a656247c..be219bc7 100644
--- a/components/frontend/src/routes/(public)/hackathon/[id]/+page.server.ts
+++ b/components/frontend/src/routes/(public)/hackathon/[id]/+layout.server.ts
@@ -1,10 +1,12 @@
 import { error, redirect } from "@sveltejs/kit"
-import type { PageServerLoad } from "./$types"
+import type { LayoutServerLoad } from "./$types"
 import {
   createAuthorizedGrpc,
   publicHackathonClient,
+  publicPageClient,
 } from "$lib/server/grpc/client"
 import { Visibility } from "$lib/server/grpc/generated/hackathon/entities/visibility"
+import { ClientError, Status } from "nice-grpc-common"
 // Shared and tested, because it is subtle: a session can carry a user and a
 // stale accessToken at once. See $lib/server/session.
 import { usableSession } from "$lib/server/session"
@@ -32,7 +34,7 @@ import type { CustomSession } from "../../../../auth.d"
  * which the hook only creates for protected routes.
  */
 async function isParticipant(
-  event: Parameters<PageServerLoad>[0],
+  event: Parameters<LayoutServerLoad>[0],
 ): Promise<boolean> {
   const session = (await event.locals.auth()) as CustomSession | null
   if (!usableSession(session) || !session?.accessToken) return false
@@ -53,7 +55,51 @@ async function isParticipant(
   }
 }
 
-export const load: PageServerLoad = async (event) => {
+/**
+ * The hackathon's public content pages, in the order the organizer arranged
+ * them, or none at all.
+ *
+ * Refusal is a real answer here rather than an error: a hackathon carries the
+ * `page, read` grant only from the moment it is made public, and a backend that
+ * predates that grant refuses every one of these calls. Neither is a reason to
+ * take the landing page down — the page is what the visitor came for, and the
+ * tabs are an addition to it — so a refusal reads as "this hackathon publishes
+ * no pages" and the strip does not draw.
+ *
+ * Only PERMISSION_DENIED is swallowed. Anything else is a backend that is
+ * actually broken, and hiding that would turn an outage into a hackathon that
+ * quietly lost its schedule.
+ */
+async function publicPages(
+  hackathonId: string,
+): Promise<{ id: string; title: string }[]> {
+  try {
+    const { pages } = await publicPageClient().list({ hackathonId })
+
+    // Two fields, because two fields are what the tab strip draws. The rest of
+    // the entity — content, author, timestamps — is the individual page's
+    // business, and this load runs on every route in the subtree.
+    return pages.map((p) => ({ id: p.id, title: p.title }))
+  } catch (e) {
+    if (e instanceof ClientError && e.code === Status.PERMISSION_DENIED) {
+      return []
+    }
+    throw e
+  }
+}
+
+/**
+ * A layout load, not a page load, because every route under /hackathon/<id>
+ * needs the same three answers: is this hackathon public, is the visitor
+ * already a member of it, and what pages does it publish. The tab strip has to
+ * be identical on the overview and on each page, which it cannot be if each
+ * route fetches its own.
+ *
+ * It also puts the member redirect in front of the whole subtree rather than
+ * the landing page alone. Somebody who is a participant should land in the
+ * member view wherever they entered from, including a link straight to a page.
+ */
+export const load: LayoutServerLoad = async (event) => {
   // `locals.session`, not a second `auth()` call, for "is anybody signed in":
   // the hook has already decided this, and it decides it correctly — it stores
   // only a session that can call the backend (`clientView`), so a visitor
@@ -92,6 +138,10 @@ export const load: PageServerLoad = async (event) => {
   // is not something an anonymous visitor should be able to detect. Its own
   // unlisted landing page needs a backend that will serve it to a stranger
   // holding the link, which is a separate piece of work.
+  //
+  // This guard covers the pages underneath as well: a page id belonging to a
+  // private hackathon cannot be read through this subtree, whatever the backend
+  // would have said about the page itself.
   if (!hackathon) error(404, "Hackathon not found")
 
   return {
@@ -107,5 +157,6 @@ export const load: PageServerLoad = async (event) => {
       endsAt: hackathon.endsAt,
       status: hackathon.status,
     },
+    pages: await publicPages(event.params.id),
   }
 }
diff --git a/components/frontend/src/routes/(public)/hackathon/[id]/+page.svelte b/components/frontend/src/routes/(public)/hackathon/[id]/+page.svelte
index 2a114b06..cca12f9b 100644
--- a/components/frontend/src/routes/(public)/hackathon/[id]/+page.svelte
+++ b/components/frontend/src/routes/(public)/hackathon/[id]/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
     import PublicHackathonView from '$lib/components/hackathon/PublicHackathonView.svelte';
+    import PublicHackathonTabs from '$lib/components/hackathon/PublicHackathonTabs.svelte';
     import type { PageData } from './$types';
 
     let { data }: { data: PageData } = $props();
@@ -18,4 +19,11 @@
     endsAt={hackathon.endsAt}
     status={hackathon.status}
     signedIn={data.signedIn}
-/>
+>
+    <!-- Passed in rather than built inside the view, so the organiser's preview
+         of this same component draws no strip: its links lead out of the editor,
+         and the pages they lead to are edited somewhere else entirely. -->
+    {#snippet nav()}
+        <PublicHackathonTabs hackathonId={hackathon.id} pages={data.pages} current="overview" />
+    {/snippet}
+</PublicHackathonView>
diff --git a/components/frontend/src/routes/(public)/hackathon/[id]/pages/[pageId]/+page.server.ts b/components/frontend/src/routes/(public)/hackathon/[id]/pages/[pageId]/+page.server.ts
new file mode 100644
index 00000000..20ede443
--- /dev/null
+++ b/components/frontend/src/routes/(public)/hackathon/[id]/pages/[pageId]/+page.server.ts
@@ -0,0 +1,51 @@
+import type { PageServerLoad } from "./$types"
+import { error } from "@sveltejs/kit"
+import { publicPageClient } from "$lib/server/grpc/client"
+import { ClientError, Status } from "nice-grpc-common"
+
+/**
+ * One published page of a public hackathon.
+ *
+ * Fetched rather than taken from the layout's list, which carries titles only —
+ * deliberately, since it is loaded on every route in the subtree and page
+ * content is the one thing that does not belong on all of them.
+ *
+ * Every refusal becomes 404, including PERMISSION_DENIED. On the member route
+ * the honest answer is 403 ("this page is not available to you"), because the
+ * reader is a known participant being told about a page they can see the
+ * existence of. Here the reader is the internet, and 403 would confirm that a
+ * hidden page with that id exists — so a page an organiser has not published is
+ * indistinguishable from one that was never created.
+ */
+export const load: PageServerLoad = async (event) => {
+  let result
+  try {
+    result = await publicPageClient().get({ pageId: event.params.pageId })
+  } catch (e) {
+    if (
+      e instanceof ClientError &&
+      (e.code === Status.PERMISSION_DENIED || e.code === Status.NOT_FOUND)
+    ) {
+      error(404, "Page not found")
+    }
+    throw e
+  }
+
+  if (!result.page) {
+    error(404, "Page not found")
+  }
+
+  // A page id from another hackathon would otherwise render inside this
+  // hackathon's hero and tab strip, under its name.
+  if (result.page.hackathonId !== event.params.id) {
+    error(404, "Page not found")
+  }
+
+  return {
+    page: {
+      id: result.page.id,
+      title: result.page.title,
+      content: result.page.content,
+    },
+  }
+}
diff --git a/components/frontend/src/routes/(public)/hackathon/[id]/pages/[pageId]/+page.svelte b/components/frontend/src/routes/(public)/hackathon/[id]/pages/[pageId]/+page.svelte
new file mode 100644
index 00000000..c54873f0
--- /dev/null
+++ b/components/frontend/src/routes/(public)/hackathon/[id]/pages/[pageId]/+page.svelte
@@ -0,0 +1,59 @@
+<script lang="ts">
+    import HeroSection from '$lib/components/hackathon/HeroSection.svelte';
+    import PublicHackathonTabs from '$lib/components/hackathon/PublicHackathonTabs.svelte';
+    import MarkdownContent from '$lib/components/forms/MarkdownContent.svelte';
+    import { formatDateRange } from '$lib/utils/hackathonDates';
+    import { statusLabel } from '$lib/utils/hackathonStatus';
+    import type { PageData } from './$types';
+
+    let { data }: { data: PageData } = $props();
+
+    const hackathon = $derived(data.hackathon);
+    const dates = $derived(formatDateRange({ startsAt: hackathon.startsAt, endsAt: hackathon.endsAt }));
+</script>
+
+<!--
+  A published page, under the same hero and strip as the landing page it was
+  reached from.
+
+  The hero names the *hackathon*, not the page, on every route in this subtree —
+  so the strip below it always sits in the same place and the reader never has to
+  work out which event they are looking at. The page's own title heads its
+  content instead, as `h2`, exactly as the member view of the same page does.
+
+  Without the picture, which stays the landing page's. Repeating a logo above
+  every FAQ and schedule buys nothing and pushes the content the visitor clicked
+  for below the fold. `HeroSection` takes `imageUrl` as optional for this kind of
+  reason, so it simply is not passed.
+-->
+<HeroSection
+    title={hackathon.name}
+    dates={dates}
+    status={statusLabel(hackathon.status)}
+    breadcrumbs={[
+        { label: 'Hackathons', href: '/' },
+        { label: hackathon.name, href: `/hackathon/${hackathon.id}` },
+        { label: data.page.title, href: `/hackathon/${hackathon.id}/pages/${data.page.id}` },
+    ]}
+/>
+
+<PublicHackathonTabs hackathonId={hackathon.id} pages={data.pages} current={data.page.id} />
+
+<div class="mx-auto w-full max-w-7xl">
+    <section class="flex flex-col gap-6 px-4 py-12 sm:px-10 md:px-20">
+        <h2 class="m-0 text-title text-ink">{data.page.title}</h2>
+
+        {#if data.page.content.trim()}
+            <!-- The organisers' own markdown, through the same component the
+                 editor previews with, so what they wrote is what shows. -->
+            <div class="max-w-3xl">
+                <MarkdownContent content={data.page.content} />
+            </div>
+        {:else}
+            <!-- Said plainly rather than papered over: an empty page is the
+                 organisers' unfinished work, and pretending otherwise leaves the
+                 visitor wondering whether it failed to load. -->
+            <p class="m-0 text-sm text-ink-3">This page has no content yet.</p>
+        {/if}
+    </section>
+</div>