Skip to content

Commit 8896a67

Browse files
hasparushasparus
committed
Fix Speaker Opengraph Image so it also works in build
1 parent be74765 commit 8896a67

File tree

1 file changed

+227
-32
lines changed

1 file changed

+227
-32
lines changed

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

Lines changed: 227 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,22 @@ 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+
export const colors = {
8+
neu0: "hsl(0 0% 100%)",
9+
neu50: "hsl(75 57% 97%)",
10+
neu100: "hsl(75 15% 95%)",
11+
neu200: "hsl(77 14% 90%)",
12+
neu300: "hsl(76 14% 85%)",
13+
neu400: "hsl(77 14% 80%)",
14+
neu500: "hsl(74 14% 70%)",
15+
neu600: "hsl(76 15% 60%)",
16+
neu700: "hsl(76 15% 40%)",
17+
neu800: "hsl(77 14% 20%)",
18+
neu900: "hsl(75 15% 5%)",
19+
secLighter: "hsl(79 80% 90%)",
20+
priBase: "hsl(319 100% 44.1%)",
21+
}
22+
723
const RIGHT_COLUMN_WIDTH_PX = 476
824

925
interface SpeakerOpengraphImageProps extends React.HTMLAttributes<HTMLElement> {
@@ -22,7 +38,17 @@ export default function SpeakerOpengraphImage({
2238
}: SpeakerOpengraphImageProps) {
2339
return (
2440
<article
25-
className="flex h-[630px] w-[1200px] flex-col overflow-hidden border-2 border-neu-300 bg-neu-100"
41+
style={{
42+
display: "flex",
43+
height: "630px",
44+
width: "1200px",
45+
flexDirection: "column",
46+
overflow: "hidden",
47+
borderWidth: "2px",
48+
backgroundColor: colors.neu100,
49+
borderColor: colors.neu600,
50+
fontFamily: "'Host Grotesk'",
51+
}}
2652
{...rest}
2753
>
2854
<ConferenceOpengraphImageHeader
@@ -31,36 +57,117 @@ export default function SpeakerOpengraphImage({
3157
location={location}
3258
/>
3359

34-
<div className="flex">
35-
<div className="flex flex-1 flex-col justify-center">
36-
<div className="flex flex-1 flex-col justify-center gap-10 pl-10 pr-16">
37-
<div className="flex w-[454px] flex-col gap-10">
38-
<h3 className="m-0 font-sans text-[88px] font-normal leading-tight text-neu-900">
60+
<div style={{ display: "flex" }}>
61+
<div
62+
style={{
63+
display: "flex",
64+
flex: 1,
65+
flexDirection: "column",
66+
justifyContent: "center",
67+
}}
68+
>
69+
<div
70+
style={{
71+
display: "flex",
72+
flex: 1,
73+
flexDirection: "column",
74+
justifyContent: "center",
75+
gap: "2.5rem",
76+
padding: "2.5rem",
77+
paddingRight: "4rem",
78+
}}
79+
>
80+
<div
81+
style={{
82+
display: "flex",
83+
flexDirection: "column",
84+
gap: "2.5rem",
85+
}}
86+
>
87+
<h3
88+
style={{
89+
margin: 0,
90+
fontSize: "88px",
91+
fontWeight: "normal",
92+
lineHeight: "1.25",
93+
color: colors.neu900,
94+
}}
95+
>
3996
{speaker.name}
4097
</h3>
4198

42-
<div className="flex items-center gap-8">
43-
<span className="font-sans text-[32px] font-normal leading-tight text-neu-700">
99+
<div
100+
style={{
101+
display: "flex",
102+
alignItems: "center",
103+
gap: "2rem",
104+
}}
105+
>
106+
<span
107+
style={{
108+
fontFamily: "'Host Grotesk'",
109+
fontSize: "32px",
110+
fontWeight: "normal",
111+
lineHeight: "1.25",
112+
color: colors.neu700,
113+
}}
114+
>
44115
{formatSpeakerPosition(speaker)}
45116
</span>
46117
</div>
47118
</div>
48119
</div>
49120

50-
<footer className="flex items-center border-t-2 border-neu-300 px-16 py-8 pl-10">
51-
<span className="font-mono text-2xl font-normal uppercase leading-none text-neu-900">
121+
<footer
122+
style={{
123+
display: "flex",
124+
alignItems: "center",
125+
borderTop: `2px solid ${colors.neu600}`,
126+
paddingLeft: "2.5rem",
127+
paddingRight: "4rem",
128+
paddingTop: "2rem",
129+
paddingBottom: "2rem",
130+
}}
131+
>
132+
<span
133+
style={{
134+
fontFamily: "monospace",
135+
fontSize: "1.5rem",
136+
fontWeight: "normal",
137+
textTransform: "uppercase",
138+
lineHeight: "1",
139+
color: colors.neu900,
140+
}}
141+
>
52142
Speakers
53143
</span>
54144
</footer>
55145
</div>
56146

57147
{speaker.avatar && (
58-
<div className="relative flex overflow-hidden border-l-2 border-neu-300">
59-
<div className="absolute inset-0 z-[1] bg-sec-lighter mix-blend-multiply" />
148+
<div
149+
style={{
150+
position: "relative",
151+
display: "flex",
152+
overflow: "hidden",
153+
borderLeft: `2px solid ${colors.neu600}`,
154+
}}
155+
>
156+
<div
157+
style={{
158+
position: "absolute",
159+
inset: 0,
160+
zIndex: 1,
161+
backgroundColor: colors.secLighter,
162+
mixBlendMode: "multiply",
163+
}}
164+
/>
60165
<img
61166
src={normalizeProtocolRelativeUrl(speaker.avatar)}
62167
alt=""
63-
className="object-cover"
168+
style={{
169+
objectFit: "cover",
170+
}}
64171
width={RIGHT_COLUMN_WIDTH_PX}
65172
height={RIGHT_COLUMN_WIDTH_PX}
66173
/>
@@ -81,50 +188,138 @@ export function ConferenceOpengraphImageHeader({
81188
location: string
82189
}) {
83190
return (
84-
<header className="flex items-center border-b-2 border-neu-300">
85-
<div className="flex flex-1 items-center gap-6 border-r-2 border-neu-300 p-10 pr-16">
86-
<div className="flex items-center gap-4">
87-
<div className="font-mono font-normal uppercase leading-none text-neu-900">
88-
<div className="flex h-[74px] items-center gap-4 text-[40px]/none uppercase">
89-
<div className="text-pri-base">
90-
<GraphQLLogo className="h-12" />
91-
</div>
191+
<header
192+
style={{
193+
display: "flex",
194+
alignItems: "center",
195+
borderBottom: `2px solid ${colors.neu600}`,
196+
}}
197+
>
198+
<div
199+
style={{
200+
display: "flex",
201+
flex: 1,
202+
alignItems: "center",
203+
gap: "1.5rem",
204+
borderRight: `2px solid ${colors.neu600}`,
205+
padding: "2.5rem",
206+
paddingRight: "4rem",
207+
}}
208+
>
209+
<div style={{ display: "flex", alignItems: "center", gap: "1rem" }}>
210+
<div
211+
style={{
212+
fontFamily: "monospace",
213+
display: "flex",
214+
fontWeight: "normal",
215+
textTransform: "uppercase",
216+
lineHeight: "1",
217+
color: colors.neu900,
218+
}}
219+
>
220+
<div
221+
style={{
222+
display: "flex",
223+
height: "74px",
224+
alignItems: "center",
225+
gap: "1rem",
226+
fontSize: "40px",
227+
lineHeight: "1",
228+
textTransform: "uppercase",
229+
}}
230+
>
231+
<GraphQLLogo
232+
style={{ height: "3rem", width: "3rem", color: colors.priBase }}
233+
/>
92234
<span>/</span>
93-
<div>
94-
GraphQLConf <span className="text-pri-base">{year}</span>
235+
<div
236+
style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}
237+
>
238+
GraphQLConf{" "}
239+
<span style={{ color: colors.priBase }}>{year}</span>
95240
</div>
96241
</div>
97242
</div>
98243
</div>
99244
</div>
100245

101246
<div
102-
className="flex h-full shrink-0 flex-col justify-center"
103247
style={{
248+
display: "flex",
249+
height: "100%",
250+
flexShrink: 0,
251+
flexDirection: "column",
252+
justifyContent: "center",
104253
width: RIGHT_COLUMN_WIDTH_PX,
105254
}}
106255
>
107-
<div className="flex items-center gap-6 border-b-2 border-neu-300 px-6 py-[26px]">
108-
<div className="flex items-center gap-2">
256+
<div
257+
style={{
258+
display: "flex",
259+
alignItems: "center",
260+
gap: "1.5rem",
261+
borderBottom: `2px solid ${colors.neu600}`,
262+
paddingLeft: "1.5rem",
263+
paddingRight: "1.5rem",
264+
paddingTop: "26px",
265+
paddingBottom: "26px",
266+
}}
267+
>
268+
<div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
109269
<CalendarIcon
110270
width="24"
111271
height="24"
112-
className="-translate-y-px text-pri-base"
272+
style={{
273+
transform: "translateY(-1px)",
274+
color: colors.priBase,
275+
}}
113276
/>
114-
<span className="font-mono text-xl font-normal uppercase leading-[1.2] text-neu-900">
277+
<span
278+
style={{
279+
fontFamily: "monospace",
280+
display: "flex",
281+
fontSize: "1.25rem",
282+
fontWeight: "normal",
283+
textTransform: "uppercase",
284+
lineHeight: "1.2",
285+
color: colors.neu900,
286+
}}
287+
>
115288
{date}, {year}
116289
</span>
117290
</div>
118291
</div>
119292

120-
<div className="flex items-center gap-6 px-6 py-[26px]">
121-
<div className="flex items-center gap-2">
293+
<div
294+
style={{
295+
display: "flex",
296+
alignItems: "center",
297+
gap: "1.5rem",
298+
paddingLeft: "1.5rem",
299+
paddingRight: "1.5rem",
300+
paddingTop: "26px",
301+
paddingBottom: "26px",
302+
}}
303+
>
304+
<div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
122305
<PinIcon
123306
width="24"
124307
height="24"
125-
className="translate-y-[-.5px] text-pri-base"
308+
style={{
309+
transform: "translateY(-0.5px)",
310+
color: colors.priBase,
311+
}}
126312
/>
127-
<span className="font-mono text-xl font-normal uppercase leading-[1.2] text-neu-900">
313+
<span
314+
style={{
315+
fontFamily: "monospace",
316+
fontSize: "1.25rem",
317+
fontWeight: "normal",
318+
textTransform: "uppercase",
319+
lineHeight: "1.2",
320+
color: colors.neu900,
321+
}}
322+
>
128323
{location}
129324
</span>
130325
</div>

0 commit comments

Comments
 (0)