Skip to content

Commit fe49aad

Browse files
hasparushasparus
authored
Update Events page a bit (#2180)
## Description Howdy, - I updated the UI of EventCard to match designs, - made the events scroll horizontally, as per design, - added a scroll-timeline + mask-image based fade to the scrollview, similar to what we're using on landings, but fancier implementation as we don't have as much negative space to render the fade gradient the simpler way. This is maybe a 10th time where I used scroll-timeline, it's pretty rad, my friends, good stuff. - added GraphQLConf 2025 to past events - and GraphQL Day at APIDays to upcoming events. cc @Urigo you promised me a review today on the call :) ### Differences from designs I made the spacing in the cards a little bit smaller because we don't have as much room here in the docs as in the Events landing page they were initially designed for. https://github.com/user-attachments/assets/5ca41ec3-3d12-4a6c-a86e-d8e2fddd4cd5
1 parent 47577a1 commit fe49aad

File tree

4 files changed

+267
-81
lines changed

4 files changed

+267
-81
lines changed

‎src/components/events/event-card.tsx‎

Lines changed: 141 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
import type { ReactNode } from "react"
2+
import { clsx } from "clsx"
3+
4+
import { CalendarIcon } from "@/app/conf/_design-system/pixelarticons/calendar-icon"
5+
import { PinIcon } from "@/app/conf/_design-system/pixelarticons/pin-icon"
6+
import { Tag } from "../../app/conf/_design-system/tag"
7+
8+
const dateFormatter = new Intl.DateTimeFormat("en", {
9+
day: "numeric",
10+
month: "short",
11+
year: "numeric",
12+
})
13+
14+
const isoLikeDatePattern =
15+
/^(\d{4}-\d{2}-\d{2}|\d{4}\/?\d{2}\/?\d{2}|\d{2}\/\d{2}\/\d{4})/
16+
17+
function normaliseDate(value: EventCardProps["date"]) {
18+
if (value instanceof Date && !Number.isNaN(value.getTime())) {
19+
return value
20+
}
21+
22+
if (typeof value === "string") {
23+
const parsed = new Date(value)
24+
if (!Number.isNaN(parsed.getTime())) {
25+
return parsed
26+
}
27+
}
28+
29+
return undefined
30+
}
31+
32+
function formatDateLabel(value: EventCardProps["date"]) {
33+
const parsed = normaliseDate(value)
34+
35+
if (parsed) {
36+
if (typeof value === "string" && !isoLikeDatePattern.test(value.trim())) {
37+
return value.trim() || undefined
38+
}
39+
40+
return dateFormatter.format(parsed)
41+
}
42+
43+
if (typeof value === "string") {
44+
const trimmed = value.trim()
45+
return trimmed.length > 0 ? trimmed : undefined
46+
}
47+
48+
return undefined
49+
}
50+
51+
export interface EventCardProps {
52+
href: string
53+
date?: Date | string | null
54+
city: ReactNode
55+
name: ReactNode
56+
meta?: ReactNode
57+
official?: boolean
58+
}
59+
60+
export function EventCard({
61+
href,
62+
date,
63+
city,
64+
name,
65+
meta,
66+
official,
67+
}: EventCardProps) {
68+
const dateLabel = formatDateLabel(date)
69+
const parsedDate = normaliseDate(date)
70+
71+
return (
72+
<a
73+
href={href}
74+
className={clsx(
75+
"gql-focus-visible group flex min-w-[352px] flex-col overflow-hidden border border-neu-200 bg-neu-0 text-left text-current no-underline ring-neu-400 hover:bg-sec-base/[.035] hover:ring-1 hover:ring-offset-1 hover:ring-offset-neu-0 dark:border-neu-100 dark:ring-neu-100",
76+
)}
77+
target="_blank"
78+
rel="noreferrer"
79+
>
80+
<div className="flex flex-1 flex-col">
81+
<div
82+
className={clsx(
83+
"flex items-center justify-between gap-2 px-4 text-neu-700 dark:text-neu-600",
84+
meta
85+
? "border-b border-neu-200 py-2.5 dark:border-neu-100"
86+
: "-mb-4 pt-3",
87+
)}
88+
>
89+
{meta ? (
90+
<span className="typography-body-md font-medium">{meta}</span>
91+
) : (
92+
<span className="sr-only">Official GraphQL Local</span>
93+
)}
94+
{official && (
95+
<Tag color="hsl(var(--color-pri-base))" className="*:gap-1">
96+
<span className="font-sans" aria-hidden>
97+
★
98+
</span>
99+
Official
100+
</Tag>
101+
)}
102+
</div>
103+
104+
<div className="typography-h3 flex min-h-[124px] flex-1 flex-col justify-center px-4 py-6 text-neu-900">
105+
{name}
106+
</div>
107+
108+
<div
109+
className={clsx(
110+
"flex flex-wrap border-t border-neu-200 text-neu-700 dark:border-neu-100",
111+
dateLabel && city
112+
? "grid grid-cols-2 divide-x divide-neu-200 dark:divide-neu-100"
113+
: "",
114+
)}
115+
>
116+
{dateLabel && (
117+
<div className="flex items-center gap-1.5 px-4 py-2.5 text-neu-700 dark:text-neu-600">
118+
<CalendarIcon className="size-5 shrink-0 translate-y-[-.5px] text-neu-600 dark:text-neu-500" />
119+
{parsedDate ? (
120+
<time
121+
dateTime={parsedDate.toISOString()}
122+
className="typography-body-sm"
123+
>
124+
{dateLabel}
125+
</time>
126+
) : (
127+
<span className="typography-body-md">{dateLabel}</span>
128+
)}
129+
</div>
130+
)}
131+
{city && (
132+
<div className="typography-body-sm flex items-center gap-1.5 whitespace-pre px-4 py-2.5 text-neu-700 dark:text-neu-600">
133+
<PinIcon className="size-5 shrink-0 translate-y-[-.5px] text-neu-600 dark:text-neu-500" />
134+
{city}
135+
</div>
136+
)}
137+
</div>
138+
</div>
139+
</a>
140+
)
141+
}

‎src/components/events.ts‎ renamed to ‎src/components/events/index.ts‎

Lines changed: 39 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,41 @@
1-
export const events = [
1+
export * from "./event-card"
2+
3+
interface Event {
4+
name: string
5+
slug: string
6+
location: string
7+
date: string
8+
coverImage?: string
9+
eventLink: string
10+
host: string
11+
hostLink?: string
12+
}
13+
14+
export const events: Event[] = [
15+
{
16+
name: "GraphQL Day at APIDays",
17+
slug: "graphql-day-at-apidays",
18+
location: "CNIT La Defense, Paris",
19+
date: "2025-12-11T08:00:00+00:00",
20+
eventLink: "https://graphql.day",
21+
host: "APIDays & GraphQL Community",
22+
hostLink: "https://apidays.co",
23+
},
24+
{
25+
name: "GraphQLConf 2025",
26+
slug: "graphql-conf-2025",
27+
location: "Amsterdam",
28+
date: "2025-09-08T07:00:00+00:00",
29+
eventLink: "/conf/2025",
30+
host: "GraphQL Foundation",
31+
},
232
{
333
name: "GraphQLConf 2024",
434
slug: "graphql-conf-2024",
535
location: "San Francisco",
636
date: "2024-09-09T07:00:00+00:00",
737
eventLink: "/conf/2024",
8-
host: "JW Marriott San Francisco Union Square",
38+
host: "GraphQL Foundation",
939
},
1040
{
1141
name: "GraphQL Bali 001",
@@ -30,7 +60,7 @@ export const events = [
3060
hostLink: "https://www.oursky.com/",
3161
},
3262
{
33-
name: "Paris December 7",
63+
name: "GraphQL Paris before APIDays",
3464
slug: "graphql-paris-pre-apidays",
3565
location: "Paris",
3666
date: "2023-12-07T18:00:00+02:00",
@@ -51,7 +81,7 @@ export const events = [
5181
hostLink: "https://developer.microsoft.com/en-us/reactor/",
5282
},
5383
{
54-
name: "Singapore November 6",
84+
name: "GraphQL Singapore Meetup #6",
5585
slug: "graphql-sigapore-6",
5686
location: "Singapore",
5787
date: "2023-11-15T18:00:00+08:00",
@@ -73,7 +103,7 @@ export const events = [
73103
hostLink: "https://www.pinterest.com/",
74104
},
75105
{
76-
name: "Bangkok November 12",
106+
name: "GraphQL BKK 12.0",
77107
slug: "graphql-bangkok-12",
78108
location: "Bangkok",
79109
date: "2023-11-02T18:00:00+07:00",
@@ -84,7 +114,7 @@ export const events = [
84114
hostLink: "https://sevenpeakssoftware.com/",
85115
},
86116
{
87-
name: "Seattle October",
117+
name: "GraphQL Seattle #1",
88118
slug: "graphql-seattle-01",
89119
location: "Seattle",
90120
date: "2023-10-26T18:00:00-07:00",
@@ -95,7 +125,7 @@ export const events = [
95125
hostLink: "https://www.microsoft.com/",
96126
},
97127
{
98-
name: "San Francisco September",
128+
name: "GraphQL SF #12",
99129
slug: "graphql-sf-12",
100130
location: "San Francisco",
101131
date: "2023-09-19T18:00:00-07:00",
@@ -106,7 +136,7 @@ export const events = [
106136
hostLink: "https://github.com/",
107137
},
108138
{
109-
name: "London September",
139+
name: "GraphQL London #1",
110140
slug: "graphql-london-01",
111141
location: "London",
112142
date: "2023-09-07T17:30:00+01:00",
@@ -117,7 +147,7 @@ export const events = [
117147
hostLink: "https://neo4j.com/",
118148
},
119149
{
120-
name: "Bangkok July 11",
150+
name: "GraphQL BKK 11.0",
121151
slug: "graphql-bangkok-11",
122152
location: "Bangkok",
123153
date: "2023-07-31T18:00:00+07:00",

0 commit comments

Comments
 (0)