Skip to content

Commit 786f319

Browse files
beerosebeerose
authored
conf: add speakers og images (graphql#1520)
1 parent 419807c commit 786f319

File tree

170 files changed

+214
-1568
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

170 files changed

+214
-1568
lines changed

‎.gitignore

+3-3
Original file line numberDiff line numberDiff line change
@@ -59,9 +59,9 @@ typings/
5959
.cache/
6060
public/
6161

62-
!static/__og-image/
63-
static/__og-image/*
64-
!static/__og-image/*.png
62+
!static/img/__og-image/
63+
static/img/__og-image/*
64+
!static/img/__og-image/*.png
6565

6666
# Mac files
6767
.DS_Store

‎gatsby-node.ts

+24-1
Original file line numberDiff line numberDiff line change
@@ -189,7 +189,7 @@ export const createPages: GatsbyNode["createPages"] = async ({
189189
if (!process.env.GATSBY_CLOUD && !process.env.GITHUB_ACTIONS) {
190190
try {
191191
createOpenGraphImage(createPage, {
192-
outputDir: "../static/__og-image",
192+
outputDir: "../static/img/__og-image",
193193
component: path.resolve("./src/templates/EventOgImageTemplate.tsx"),
194194
size: {
195195
width: 1200,
@@ -223,6 +223,29 @@ export const createPages: GatsbyNode["createPages"] = async ({
223223
component: path.resolve("./src/templates/speaker.tsx"),
224224
context: { speaker, schedule },
225225
})
226+
227+
if (!process.env.GATSBY_CLOUD && !process.env.GITHUB_ACTIONS) {
228+
try {
229+
createOpenGraphImage(createPage, {
230+
outputDir: "../static/img/__og-image",
231+
component: path.resolve(
232+
"./src/templates/SpeakerOgImageTemplate.tsx"
233+
),
234+
size: {
235+
width: 1200,
236+
height: 630,
237+
},
238+
waitCondition: "networkidle0",
239+
context: {
240+
id: speaker.username,
241+
title: speaker.name,
242+
speaker,
243+
},
244+
})
245+
} catch {
246+
console.log("Error creating OG image for speaker ", speaker.name)
247+
}
248+
}
226249
})
227250
} catch (error) {
228251
console.log("CATCH ME:", error)

‎src/templates/SpeakerOgImageTemplate.tsx

+182
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,182 @@
1+
import React from "react"
2+
import { PageProps } from "gatsby"
3+
import { SchedSpeaker } from "../components/Conf/Speakers/Speaker"
4+
5+
const SpeakerOgImageTemplate = ({
6+
pageContext: { speaker },
7+
}: PageProps<{}, { speaker: SchedSpeaker; schedule: any }>) => {
8+
const { name, company } = speaker
9+
10+
const positions = speaker.position?.split(",")
11+
12+
return (
13+
<div
14+
style={{
15+
fontFamily: "Rubik, Roboto, sans-serif",
16+
backgroundColor: "black",
17+
backgroundImage:
18+
"linear-gradient(to right, black, black, transparent), url(https://graphql.org/img/conf/graphql-conf-bg.png)",
19+
border: "transparent",
20+
margin: -8,
21+
color: "white",
22+
minHeight: 630,
23+
width: 1200,
24+
display: "flex",
25+
alignItems: "center",
26+
}}
27+
>
28+
<div
29+
style={{
30+
height: "100%",
31+
padding: "82px 105px",
32+
display: "flex",
33+
flexDirection: "column",
34+
justifyContent: "center",
35+
}}
36+
>
37+
<div>
38+
<h1
39+
style={{
40+
display: "flex",
41+
alignItems: "center",
42+
gap: "14px",
43+
color: "white",
44+
paddingTop: 0,
45+
marginTop: 0,
46+
fontSize: "40px",
47+
fontWeight: "bold",
48+
marginBottom: "30px",
49+
}}
50+
>
51+
<span style={{ fontWeight: "bolder" }}>GraphQLConf</span>
52+
<span style={{ fontWeight: "normal" }}>2023</span>
53+
<span
54+
style={{
55+
backgroundColor: "#F5009B",
56+
color: "white",
57+
fontSize: "20px",
58+
fontWeight: "bold",
59+
padding: "18px 20px",
60+
marginLeft: "30px",
61+
alignSelf: "center",
62+
borderRadius: "30px",
63+
}}
64+
>
65+
SPEAKERS
66+
</span>
67+
</h1>
68+
<div
69+
style={{
70+
display: "flex",
71+
alignItems: "center",
72+
gap: "35px",
73+
marginBottom: "6px",
74+
fontSize: "22px",
75+
fontStyle: "normal",
76+
fontWeight: 400,
77+
lineHeight: "36px",
78+
color: "white",
79+
}}
80+
>
81+
<span style={{ display: "flex", alignItems: "center" }}>
82+
<svg
83+
style={{ marginRight: "14px", marginBottom: "2px" }}
84+
width="20px"
85+
height="20px"
86+
xmlns="http://www.w3.org/2000/svg"
87+
viewBox="0 0 448 512"
88+
>
89+
{/* <!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --> */}
90+
<path
91+
fill="white"
92+
d="M152 24c0-13.3-10.7-24-24-24s-24 10.7-24 24V64H64C28.7 64 0 92.7 0 128v16 48V448c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V192 144 128c0-35.3-28.7-64-64-64H344V24c0-13.3-10.7-24-24-24s-24 10.7-24 24V64H152V24zM48 192H400V448c0 8.8-7.2 16-16 16H64c-8.8 0-16-7.2-16-16V192z"
93+
/>
94+
</svg>
95+
September 19-21, 2023
96+
</span>
97+
<span style={{ display: "flex", alignItems: "center" }}>
98+
<svg
99+
style={{ marginRight: "12px", marginBottom: "2px" }}
100+
width="20px"
101+
height="20px"
102+
xmlns="http://www.w3.org/2000/svg"
103+
viewBox="0 0 384 512"
104+
>
105+
{/* <!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --> */}
106+
<path
107+
fill="white"
108+
d="M215.7 499.2C267 435 384 279.4 384 192C384 86 298 0 192 0S0 86 0 192c0 87.4 117 243 168.3 307.2c12.3 15.3 35.1 15.3 47.4 0zM192 128a64 64 0 1 1 0 128 64 64 0 1 1 0-128z"
109+
/>
110+
</svg>
111+
SF Bay Area
112+
</span>
113+
</div>
114+
</div>
115+
<div
116+
style={{
117+
display: "flex",
118+
alignItems: "center",
119+
gap: "30px",
120+
marginTop: "60px",
121+
}}
122+
>
123+
{speaker.avatar && (
124+
<img
125+
style={{
126+
display: "flex",
127+
alignContent: "center",
128+
justifyItems: "center",
129+
alignItems: "center",
130+
border: "1.5px solid white",
131+
width: "248px",
132+
height: "248px",
133+
borderRadius: "9999px",
134+
marginTop: 0,
135+
marginBottom: 0,
136+
}}
137+
src={speaker.avatar}
138+
alt={speaker.name}
139+
/>
140+
)}
141+
<div
142+
style={{
143+
display: "flex",
144+
flexDirection: "column",
145+
}}
146+
>
147+
<h1
148+
style={{
149+
margin: 0,
150+
padding: 0,
151+
color: "#FFF",
152+
fontSize: "46px",
153+
fontStyle: "normal",
154+
fontWeight: 700,
155+
lineHeight: "64px",
156+
}}
157+
>
158+
{name}
159+
</h1>
160+
<span
161+
style={{
162+
paddingTop: "7px",
163+
fontSize: "30px",
164+
lineHeight: "46px",
165+
}}
166+
>
167+
{company}
168+
{company && positions?.length && ", "}
169+
{positions?.length === 1
170+
? positions[0]
171+
: positions?.map(position => (
172+
<span style={{ display: "block" }}>{position}</span>
173+
))}
174+
</span>
175+
</div>
176+
</div>
177+
</div>
178+
</div>
179+
)
180+
}
181+
182+
export default SpeakerOgImageTemplate

‎src/templates/speaker.tsx

+5
Original file line numberDiff line numberDiff line change
@@ -151,6 +151,11 @@ export function Head({
151151
<SeoConf
152152
title={`${speaker.name} | GraphQLConf 2023`}
153153
description={speaker.about}
154+
ogImage={{
155+
url: `https://graphql.org/img/__og-image/${speaker.username}.png`,
156+
width: 1200,
157+
height: 630,
158+
}}
154159
/>
155160
<meta
156161
property="keywords"

‎static/img/__og-image/0b5f6bcbfc77f97f4cdc6cdf4a171f82/index.html

-23
This file was deleted.

‎static/img/__og-image/0f57893e761e683f58c4ace9e766c3bf.png

-16 Bytes
Loading

0 commit comments

Comments
 (0)