feat: add speakers to schedule (#117)

## Overview

Cross-references with the _sessions_ page too.

💖

src/components/Arrow.astro

@@ -1,8 +1,21 @@
+---
+interface Props {
+	class?: string;
+	rotate?: number;
+}
+
+const { class: className, rotate, ...rest } = Astro.props;
+---
+
 <svg
-	class="arrow"
+	class:list={["arrow", className]}
 	fill="none"
 	viewBox="0 0 20 16"
 	xmlns="http://www.w3.org/2000/svg"
+	style={{
+		transform: `rotate(${rotate ?? 180}deg)`,
+	}}
+	{...rest}
 >
 	<path
 		d="M19.1924 8.70711C19.5829 8.31658 19.5829 7.68343 19.1924 7.29289L12.8284 0.928933C12.4379 0.538412 11.8047 1.24551 11.4142 1.63604C11.0237 2.02656 10.3166 2.65973 10.7071 3.05025L15.6569 8L10.7071 12.9497C10.3166 13.3403 11.0237 13.9734 11.4142 14.364C11.8047 14.7545 12.4379 15.4616 12.8284 15.0711L19.1924 8.70711ZM0.100505 9.41421H17.0711V6.58579H0.100505V8V9.41421Z"

src/components/Heading.astro

@@ -2,7 +2,7 @@
 interface Props {
 	class?: string;
 	id?: string;
-	level: "h1" | "h2" | "h3";
+	level: "h1" | "h2" | "h3" | "h4";
 	link?: boolean | string;
 }
 

src/components/ScheduledActivity.astro

@@ -1,48 +1,120 @@
 ---
 import { markdown } from "@astropub/md";
 
-import { ActivityData } from "~/data/schedule";
+import { ActivityLocation } from "~/data/schedule";
 
 import Heading from "./Heading.astro";
+import Arrow from "./Arrow.astro";
 
 interface Props {
-	activity: ActivityData;
+	at?: string;
+	description?: string[];
+	href?: string;
+	id: string;
+	location?: ActivityLocation;
 	class?: string;
+	level?: "h3" | "h4";
+	title: string;
 }
 
-const { class: className, activity, ...rest } = Astro.props;
+const {
+	at,
+	class: className,
+	description = [],
+	id,
+	href,
+	location,
+	level = "h3",
+	title,
+	...rest
+} = Astro.props;
 
 const descriptionLines = await Promise.all(
-	activity.description.map(async (p) => await markdown(p)),
+	description.map(async (p) => await markdown(p)),
 );
 ---
 
-<div class:list={["scheduled-activity", className]} {...rest}>
-	<Heading level="h3" class="activity-title">{activity.title}</Heading>
+<div
+	class:list={[
+		"scheduled-activity",
+		level === "h3" ? "scheduled-activity-h3" : "scheduled-activity-h4",
+		className,
+	]}
+	id={id}
+	{...rest}
+>
+	{
+		href ? (
+			<a class="activity-title" href={href}>
+				<Heading level={level} class="activity-title-inner">
+					{title}
+				</Heading>
+				<Arrow class="activity-title-after" rotate={315} />
+			</a>
+		) : (
+			<Heading level={level} class="activity-title">
+				{title}
+			</Heading>
+		)
+	}
 	<div class="activity-locators">
-		<div class="activity-time">{activity.time ?? "Time TBA"}</div>
+		<div class="activity-time">{at ?? "Time TBA"}</div>
 		{
-			activity.location ? (
-				<a class="activity-location" href={activity.location.href}>
-					{activity.location.text}
+			location && (
+				<a class="activity-location" href={location.href}>
+					{location.text}
 				</a>
-			) : (
-				<div class="activity-location">Location TBA</div>
 			)
 		}
 	</div>
-	<div class="activity-description">{descriptionLines}</div>
+	{
+		descriptionLines && (
+			<div class="activity-description">{descriptionLines}</div>
+		)
+	}
 </div>
 
 <style>
 	.scheduled-activity {
 		font-family: var(--fontFamilyBody);
-		margin: 0 var(--widthBodyPadding) 3rem;
+		margin: 0 var(--widthBodyPadding);
 		max-width: var(--widthBodyLean);
+		scroll-margin-top: 2rem;
+	}
+
+	.scheduled-activity-h3 {
+		--fontSizeTitle: var(--fontSizeH3);
+		margin-top: 3rem;
+	}
+
+	.scheduled-activity-h4 {
+		--fontSizeTitle: var(--fontSizeH4);
+		margin-top: 1.5rem;
 	}
 
 	.activity-title {
-		font-size: var(--fontSizeH3);
+		font-size: var(--fontSizeTitle);
+		text-decoration: none;
+	}
+
+	a.activity-title {
+		margin-top: -0.35rem;
+	}
+
+	a.activity-title .activity-title-after {
+		content: " 🔗";
+		display: inline;
+		opacity: 0;
+		transition: var(--transitionMedium) opacity;
+	}
+
+	a.activity-title:focus-within .activity-title-after,
+	a.activity-title:hover .activity-title-after {
+		opacity: 1;
+	}
+
+	.activity-title-inner {
+		display: inline;
 	}
 
 	.activity-locators {
@@ -53,7 +125,7 @@ const descriptionLines = await Promise.all(
 	}
 
 	.activity-time {
-		font-size: var(--fontSizeH3);
+		font-size: var(--fontSizeTitle);
 		font-family: var(--fontFamilyHeading);
 	}
 
@@ -70,11 +142,16 @@ const descriptionLines = await Promise.all(
 		width: 100%;
 	}
 
+	.activity-within {
+		list-style: none;
+		padding-left: 0;
+	}
+
 	@media (min-width: 490px) {
 		.scheduled-activity {
 			display: grid;
 			grid-template-columns: clamp(5rem, 20vw, 10rem) auto;
-			grid-template-rows: auto auto;
+			grid-template-rows: auto auto auto;
 			gap: 0.75rem 1rem;
 		}
 
@@ -93,5 +170,9 @@ const descriptionLines = await Promise.all(
 		.activity-description {
 			grid-area: 2 / 2 / 3 / 3;
 		}
+
+		.activity-within {
+			grid-area: 3 / 1 / 4 / 3;
+		}
 	}
 </style>

src/components/ScheduledActivityBetween.astro

@@ -0,0 +1,13 @@
+---
+import { ActivityBetweenData } from "~/data/schedule";
+
+import ScheduledActivity from "./ScheduledActivity.astro";
+
+interface Props {
+	activity: ActivityBetweenData;
+}
+
+const { activity } = Astro.props;
+---
+
+<ScheduledActivity at={activity.at} level="h4" title={activity.title} />

src/components/ScheduledActivitySession.astro

@@ -0,0 +1,22 @@
+---
+import { ActivitySessionData } from "~/data/schedule";
+
+import ScheduledActivity from "./ScheduledActivity.astro";
+import { talksBySlug } from "~/data/notion-data";
+
+interface Props {
+	activity: ActivitySessionData;
+}
+
+const { activity } = Astro.props;
+const session = talksBySlug[activity.session];
+---
+
+<ScheduledActivity
+	at={activity.at}
+	description={[session.people.map((speaker) => speaker.name).join(" and ")]}
+	href={`/talks#${session.slug}`}
+	id={session.slug}
+	level="h4"
+	title={session.title}
+/>

src/components/Session.astro

@@ -6,6 +6,7 @@ import SessionDiscord from "./SessionDiscord.astro";
 import SpeakerSmall from "./SpeakerSmall.astro";
 import SubtleCard from "./SubtleCard.astro";
 import SessionTags from "./SessionTags.astro";
+import { days } from "~/data/schedule";
 
 interface Props {
 	class?: string;
@@ -17,6 +18,17 @@ const {
 	talk: { title, people, tags, description, slug },
 	...rest
 } = Astro.props;
+
+const schedule = days
+	.flatMap((day) =>
+		day.activities.flatMap((activity) =>
+			activity.within
+				?.filter((inner) => inner.type === "session" && inner.session === slug)
+				.map((activity) => ({ activity, day })),
+		),
+	)
+	.filter((x) => !!x?.activity)
+	.at(0)!;
 ---
 
 <li class:list={["talk", className]} id={slug} {...rest}>
@@ -41,7 +53,13 @@ const {
 					))
 				}
 			</ul>
-			<SessionDiscord discord={slug} />
+			<div class="talk-metadata">
+				<SessionDiscord discord={slug} />
+				<a class="talk-time" href={`/schedule#${slug}`}>
+					{schedule.activity.at}
+					{schedule.day.title}
+				</a>
+			</div>
 		</div>
 		<div class="talk-details-links"></div>
 	</SubtleCard>
@@ -124,6 +142,17 @@ const {
 		padding-left: 0;
 	}
 
+	.talk-metadata {
+		color: var(--colorBlueDarkDull);
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+	}
+
+	.talk-time {
+		font-size: var(--fontSizeBody);
+	}
+
 	p {
 		margin: 1rem !important;
 	}
@@ -139,5 +168,11 @@ const {
 		.talk {
 			max-width: var(--widthBodyFull);
 		}
+
+		.talk-metadata {
+			align-items: flex-end;
+			padding: 0.25rem;
+			text-align: right;
+		}
 	}
 </style>

src/components/SessionDiscord.astro

@@ -21,20 +21,24 @@ const { discord } = Astro.props;
 
 <style>
 	.discord {
-		color: var(--colorBlueDarkDull);
 		border-radius: 0.25rem;
 		display: inline-flex;
-		align-items: center;
-		font-size: 1rem;
-		padding: 0.25rem;
 		font-family: monospace;
-		white-space: nowrap;
+		font-size: 1rem;
+		padding: 0.25rem 0;
 		text-decoration: none;
+		white-space: nowrap;
 	}
 
 	.image {
 		margin-right: 0.5rem;
 		opacity: 0.5;
 		user-select: none;
 	}
+
+	@media (min-width: 1017px) {
+		.discord {
+			/* padding-right: 0.25rem; */
+		}
+	}
 </style>