Add remaining spots

src/routes/+page.server.ts

@@ -0,0 +1,22 @@
+import { PARTICIPANTS_DIRECTORY } from '$lib/participants/participant-schema';
+import type { PageServerLoad } from './$types';
+import { loadParticipantJsonFilePaths, loadParticipants } from '$lib/participants/participants';
+
+export const load: PageServerLoad = async (): Promise<{
+	fridayParticipants: number;
+	saturdayParticipants: number;
+}> => {
+	try {
+		const participantsFilePaths = await loadParticipantJsonFilePaths(PARTICIPANTS_DIRECTORY);
+
+		const participants = await loadParticipants(participantsFilePaths);
+
+		const fridayParticipants = participants.filter((p) => p.when.friday).length;
+		const saturdayParticipants = participants.filter((p) => p.when.saturday).length;
+
+		return { fridayParticipants, saturdayParticipants };
+	} catch (err) {
+		console.error('Loading of participants failed:', err);
+		throw err;
+	}
+};

src/routes/+page.svelte

@@ -20,6 +20,9 @@
 	import Partners from '$lib/sponsoring/Partners.svelte';
 	import Sponsors from '$lib/sponsoring/Sponsors2024.svelte';
 	import Schedule from './Schedule.svelte';
+	import type { PageData } from './$types';
+
+	export let data: PageData;
 
 	const countdown = writable<string>('');
 	const registrationState = writable<'not-yet' | 'closed' | 'open'>(getRegistrationState());
@@ -73,6 +76,11 @@
 				<p>Registration is closed, we're full!</p>
 			{:else}
 				<p><a href="{base}/registration">Registration is open!</a></p>
+				<p>Grab your spot!</p>
+				<p>Friday: <strong>{100 - data.fridayParticipants}</strong> spots left</p>
+				<p>
+					Saturday: <strong>{100 - data.saturdayParticipants}</strong> spots left
+				</p>
 			{/if}
 		</InfoBox>
 		<InfoBox title="Where?">

src/routes/participants/+page.svelte

@@ -91,13 +91,13 @@
 				type="button"
 				on:click={setFridayOrUnset}
 				class:isActive={$participantsFilter === fridayFilter}
-				>Friday ({participants.filter(fridayFilter).length} participants)</button
+				>Friday ({participants.filter(fridayFilter).length} / 100 participants)</button
 			>
 			<button
 				type="button"
 				on:click={setSaturdayOrUnset}
 				class:isActive={$participantsFilter === saturdayFilter}
-				>Saturday ({participants.filter(saturdayFilter).length} participants)</button
+				>Saturday ({participants.filter(saturdayFilter).length} / 100 participants)</button
 			>
 		</div>