Skip to content

Commit 9971b71

Browse files
hasparushasparus
committed
Tweak things
1 parent 44611c7 commit 9971b71

File tree

4 files changed

+117
-51
lines changed

4 files changed

+117
-51
lines changed

‎src/app/conf/2025/schedule/[id]/page.tsx

Lines changed: 24 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -68,8 +68,8 @@ export default function SessionPage({ params }: SessionProps) {
6868

6969
return (
7070
<>
71-
<NavbarPlaceholder className="top-0 bg-neu-50 before:bg-white/40 dark:bg-neu-0 dark:before:bg-blk/30" />
72-
<main className="gql-all-anchors-focusable gql-conf-navbar-strip text-neu-900 before:bg-white/40 before:dark:bg-blk/30">
71+
<NavbarPlaceholder className="top-0 bg-neu-50 before:bg-neu-50/40 dark:bg-neu-0 dark:before:bg-blk/30" />
72+
<main className="gql-all-anchors-focusable gql-conf-navbar-strip text-neu-900 before:bg-neu-50/40 before:dark:bg-blk/30">
7373
<div className="bg-neu-50 dark:bg-neu-0">
7474
<div className="gql-conf-container">
7575
<div className="gql-conf-section !py-0">
@@ -101,22 +101,29 @@ export default function SessionPage({ params }: SessionProps) {
101101
<h3 className="typography-h2 my-8 max-w-[408px] px-2 sm:px-3 lg:my-16">
102102
Session speakers
103103
</h3>
104-
<SessionSpeakers event={event} className="-mx-px -mb-px" />
105-
106-
<Hr />
104+
<SessionSpeakers
105+
event={event}
106+
className="-mx-px -mb-px last:xl:pb-24"
107+
/>
107108

108-
<h3 className="typography-h2 my-8 px-2 sm:px-3 lg:my-16">
109-
Session resources
110-
</h3>
111-
<section>
112-
{event.files?.map(({ path }) => (
113-
<iframe
114-
key={path}
115-
src={path}
116-
className="aspect-video size-full"
117-
/>
118-
))}
119-
</section>
109+
{!!event.files?.length && (
110+
<>
111+
<Hr />
112+
113+
<h3 className="typography-h2 my-8 px-2 sm:px-3 lg:my-16">
114+
Session resources
115+
</h3>
116+
<section>
117+
{event.files?.map(({ path }) => (
118+
<iframe
119+
key={path}
120+
src={path}
121+
className="aspect-video size-full"
122+
/>
123+
))}
124+
</section>
125+
</>
126+
)}
120127
</div>
121128
</div>
122129
</div>

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

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,12 @@ import { PinIcon } from "@/app/conf/_design-system/pixelarticons/pin-icon"
77
import ClockIcon from "@/app/conf/_design-system/pixelarticons/clock.svg?svgr"
88
import PlusIcon from "@/app/conf/_design-system/pixelarticons/plus.svg?svgr"
99
import PlayIcon from "@/app/conf/_design-system/pixelarticons/play.svg?svgr"
10+
import { findVideo } from "../../schedule/[id]/session-video"
11+
import { getEventTitle } from "../../utils"
1012

1113
export interface LongSessionCardProps
1214
extends React.HTMLAttributes<HTMLDivElement> {
1315
session: ScheduleSession
14-
variant?: "current" | "previous"
1516
eventColors?: Record<string, string>
1617
}
1718

@@ -32,7 +33,6 @@ function formatDate(dateString: string): string {
3233

3334
export function LongSessionCard({
3435
session,
35-
variant = "current",
3636
eventColors = {},
3737
className,
3838
...props
@@ -44,7 +44,14 @@ export function LongSessionCard({
4444
const formattedDate = formatDate(session.event_start)
4545
const formattedTime = formatTime(session.event_start)
4646

47-
if (variant === "previous") {
47+
const eventTitle = getEventTitle(
48+
session,
49+
session.speakers?.map(s => s.name) || [],
50+
)
51+
const video = findVideo(session, eventTitle)
52+
const hasVideo = video !== null
53+
54+
if (hasVideo) {
4855
return (
4956
<div
5057
className={clsx(
@@ -58,7 +65,8 @@ export function LongSessionCard({
5865
<Tag color={eventColors[session.event_type]}>{eventType}</Tag>
5966
<div className="flex items-center gap-2 border border-neu-400 bg-neu-100 px-2 py-1">
6067
<span className="typography-menu text-neu-900">
61-
graphql conf 2024
68+
{/* todo: find year */}
69+
GraphQLConf 2024
6270
</span>
6371
</div>
6472
</div>

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

Lines changed: 27 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import React from "react"
55
import { speakers, speakerSessions } from "../../_data"
66
import { metadata as layoutMetadata } from "../../layout"
77

8-
import { eventsColors, HERO_MARQUEE_ITEMS } from "../../utils"
8+
import { HERO_MARQUEE_ITEMS } from "../../utils"
99
import { BackLink } from "../../schedule/_components/back-link"
1010
import { NavbarPlaceholder } from "../../components/navbar"
1111
import { CtaCardSection } from "../../components/cta-card-section"
@@ -14,10 +14,10 @@ import { SchedSpeaker } from "@/app/conf/2023/types"
1414
import { Button } from "@/app/conf/_design-system/button"
1515
import { MarqueeRows } from "../../components/marquee-rows"
1616
import { GET_TICKETS_LINK } from "../../links"
17-
import { Anchor } from "@/app/conf/_design-system/anchor"
1817
import { SpeakerTags } from "../../components/speaker-tags"
1918
import { SpeakerLinks } from "../../components/speaker-links"
2019
import { LongSessionCard } from "./long-session-card"
20+
import Image from "next-image-export-optimizer"
2121

2222
type SpeakerProps = { params: { id: string } }
2323

@@ -51,8 +51,9 @@ export default function SpeakerPage({ params }: SpeakerProps) {
5151

5252
return (
5353
<>
54-
<NavbarPlaceholder className="top-0 bg-neu-50 before:bg-white/40 dark:bg-neu-0 dark:before:bg-blk/30" />
55-
<main className="gql-all-anchors-focusable gql-conf-navbar-strip text-neu-900 before:bg-white/40 before:dark:bg-blk/30">
54+
{/* gql-conf-navbar-strip border-t border-neu-200 bg-neu-0 py-8 text-neu-900 before:bg-white/40 dark:border-neu-100 before:dark:bg-blk/30 xl:py-16 */}
55+
<NavbarPlaceholder className="top-0 bg-neu-50 before:bg-neu-50/40 dark:bg-neu-0 dark:before:bg-blk/30" />
56+
<main className="gql-all-anchors-focusable gql-conf-navbar-strip text-neu-900 before:bg-neu-50/40 before:dark:bg-blk/30">
5657
<div className="bg-neu-50 dark:bg-neu-0">
5758
<div className="gql-conf-container">
5859
<div className="gql-conf-section !py-0">
@@ -115,33 +116,29 @@ function SpeakerHeader({
115116
}) {
116117
return (
117118
<header className={className}>
118-
<BackLink year="2025" kind="schedule" />
119-
<p
120-
className={clsx(
121-
"mt-8 text-neu-700",
122-
speakers.length >= 4 ? "typography-body-lg" : "typography-h3",
123-
)}
124-
>
125-
{speakers.map((s, i) => (
126-
<React.Fragment key={s.username}>
127-
<Anchor
128-
href={`/conf/${year}/speakers/${s.username}`}
129-
className="decoration-neu-500 hover:underline dark:decoration-neu-100"
130-
>
131-
{s.name}
132-
</Anchor>
133-
{i !== speakers.length - 1 && <span>, </span>}
134-
</React.Fragment>
135-
))}
136-
</p>
137-
<p className="typography-h3">Meet the speaker</p>
138-
<h1 className="typography-h1 mt-2">{speaker.name}</h1>
139-
<div className="flex flex-wrap items-center justify-between gap-2 lg:gap-x-4 xl:gap-x-8">
140-
{[speaker.position, speaker.company === "-" ? "" : speaker.company]
141-
.filter(Boolean)
142-
.join(", ")}
143-
<SpeakerTags speaker={speaker} />
119+
<div>
120+
<BackLink year="2025" kind="schedule" />
121+
<p className="typography-h3 mt-4 lg:mt-20">Meet the speaker</p>
122+
<h1 className="typography-h1 mt-2">{speaker.name}</h1>
123+
<div className="flex flex-wrap items-center justify-between gap-2 lg:gap-x-4 xl:gap-x-8">
124+
{[speaker.position, speaker.company === "-" ? "" : speaker.company]
125+
.filter(Boolean)
126+
.join(", ")}
127+
<SpeakerTags speaker={speaker} />
128+
</div>
144129
</div>
130+
{speaker.avatar && (
131+
<div className="relative overflow-hidden">
132+
<div className="absolute inset-0 z-[1] bg-sec-lighter opacity-90 mix-blend-multiply" />
133+
<Image
134+
src={speaker.avatar}
135+
alt=""
136+
width={464}
137+
height={464}
138+
className="aspect-square size-[464px] w-full object-cover saturate-[0.1] transition-transform"
139+
/>
140+
</div>
141+
)}
145142
</header>
146143
)
147144
}

‎src/app/conf/_design-system/session-card.example.tsx

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import { SessionCard } from "./session-card"
2+
import { eventsColors } from "../2025/utils"
3+
import { ScheduleSession } from "../2023/types"
4+
5+
// Example session data
6+
const sampleSession: ScheduleSession = {
7+
id: "example-session",
8+
audience: "developers",
9+
description: "Learn how to build amazing GraphQL applications with Isograph",
10+
event_end: "2024-09-08T11:00:00Z",
11+
event_start: "2024-09-08T10:30:00Z",
12+
event_subtype: "Technical",
13+
event_type: "Session Presentations",
14+
name: "Performing Impossible Feats with Isograph",
15+
venue: "Metropolitan A",
16+
speakers: [
17+
{
18+
username: "robert-balicki",
19+
name: "Robert Balicki",
20+
about: "Senior Engineer at Meta",
21+
company: "Meta",
22+
position: "Senior Engineer",
23+
role: "speaker",
24+
socialurls: [],
25+
year: "2024",
26+
},
27+
],
28+
}
29+
30+
export function SessionCardExample() {
31+
return (
32+
<div className="flex flex-col gap-8 p-8">
33+
<div>
34+
<h2 className="typography-h2 mb-4">Current Session Card</h2>
35+
<SessionCard
36+
session={sampleSession}
37+
variant="current"
38+
eventColors={eventsColors}
39+
className="max-w-md"
40+
/>
41+
</div>
42+
43+
<div>
44+
<h2 className="typography-h2 mb-4">Previous Session Card</h2>
45+
<SessionCard
46+
session={sampleSession}
47+
variant="previous"
48+
eventColors={eventsColors}
49+
className="max-w-md"
50+
/>
51+
</div>
52+
</div>
53+
)
54+
}

0 commit comments

Comments
 (0)