Skip to content

Commit e20a410

Browse files
hasparushasparus
committed
Use smaller fonts when there is a lot of speakers or the title is very long
1 parent 99de620 commit e20a410

File tree

7 files changed

+46
-17
lines changed

7 files changed

+46
-17
lines changed

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

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,25 @@ export default function WorkroomPage() {
8282
<ScheduleOpengraphImage
8383
session={{
8484
name: "TSC Panel - Lee Byron, GraphQL Foundation; Kewei Qu, Meta; Rob Richard, 1stDibs; Michael Staib, ChilliCream; Moderated by Sasha Solomon, Staff Software Engineer & Tech Lead",
85-
speakers: [enisdenjo, saihaj, enisdenjo, saihaj, enisdenjo, saihaj],
85+
speakers: [
86+
{
87+
...enisdenjo,
88+
name: "Lee Byron",
89+
},
90+
{
91+
...enisdenjo,
92+
name: "Kewei Qu",
93+
},
94+
{
95+
...enisdenjo,
96+
name: "Rob Richard",
97+
},
98+
{
99+
...enisdenjo,
100+
name: "Michael Staib",
101+
},
102+
{ ...enisdenjo, name: "Sasha Solomon" },
103+
],
86104
event_type: "Keynote Sessions",
87105
}}
88106
date="September 8-10"

‎src/app/conf/2023/_data.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,12 @@ import "server-only"
22
import { stripHtml } from "string-strip-html"
33

44
import { SchedSpeaker, ScheduleSession } from "@/app/conf/2023/types"
5-
import { fetchData } from "../_api/sched-client"
5+
import { fetchSchedData } from "../_api/sched-client"
66

77
const token = process.env.SCHED_ACCESS_TOKEN_2023
88

99
async function getSpeakers(): Promise<SchedSpeaker[]> {
10-
const users = await fetchData<SchedSpeaker[]>(
10+
const users = await fetchSchedData<SchedSpeaker[]>(
1111
`https://graphqlconf23.sched.com/api/user/list?api_key=${token}&format=json&fields=username,company,position,name,about,location,url,avatar,role,socialurls`,
1212
)
1313

@@ -24,7 +24,7 @@ async function getSpeakers(): Promise<SchedSpeaker[]> {
2424
}
2525

2626
async function getSchedule(): Promise<ScheduleSession[]> {
27-
const sessions = await fetchData<ScheduleSession[]>(
27+
const sessions = await fetchSchedData<ScheduleSession[]>(
2828
`https://graphqlconf23.sched.com/api/session/export?api_key=${token}&format=json`,
2929
)
3030

‎src/app/conf/2024/_data.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,12 @@ import "server-only"
22
import { stripHtml } from "string-strip-html"
33
import { SchedSpeaker, ScheduleSession } from "@/app/conf/2023/types"
44

5-
import { fetchData } from "../_api/sched-client"
5+
import { fetchSchedData } from "../_api/sched-client"
66

77
const token = process.env.SCHED_ACCESS_TOKEN_2024
88

99
async function getSpeakers(): Promise<SchedSpeaker[]> {
10-
const users = await fetchData<SchedSpeaker[]>(
10+
const users = await fetchSchedData<SchedSpeaker[]>(
1111
`https://graphqlconf2024.sched.com/api/user/list?api_key=${token}&format=json&fields=username,company,position,name,about,location,url,avatar,role,socialurls`,
1212
)
1313

@@ -24,7 +24,7 @@ async function getSpeakers(): Promise<SchedSpeaker[]> {
2424
}
2525

2626
async function getSchedule(): Promise<ScheduleSession[]> {
27-
const sessions = await fetchData<ScheduleSession[]>(
27+
const sessions = await fetchSchedData<ScheduleSession[]>(
2828
`https://graphqlconf2024.sched.com/api/session/export?api_key=${token}&format=json`,
2929
)
3030

‎src/app/conf/2025/_data.ts‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import "server-only"
22
import { stripHtml } from "string-strip-html"
33
import { SchedSpeaker, ScheduleSession } from "@/app/conf/2023/types"
44

5-
import { fetchData } from "../_api/sched-client"
5+
import { fetchSchedData } from "../_api/sched-client"
66
import { speakers as speakers2024 } from "../2024/_data"
77
import { speakers as speakers2023 } from "../2023/_data"
88

@@ -17,7 +17,7 @@ const token = USE_2025
1717
: process.env.SCHED_ACCESS_TOKEN_2024
1818

1919
async function getSpeakers(): Promise<SchedSpeaker[]> {
20-
const users = await fetchData<SchedSpeaker[]>(
20+
const users = await fetchSchedData<SchedSpeaker[]>(
2121
`${apiUrl}/user/list?api_key=${token}&format=json&fields=username,company,position,name,about,location,url,avatar,role,socialurls`,
2222
)
2323

@@ -26,6 +26,7 @@ async function getSpeakers(): Promise<SchedSpeaker[]> {
2626
.map(user => {
2727
return {
2828
...user,
29+
socialurls: user.socialurls || [],
2930
about: preprocessDescription(user.about),
3031
}
3132
})
@@ -39,7 +40,7 @@ async function getSpeakers(): Promise<SchedSpeaker[]> {
3940
}
4041

4142
async function getSchedule(): Promise<ScheduleSession[]> {
42-
const sessions = await fetchData<ScheduleSession[]>(
43+
const sessions = await fetchSchedData<ScheduleSession[]>(
4344
`${apiUrl}/session/export?api_key=${token}&format=json`,
4445
)
4546

@@ -68,8 +69,6 @@ function preprocessDescription(description: string | undefined | null): string {
6869

6970
export const speakers = await getSpeakers()
7071

71-
console.log("speakers", speakers)
72-
7372
// TODO: Collect tags from schedule for speakers.
7473
export const schedule = await getSchedule()
7574

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

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,12 @@ export default function ScheduleOpengraphImage({
4949

5050
<div className="flex flex-1 flex-col justify-between p-10">
5151
<div className="flex flex-col gap-10">
52-
<h3 className="m-0 font-sans text-[72px] font-normal leading-tight text-neu-900">
52+
<h3
53+
className="m-0 font-sans leading-tight text-neu-900"
54+
style={{
55+
fontSize: eventTitle.length <= 32 ? "72px" : "32px",
56+
}}
57+
>
5358
{eventTitle}
5459
</h3>
5560
</div>
@@ -83,7 +88,12 @@ export default function ScheduleOpengraphImage({
8388

8489
{speakers.length > 1 && (
8590
<div className="flex flex-col gap-4">
86-
<h4 className="m-0 font-sans text-[48px] font-normal leading-tight text-neu-900">
91+
<h4
92+
className="m-0 font-sans font-normal leading-tight text-neu-900"
93+
style={{
94+
fontSize: speakers.length < 4 ? "48px" : "32px",
95+
}}
96+
>
8797
{speakers.map(s => s.name).join(", ")}
8898
</h4>
8999
</div>

‎src/app/conf/2025/utils.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ export function getEventTitle(
3333
return name
3434
}
3535

36-
speakers?.forEach(speaker => {
36+
speakers.forEach(speaker => {
3737
const speakerInTitle = name.indexOf(`- ${speaker.replace("ı", "i")}`)
3838
if (speakerInTitle > -1) {
3939
name = name.slice(0, speakerInTitle)

‎src/app/conf/_api/sched-client.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ const requestsRetried = new Map<
1414
RequestPending | RequestSuccess | RequestError
1515
>()
1616

17-
export async function fetchData<T>(url: string): Promise<T> {
17+
export async function fetchSchedData<T>(url: string): Promise<T> {
1818
try {
1919
if (rateLimitResetAt && Date.now() < rateLimitResetAt) {
2020
const wait = rateLimitResetAt - Date.now()
@@ -60,7 +60,7 @@ export async function fetchData<T>(url: string): Promise<T> {
6060
setTimeout(
6161
() =>
6262
later.resolve(
63-
fetchData<T>(url).then(data => {
63+
fetchSchedData<T>(url).then(data => {
6464
rateLimitResetAt = null
6565
requestsRetried.set(url, "ok")
6666
return data
@@ -83,3 +83,5 @@ export async function fetchData<T>(url: string): Promise<T> {
8383
)
8484
}
8585
}
86+
87+
// todo: functions for `getSpeakers`, `getSchedule`

0 commit comments

Comments
 (0)