Grab speaker tags

Author: hasparus

src/app/conf/2025/_data.ts

@@ -82,7 +82,6 @@ async function getSchedule(): Promise<ScheduleSession[]> {
     }
 
     // TODO: Preserve formatting??
-
     return {
       ...session,
       description: description && stripHtml(description).result,
@@ -96,3 +95,38 @@ export const speakers = await getSpeakers()
 
 // TODO: Collect tags from schedule for speakers.
 export const schedule = await getSchedule()
+
+type SpeakerUsername = SchedSpeaker["username"]
+
+export const speakerSessions = new Map<SpeakerUsername, ScheduleSession[]>()
+
+for (const session of schedule) {
+  for (const speaker of session.speakers || []) {
+    if (!speakerSessions.has(speaker.username)) {
+      speakerSessions.set(speaker.username, [])
+    }
+
+    speakerSessions.get(speaker.username)!.push(session)
+  }
+}
+
+export const returningSpeakers = new Set<SpeakerUsername>()
+
+import { speakers as speakers2024 } from "../2024/_data"
+import { speakers as speakers2023 } from "../2023/_data"
+
+for (const { username } of speakers2024) {
+  if (speakerSessions.has(username)) {
+    returningSpeakers.add(username)
+  }
+}
+
+for (const { username } of speakers2023) {
+  if (speakerSessions.has(username)) {
+    returningSpeakers.add(username)
+  }
+}
+
+console.log({
+  returningSpeakers: returningSpeakers.size,
+})

src/app/conf/2025/components/speaker-card.tsx

@@ -10,6 +10,7 @@ import { StripesDecoration } from "../../_design-system/stripes-decoration"
 import { SocialIcon, SocialIconType } from "../../_design-system/social-icon"
 
 import styles from "./speaker-card.module.css"
+import { returningSpeakers, speakerSessions } from "../_data"
 
 export interface SpeakerCardProps extends React.HTMLAttributes<HTMLDivElement> {
   tags?: string[]
@@ -42,7 +43,7 @@ export function SpeakerCard({
           <SpeakerLinks speaker={speaker} className="absolute right-6 top-6" />
         )}
 
-        <div className="relative aspect-square shrink-0 overflow-hidden @[420px]:basis-[176px]">
+        <div className="relative aspect-square shrink-0 overflow-hidden @[420px]:size-[176px]">
           <div className="absolute inset-0 z-[1] bg-sec-light mix-blend-multiply" />
           {speaker.avatar ? (
             <Image
@@ -67,14 +68,15 @@ export function SpeakerCard({
         <div className="flex flex-1 flex-col gap-2">
           <div className="flex flex-col gap-1">
             <h3 className="typography-body-lg">{speaker.name}</h3>
-            <p className="text-neu-800 typography-body-sm">
+            <p className="line-clamp-1 text-neu-800 typography-body-sm">
               {[
                 speaker.position,
                 speaker.company === "-" ? "" : speaker.company,
               ]
                 .filter(Boolean)
                 .join(", ")}
             </p>
+            <SpeakerTags speaker={speaker} className="my-3" />
           </div>
           {speaker.about && (
             <p className="line-clamp-3 text-neu-800 typography-body-sm">
@@ -150,3 +152,26 @@ function Stripes() {
     </div>
   )
 }
+
+function SpeakerTags({
+  speaker,
+  className,
+}: {
+  speaker: SchedSpeaker
+  className?: string
+}) {
+  const eventType = speakerSessions.get(speaker.username)?.[0]?.event_type
+
+  return (
+    <div className={clsx("flex basis-0 flex-wrap gap-2", className)}>
+      {eventType && (
+        <Tag color={eventsColors[eventType] || "hsl(var(--color-sec-base))"}>
+          {eventType}
+        </Tag>
+      )}
+      {returningSpeakers.has(speaker.name) && (
+        <Tag color="hsl(var(--color-neu-500))">Returning speaker</Tag>
+      )}
+    </div>
+  )
+}

src/app/conf/2025/schedule/_components/back-link.tsx

@@ -1,5 +1,6 @@
 import NextLink from "next/link"
-import ArrowDownIcon from "../../pixelarticons/arrow-down.svg?svgr"
+
+import ArrowDownIcon from "@/app/conf/_design-system/pixelarticons/arrow-down.svg?svgr"
 
 export function BackLink({
   year,
@@ -11,9 +12,9 @@ export function BackLink({
   return (
     <NextLink
       href={`/conf/${year}/${kind}`}
-      className="group typography-menu -m-2 inline-flex cursor-pointer items-center gap-2 p-2 text-sec-darker transition-all [text-box:trim-both_cap_alphabetic] hover:underline hover:underline-offset-4 dark:text-neu-700"
+      className="group -m-2 inline-flex cursor-pointer items-center gap-2 p-2 text-sec-darker transition-all typography-menu [text-box:trim-both_cap_alphabetic] hover:underline hover:underline-offset-4 dark:text-neu-700"
     >
-      <div className="[--arrow-left-x:-1px] group-hover:animate-arrow-left group-focus:animate-arrow-left">
+      <div className="group-hover:animate-arrow-left group-focus:animate-arrow-left [--arrow-left-x:-1px]">
         <ArrowDownIcon className="inline-block size-4 translate-y-[-.5px] rotate-90" />
       </div>
       Back to {capitalize(kind)}