Skip to content

Commit fab410f

Browse files
saihajsaihaj
authored
feat: CFP section (#1949)
* feat: CFP section * Address feedback
1 parent ca406f4 commit fab410f

File tree

3 files changed

+306
-6
lines changed

3 files changed

+306
-6
lines changed

‎src/app/conf/2025/layout.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ export default function Layout({
4848
}
4949
links={[
5050
{ children: "Sponsor", href: "/conf/2025/#sponsors" },
51-
{ children: "Speakers", href: "/conf/2025/#speakers" },
51+
{ children: "Submit to Speak", href: "/conf/2025/#speakers" },
5252
{ children: "Register", href: "/conf/2025/#register" },
5353
{ children: "Recap", href: "/conf/2024" },
5454
{ children: "Resources", href: "/conf/2025/resources" },

‎src/app/conf/2025/page.tsx

+2-5
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { Venue } from "./venue"
66
import { FAQ } from "./faq"
77
import { Register } from "./register"
88
import { PastSponsors } from "./past-sponsors"
9+
import { Speakers } from "./speakers"
910

1011
export const metadata: Metadata = {
1112
title: "GraphQLConf 2025 — Sept 08-10",
@@ -63,11 +64,7 @@ export default function Page() {
6364
<Intro />
6465
<PastSponsors />
6566
<Sponsor />
66-
<GridButton
67-
id="speakers"
68-
title="Notify Me About Speaking"
69-
href="https://forms.gle/jRsE2u8pokLX93RGA"
70-
/>
67+
<Speakers />
7168
<Register />
7269
<Venue />
7370
<FAQ />

‎src/app/conf/2025/speakers.tsx

+303
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,303 @@
1+
"use client"
2+
import clsx from "clsx"
3+
4+
import { useState, useEffect, ReactNode } from "react"
5+
import Link from "next/link"
6+
7+
function TabHeading({
8+
children,
9+
className,
10+
}: {
11+
children: ReactNode
12+
className?: string
13+
}) {
14+
return (
15+
<h2 className={clsx("mb-4 text-2xl font-semibold", className)}>
16+
{children}
17+
</h2>
18+
)
19+
}
20+
21+
function DatesTab() {
22+
return (
23+
<>
24+
<TabHeading>Dates to Remember</TabHeading>
25+
<ul className="list-disc space-y-2 pl-6">
26+
<li>CFP Opens: Tuesday, 4 February</li>
27+
<li>CFP Close: Sunday, 4 May at 23:59 CEST (UTC+2)</li>
28+
<li>CFP Notifications: Monday, 9 June</li>
29+
<li>Schedule Announced: Wednesday, 11 June</li>
30+
<li>Slides due date: Friday, 5 September</li>
31+
<li>
32+
Event Dates: Monday, 8 September - Wednesday, 10 September, 2024
33+
</li>
34+
</ul>
35+
</>
36+
)
37+
}
38+
39+
function TopicsTab() {
40+
return (
41+
<>
42+
<TabHeading>Suggested Topics</TabHeading>
43+
<ul className="list-disc space-y-2 pl-6">
44+
<li>GraphQL Working Group</li>
45+
<ul className="list-disc space-y-2 pl-6">
46+
<li>
47+
GraphQL Specification (including incremental delivery, nullability)
48+
</li>
49+
<li>GraphQL-over-HTTP specification</li>
50+
<li>Federation specification</li>
51+
<li>
52+
Reference software (GraphQL.js, graphql-http, GraphiQL and LSP)
53+
</li>
54+
</ul>
55+
<li>GraphQL in Production</li>
56+
<ul className="list-disc space-y-2 pl-6">
57+
<li>Case studies</li>
58+
<li>Federation and Distributed Systems</li>
59+
<li>
60+
Schema evolution (including backwards compatibility and versioning)
61+
</li>
62+
<li>Security</li>
63+
<li>Scaling</li>
64+
<li>Observability, telemetry and tracing</li>
65+
</ul>
66+
<li>Developer Experience</li>
67+
<ul className="list-disc space-y-2 pl-6">
68+
<li>Frontend</li>
69+
<li>Backend</li>
70+
<li>Patterns and community trends</li>
71+
<li>Testing</li>
72+
<li>Documentation</li>
73+
</ul>
74+
</ul>
75+
</>
76+
)
77+
}
78+
79+
function NotesTab() {
80+
return (
81+
<>
82+
<TabHeading>Important Notes</TabHeading>
83+
<ul className="list-disc space-y-2 pl-6">
84+
<li>
85+
All speakers are required to adhere to our{" "}
86+
<Link
87+
className="underline hover:text-primary"
88+
href="/conf/2025/resources/#code-of-conduct"
89+
>
90+
Code of Conduct
91+
</Link>
92+
. We also highly recommend that speakers take our online{" "}
93+
<a
94+
className="underline hover:text-primary"
95+
target="_blank"
96+
href="https://training.linuxfoundation.org/linux-courses/open-source-compliance-courses/inclusive-speaker-orientation"
97+
>
98+
Inclusive Speaker Orientation Course
99+
</a>
100+
.
101+
</li>
102+
<li>
103+
Panel submissions must include the names of all participants in the
104+
initial submission to be considered. In an effort to promote speaker
105+
diversity, The Linux Foundation does not accept submissions with
106+
all-male panels, and speakers must not all be from the same company.
107+
</li>
108+
<li>
109+
Complimentary Passes For Speakers – One complimentary pass for the
110+
event will be provided for each accepted speaker.
111+
</li>
112+
<li>
113+
Avoid sales pitches and discussing unlicensed or potentially
114+
closed-source technologies when preparing your proposal; these talks
115+
are almost always rejected due to the fact that they take away from
116+
the integrity of our events, and are rarely well-received by
117+
conference attendees.
118+
</li>
119+
<li>
120+
All accepted speakers are required to submit their slides prior to the
121+
event.
122+
</li>
123+
</ul>
124+
<TabHeading className="mt-6">
125+
Preparing to Submit Your Proposal
126+
</TabHeading>
127+
<p className="mb-4">
128+
While it is not our intention to provide you with strict instructions on
129+
how to prepare your proposal, we hope you will take a moment to review
130+
the following guidelines that we have put together to help you prepare
131+
the best submission possible. To get started, here are three things that
132+
you should consider before submitting your proposal:
133+
</p>
134+
<ul className="mb-4 list-disc space-y-2 pl-6">
135+
<li>What are you hoping to get from your presentation?</li>
136+
<li>What do you expect the audience to gain from your presentation?</li>
137+
<li>How will your presentation help better the ecosystem?</li>
138+
</ul>
139+
<p>
140+
There are plenty of ways to give a presentation about projects and
141+
technologies without focusing on company-specific efforts. Remember the
142+
things to consider that we mentioned above when writing your proposal
143+
and think of ways to make it interesting for attendees while still
144+
letting you share your experiences, educate the community about an
145+
issue, or generate interest in a project.
146+
</p>
147+
<TabHeading className="mt-6">How to Give a Great Talk</TabHeading>
148+
<p>
149+
We want to make sure submitters receive resources to help put together a
150+
great submission and if accepted, give the best presentation possible.
151+
To help with this, we recommend viewing seasoned speaker Dawn Foster's
152+
in-depth talk:{" "}
153+
<a
154+
href="https://youtu.be/2I5fYBLCfUA"
155+
target="_blank"
156+
className="underline hover:text-primary"
157+
>
158+
Getting Over Your Imposter Syndrome to Become a Conference Speaker –
159+
Dawn Foster, VMware
160+
</a>
161+
.
162+
</p>
163+
<TabHeading className="mt-6">
164+
Have More Questions? First Time Submitting? Don't Feel Intimidated
165+
</TabHeading>
166+
<p>
167+
Linux Foundation events are an excellent way to get to know the
168+
community and share your ideas and the work that you are doing and we
169+
strongly encourage first-time speakers to submit talks for our events.
170+
In the instance that you aren't sure about your abstract,{" "}
171+
<a
172+
className="underline hover:text-primary"
173+
href="mailto:[email protected]"
174+
>
175+
reach out to us
176+
</a>{" "}
177+
and we will be more than happy to work with you on your proposal.
178+
</p>
179+
</>
180+
)
181+
}
182+
183+
function TypesTab() {
184+
return (
185+
<>
186+
<TabHeading>Submission Types</TabHeading>
187+
<ul className="list-disc space-y-2 pl-6">
188+
<li>
189+
Session Presentation: Typically 30 minutes in length, 1-2 speakers
190+
presenting on a topic
191+
</li>
192+
<li>
193+
Panel Discussion: Typically 30 minutes in length, 3-4 speakers
194+
presenting on a topic
195+
</li>
196+
<li>Birds of a Feather: Typically 45 minutes to 1 hour in length</li>
197+
<li>Lightning Talk: Typically 5-10 minutes in length</li>
198+
<li>Workshop: Typically 1-2 hours in length</li>
199+
</ul>
200+
</>
201+
)
202+
}
203+
export function Speakers() {
204+
const [buttonText, setButtonText] = useState("Submit a Proposal")
205+
const [isDisabled, setIsDisabled] = useState(false)
206+
const [activeTab, setActiveTab] = useState("dates")
207+
208+
useEffect(() => {
209+
const checkDate = () => {
210+
const currentDate = new Date()
211+
const closingDate = new Date("2025-05-12T00:00:00Z")
212+
if (currentDate >= closingDate) {
213+
setButtonText("CFP Closed")
214+
setIsDisabled(true)
215+
}
216+
}
217+
218+
checkDate()
219+
const timer = setInterval(checkDate, 60000) // Check every minute
220+
221+
return () => clearInterval(timer)
222+
}, [])
223+
224+
const tabContent = {
225+
dates: <DatesTab />,
226+
topics: <TopicsTab />,
227+
types: <TypesTab />,
228+
notes: <NotesTab />,
229+
}
230+
231+
return (
232+
<section id="speakers" className="">
233+
<h1 className="conf-heading">Call for Proposals</h1>
234+
<p className="mb-4">
235+
Putting on an amazing conference depends on great content, which is
236+
where you come in! Join other GraphQL leaders and community members as a
237+
presenter by submitting to our Call for Proposals (CFP) and sharing your
238+
experience across a wide range of topics. Please click through all of
239+
the tabs below before submitting a proposal.
240+
</p>
241+
<p className="mb-4">
242+
For any questions regarding the CFP process, please email{" "}
243+
<a
244+
href="mailto:[email protected]"
245+
className="underline hover:text-primary"
246+
>
247+
[email protected]
248+
</a>
249+
.
250+
</p>
251+
<button
252+
disabled={isDisabled}
253+
onClick={() =>
254+
window.open(
255+
"https://sessionize.com/graphqlconf-2025?utm_medium=website&utm_campaign=speaker_section",
256+
"_blank",
257+
)
258+
}
259+
className={clsx(
260+
"px-20 py-4 text-center text-3xl font-semibold transition-colors md:px-28",
261+
isDisabled
262+
? "cursor-not-allowed bg-gray-400"
263+
: "bg-primary/85 hover:bg-primary/100",
264+
)}
265+
>
266+
{buttonText}
267+
</button>
268+
<p className="mb-8 mt-6">
269+
Please be aware that the Linux Foundation uses Sessionize for CFP
270+
submissions. Sessionize is a cloud-based event content management
271+
software designed to be intuitive and user-friendly. If you need
272+
guidance, please review{" "}
273+
<a
274+
className="underline hover:text-primary"
275+
target="_blank"
276+
href="https://sessionize.com/playbook/submit-your-session-for-an-event"
277+
>
278+
how to submit your session
279+
</a>{" "}
280+
for an event to see step-by-step instructions and helpful screenshots.
281+
</p>
282+
<div className="mb-6">
283+
<div className="flex border-b">
284+
{["dates", "topics", "types", "notes"].map(tab => (
285+
<button
286+
key={tab}
287+
className={`px-4 py-2 font-semibold ${
288+
activeTab === tab
289+
? "border-b-2 border-primary text-white"
290+
: "text-gray-400 hover:text-primary"
291+
}`}
292+
onClick={() => setActiveTab(tab)}
293+
>
294+
{tab.charAt(0).toUpperCase() + tab.slice(1)}
295+
</button>
296+
))}
297+
</div>
298+
{/* @ts-ignore - fine code */}
299+
<div className="mt-6">{tabContent[activeTab]}</div>
300+
</div>
301+
</section>
302+
)
303+
}

0 commit comments

Comments
 (0)