Fix schedule paddings, hide [first time speaker] (yes) and [add to calendar] (for now?)

Author: hasparus

src/app/conf/2025/_data.ts

@@ -19,3 +19,33 @@ for (const session of schedule) {
     speakerSessions.get(speaker.username)!.push(session)
   }
 }
+
+export const previousEditionSessions = new Map<
+  SpeakerUsername,
+  ScheduleSession[]
+>()
+
+{
+  const schedule2023 = require("../../../../scripts/sync-sched/schedule-2023.json")
+  const schedule2024 = require("../../../../scripts/sync-sched/schedule-2024.json")
+
+  for (const session of schedule2023) {
+    for (const speaker of session.speakers || []) {
+      if (!previousEditionSessions.has(speaker.username)) {
+        previousEditionSessions.set(speaker.username, [])
+      }
+
+      previousEditionSessions.get(speaker.username)!.push(session)
+    }
+  }
+
+  for (const session of schedule2024) {
+    for (const speaker of session.speakers || []) {
+      if (!previousEditionSessions.has(speaker.username)) {
+        previousEditionSessions.set(speaker.username, [])
+      }
+
+      previousEditionSessions.get(speaker.username)!.push(session)
+    }
+  }
+}

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

@@ -3,7 +3,6 @@ import clsx from "clsx"
 import { SchedSpeaker } from "@/app/conf/2023/types"
 import { Tag } from "@/app/conf/_design-system/tag"
 import ReloadIcon from "@/app/conf/_design-system/pixelarticons/reload.svg?svgr"
-import PlayIcon from "@/app/conf/_design-system/pixelarticons/play.svg?svgr"
 
 import { speakerSessions } from "../_data"
 import { eventsColors } from "../utils"
@@ -38,7 +37,8 @@ export function SpeakerTags({
           </>
         ) : (
           <>
-            <PlayIcon className="-mx-1 size-3" /> first time speaker
+            {/* todo: this should probably be a tag manually added in Sched because it suggests it's a debut talk  */}
+            {/* <PlayIcon className="-mx-1 size-3" /> first time speaker */}
           </>
         )}
       </Tag>

src/app/conf/2025/schedule/_components/schedule-list.tsx

@@ -160,7 +160,7 @@ export function ScheduleList({
             ([date, concurrentSessionsGroup], index) => (
               <div
                 key={date}
-                className="typography-body-sm bg-neu-200 pt-px dark:bg-neu-50"
+                className="typography-body-sm bg-neu-200 pb-px dark:bg-neu-50"
               >
                 <h3
                   className="bg-neu-50 py-4 dark:bg-neu-0 lg:mb-px"
@@ -171,8 +171,8 @@ export function ScheduleList({
                 {Object.entries(concurrentSessionsGroup).map(
                   ([sessionDate, sessions]) => (
                     <div key={`concurrent sessions on ${sessionDate}`}>
-                      <div className="mr-px flex flex-col max-lg:ml-px lg:mb-px lg:flex-row">
-                        <div className="relative border-neu-50 bg-neu-50 dark:bg-neu-0 max-lg:-mx-px max-lg:mt-px max-lg:border-x lg:mr-px">
+                      <div className="mr-px flex flex-col max-lg:ml-px lg:flex-row">
+                        <div className="relative border-neu-50 bg-neu-50 dark:bg-neu-0 max-lg:-mx-px max-lg:mb-px max-lg:mt-px max-lg:border-x lg:mr-px">
                           <span className="typography-body-sm mt-3 inline-block w-20 whitespace-nowrap pb-0.5 pl-4 lg:mr-6 lg:w-28 lg:pb-4 lg:pl-0">
                             {format(parseISO(sessionDate), "hh:mmaaaa 'PDT'")}
                           </span>

src/app/conf/2025/speakers/[id]/long-session-card.tsx

@@ -56,7 +56,7 @@ export function LongSessionCard({
   return (
     <div
       className={clsx(
-        "group relative border border-neu-200 bg-neu-0 dark:border-neu-100",
+        "group relative flex flex-col justify-between border border-neu-200 bg-neu-0 dark:border-neu-100",
         className,
       )}
       {...props}

src/app/conf/2025/speakers/[id]/page.tsx

@@ -1,16 +1,15 @@
 import { Metadata } from "next"
-import { notFound } from "next/navigation"
 import React from "react"
 
-import { speakers, speakerSessions } from "../../_data"
+import { previousEditionSessions, speakers, speakerSessions } from "../../_data"
 import { metadata as layoutMetadata } from "../../layout"
 
 import { HERO_MARQUEE_ITEMS } from "../../utils"
 import { BackLink } from "../../schedule/_components/back-link"
 import { NavbarPlaceholder } from "../../components/navbar"
 import { CtaCardSection } from "../../components/cta-card-section"
 import clsx from "clsx"
-import { SchedSpeaker } from "@/app/conf/2023/types"
+import { SchedSpeaker, ScheduleSession } from "@/app/conf/2023/types"
 import { Button } from "@/app/conf/_design-system/button"
 import { MarqueeRows } from "../../components/marquee-rows"
 import { GET_TICKETS_LINK } from "../../links"
@@ -55,6 +54,9 @@ export default function SpeakerPage({ params }: SpeakerProps) {
     throw new Error(`Speaker "${params.id}" not found for details page`)
   }
 
+  const currentYearSessions = speakerSessions.get(speaker.username) || []
+  const previousSessions = previousEditionSessions.get(speaker.username) || []
+
   return (
     <>
       <NavbarPlaceholder className="top-0 bg-neu-50 before:bg-neu-50/40 dark:bg-neu-0 dark:before:bg-blk/30" />
@@ -81,19 +83,31 @@ export default function SpeakerPage({ params }: SpeakerProps) {
                   {formatDescription(speaker.about)}
                 </p>
 
-                <Hr />
-
-                <h3 className="typography-h2 my-8 px-2 sm:px-3 lg:my-16">
-                  2025 Sessions
-                </h3>
-                <SpeakerSessions speaker={speaker} className="-mx-px -mb-px" />
-
-                <Hr />
-
-                <h3 className="typography-h2 my-8 px-2 sm:px-3 lg:my-16">
-                  Sessions from previous editions
-                </h3>
-                <SpeakerSessions speaker={speaker} className="-mx-px -mb-px" />
+                {currentYearSessions.length > 0 && (
+                  <>
+                    <Hr />
+                    <h3 className="typography-h2 my-8 px-2 sm:px-3 lg:my-16">
+                      2025 Sessions
+                    </h3>
+                    <SpeakerSessions
+                      sessions={currentYearSessions}
+                      className="-mx-px -mb-px"
+                    />
+                  </>
+                )}
+
+                {previousSessions.length > 0 && (
+                  <>
+                    <Hr />
+                    <h3 className="typography-h2 my-8 px-2 sm:px-3 lg:my-16">
+                      Sessions from previous editions
+                    </h3>
+                    <SpeakerSessions
+                      sessions={previousSessions}
+                      className="-mx-px -mb-px"
+                    />
+                  </>
+                )}
               </div>
             </div>
           </div>
@@ -157,7 +171,7 @@ function SpeakerHeader({
             alt=""
             width={464}
             height={464}
-            className="aspect-square size-[464px] w-full object-cover saturate-[0.1] transition-transform"
+            className="aspect-square size-[464px] object-cover saturate-[0.1] transition-transform max-lg:w-full"
           />
         </div>
       )}
@@ -166,10 +180,10 @@ function SpeakerHeader({
 }
 
 function SpeakerSessions({
-  speaker,
+  sessions,
   className,
 }: {
-  speaker: SchedSpeaker
+  sessions: ScheduleSession[]
   className?: string
 }) {
   return (
@@ -179,11 +193,9 @@ function SpeakerSessions({
         className,
       )}
     >
-      {speakerSessions
-        .get(speaker.username)
-        ?.map(session => (
-          <LongSessionCard key={session.id} session={session} year="2025" />
-        ))}
+      {sessions.map(session => (
+        <LongSessionCard key={session.id} session={session} year="2025" />
+      ))}
     </div>
   )
 }