Skip to content

Commit 07ec25c

Browse files
hasparushasparus
committed
wip
1 parent df265e7 commit 07ec25c

File tree

9 files changed

+161
-9
lines changed

9 files changed

+161
-9
lines changed

‎next-env.d.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,4 @@
33
/// <reference types="next/navigation-types/compat/navigation" />
44

55
// NOTE: This file should not be edited
6-
// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
6+
// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.

‎src/app/(development)/layout.tsx‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import React from "react"
2+
import { notFound } from "next/navigation"
3+
import { NewFontsStyleTag } from "../fonts"
4+
5+
// @ts-expect-error: we want to import the same version as Nextra for the main page
6+
import { ThemeProvider } from "next-themes"
7+
8+
import "../colors.css"
9+
10+
export default function DevelopmentLayout({
11+
children,
12+
}: {
13+
children: React.ReactNode
14+
}) {
15+
if (process.env.NODE_ENV !== "development") notFound()
16+
17+
return (
18+
<>
19+
<NewFontsStyleTag />
20+
<ThemeProvider attribute="class">
21+
<div className="min-h-screen bg-neu-0 text-neu-900 antialiased">
22+
{children}
23+
</div>
24+
</ThemeProvider>
25+
</>
26+
)
27+
// return <>{children}</>
28+
}

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

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import SpeakerOpengraphImage from "@/app/conf/2025/components/speaker-opengraph-image"
2+
3+
/**
4+
* This is cheaper than maintaining a Storybook config.
5+
*/
6+
export default function WorkroomPage() {
7+
return (
8+
<main>
9+
<SpeakerOpengraphImage
10+
speaker={{
11+
name: "Denis Badurina",
12+
username: "denisbadurina",
13+
avatar: "https://github.com/denisbadurina.png",
14+
company: "The Guild",
15+
position: "Software Architect",
16+
about:
17+
"Denis is a software architect at The Guild. He is a passionate about GraphQL and the GraphQL ecosystem.",
18+
role: "speaker",
19+
socialurls: [],
20+
year: "2025",
21+
}}
22+
date="September 8-10"
23+
location="Amsterdam, Netherlands"
24+
/>
25+
</main>
26+
)
27+
}

‎src/app/conf/2023/types.d.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,5 +23,5 @@ export type SchedSpeaker = {
2323
role: string
2424
location?: string
2525
socialurls: { service: string; url: string }[]
26-
year: "2024" | "2023"
26+
year: "2025" | "2024" | "2023"
2727
}

‎src/app/conf/2025/assets/speaker-placeholder-image.png‎

167 KB
Loading

‎src/app/conf/2025/components/format-speaker-position.tsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { SchedSpeaker } from "../../2023/types"
2+
3+
export function formatSpeakerPosition(speaker: SchedSpeaker) {
4+
return [speaker.company === "-" ? "" : speaker.company, speaker.position]
5+
.filter(Boolean)
6+
.join(", ")
7+
}

‎src/app/conf/2025/components/graphql-conf-logo-link.tsx‎

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

36-
function GraphQLLogo(props: React.SVGProps<SVGSVGElement>) {
36+
export function GraphQLLogo(props: React.SVGProps<SVGSVGElement>) {
3737
return (
3838
<svg viewBox="0 0 100 100" fill="currentColor" {...props}>
3939
<path

‎src/app/conf/2025/components/speaker-card.tsx‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import { SpeakerTags } from "./speaker-tags"
99
import { SpeakerLinks } from "./speaker-links"
1010

1111
import styles from "./speaker-card.module.css"
12+
import { formatSpeakerPosition } from "./format-speaker-position"
1213

1314
export interface SpeakerCardProps extends React.HTMLAttributes<HTMLDivElement> {
1415
isReturning?: boolean
@@ -68,12 +69,7 @@ export function SpeakerCard({
6869
<div className="flex flex-col gap-1">
6970
<h3 className="typography-body-lg">{speaker.name}</h3>
7071
<p className="typography-body-sm line-clamp-1 text-neu-800">
71-
{[
72-
speaker.position,
73-
speaker.company === "-" ? "" : speaker.company,
74-
]
75-
.filter(Boolean)
76-
.join(", ")}
72+
{formatSpeakerPosition(speaker)}
7773
</p>
7874
<SpeakerTags speaker={speaker} className="my-3" />
7975
</div>

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

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
import type { SchedSpeaker } from "@/app/conf/2023/types"
2+
import { CalendarIcon } from "../../_design-system/pixelarticons/calendar-icon"
3+
import { PinIcon } from "../../_design-system/pixelarticons/pin-icon"
4+
import { formatSpeakerPosition } from "./format-speaker-position"
5+
import { GraphQLLogo } from "./graphql-conf-logo-link"
6+
7+
interface SpeakerOpengraphImageProps extends React.HTMLAttributes<HTMLElement> {
8+
speaker: SchedSpeaker
9+
date: string
10+
location: string
11+
}
12+
13+
export default function SpeakerOpengraphImage({
14+
speaker,
15+
date,
16+
location,
17+
...rest
18+
}: SpeakerOpengraphImageProps) {
19+
return (
20+
<article
21+
className="flex h-[630px] w-[1200px] flex-col border border-neu-300 bg-neu-50"
22+
{...rest}
23+
>
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>
62+
63+
<div className="flex flex-1 justify-between gap-12">
64+
<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">
66+
<div className="flex w-[454px] flex-col gap-10">
67+
<h3 className="m-0 font-sans text-[88px] font-normal leading-tight text-neu-900">
68+
{speaker.name}
69+
</h3>
70+
71+
<div className="flex items-center gap-8">
72+
<span className="font-sans text-[32px] font-normal leading-tight text-neu-700">
73+
{formatSpeakerPosition(speaker)}
74+
</span>
75+
</div>
76+
</div>
77+
</div>
78+
79+
<footer className="flex items-center border-t border-neu-300 px-16 py-8 pl-10">
80+
<span className="font-mono text-2xl font-normal uppercase leading-none text-neu-900">
81+
Speakers
82+
</span>
83+
</footer>
84+
</div>
85+
86+
<img
87+
src="https://placedog.net/400/400"
88+
alt={speaker.name}
89+
className="size-full object-cover"
90+
/>
91+
</div>
92+
</article>
93+
)
94+
}

0 commit comments

Comments
 (0)