pen/docent
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Proto-to-Prod

Browse source
This commit is contained in:
Pen Anderson 2026-05-26 11:52:32 -05:00
parent 82a8a6a21a
commit 5cabc31d37
63 changed files with 3783 additions and 602 deletions
Download patch file Download diff file Expand all files Collapse all files

160
web/src/app.css
View file

@ -1,16 +1,54 @@
@import '@fontsource/playwrite-de-sas/100.css';
@import '@fontsource/cormorant-garamond/400.css';
@import '@fontsource/cormorant-garamond/400-italic.css';
@import '@fontsource/cormorant-garamond/600.css';
@import '@fontsource/cantarell/400.css';
@import '@fontsource/cantarell/700.css';
@import '@fontsource/bebas-neue/400.css';
@import '@fontsource/oswald/400.css';
@import '@fontsource/oswald/500.css';
/* Inspiration is used only for the uppercase letters in script titles
* (matches the brand treatment where the leading caps are extra-flourished).
* The unicode-range restriction means the browser falls through to
* Playwrite DK Loopet for everything else automatically — no markup spans.
*/
@font-face {
font-family: 'Inspiration Caps';
font-style: normal;
/* Inspiration is only published at weight 400; declare a wide range here
* so this face matches whatever weight the title-script class requests. */
font-weight: 100 900;
font-display: swap;
src:
url('@fontsource/inspiration/files/inspiration-latin-400-normal.woff2') format('woff2'),
url('@fontsource/inspiration/files/inspiration-latin-400-normal.woff') format('woff');
unicode-range: U+0041-005A;
}
:root {
--bg: #faf7f2;
--bg-elev: #ffffff;
--ink: #2a2520;
--ink-mute: #6b6157;
--accent: #6e3a1f;
--rule: #e8e0d4;
/* Mill Run brand palette */
--bg: #b9cfba; /* sage — main background */
--bg-card: #ffffff; /* card / tile background on the sage page */
--bg-callout: #4b6c64; /* deep teal — callout panels */
--bg-paper: #f6ecd6; /* warm ivory — Stagebill program paper */
--ink: #4b6c64; /* primary body text */
--ink-on-callout: #b9cfba; /* text on dark teal callouts */
--ink-mute: #6b8a82; /* secondary teal for de-emphasis */
--ink-deep: #11281f; /* very dark green for high contrast on paper/light bg */
--title: #c33b23; /* red-orange — titles, focus, errors (darkened from #e1442b) */
--highlight: #f1b416; /* yellow — accents, scrub thumb, indicators */
--rule: #9bb59c; /* darker sage — borders/dividers */
--shadow: 0 1px 2px rgba(75, 108, 100, 0.12), 0 8px 24px rgba(75, 108, 100, 0.18);
--radius: 14px;
--radius-lg: 22px;
--shadow: 0 1px 2px rgba(42, 37, 32, 0.06), 0 8px 24px rgba(42, 37, 32, 0.08);
--font-sans: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
--font-serif: ui-serif, Georgia, 'Times New Roman', serif;
--font-script: 'Inspiration Caps', 'Playwrite DE SAS', cursive;
--font-marquee: 'Bebas Neue', 'Anton', 'Oswald', 'Arial Narrow', sans-serif;
--font-editorial: 'Cormorant Garamond', 'Iowan Old Style', Cambria, Georgia, serif;
color-scheme: light;
}
@ -41,14 +79,18 @@ body {
}
h1, h2, h3 {
font-family: var(--font-serif);
font-weight: 600;
letter-spacing: -0.01em;
letter-spacing: -0.005em;
margin: 0;
color: var(--title);
}
h2, h3 {
font-family: var(--font-serif);
}
a {
color: var(--accent);
color: var(--title);
text-decoration: none;
}
@ -70,3 +112,101 @@ img {
display: block;
max-width: 100%;
}
/* Title-style headings (the script-font, brand-red ones).
* Apply via `.title-script` to any heading we want to render in the
* exhibit's primary script-and-red treatment.
*/
.title-script {
font-family: var(--font-script);
color: var(--title);
font-weight: 100;
line-height: 1.25;
letter-spacing: 0;
/* Playwrite has long ascenders/descenders; allow them to breathe. */
padding: 0.1em 0.05em;
}
/* Marquee letter-board: white sign with bold black changeable-letter text.
* Modeled on the actual Mill Run marquee from the 1970s. */
.marquee-panel {
position: relative;
display: inline-block;
max-width: 100%;
color: #111111;
/* Scale side padding with viewport so phone screens aren't doubly cramped. */
padding: clamp(1.5rem, 5vw, 2.5rem) clamp(1.25rem, 5vw, 3rem) clamp(1.75rem, 5vw, 2.75rem);
border-radius: 4px;
border: 1px solid rgba(0, 0, 0, 0.08);
background: #ffffff;
box-shadow:
0 1px 0 rgba(0, 0, 0, 0.08) inset,
0 6px 24px rgba(75, 108, 100, 0.18);
text-align: center;
}
/* Bulb ring: a single stroked rect with `stroke-dasharray: 0 N` and round
* caps renders evenly-spaced circular dots that traverse the corners cleanly. */
.marquee-panel .bulbs {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.marquee-panel .bulbs rect {
x: 11px;
y: 11px;
width: calc(100% - 22px);
height: calc(100% - 22px);
rx: 3px;
fill: none;
stroke: var(--highlight);
stroke-width: 7;
/* pathLength is set on each rect in the template; dasharray "0 2"
* over a path of length N places N/2 evenly-spaced dots, so the first
* and last align exactly with no leftover corner gap. */
stroke-dasharray: 0 2;
stroke-linecap: round;
}
.title-marquee {
font-family: var(--font-marquee);
color: var(--title);
font-weight: 400;
line-height: 0.95;
letter-spacing: 0.04em;
text-transform: uppercase;
margin: 0;
text-align: center;
}
.marquee-body {
font-family: var(--font-marquee);
color: #111111;
font-weight: 400;
font-size: clamp(0.95rem, 2.4vw, 1.25rem);
line-height: 1.15;
letter-spacing: 0.08em;
text-transform: uppercase;
margin: 0.4rem 0 0;
text-align: center;
}
.marquee-body + .marquee-body {
margin-top: 0.25rem;
}
/* The yellow heading band that sits behind a script title.
* `max-width: 100%` keeps it inside narrow containers (login card on phones).
* `overflow-wrap: break-word` lets long titles wrap rather than overflow.
*/
.band {
display: inline-block;
max-width: 100%;
padding: 2rem 3.25rem 2.25rem;
background: var(--highlight);
border-radius: 2.5rem;
box-shadow: 0 1px 0 rgba(75, 108, 100, 0.08);
overflow-wrap: break-word;
hyphens: auto;
}

2
web/src/app.html
View file

@ -11,7 +11,7 @@
<link rel="manifest" href="/manifest.webmanifest" />
<link rel="icon" href="/favicon.png" type="image/png" />
<link rel="apple-touch-icon" href="/icon-192.png" />
<title>Mill Run</title>
<title>Mill Run Theatre</title>
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover">

1230
web/src/lib/artists.json Normal file
View file

File diff suppressed because it is too large Load diff

35
web/src/lib/artists.ts Normal file
View file

@ -0,0 +1,35 @@
import data from './artists.json';
export type Side = {
id: string;
label: string;
audio: string;
};
export type Show = {
caption: string;
slug: string;
sides: Side[];
};
export type Artist = {
id: number;
name: string;
slug: string;
description: string;
images: string[];
shows: Show[];
};
export type Exhibit = {
title: string;
description?: string;
subtitle?: string;
};
export const exhibit: Exhibit = data.exhibit;
export const artists: Artist[] = data.artists;
export function artistById(id: number): Artist | undefined {
return artists.find((a) => a.id === id);
}

27
web/src/lib/auth.svelte.ts
View file

@ -38,35 +38,8 @@ export async function login(password: string): Promise<boolean> {
return false;
}
export async function loginWithKey(key: string): Promise<boolean> {
const res = await fetch('/api/key', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ key }),
credentials: 'same-origin'
});
if (res.ok) {
state = 'signed-in';
return true;
}
return false;
}
export async function logout() {
await fetch('/api/logout', { method: 'POST', credentials: 'same-origin' });
state = 'signed-out';
goto('/login');
}
export type KeyResult = 'success' | 'failed' | 'absent';
export async function consumeKeyParam(): Promise<KeyResult> {
if (!browser) return 'absent';
const url = new URL(window.location.href);
const key = url.searchParams.get('key');
if (!key) return 'absent';
url.searchParams.delete('key');
window.history.replaceState({}, '', url.toString());
const ok = await loginWithKey(key);
return ok ? 'success' : 'failed';
}

21
web/src/lib/fonts.svelte.ts Normal file
View file

@ -0,0 +1,21 @@
import { browser } from '$app/environment';
// Becomes true once all custom fonts have loaded. Components that contain
// SVG paths whose geometry depends on element size (e.g. the marquee bulb
// ring) can key off this so they remount after the font swap finishes
// resizing the panel.
let ready = $state(false);
if (browser) {
if ('fonts' in document && typeof document.fonts.ready?.then === 'function') {
document.fonts.ready.then(() => {
ready = true;
});
} else {
ready = true;
}
}
export function fontsReady(): boolean {
return ready;
}

22
web/src/lib/precache.svelte.ts
View file

@ -1,16 +1,20 @@
import { browser } from '$app/environment';
import { stops } from './stops';
import { artists } from './artists';
export type PrecacheState = 'idle' | 'running' | 'complete' | 'unsupported';
let state: PrecacheState = $state('idle');
let done = $state(0);
let total = $state(0);
let failed = $state(0);
export function precacheState() {
return { state, done, total };
return { state, done, total, failed };
}
// Precache every image and every audio side. ~1.6 GB at current Opus
// bitrate. Designed for the museum's single-kiosk tablet on a flaky wifi:
// staff hit the page once at setup; visitors thereafter hit cache only.
export async function precacheAll(): Promise<void> {
if (!browser) return;
if (!('serviceWorker' in navigator)) {
@ -26,7 +30,15 @@ export async function precacheAll(): Promise<void> {
return;
}
const urls = stops.flatMap((s) => [s.audio, s.image]);
const urls = artists.flatMap((a) => [
...a.images,
...a.shows.flatMap((s) => s.sides.map((side) => side.audio))
]);
if (urls.length === 0) {
state = 'complete';
return;
}
state = 'running';
done = 0;
@ -38,14 +50,16 @@ export async function precacheAll(): Promise<void> {
if (data.type === 'precache-progress') {
done = data.done;
total = data.total;
failed = data.failed ?? 0;
} else if (data.type === 'precache-done') {
done = data.done;
total = data.total;
failed = data.failed ?? 0;
state = 'complete';
navigator.serviceWorker.removeEventListener('message', onMessage);
}
};
navigator.serviceWorker.addEventListener('message', onMessage);
target.postMessage({ type: 'precache-stops', urls });
target.postMessage({ type: 'precache-artists', urls });
}

24
web/src/lib/stops.json
View file

@ -1,24 +0,0 @@
{
"exhibit": {
"title": "Mill Run",
"subtitle": ""
},
"stops": [
{
"id": 1,
"title": "Welcome",
"audio": "/audio/01.opus",
"image": "/images/01.webp",
"caption": "An introduction to the exhibit.",
"description": "Placeholder description."
},
{
"id": 2,
"title": "Stop two placeholder",
"audio": "/audio/02.opus",
"image": "/images/02.webp",
"caption": "",
"description": ""
}
]
}

22
web/src/lib/stops.ts
View file

@ -1,22 +0,0 @@
import stopsJson from './stops.json';
export type Stop = {
id: number;
title: string;
audio: string;
image: string;
caption?: string;
description?: string;
};
export type Exhibit = {
title: string;
subtitle: string;
};
export const exhibit: Exhibit = stopsJson.exhibit;
export const stops: Stop[] = stopsJson.stops;
export function stopById(id: number): Stop | undefined {
return stops.find((s) => s.id === id);
}

10
web/src/routes/+layout.svelte
View file

@ -4,7 +4,7 @@
import { page } from '$app/stores';
import { goto } from '$app/navigation';
import { dev } from '$app/environment';
import { authState, checkAuth, consumeKeyParam } from '$lib/auth.svelte';
import { authState, checkAuth } from '$lib/auth.svelte';
import { precacheAll } from '$lib/precache.svelte';
let { children } = $props();
@ -24,18 +24,14 @@
}
}
const keyResult = await consumeKeyParam();
if (keyResult !== 'success') await checkAuth();
await checkAuth();
const path = $page.url.pathname;
if (authState() === 'signed-out' && path !== '/login') {
const params = new URLSearchParams({ next: path });
if (keyResult === 'failed') params.set('error', 'qr');
await goto('/login?' + params.toString(), { replaceState: true });
}
// Production-only: kick off audio/image bulk precache once authenticated.
// SW does the work; failures non-fatal.
if (!dev && authState() === 'signed-in') {
precacheAll().catch(() => undefined);
}
@ -63,7 +59,7 @@
height: 32px;
border-radius: 50%;
border: 2px solid var(--rule);
border-top-color: var(--accent);
border-top-color: var(--title);
animation: spin 0.8s linear infinite;
}
@keyframes spin {

156
web/src/routes/+page.svelte
View file

@ -1,63 +1,118 @@
<script lang="ts">
import { exhibit, stops } from '$lib/stops';
import { exhibit, artists, type Artist } from '$lib/artists';
import { precacheState } from '$lib/precache.svelte';
import { fontsReady } from '$lib/fonts.svelte';
const pre = $derived(precacheState());
function artistYears(artist: Artist): string {
const years = new Set<string>();
for (const show of artist.shows) {
const m = show.caption.match(/\b(19|20)\d{2}\b/);
if (m) years.add(m[0]);
}
return [...years].sort().join(', ');
}
</script>
<header class="hero">
<h1>{exhibit.title}</h1>
{#if exhibit.subtitle}
<p class="subtitle">{exhibit.subtitle}</p>
{/if}
<div class="marquee-panel">
{#key fontsReady()}
<svg class="bulbs" width="100%" height="100%" aria-hidden="true"><rect pathLength="120" /></svg>
{/key}
<h1 class="title-marquee">{exhibit.title}</h1>
{#if exhibit.description}
{#each exhibit.description.split('\n').filter(Boolean) as line}
<p class="marquee-body">{line}</p>
{/each}
{/if}
</div>
</header>
{#if pre.state === 'running'}
{#if pre.state === 'running' || (pre.state === 'complete' && pre.failed > 0)}
<div class="precache" role="status" aria-live="polite">
<span class="dot" aria-hidden="true"></span>
<span class="text">
Loading exhibit for offline listening… {pre.done}/{pre.total}
</span>
{#if pre.state === 'running'}
<span class="dot" aria-hidden="true"></span>
<span class="text">
Caching exhibit for offline listening… {pre.done} / {pre.total}
{#if pre.failed > 0}({pre.failed} retrying){/if}
</span>
<div class="bar" aria-hidden="true">
<div class="bar-fill" style="width: {pre.total ? (pre.done / pre.total) * 100 : 0}%"></div>
</div>
{:else}
<span class="text">
{pre.total - pre.failed} of {pre.total} files cached. {pre.failed}
failed to download — they will stream over the network when played.
</span>
{/if}
</div>
{/if}
<main class="grid" aria-label="Exhibit stops">
{#each stops as stop (stop.id)}
<a class="tile" href="/stop/{stop.id}" data-sveltekit-preload-data="hover">
<main class="grid" aria-label="Artists">
{#each artists as artist (artist.id)}
{@const cover = artist.images[0]}
<a
class="tile"
href="/artist/{artist.id}"
data-sveltekit-preload-data="hover"
aria-label={artist.name}
>
<div class="tile-image">
<img src={stop.image} alt="" loading="lazy" />
{#if cover}
<img src={cover} alt="" loading="lazy" />
{:else}
<div class="tile-image-placeholder" aria-hidden="true"></div>
{/if}
</div>
<div class="tile-meta">
<span class="tile-num">{String(stop.id).padStart(2, '0')}</span>
<span class="tile-title">{stop.title}</span>
<span class="tile-name">{artist.name}</span>
<span class="tile-shows">{artistYears(artist)}</span>
</div>
</a>
{/each}
</main>
<style>
.hero {
padding: 2rem 1.25rem 1rem;
padding: 1.5rem 1rem 1.5rem;
text-align: center;
}
.precache {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.6rem;
margin: 0 auto 0.5rem;
padding: 0.5rem 1rem;
margin: 0 auto 0.75rem;
padding: 0.6rem 1rem;
max-width: 32rem;
font-size: 0.9rem;
color: var(--ink-mute);
background: var(--bg-elev);
color: var(--ink-on-callout);
background: var(--bg-callout);
border-radius: var(--radius);
box-shadow: var(--shadow);
}
.precache .text {
flex: 1 1 auto;
}
.precache .bar {
flex: 1 0 100%;
height: 4px;
background: rgba(255, 255, 255, 0.12);
border-radius: 2px;
overflow: hidden;
}
.precache .bar-fill {
height: 100%;
background: var(--highlight);
transition: width 0.2s linear;
}
.precache .dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--accent);
background: var(--highlight);
animation: pulse 1.4s ease-in-out infinite;
flex-shrink: 0;
}
@ -68,12 +123,8 @@
@media (prefers-reduced-motion: reduce) {
.precache .dot { animation: none; opacity: 0.7; }
}
.hero h1 {
font-size: clamp(2rem, 5vw, 3rem);
}
.subtitle {
margin: 0.5rem 0 0;
color: var(--ink-mute);
.hero :global(.title-marquee) {
font-size: clamp(2.25rem, 9vw, 4rem);
}
.grid {
display: grid;
@ -92,9 +143,9 @@
display: flex;
flex-direction: column;
gap: 0.75rem;
color: inherit;
color: var(--ink);
border-radius: var(--radius-lg);
background: var(--bg-elev);
background: var(--bg-card);
box-shadow: var(--shadow);
overflow: hidden;
transition: transform 0.15s ease;
@ -103,6 +154,7 @@
transform: scale(0.98);
}
.tile-image {
position: relative;
aspect-ratio: 4 / 3;
background: var(--rule);
overflow: hidden;
@ -111,23 +163,43 @@
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
}
.tile-image-placeholder {
width: 100%;
height: 100%;
background:
repeating-linear-gradient(
135deg,
transparent 0,
transparent 18px,
rgba(75, 108, 100, 0.08) 18px,
rgba(75, 108, 100, 0.08) 19px
),
var(--rule);
}
.tile-meta {
display: flex;
align-items: baseline;
gap: 0.6rem;
flex-direction: column;
gap: 0.15rem;
padding: 0.25rem 1rem 1rem;
}
.tile-num {
font-family: var(--font-serif);
font-size: 0.95rem;
color: var(--ink-mute);
.tile-name {
font-family: var(--font-marquee);
font-weight: 400;
font-size: 1.35rem;
line-height: 1.05;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #111111;
}
.tile-shows {
font-family: var(--font-marquee);
font-size: 0.9rem;
line-height: 1.1;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #111111;
font-variant-numeric: tabular-nums;
}
.tile-title {
font-family: var(--font-serif);
font-weight: 600;
font-size: 1.1rem;
line-height: 1.2;
}
</style>

308
web/src/routes/artist/[id]/+page.svelte Normal file
View file

@ -0,0 +1,308 @@
<script lang="ts">
import { page } from '$app/stores';
import { goto } from '$app/navigation';
import { artists, artistById } from '$lib/artists';
import { fontsReady } from '$lib/fonts.svelte';
import SidePlayer from './SidePlayer.svelte';
const id = $derived(Number($page.params.id));
const artist = $derived(artistById(id));
const index = $derived(artists.findIndex((a) => a.id === id));
const prev = $derived(index > 0 ? artists[index - 1] : null);
const next = $derived(index >= 0 && index < artists.length - 1 ? artists[index + 1] : null);
</script>
{#if !artist}
<main class="missing">
<p>Artist not found.</p>
<a href="/">Back to all artists</a>
</main>
{:else}
<header class="bar">
<a class="home" href="/" aria-label="Back to all artists">
<svg viewBox="0 0 24 24" width="22" height="22" aria-hidden="true">
<path d="M3 11l9-8 9 8v10a1 1 0 0 1-1 1h-5v-7h-6v7H4a1 1 0 0 1-1-1z"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round" />
</svg>
<span class="home-label">Back to All Artists</span>
</a>
</header>
<main class="artist">
<div class="marquee-panel artist-name">
{#key `${artist.id}-${fontsReady()}`}
<svg class="bulbs" width="100%" height="100%" aria-hidden="true"><rect pathLength="96" /></svg>
{/key}
<h1 class="title-marquee">{artist.name}</h1>
</div>
{#if artist.images.length > 0 || artist.description}
<div
class="artist-info"
class:side-by-side={artist.images.length === 1 && !!artist.description}
>
{#if artist.images.length > 0}
<div class="images" class:single={artist.images.length === 1}>
{#each artist.images as src, i (src)}
<figure>
<img src={src} alt="" loading={i === 0 ? 'eager' : 'lazy'} />
</figure>
{/each}
</div>
{/if}
{#if artist.description}
<article class="bio">
{#each artist.description.split(/\n\n+/) as para}
<p>{para}</p>
{/each}
</article>
{/if}
</div>
{/if}
<div class="rule" aria-hidden="true"></div>
<section class="shows">
{#each artist.shows as show (show.slug)}
<article class="show">
<h2 class="show-caption">{show.caption}</h2>
<div class="sides">
{#each show.sides as side (side.id)}
<SidePlayer label={side.label} src={side.audio} />
{/each}
</div>
</article>
{/each}
</section>
<p class="format-note">
Digitized from analog tapes in the Niles Historical Society archive.
</p>
</main>
<nav class="pager" aria-label="Artist navigation">
<button class="pager-btn" disabled={!prev} onclick={() => prev && goto(`/artist/${prev.id}`)}>
<span class="arrow">←</span>
<span class="label">{prev ? prev.name : ''}</span>
</button>
<button class="pager-btn right" disabled={!next} onclick={() => next && goto(`/artist/${next.id}`)}>
<span class="label">{next ? next.name : ''}</span>
<span class="arrow">→</span>
</button>
</nav>
{/if}
<style>
.missing {
flex: 1;
display: grid;
place-items: center;
gap: 1rem;
text-align: center;
padding: 2rem;
}
.bar {
position: sticky;
top: 0;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.75rem 1rem;
background: color-mix(in oklab, var(--bg) 80%, transparent);
backdrop-filter: blur(8px);
z-index: 10;
}
.home {
display: inline-flex;
align-items: baseline;
gap: 0.4rem;
padding: 0.5rem 0.95rem 0.5rem 0.7rem;
min-height: 44px;
border-radius: 999px;
color: var(--ink);
background: var(--bg-card);
box-shadow: var(--shadow);
font-family: 'Oswald', 'Roboto Condensed', 'Arial Narrow', sans-serif;
font-size: 1rem;
letter-spacing: 0.01em;
}
.home svg {
align-self: baseline;
transform: translateY(2px);
}
.home:hover,
.home:focus-visible {
color: var(--title);
}
.home:focus-visible {
outline: 2px solid var(--title);
outline-offset: 2px;
}
.home-label {
line-height: 1;
}
.artist {
max-width: 760px;
margin: 0 auto;
padding: 0.25rem 1.25rem 1.5rem;
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.artist-name {
align-self: center;
margin-top: 0.5rem;
}
.artist-name :global(.title-marquee) {
font-size: clamp(1.75rem, 6vw, 2.75rem);
}
.artist-info {
display: grid;
gap: 1.25rem;
}
@media (min-width: 640px) {
.artist-info.side-by-side {
grid-template-columns: minmax(200px, 2fr) minmax(0, 3fr);
align-items: stretch;
min-height: 280px;
}
/* Inside the side-by-side layout the images already live in a column,
* so stack multi-image sets vertically and drop the single-image centering. */
.artist-info.side-by-side .images {
grid-template-columns: 1fr;
grid-auto-rows: 1fr;
max-width: none;
margin: 0;
width: auto;
height: 100%;
}
.artist-info.side-by-side .images figure {
aspect-ratio: auto;
height: 100%;
}
}
.images {
display: grid;
gap: 0.75rem;
grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}
.images.single {
grid-template-columns: 1fr;
max-width: 480px;
margin: 0 auto;
width: 100%;
}
figure {
margin: 0;
border-radius: var(--radius-lg);
overflow: hidden;
background: var(--rule);
aspect-ratio: 4 / 3;
box-shadow: var(--shadow);
}
figure img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
}
.bio {
background: var(--bg-paper);
color: #111111;
padding: 1.25rem 1.5rem;
border-radius: var(--radius);
/* Oswald rather than Bebas Neue here — Bebas Neue's Google Fonts
* release ships only uppercase glyphs, so it can't render mixed case. */
font-family: 'Oswald', 'Roboto Condensed', 'Arial Narrow', sans-serif;
font-weight: 400;
font-size: clamp(1.05rem, 2.4vw, 1.3rem);
line-height: 1.4;
letter-spacing: 0.01em;
box-shadow: var(--shadow);
}
.bio p {
margin: 0 0 0.9em;
}
.bio p:last-child {
margin: 0;
}
.rule {
height: 1px;
background: var(--rule);
margin: 0.25rem 0;
}
.shows {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.show-caption {
font-family: var(--font-marquee);
text-transform: uppercase;
letter-spacing: 0.1em;
color: #111111;
font-size: 1.15rem;
font-weight: 400;
line-height: 1.1;
margin: 0 0 0.6rem;
text-align: center;
}
.sides {
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.format-note {
font-family: var(--font-editorial);
font-style: italic;
font-size: 0.9rem;
color: var(--ink-mute);
text-align: center;
margin: 0.5rem 0 0;
}
.pager {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.5rem;
padding: 1rem 1.25rem 1.5rem;
max-width: 760px;
margin: 0 auto;
width: 100%;
}
.pager-btn {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.9rem 1rem;
border-radius: var(--radius);
background: var(--bg-card);
box-shadow: var(--shadow);
color: var(--ink);
text-align: left;
min-height: 56px;
}
.pager-btn.right {
justify-content: flex-end;
text-align: right;
}
.pager-btn[disabled] {
opacity: 0.35;
cursor: not-allowed;
}
.arrow {
font-size: 1.25rem;
color: var(--ink-mute);
}
.label {
font-family: var(--font-serif);
font-size: 0.95rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>

241
web/src/routes/artist/[id]/SidePlayer.svelte Normal file
View file

@ -0,0 +1,241 @@
<script lang="ts">
type Props = {
label: string;
src: string;
};
let { label, src }: Props = $props();
let audio: HTMLAudioElement | undefined = $state();
let paused = $state(true);
let currentTime = $state(0);
let duration = $state(0);
let loading = $state(false);
let errored = $state(false);
function toggle() {
if (errored) {
retry();
return;
}
if (!audio) return;
if (audio.paused) {
audio.play().catch(() => undefined);
} else {
audio.pause();
}
}
function retry() {
if (!audio) return;
errored = false;
loading = true;
audio.load();
audio.play().catch(() => undefined);
}
function onPlaying() {
loading = false;
// Single-player invariant: pause every other audio element on the page.
if (audio) {
for (const other of document.querySelectorAll('audio')) {
if (other !== audio && !other.paused) other.pause();
}
}
}
function fmt(s: number) {
if (!isFinite(s) || s < 0) return '0:00';
const total = Math.floor(s);
const h = Math.floor(total / 3600);
const m = Math.floor((total % 3600) / 60);
const sec = total % 60;
return h > 0
? `${h}:${m.toString().padStart(2, '0')}:${sec.toString().padStart(2, '0')}`
: `${m}:${sec.toString().padStart(2, '0')}`;
}
</script>
<div class="player" class:playing={!paused && !loading && !errored} class:loading class:errored>
<button
type="button"
class="play"
onclick={toggle}
aria-label={errored
? `Tap to retry ${label}`
: loading
? `Loading ${label}`
: paused
? `Play ${label}`
: `Pause ${label}`}
aria-pressed={!paused}
>
{#if errored}
<svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true">
<path d="M12 2L1 21h22L12 2z" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round" />
<path d="M12 10v5M12 17.5v.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
</svg>
{:else if loading}
<svg viewBox="0 0 24 24" width="22" height="22" aria-hidden="true" class="spin">
<circle cx="12" cy="12" r="9" fill="none" stroke="currentColor" stroke-width="2.5" stroke-opacity="0.25" />
<path d="M21 12a9 9 0 00-9-9" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" />
</svg>
{:else if paused}
<svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true">
<path d="M8 5l11 7-11 7V5z" fill="currentColor" />
</svg>
{:else}
<svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true">
<path d="M7 5h3v14H7zM14 5h3v14h-3z" fill="currentColor" />
</svg>
{/if}
</button>
<div class="meta">
<span class="label">{label}</span>
<input
type="range"
min="0"
max={duration && isFinite(duration) ? duration : 0}
step="0.1"
bind:value={currentTime}
disabled={!duration || !isFinite(duration)}
aria-label="Seek {label}"
aria-valuetext="{fmt(currentTime)} of {fmt(duration)}"
/>
<span class="time tabular">{fmt(currentTime)} / {fmt(duration)}</span>
</div>
<audio
bind:this={audio}
bind:paused
bind:currentTime
bind:duration
onloadstart={() => { loading = true; errored = false; }}
oncanplay={() => { loading = false; }}
onwaiting={() => { loading = true; }}
onplaying={onPlaying}
onerror={() => { loading = false; errored = true; }}
onended={() => { paused = true; }}
preload="metadata"
{src}
></audio>
</div>
<style>
.player {
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
gap: 0.85rem;
padding: 0.75rem 1rem;
background: var(--bg-card);
border-radius: var(--radius);
box-shadow: var(--shadow);
}
.play {
display: grid;
place-items: center;
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--ink);
color: #fff;
flex-shrink: 0;
transition: background 0.15s ease;
}
.player.errored .play {
background: var(--title);
}
.play:hover {
background: var(--ink-deep);
}
.play:focus-visible {
outline: 2px solid var(--title);
outline-offset: 3px;
}
.meta {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 0.6rem;
min-width: 0;
}
.label {
font-family: var(--font-serif);
font-size: 0.95rem;
font-weight: 600;
color: var(--ink);
white-space: nowrap;
}
.time {
font-size: 0.8rem;
color: var(--ink-mute);
white-space: nowrap;
}
.tabular {
font-variant-numeric: tabular-nums;
}
input[type='range'] {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 5px;
background: var(--rule);
border-radius: 3px;
outline: none;
margin: 0;
min-width: 0;
}
input[type='range']:focus-visible {
outline: 2px solid var(--title);
outline-offset: 3px;
}
input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--highlight);
cursor: pointer;
border: 0;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
input[type='range']::-moz-range-thumb {
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--highlight);
cursor: pointer;
border: 0;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
input[type='range']:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.spin {
animation: spin 0.9s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
.spin {
animation: none;
}
}
@media (max-width: 480px) {
.meta {
grid-template-columns: 1fr;
}
.meta .label {
grid-column: 1 / -1;
}
.meta .time {
grid-column: 1 / -1;
text-align: right;
}
}
</style>

34
web/src/routes/login/+page.svelte
View file

@ -1,15 +1,12 @@
<script lang="ts">
import { goto } from '$app/navigation';
import { page } from '$app/stores';
import { exhibit } from '$lib/stops';
import { exhibit } from '$lib/artists';
import { login } from '$lib/auth.svelte';
import { fontsReady } from '$lib/fonts.svelte';
let password = $state('');
let error = $state(
$page.url.searchParams.get('error') === 'qr'
? "That QR code didn't work — try the password posted at the exhibit."
: ''
);
let error = $state('');
let busy = $state(false);
function safeNext(raw: string | null): string {
@ -35,7 +32,12 @@
<main>
<div class="card">
<h1>{exhibit.title}</h1>
<div class="marquee-panel">
{#key fontsReady()}
<svg class="bulbs" width="100%" height="100%" aria-hidden="true"><rect pathLength="96" /></svg>
{/key}
<h1 class="title-marquee">{exhibit.title}</h1>
</div>
<p>Enter the password posted at the exhibit to begin.</p>
<form onsubmit={submit}>
<label for="pw" class="visually-hidden">Password</label>
@ -71,18 +73,20 @@
.card {
width: 100%;
max-width: 26rem;
background: var(--bg-elev);
background: var(--bg-card);
border-radius: var(--radius-lg);
box-shadow: var(--shadow);
padding: 2rem 1.75rem;
text-align: center;
}
.marquee-panel {
margin: 0 0 1rem;
}
h1 {
font-size: 2rem;
margin-bottom: 0.5rem;
font-size: clamp(1.5rem, 6vw, 2.5rem);
}
p {
color: var(--ink-mute);
color: var(--ink);
margin: 0 0 1.5rem;
}
form {
@ -99,14 +103,14 @@
text-align: center;
}
input:focus {
outline: 2px solid var(--accent);
outline: 2px solid var(--title);
outline-offset: 1px;
}
button[type='submit'] {
padding: 0.9rem 1rem;
border-radius: var(--radius);
background: var(--ink);
color: var(--bg);
background: var(--bg-callout);
color: var(--ink-on-callout);
font-weight: 600;
font-size: 1.05rem;
}
@ -115,7 +119,7 @@
cursor: not-allowed;
}
.error {
color: #b53a25;
color: var(--title);
margin: 0.25rem 0 0;
font-size: 0.95rem;
}

373
web/src/routes/stop/[id]/+page.svelte
View file

@ -1,373 +0,0 @@
<script lang="ts">
import { page } from '$app/stores';
import { goto } from '$app/navigation';
import { browser } from '$app/environment';
import { stops, stopById } from '$lib/stops';
const id = $derived(Number($page.params.id));
const stop = $derived(stopById(id));
const index = $derived(stops.findIndex((s) => s.id === id));
const prev = $derived(index > 0 ? stops[index - 1] : null);
const next = $derived(index >= 0 && index < stops.length - 1 ? stops[index + 1] : null);
let audio: HTMLAudioElement | undefined = $state();
let paused = $state(true);
let volume = $state(1);
let muted = $state(false);
// iOS Safari treats audio.volume as read-only. Probe a throwaway element
// so we can hide the slider where it would be a no-op.
const volumeWritable = browser
? (() => {
const probe = new Audio();
probe.volume = 0.42;
return probe.volume === 0.42;
})()
: true;
function toggle() {
if (!audio) return;
if (audio.paused) {
audio.play().catch((err) => console.warn('audio play blocked:', err));
} else {
audio.pause();
}
}
function toggleMute() {
muted = !muted;
if (!muted && volume === 0) volume = 0.5;
}
</script>
{#if !stop}
<main class="missing">
<p>Stop not found.</p>
<a href="/">Back to all stops</a>
</main>
{:else}
<header class="bar">
<a class="back" href="/" aria-label="Back to all stops">
<svg viewBox="0 0 24 24" width="22" height="22" aria-hidden="true">
<path d="M15 18l-6-6 6-6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</a>
<span class="counter">{String(stop.id).padStart(2, '0')}</span>
</header>
<main class="stop">
<button
type="button"
class="hero"
class:playing={!paused}
onclick={toggle}
aria-label={paused ? `Play ${stop.title}` : `Pause ${stop.title}`}
aria-pressed={!paused}
>
<img src={stop.image} alt="" />
<span class="overlay" aria-hidden="true">
<span class="icon">
{#if paused}
<svg viewBox="0 0 24 24" width="32" height="32">
<path d="M8 5l11 7-11 7V5z" fill="currentColor" />
</svg>
{:else}
<svg viewBox="0 0 24 24" width="32" height="32">
<path d="M7 5h3v14H7zM14 5h3v14h-3z" fill="currentColor" />
</svg>
{/if}
</span>
</span>
</button>
{#if volumeWritable}
<div class="volume" role="group" aria-label="Volume">
<button
type="button"
class="mute-btn"
onclick={toggleMute}
aria-label={muted || volume === 0 ? 'Unmute' : 'Mute'}
aria-pressed={muted}
>
{#if muted || volume === 0}
<svg viewBox="0 0 24 24" width="22" height="22" aria-hidden="true">
<path d="M3 9v6h4l5 5V4L7 9H3z" fill="currentColor" />
<path d="M16.5 12l3-3-1.4-1.4-3 3-3-3L10.7 9l3 3-3 3 1.4 1.4 3-3 3 3 1.4-1.4z" fill="currentColor" />
</svg>
{:else if volume < 0.5}
<svg viewBox="0 0 24 24" width="22" height="22" aria-hidden="true">
<path d="M3 9v6h4l5 5V4L7 9H3z" fill="currentColor" />
<path d="M14 8.83v6.34a3 3 0 000-6.34z" fill="currentColor" />
</svg>
{:else}
<svg viewBox="0 0 24 24" width="22" height="22" aria-hidden="true">
<path d="M3 9v6h4l5 5V4L7 9H3z" fill="currentColor" />
<path d="M14 8.83v6.34a3 3 0 000-6.34z" fill="currentColor" />
<path d="M14 4.5v2.06a5.5 5.5 0 010 10.88v2.06a7.5 7.5 0 000-15z" fill="currentColor" />
</svg>
{/if}
</button>
<input
type="range"
min="0"
max="1"
step="0.01"
bind:value={volume}
aria-label="Volume level"
/>
</div>
{/if}
<audio
bind:this={audio}
bind:paused
bind:volume
bind:muted
preload="auto"
src={stop.audio}
>
Your browser does not support the audio element.
</audio>
<h1>{stop.title}</h1>
{#if stop.caption}
<p class="caption">{stop.caption}</p>
{/if}
{#if stop.description}
<div class="description">
{#each stop.description.split(/\n\n+/) as para}
<p>{para}</p>
{/each}
</div>
{/if}
</main>
<nav class="pager" aria-label="Stop navigation">
<button class="pager-btn" disabled={!prev} onclick={() => prev && goto(`/stop/${prev.id}`)}>
<span class="arrow">←</span>
<span class="label">{prev ? `${String(prev.id).padStart(2, '0')} ${prev.title}` : ''}</span>
</button>
<button class="pager-btn right" disabled={!next} onclick={() => next && goto(`/stop/${next.id}`)}>
<span class="label">{next ? `${String(next.id).padStart(2, '0')} ${next.title}` : ''}</span>
<span class="arrow">→</span>
</button>
</nav>
{/if}
<style>
.missing {
flex: 1;
display: grid;
place-items: center;
gap: 1rem;
text-align: center;
padding: 2rem;
}
.bar {
position: sticky;
top: 0;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.75rem 1rem;
background: color-mix(in oklab, var(--bg) 80%, transparent);
backdrop-filter: blur(8px);
z-index: 10;
}
.back {
display: grid;
place-items: center;
width: 44px;
height: 44px;
border-radius: 50%;
color: var(--ink);
}
.back:hover {
background: var(--rule);
}
.counter {
font-family: var(--font-serif);
color: var(--ink-mute);
font-variant-numeric: tabular-nums;
}
.stop {
max-width: 720px;
margin: 0 auto;
padding: 0.5rem 1.25rem 1.5rem;
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.hero {
position: relative;
display: block;
width: 100%;
padding: 0;
margin: 0;
border: 0;
background: var(--rule);
border-radius: var(--radius-lg);
overflow: hidden;
aspect-ratio: 4 / 3;
box-shadow: var(--shadow);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.hero img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.hero .overlay {
position: absolute;
inset: 0;
display: grid;
place-items: center;
background: rgba(20, 16, 12, 0.32);
transition: background 0.25s ease, opacity 0.25s ease;
}
.hero.playing .overlay {
background: rgba(20, 16, 12, 0);
opacity: 0;
}
.hero:hover .overlay,
.hero:focus-visible .overlay {
opacity: 1;
background: rgba(20, 16, 12, 0.32);
}
.hero .icon {
display: grid;
place-items: center;
width: 88px;
height: 88px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.94);
color: var(--ink);
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
transition: transform 0.15s ease;
}
.hero:active .icon {
transform: scale(0.94);
}
.hero:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
.hero .overlay,
.hero .icon {
transition: none;
}
}
h1 {
font-size: clamp(1.6rem, 4vw, 2.25rem);
}
.caption {
margin: 0;
color: var(--ink-mute);
}
.volume {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.25rem 0.25rem;
}
.mute-btn {
display: grid;
place-items: center;
width: 44px;
height: 44px;
border-radius: 50%;
color: var(--ink);
flex-shrink: 0;
}
.mute-btn:hover,
.mute-btn:focus-visible {
background: var(--rule);
}
.mute-btn:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.volume input[type='range'] {
flex: 1;
-webkit-appearance: none;
appearance: none;
height: 6px;
background: var(--rule);
border-radius: 3px;
outline: none;
margin: 0;
}
.volume input[type='range']:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 4px;
}
.volume input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--ink);
cursor: pointer;
border: 0;
box-shadow: var(--shadow);
}
.volume input[type='range']::-moz-range-thumb {
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--ink);
cursor: pointer;
border: 0;
box-shadow: var(--shadow);
}
.description {
line-height: 1.6;
}
.description p {
margin: 0 0 1em;
}
.pager {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.5rem;
padding: 1rem 1.25rem 1.5rem;
max-width: 720px;
margin: 0 auto;
width: 100%;
}
.pager-btn {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.9rem 1rem;
border-radius: var(--radius);
background: var(--bg-elev);
box-shadow: var(--shadow);
color: var(--ink);
text-align: left;
min-height: 56px;
}
.pager-btn.right {
justify-content: flex-end;
text-align: right;
}
.pager-btn[disabled] {
opacity: 0.35;
cursor: not-allowed;
}
.arrow {
font-size: 1.25rem;
color: var(--ink-mute);
}
.label {
font-family: var(--font-serif);
font-size: 0.95rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>

81
web/src/service-worker.ts
View file

@ -14,7 +14,7 @@
// /audio /img → stale-while-revalidate from ASSET_CACHE
// everything → cache-first from SHELL_CACHE
// - Messages:
// { type: 'precache-stops', urls: string[] }
// { type: 'precache-artists', urls: string[] }
// Bulk-cache a list of URLs into ASSET_CACHE, posting progress back to
// the sender via { type: 'precache-progress', done, total } and a final
// { type: 'precache-done' } when finished.
@ -72,7 +72,6 @@ sw.addEventListener('fetch', (event) => {
event.respondWith(
(async () => {
// Navigation: prefer cached shell; fall back to network.
if (request.mode === 'navigate') {
const shell = await caches.open(SHELL_CACHE);
const cached = (await shell.match('/')) || (await shell.match('/index.html'));
@ -89,7 +88,6 @@ sw.addEventListener('fetch', (event) => {
const cached = await cache.match(request);
if (cached) {
if (isContent) {
// Stale-while-revalidate: return cached, refresh in background.
event.waitUntil(refresh(cache, request));
}
return cached;
@ -119,40 +117,79 @@ async function refresh(cache: Cache, request: Request) {
sw.addEventListener('message', (event) => {
const data = event.data;
if (data?.type !== 'precache-stops' || !Array.isArray(data.urls)) return;
if (data?.type !== 'precache-artists' || !Array.isArray(data.urls)) return;
const urls: string[] = data.urls;
const source = event.source;
event.waitUntil(precacheStops(urls, source));
event.waitUntil(precacheArtists(urls, source));
});
async function precacheStops(urls: string[], source: Client | ServiceWorker | MessagePort | null) {
async function precacheArtists(urls: string[], source: Client | ServiceWorker | MessagePort | null) {
const cache = await caches.open(ASSET_CACHE);
let done = 0;
const total = urls.length;
for (const url of urls) {
try {
const cached = await cache.match(url);
if (!cached) {
const res = await fetch(url, { credentials: 'same-origin' });
if (res.ok && res.type === 'basic') await cache.put(url, res);
}
} catch {
// Network error — skip and continue. UI shows the count.
}
done++;
let done = 0;
let failed = 0;
const queue = urls.slice();
const CONCURRENCY = 3;
const MAX_ATTEMPTS = 3;
const BACKOFF_MS = 800;
function postProgress() {
try {
(source as Client | null)?.postMessage?.({
type: 'precache-progress',
done,
total
total,
failed
});
} catch {
// Sender went away.
} catch {}
}
async function fetchWithRetry(url: string): Promise<boolean> {
for (let attempt = 1; attempt <= MAX_ATTEMPTS; attempt++) {
try {
const res = await fetch(url, { credentials: 'same-origin', cache: 'no-store' });
if (res.ok && res.type === 'basic') {
await cache.put(url, res);
return true;
}
if (res.status >= 400 && res.status < 500) return false; // permanent
} catch {}
if (attempt < MAX_ATTEMPTS) {
await new Promise((r) => setTimeout(r, BACKOFF_MS * attempt));
}
}
return false;
}
async function worker() {
while (queue.length > 0) {
const url = queue.shift();
if (!url) break;
try {
const cached = await cache.match(url);
if (!cached) {
const ok = await fetchWithRetry(url);
if (!ok) failed++;
}
} catch {
failed++;
}
done++;
postProgress();
}
}
await Promise.all(Array.from({ length: CONCURRENCY }, worker));
try {
(source as Client | null)?.postMessage?.({ type: 'precache-done', done, total });
(source as Client | null)?.postMessage?.({
type: 'precache-done',
done,
total,
failed
});
} catch {
// Sender went away.
}