Skip to content

Commit 280ef2f

Browse files
hasparushasparus
committed
Speaker opengraph image UI
1 parent 07ec25c commit 280ef2f

File tree

2 files changed

+87
-48
lines changed

2 files changed

+87
-48
lines changed

‎src/app/(development)/workroom/page.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@ export default function WorkroomPage() {
99
<SpeakerOpengraphImage
1010
speaker={{
1111
name: "Denis Badurina",
12-
username: "denisbadurina",
13-
avatar: "https://github.com/denisbadurina.png",
12+
username: "enisdenjo",
13+
avatar: "https://github.com/enisdenjo.png",
1414
company: "The Guild",
1515
position: "Software Architect",
1616
about:

‎src/app/conf/2025/components/speaker-opengraph-image.tsx‎

Lines changed: 85 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ import { PinIcon } from "../../_design-system/pixelarticons/pin-icon"
44
import { formatSpeakerPosition } from "./format-speaker-position"
55
import { GraphQLLogo } from "./graphql-conf-logo-link"
66

7+
const RIGHT_COLUMN_WIDTH_PX = 476
8+
79
interface SpeakerOpengraphImageProps extends React.HTMLAttributes<HTMLElement> {
810
speaker: SchedSpeaker
911
date: string
@@ -18,51 +20,18 @@ export default function SpeakerOpengraphImage({
1820
}: SpeakerOpengraphImageProps) {
1921
return (
2022
<article
21-
className="flex h-[630px] w-[1200px] flex-col border border-neu-300 bg-neu-50"
23+
className="flex h-[630px] w-[1200px] flex-col overflow-hidden border border-neu-300 bg-neu-50"
2224
{...rest}
2325
>
24-
<header className="flex h-36 items-center border-b border-neu-300">
25-
<div className="flex flex-1 items-center gap-6 border-r border-neu-300 p-10 pr-16">
26-
<div className="flex items-center gap-4">
27-
<div className="font-mono font-normal uppercase leading-none text-neu-900">
28-
<div className="flex h-[74px] items-center gap-4 text-[40px]/none uppercase">
29-
<div className="text-pri-base">
30-
<GraphQLLogo className="h-12" />
31-
</div>
32-
<span>/</span>
33-
<div>
34-
GraphQLConf{" "}
35-
<span className="text-pri-base">{speaker.year}</span>
36-
</div>
37-
</div>
38-
</div>
39-
</div>
40-
</div>
41-
42-
<div className="flex h-full w-[400px] flex-col justify-center">
43-
<div className="flex items-center gap-6 border-b border-neu-300 px-6 py-[26px]">
44-
<div className="flex items-center gap-2">
45-
<CalendarIcon width="20" height="20" className="text-pri-base" />
46-
<span className="font-mono text-xl font-normal uppercase leading-tight text-neu-900">
47-
{date}, {speaker.year}
48-
</span>
49-
</div>
50-
</div>
51-
52-
<div className="flex h-[76px] items-center gap-6 px-6 py-[26px]">
53-
<div className="flex items-center gap-2">
54-
<PinIcon width="20" height="20" className="text-pri-base" />
55-
<span className="font-mono text-xl font-normal uppercase leading-tight text-neu-900">
56-
{location}
57-
</span>
58-
</div>
59-
</div>
60-
</div>
61-
</header>
26+
<ConferenceOpengraphImageHeader
27+
year={speaker.year}
28+
date={date}
29+
location={location}
30+
/>
6231

63-
<div className="flex flex-1 justify-between gap-12">
32+
<div className="flex">
6433
<div className="flex flex-1 flex-col justify-center">
65-
<div className="flex flex-1 flex-col justify-center gap-10 p-16 pl-10">
34+
<div className="flex flex-1 flex-col justify-center gap-10 pl-10 pr-16">
6635
<div className="flex w-[454px] flex-col gap-10">
6736
<h3 className="m-0 font-sans text-[88px] font-normal leading-tight text-neu-900">
6837
{speaker.name}
@@ -83,12 +52,82 @@ export default function SpeakerOpengraphImage({
8352
</footer>
8453
</div>
8554

86-
<img
87-
src="https://placedog.net/400/400"
88-
alt={speaker.name}
89-
className="size-full object-cover"
90-
/>
55+
{speaker.avatar && (
56+
<div className="relative flex overflow-hidden">
57+
<div className="absolute inset-0 z-[1] bg-sec-lighter mix-blend-multiply" />
58+
<img
59+
src={speaker.avatar}
60+
alt=""
61+
className="object-cover"
62+
width={RIGHT_COLUMN_WIDTH_PX}
63+
height={RIGHT_COLUMN_WIDTH_PX}
64+
/>
65+
</div>
66+
)}
9167
</div>
9268
</article>
9369
)
9470
}
71+
72+
export function ConferenceOpengraphImageHeader({
73+
year,
74+
date,
75+
location,
76+
}: {
77+
year: string
78+
date: string
79+
location: string
80+
}) {
81+
return (
82+
<header className="flex items-center border-b border-neu-300">
83+
<div className="flex flex-1 items-center gap-6 border-r border-neu-300 p-10 pr-16">
84+
<div className="flex items-center gap-4">
85+
<div className="font-mono font-normal uppercase leading-none text-neu-900">
86+
<div className="flex h-[74px] items-center gap-4 text-[40px]/none uppercase">
87+
<div className="text-pri-base">
88+
<GraphQLLogo className="h-12" />
89+
</div>
90+
<span>/</span>
91+
<div>
92+
GraphQLConf <span className="text-pri-base">{year}</span>
93+
</div>
94+
</div>
95+
</div>
96+
</div>
97+
</div>
98+
99+
<div
100+
className="flex h-full shrink-0 flex-col justify-center"
101+
style={{
102+
width: RIGHT_COLUMN_WIDTH_PX,
103+
}}
104+
>
105+
<div className="flex items-center gap-6 border-b border-neu-300 px-6 py-[26px]">
106+
<div className="flex items-center gap-2">
107+
<CalendarIcon
108+
width="24"
109+
height="24"
110+
className="-translate-y-px text-pri-base"
111+
/>
112+
<span className="font-mono text-xl font-normal uppercase leading-[1.2] text-neu-900">
113+
{date}, {year}
114+
</span>
115+
</div>
116+
</div>
117+
118+
<div className="flex items-center gap-6 px-6 py-[26px]">
119+
<div className="flex items-center gap-2">
120+
<PinIcon
121+
width="24"
122+
height="24"
123+
className="translate-y-[-.5px] text-pri-base"
124+
/>
125+
<span className="font-mono text-xl font-normal uppercase leading-[1.2] text-neu-900">
126+
{location}
127+
</span>
128+
</div>
129+
</div>
130+
</div>
131+
</header>
132+
)
133+
}

0 commit comments

Comments
 (0)