Add PDF viewer and final full program

package.json

@@ -37,5 +37,8 @@
 		"vite": "^4.4.2",
 		"vite-plugin-tailwind-purgecss": "0.1.3"
 	},
-	"type": "module"
+	"type": "module",
+	"dependencies": {
+		"svelte-pdf": "^1.0.20"
+	}
 }

src/routes/+page.svelte

@@ -93,7 +93,7 @@
 			<h4 class="h4 fill-token select-none drop-shadow-xl">
 				Emory University<br /> March 22-24, 2024
 			</h4>
-			<a href="/registration" class="btn btn-lg outline my-5 select-none">Registration Closed</a>
+			<a href="/program" class="btn btn-lg outline my-5 select-none">See our Program</a>
 		</div>
 	</div>
 	<quote

src/routes/program/+page.svelte

@@ -1,17 +1,29 @@
 <script>
+	// @ts-nocheck
+
 	import MicPic from '$lib/assets/background/joao-cruz-IkEpl3JkVqU-unsplash.jpg';
 	import { Tab, TabGroup } from '@skeletonlabs/skeleton';
+	import { onMount } from 'svelte';
 	import Hero from '../../components/Hero.svelte';
 	import { dayOneEvents, dayThreeEvents, dayTwoEvents } from './data';
+	/**
+	 * @type {typeof import("svelte-pdf").default}
+	 */
+	let PdfViewer;
 
-	let tabSet = 0;
-
+	onMount(async () => {
+		const module = await import('svelte-pdf');
+		PdfViewer = module.default;
+	});
 	const keynotes = [
 		{ name: 'Anant Madabhushi', affiliation: 'Emory University' },
 		{ name: 'Greg Gibson', affiliation: 'Georgia Tech' },
 		{ name: 'Nancy J.', affiliation: 'Cox Vanderbilt University' },
 		{ name: 'Heng Li', affiliation: 'Dana Farber Cancer Institute<br/>Harvard Medical School' }
 	];
+	const pdfUrl =
+		'https://ojetquufzwfvbqakaque.supabase.co/storage/v1/object/public/static/MCBIOS%20Program.pdf';
+	let tabSet = 0;
 </script>
 
 <svelte:head>
@@ -38,34 +50,70 @@
 		<Tab bind:group={tabSet} name="Day 3" value={2}><span>March 24</span></Tab>
 		<!-- Tab Panels --->
 		<svelte:fragment slot="panel">
-			<ol class="list space-y-2 w-4/5 mx-auto">
+			<ol class="list space-y-4 w-4/5 mx-auto">
 				{#if tabSet === 0}
 					{#each dayOneEvents as event}
 						<li class="h5">
 							<span>{event.time}</span>
-							<span class="flex-auto">{event.name}</span>
+							<span class="flex-auto"
+								><div>
+									<p>{event.name}</p>
+									{#if event.speaker}
+										<p class="font-semibold">{event.speaker}</p>
+									{/if}
+								</div></span
+							>
 						</li>
+						<hr class="!border-t-2 !border-solid" />
 					{/each}
 				{:else if tabSet === 1}
 					{#each dayTwoEvents as event}
 						<li class="h5">
 							<span>{event.time}</span>
-							<span class="flex-auto">{event.name}</span>
+							<span class="flex-auto"
+								><div>
+									<p>{event.name}</p>
+									{#if event.speaker}
+										<p class="font-semibold">{event.speaker}</p>
+									{/if}
+								</div></span
+							>
 						</li>
+						<hr class="!border-t-2 !border-solid" />
 					{/each}
 				{:else if tabSet === 2}
 					{#each dayThreeEvents as event}
 						<li class="h5">
 							<span>{event.time}</span>
-							<span class="flex-auto">{event.name}</span>
+							<span class="flex-auto"
+								><div>
+									<p>{event.name}</p>
+									{#if event.speaker}
+										<p class="font-semibold">{event.speaker}</p>
+									{/if}
+								</div></span
+							>
 						</li>
+						<hr class="!border-t-2 !border-solid" />
 					{/each}
 				{/if}
 			</ol>
 		</svelte:fragment>
 	</TabGroup>
 </div>
 
-<div class="w-1/2 m-auto my-24">
+<div class="w-1/2 m-auto my-12">
 	<hr class="!border-t-8 !border-double" />
 </div>
+
+<div class="w-5/6 md:w4-/6 lg:w-2/3 xl:w-1/2 mx-auto my-24">
+	<h3 class="h3 text-3xl text-center">Full Program</h3>
+	<svelte:component
+		this={PdfViewer}
+		url={pdfUrl}
+		downloadFileName="MCBIOS Program"
+		totalPage={45}
+		scale={1.2}
+		showButtons={['navigation', 'zoom', 'download']}
+	/>
+</div>

src/routes/program/data.ts

@@ -139,39 +139,41 @@ export const invitedSpeakers = [
 ];
 
 export const dayOneEvents = [
-	{ name: 'Welcome remarks', time: '1:00pm' },
-	{ name: 'Keynote speech (Anant)', time: '1:15 - 2:15' },
+	{ name: 'Welcome Remarks', time: '1:00pm' },
+	{ name: 'Keynote Speech', speaker: 'Anant Madabhushi', time: '1:15 - 2:15' },
 	{ name: 'Break', time: '2:15 - 2:30' },
 	{ name: 'Ashish Sharma Memorial Session', time: '2:30 - 3:45' },
 	{ name: 'Break', time: '3:45 - 4:00' },
-	{ name: 'YSEA sessions (students and postdocs)', time: '4:00 - 5:30' },
-	{ name: 'Poster session and reception', time: '5:30 - 7:30' },
-	{ name: 'MCBIOS business session (by invitation only)', time: '7:00' }
+	{ name: 'YSEA Sessions (Students and Postdocs)', time: '4:00 - 5:15' },
+	{ name: 'Poster Session and Reception', time: '5:15 - 7:00' },
+	{ name: 'MCBIOS Business Session (by invitation only)', time: '7:00' }
 ];
 
 export const dayTwoEvents = [
+	{ name: 'Hackathon', time: 'All Day' },
 	{ name: 'Breakfast', time: '7:30 - 8:30' },
-	{ name: 'Keynote speech (Greg Gibson)', time: '8:30 - 9:30' },
+	{ name: 'Keynote Speech', speaker: 'Greg Gibson', time: '8:30 - 9:30' },
 	{ name: 'Break', time: '9:30 - 9:45' },
-	{ name: 'Breakout sessions (1,2,3,4)	', time: '9:45 -	11:00' },
+	{ name: 'Tutorial: Introduction to Tidymodels', time: '9:45 - 12:30' },
+	{ name: 'Breakout Session I (101, 102, 103, 104)', time: '9:45 - 11:00' },
 	{ name: 'Break', time: '11:00 - 11:15' },
-	{ name: 'Breakout sessions (5,6,7,8)', time: '11:15 - 12:30' },
+	{ name: 'Breakout Session II (201, 202, 203, 204)', time: '11:15 - 12:30' },
 	{ name: 'Lunch', time: '12:30 - 1:30' },
-	{ name: 'Workshops (I, II, III)', time: '1:30 - 2:45' },
+	{ name: 'Breakout Session III (301, 302)', time: '1:30 - 2:45' },
 	{ name: 'Break', time: '2:45 - 3:00' },
-	{ name: 'Breakout sessions (9,10,11,12)', time: '3:00 -	4:15' },
+	{ name: 'Breakout Session IV (401, 402, 403, 404)', time: '3:00 - 4:15' },
 	{ name: 'Break', time: '4:15 - 4:30' },
-	{ name: 'Plenary speech (Nancy Cox)', time: '4:30 -	5:30' },
-	{ name: 'Election and banquet', time: '5:30 - 7:00' }
+	{ name: 'Plenary Speech', speaker: 'Nancy Cox', time: '4:30 - 5:30' },
+	{ name: 'Election and Banquet', time: '5:30 - 7:00' }
 ];
 
 export const dayThreeEvents = [
 	{ name: 'Breakfast', time: '7:30 - 8:30' },
-	{ name: 'Board meeting (by invitation only)', time: '7:30 - 8:30' },
-	{ name: 'Keynote speech (Heng Li)', time: '8:30 - 9:30' },
+	{ name: 'Board Meeting (by invitation only)', time: '7:30 - 8:30' },
+	{ name: 'Keynote Speech', speaker: 'Heng Li', time: '8:30 - 9:30' },
 	{ name: 'Break', time: '9:30 - 9:45' },
-	{ name: 'Breakout sessions (13,14,15,16)', time: '9:45 - 11:00' },
+	{ name: 'Breakout Session V (501, 502, 503, 504, 505)', time: '9:45 - 11:00' },
 	{ name: 'Break', time: '11:00 - 11:15' },
-	{ name: 'Breakout sessions (17,18,19, 20)', time: '11:15 - 12:30' },
-	{ name: 'Awards and closing', time: '12:30 - 1:00' }
+	{ name: 'Breakout Session VI (601, 602, 603, 604, 605)', time: '11:15 - 12:30' },
+	{ name: 'Awards and Closing', time: '12:30 - 1:00' }
 ];

src/routes/registration/+page.svelte

@@ -1,7 +1,7 @@
 <script>
 	import Abstract from '$lib/assets/background/Chang-Su_abstract.jpg';
 	import Hero from '../../components/Hero.svelte';
-	let registrationOpen = true;
+	const registrationOpen = false;
 </script>
 
 <svelte:head>
@@ -34,15 +34,15 @@
 					To register for the 2024 Conference, select your registration type from the list below.
 					Secure payment processing powered by Stripe Checkout.
 					<div class="flex justify-center">
-						<a
-							href="#"
-							class="btn btn-lg variant-ringed-primary my-5">Registration Closed</a
-						>
+						<a href="#" class="btn btn-lg variant-ringed-primary my-5">Registration Closed</a>
 					</div>
 				</section>
 			{:else}
 				<section class="p-4 text-xl">
-					Registration will open up soon, please keep an eye out!
+					Registration is currently closed, but if you are interested please register onsite!
+					<div class="flex justify-center">
+						<a href="#" class="btn btn-lg variant-ringed-primary my-5">Registration Closed</a>
+					</div>
 				</section>
 			{/if}
 		</div>