feat: adds event speakers page

src/_dataSources/api.that.tech/events/queries.js

@@ -227,6 +227,37 @@ export const QUERY_EVENT_WITH_SPEAKERS_BY_SLUG = `
 		}
 	}
 `;
+export const QUERY_EVENT_SPEAKERS_BY_SLUG = `
+	${eventFieldsFragment}
+	query QUERY_EVENT_SPEAKERS_BY_SLUG ($slug: String) {
+		events {
+			event (findBy: {slug: $slug}) {
+				get {
+					speakers {
+						id
+						firstName
+						lastName
+						jobTitle
+						company
+						profileImage
+						earnedMeritBadges {
+							id
+							name
+							image
+							description
+						}
+						profileSlug
+						profileLinks {
+							isPublic
+							linkType
+							url					
+						}						
+					}
+				}
+			}
+		}
+	}
+`;
 
 export const QUERY_EVENT_BY_ID = `
 	${eventFieldsFragment}
@@ -582,6 +613,18 @@ export default (fetch) => {
 			});
 	}
 
+	function queryEventSpeakers(eventSlug) {
+		const variables = { eventSlug };
+
+		return client
+			.query({ query: QUERY_EVENT_SPEAKERS_BY_SLUG, variables })
+			.then(({ data, errors }) => {
+				if (errors) log({ errors, tag: 'QUERY_EVENT_SPEAKERS_BY_SLUG' });
+
+				return data?.events?.event?.get || null;
+			});
+	}
+
 	return {
 		queryEvents,
 		queryEventsByCommunity,
@@ -594,6 +637,7 @@ export default (fetch) => {
 		canAccessEvent,
 		queryThatConferenceEvent,
 		queryActiveEventsByCommunitiesForJobs,
-		queryActiveEventsForProducts
+		queryActiveEventsForProducts,
+		queryEventSpeakers
 	};
 };

src/_elements/layouts/Hero.svelte

@@ -13,6 +13,20 @@
 			<div class="py-40">
 				<slot />
 			</div>
+			<div class="flex justify-center pb-16 text-green-500">
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					class="h-6 w-6 animate-bounce"
+					fill="none"
+					viewBox="0 0 24 24"
+					stroke="currentColor">
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M19 14l-7 7m0 0l-7-7m7 7V3" />
+				</svg>
+			</div>
 		</div>
 	</div>
 </div>

src/routes/(that conferences)/_components/schedule/Hero.svelte

@@ -45,9 +45,9 @@
 			{/each}
 		</div>
 
-		<div class="p-10 pb-24 text-center text-green-500">
-			<p class="font-semibold tracking-wider">Times are represented in your browser's timezone.</p>
-			<p class="font-semibold tracking-wider">THAT Conference is in Central Time.</p>
+		<div class="pt-10 text-center text-2xl font-bold tracking-wider text-green-500">
+			<p>Times are represented in your browser's timezone.</p>
+			<p>THAT Conference is in Central Time.</p>
 		</div>
 	</div>
 </Hero>

src/routes/(that conferences)/_components/speakers/Hero.svelte

@@ -0,0 +1,29 @@
+<script>
+	export let event;
+
+	import dayjs from 'dayjs';
+	import advancedFormat from 'dayjs/plugin/advancedFormat';
+
+	import Hero from '$elements/layouts/Hero.svelte';
+
+	dayjs.extend(advancedFormat);
+
+	const venue = event.venues[0];
+</script>
+
+<Hero imagePath="/images/heros/keynote.jpeg">
+	<div class="flex flex-col justify-between">
+		<div class="flex max-w-3xl flex-col space-y-8">
+			<h2 class="text-2xl font-bold uppercase tracking-wider text-white antialiased">
+				<span class="text-green-500">{`${venue.city}, ${venue.state}`}</span> / {dayjs(
+					event.startDate
+				).format('MMMM Do')} - {dayjs(event.endDate).format('Do, YYYY')}
+			</h2>
+			<h1
+				class="text-4xl font-extrabold uppercase text-white sm:text-5xl md:text-6xl lg:text-5xl xl:text-6xl">
+				THAT Conference <br />
+				Speakers
+			</h1>
+		</div>
+	</div>
+</Hero>

src/routes/(that conferences)/tx/[year]/speakers/+page.js

@@ -0,0 +1,8 @@
+export async function load({ parent }) {
+	let { event } = await parent();
+
+	return {
+		speakers: event.speakers,
+		event
+	};
+}

src/routes/(that conferences)/tx/[year]/speakers/+page.svelte

@@ -0,0 +1,24 @@
+<script>
+	export let data;
+
+	import Hero from '../../../_components/speakers/Hero.svelte';
+	import MemberCard from '$components/members/MemberCard.svelte';
+
+	let { speakers, event } = data;
+</script>
+
+<main>
+	<header>
+		<Hero {event} />
+	</header>
+
+	<section class="mx-auto my-24 max-w-2xl lg:max-w-7xl">
+		<ul class="grid grid-cols-1 gap-6 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
+			{#each speakers as speaker (speaker.id)}
+				<li class="col-span-1">
+					<MemberCard {...speaker} />
+				</li>
+			{/each}
+		</ul>
+	</section>
+</main>

src/routes/(that conferences)/tx/[year]/tickets/_components/Hero.svelte

@@ -76,20 +76,6 @@
 				</a>
 			</div>
 		</div>
-
-		<div class="flex justify-center p-10 text-green-500">
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				class="h-6 w-6 animate-bounce"
-				fill="none"
-				viewBox="0 0 24 24"
-				stroke="currentColor">
-				<path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M19 14l-7 7m0 0l-7-7m7 7V3" />
-			</svg>
-		</div>
+		Hero.svelte
 	</div>
 </Hero>

src/routes/(that conferences)/wi/[year]/speakers/+page.js

@@ -0,0 +1,8 @@
+export async function load({ parent }) {
+	let { event } = await parent();
+
+	return {
+		speakers: event.speakers,
+		event
+	};
+}

src/routes/(that conferences)/wi/[year]/speakers/+page.svelte

@@ -0,0 +1,24 @@
+<script>
+	export let data;
+
+	import Hero from '../../../_components/speakers/Hero.svelte';
+	import MemberCard from '$components/members/MemberCard.svelte';
+
+	let { speakers, event } = data;
+</script>
+
+<main>
+	<header>
+		<Hero {event} />
+	</header>
+
+	<section class="mx-auto my-24 max-w-2xl lg:max-w-7xl">
+		<ul class="grid grid-cols-1 gap-6 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
+			{#each speakers as speaker (speaker.id)}
+				<li class="col-span-1">
+					<MemberCard {...speaker} />
+				</li>
+			{/each}
+		</ul>
+	</section>
+</main>

src/routes/(that conferences)/wi/[year]/tickets/_components/Hero.svelte

@@ -64,20 +64,5 @@
 				</a>
 			</div>
 		</div>
-
-		<div class="flex justify-center p-10 text-green-500">
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				class="h-6 w-6 animate-bounce"
-				fill="none"
-				viewBox="0 0 24 24"
-				stroke="currentColor">
-				<path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M19 14l-7 7m0 0l-7-7m7 7V3" />
-			</svg>
-		</div>
 	</div>
 </Hero>