diff --git a/src/app/conf/2025/components/call-for-proposals.tsx b/src/app/conf/2025/components/call-for-proposals.tsx new file mode 100644 index 0000000000..f6784b0764 --- /dev/null +++ b/src/app/conf/2025/components/call-for-proposals.tsx @@ -0,0 +1,518 @@ +"use client" +import clsx from "clsx" + +import { useState, useEffect, ReactNode, Fragment } from "react" +import Link from "next/link" +import { Button } from "../../_design-system/button" +import ArrowDownIcon from "../pixelarticons/arrow-down.svg?svgr" + +function DatesTab() { + return ( + + + + + + + + + ) +} + +function DefinitionListItem({ + className, + term, + definition, +}: { + className?: string + term: string + definition: string +}) { + return ( +
+
+ {term} +
+
+ {definition} +
+
+ ) +} +function TopicsTab() { + return ( +
+

Suggested Topics

+ +
+ ) +} + +function NotesTab() { + return ( +
+

Important Notes

+ +

Preparing to Submit Your Proposal

+

+ While it is not our intention to provide you with strict instructions on + how to prepare your proposal, we hope you will take a moment to review + the following guidelines that we have put together to help you prepare + the best submission possible. To get started, here are three things that + you should consider before submitting your proposal: +

+ +

+ There are plenty of ways to give a presentation about projects and + technologies without focusing on company-specific efforts. Remember the + things to consider that we mentioned above when writing your proposal + and think of ways to make it interesting for attendees while still + letting you share your experiences, educate the community about an + issue, or generate interest in a project. +

+

How to Give a Great Talk

+

+ We want to make sure submitters receive resources to help put together a + great submission and if accepted, give the best presentation possible. + To help with this, we recommend viewing seasoned speaker Dawn Foster's + in-depth talk:{" "} + + Getting Over Your Imposter Syndrome to Become a Conference Speaker + + . +

+

+ Have More Questions? First Time Submitting? Don't Feel Intimidated +

+

+ Linux Foundation events are an excellent way to get to know the + community and share your ideas and the work that you are doing and we + strongly encourage first-time speakers to submit talks for our events. + In the instance that you aren't sure about your abstract,{" "} + reach out to us and we will + be more than happy to work with you on your proposal. +

+
+ ) +} + +function TypesTab() { + return ( + + + + + + + + ) +} + +function ProcessTab() { + return ( +
+

The Talk Selection Process

+

+ The GraphQL Foundation strives to select conference talks based on fair + criteria in a transparent manner. There are three groups involved in the + selection process, each with their own focus to help create an engaging + and balanced conference schedule: +

+ +

The Technical Steering Committee

+

+ The TSC are a group of 11 individuals who are elected to serve a two + year term to provide technical oversight of all GraphQL development + efforts. When evaluating conference talks they{" "} + focus on quality and use the following criteria: +

+ +

Subject Matter Experts

+

+ The SME initiative is new for 2025. This will be a panel of volunteers + drawn from industry experts, working group members, security and + observability experts, and maintainers and contributors to open source + GraphQL projects. When evaluating the talks, they will{" "} + focus on how exciting and engaging the talks are and + use the following criteria: +

+ +

The Program Committee

+

+ The Program Committee is made up of representatives from the GraphQL + Foundation board and interested members of the GraphQL community who + have had experience organizing conferences. They shape the schedule from + the highest-rated talks, ensuring balance across industries and + affiliations, and also including a range of speaker experience and + demographics, to ensure a varied and well-rounded representation of the + GraphQL ecosystem. +

+

+ Have More Questions? First Time Submitting? Don't Feel Intimidated +

+

+ Linux Foundation events are an excellent way to get to know the + community and share your ideas and the work that you are doing and we + strongly encourage first-time speakers to submit talks for our events. + In the instance that you aren't sure about your abstract, reach out to + us and we will be more than happy to work with you on your proposal. +

+
+ ) +} + +const tabs = { + dates: , + topics: , + types: , + notes: , + process: , +} + +type Tab = keyof typeof tabs + +const tabsInOrder: Tab[] = ["dates", "topics", "types", "notes", "process"] + +export function CallForProposals() { + const [buttonText, setButtonText] = useState("Submit a Proposal") + const [isDisabled, setIsDisabled] = useState(false) + const [activeTab, setActiveTab] = useState("dates") + + useEffect(() => { + const checkDate = () => { + const currentDate = new Date() + const closingDate = new Date("2025-05-12T00:00:00Z") + if (currentDate >= closingDate) { + setButtonText("CFP Closed") + setIsDisabled(true) + } + } + + checkDate() + const timer = setInterval(checkDate, 60000) // Check every minute + + return () => clearInterval(timer) + }, []) + + return ( +
+
+
+

Call for Proposals

+

+ Putting on an amazing conference depends on great content, which is + where you come in! Join other GraphQL leaders and community members + as a presenter by submitting to our Call for Proposals (CFP) and + sharing your experience across a wide range of topics. Please click + through all of the tabs below before submitting a proposal. +

+

+ For any questions regarding the CFP process, please email{" "} + + cfp@linuxfoundation.org + + . +

+

+ Please be aware that the Linux Foundation uses Sessionize for CFP + submissions. Sessionize is a cloud-based event content management + software designed to be intuitive and user-friendly. If you need + guidance, please review{" "} + + how to submit your session + {" "} + for an event to see step-by-step instructions and helpful + screenshots. +

+ +
+
+
+ {tabsInOrder.map((tab, i) => ( + + ))} +
+
+ {tabsInOrder.map(tab => ( + + +
+ {tabs[tab]} +
+ + ))} +
+
+
+
+ ) +} + +interface TabButtonProps + extends Omit, "onFocus"> { + tab: Tab + tabIndex?: number + activeTab: Tab + setActiveTab: (tab: Tab) => void +} + +function TabButton({ + tab, + tabIndex, + activeTab, + setActiveTab, + className, + ...props +}: TabButtonProps) { + return ( + + ) +} + +function arrowsMoveSideways(event: React.KeyboardEvent) { + if (event.key === "ArrowLeft") { + const previousElement = event.currentTarget.previousElementSibling + if (previousElement) { + ;(previousElement as HTMLElement).focus() + } + } else if (event.key === "ArrowRight") { + const nextElement = event.currentTarget.nextElementSibling + if (nextElement) { + ;(nextElement as HTMLElement).focus() + } + } +} + +function DefinitionListBox({ children }: { children: React.ReactNode }) { + return ( +
+
+ {children} +
+ +
+ ) +} + +const maskEven = + "repeating-linear-gradient(to right, transparent, transparent 12px, black 12px, black 24px)" +const maskOdd = + "repeating-linear-gradient(to right, black, black 12px, transparent 12px, transparent 24px)" + +function Stripes() { + const mask = "linear-gradient(125deg, transparent 68%, hsl(0 0 0 / 0.8))" + return ( +
+
+
+
+ ) +} diff --git a/src/app/conf/2025/components/register-section/index.tsx b/src/app/conf/2025/components/register-section/index.tsx index 05b83ff920..8c66406f92 100644 --- a/src/app/conf/2025/components/register-section/index.tsx +++ b/src/app/conf/2025/components/register-section/index.tsx @@ -36,7 +36,7 @@ export function RegisterSection({ className, ...props }: RegisterSectionProps) { email. If you did not, please contact us for more details:{" "} cfp@linuxfoundation.org @@ -57,7 +57,7 @@ export function RegisterSection({ className, ...props }: RegisterSectionProps) { register as a Sponsor. For further questions, please email us:{" "} graphql_events@linuxfoundation.org diff --git a/src/app/conf/2025/page.tsx b/src/app/conf/2025/page.tsx index 76ee2bd4f1..a7ff5277a4 100644 --- a/src/app/conf/2025/page.tsx +++ b/src/app/conf/2025/page.tsx @@ -5,7 +5,7 @@ import { Sponsor } from "./sponsorship" import { Venue } from "./venue" import { FAQ } from "./faq" import { Register } from "./register" -import { Speakers } from "./speakers" +import { CallForProposals } from "./components/call-for-proposals" import { RegisterToday } from "./components/register-today" import { Hero } from "./components/hero" import WhatToExpectSection from "./components/what-to-expect" @@ -20,7 +20,7 @@ export const metadata: Metadata = { export default function Page() { return ( -
+
@@ -31,10 +31,10 @@ export default function Page() {
+
- {/* */} diff --git a/src/app/conf/2025/pixelarticons/arrow-down.svg b/src/app/conf/2025/pixelarticons/arrow-down.svg new file mode 100644 index 0000000000..642c02b9f3 --- /dev/null +++ b/src/app/conf/2025/pixelarticons/arrow-down.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/app/conf/2025/speakers.tsx b/src/app/conf/2025/speakers.tsx deleted file mode 100644 index 5240155c04..0000000000 --- a/src/app/conf/2025/speakers.tsx +++ /dev/null @@ -1,390 +0,0 @@ -"use client" -import clsx from "clsx" - -import { useState, useEffect, ReactNode } from "react" -import Link from "next/link" - -function TabHeading({ - children, - className, -}: { - children: ReactNode - className?: string -}) { - return ( -

- {children} -

- ) -} - -function DatesTab() { - return ( - <> -

- Last Updated: 2025-04-02 -

- Dates to Remember -
    -
  • CFP Opens: Tuesday, 4 February
    • -
  • - CFP NOW EXTENDED TO: Sunday, 11 May at 23:59 CEST - (UTC+2) -
    • -
  • CFP Notifications: Monday, 9 June
    • -
  • Schedule Announced: Wednesday, 11 June
    • -
  • Slides due date: Friday, 5 September
    • -
  • - Event Dates: Monday, 8 September - Wednesday, 10 September, 2024 -
    • -
- - ) -} - -function TopicsTab() { - return ( - <> -

- Last Updated: 2025-04-02 -

- Suggested Topics -
    -
  • GraphQL Working Group
    • -
      -
    • - GraphQL Specification (including incremental delivery, nullability) -
      • -
    • GraphQL-over-HTTP specification
      • -
    • Federation specification
      • -
    • - Reference software (GraphQL.js, graphql-http, GraphiQL and LSP) -
      • -
    -
  • GraphQL in Production
    • -
      -
    • Case studies
      • -
    • Federation and Distributed Systems
      • -
    • - Schema evolution (including backwards compatibility and versioning) -
      • -
    • Security
      • -
    • Scaling
      • -
    • Observability, telemetry and tracing
      • -
    -
  • Developer Experience
    • -
      -
    • Frontend
      • -
    • Backend
      • -
    • Patterns and community trends
      • -
    • Testing
      • -
    • Documentation
      • -
    -
- - ) -} - -function NotesTab() { - return ( - <> -

- Last Updated: 2025-04-02 -

- Important Notes -
    -
  • - All speakers are required to adhere to our{" "} - - Code of Conduct - - . We also highly recommend that speakers take our online{" "} - - Inclusive Speaker Orientation Course - - . -
    • -
  • - Panel submissions must include the names of all participants in the - initial submission to be considered. In an effort to promote speaker - diversity, The Linux Foundation does not accept submissions with - all-male panels, and speakers must not all be from the same company. -
    • -
  • - Complimentary Passes For Speakers – One complimentary pass for the - event will be provided for each accepted speaker. -
    • -
  • - Avoid sales pitches and discussing unlicensed or potentially - closed-source technologies when preparing your proposal; these talks - are almost always rejected due to the fact that they take away from - the integrity of our events, and are rarely well-received by - conference attendees. -
    • -
  • - All accepted speakers are required to submit their slides prior to the - event. -
    • -
- - Preparing to Submit Your Proposal - -

- While it is not our intention to provide you with strict instructions on - how to prepare your proposal, we hope you will take a moment to review - the following guidelines that we have put together to help you prepare - the best submission possible. To get started, here are three things that - you should consider before submitting your proposal: -

-
    -
  • What are you hoping to get from your presentation?
    • -
  • What do you expect the audience to gain from your presentation?
    • -
  • How will your presentation help better the ecosystem?
    • -
-

- There are plenty of ways to give a presentation about projects and - technologies without focusing on company-specific efforts. Remember the - things to consider that we mentioned above when writing your proposal - and think of ways to make it interesting for attendees while still - letting you share your experiences, educate the community about an - issue, or generate interest in a project. -

- How to Give a Great Talk -

- We want to make sure submitters receive resources to help put together a - great submission and if accepted, give the best presentation possible. - To help with this, we recommend viewing seasoned speaker Dawn Foster's - in-depth talk:{" "} - - Getting Over Your Imposter Syndrome to Become a Conference Speaker – - Dawn Foster, VMware - - . -

- - Have More Questions? First Time Submitting? Don't Feel Intimidated - -

- Linux Foundation events are an excellent way to get to know the - community and share your ideas and the work that you are doing and we - strongly encourage first-time speakers to submit talks for our events. - In the instance that you aren't sure about your abstract,{" "} - - reach out to us - {" "} - and we will be more than happy to work with you on your proposal. -

- - ) -} - -function TypesTab() { - return ( - <> -

- Last Updated: 2025-04-02 -

- Submission Types -
    -
  • - Session Presentation: Typically 30 minutes in length, 1-2 speakers - presenting on a topic -
    • -
  • - Panel Discussion: Typically 30 minutes in length, 3-4 speakers - presenting on a topic -
    • -
  • Birds of a Feather: Typically 45 minutes to 1 hour in length
    • -
  • Lightning Talk: Typically 5-10 minutes in length
    • -
  • Workshop: Typically 1-2 hours in length
    • -
- - ) -} - -function ProcessTab() { - return ( - <> -

- Last Updated: 2025-04-02 -

- The Talk Selection Process -

- The GraphQL Foundation strives to select conference talks based on fair - criteria in a transparent manner. There are three groups involved in the - selection process, each with their own focus to help create an engaging - and balanced conference schedule: -

-
    -
  • The Technical Steering Committee (TSC)
    • -
  • The new Subject Matter Experts initiative (SMEs)
    • -
  • The Program Committee
    • -
- The Technical Steering Committee -

- The TSC are a group of 11 individuals who are elected to serve a two - year term to provide technical oversight of all GraphQL development - efforts. When evaluating conference talks they{" "} - focus on quality and use the following criteria: -

-
    -
  • Relevance
    • -
  • Originality
    • -
  • Soundness
    • -
  • Quality of Presentation
    • -
  • Importance
    • -
- Subject Matter Experts -

- The SME initiative is new for 2025. This will be a panel of volunteers - drawn from industry experts, working group members, security and - observability experts, and maintainers and contributors to open source - GraphQL projects. When evaluating the talks, they will{" "} - focus on how exciting and engaging the talks are and - use the following criteria: -

-
    -
  • Subject Content
    • -
  • Originality
    • -
  • Audience Engagement
    • -
- The Program Committee -

- The Program Committee is made up of representatives from the GraphQL - Foundation board and interested members of the GraphQL community who - have had experience organizing conferences. They shape the schedule from - the highest-rated talks, ensuring balance across industries and - affiliations, and also including a range of speaker experience and - demographics, to ensure a varied and well-rounded representation of the - GraphQL ecosystem. -

- - Have More Questions? First Time Submitting? Don't Feel Intimidated - -

- Linux Foundation events are an excellent way to get to know the - community and share your ideas and the work that you are doing and we - strongly encourage first-time speakers to submit talks for our events. - In the instance that you aren't sure about your abstract, reach out to - us and we will be more than happy to work with you on your proposal. -

- - ) -} - -export function Speakers() { - const [buttonText, setButtonText] = useState("Submit a Proposal") - const [isDisabled, setIsDisabled] = useState(false) - const [activeTab, setActiveTab] = useState("dates") - - useEffect(() => { - const checkDate = () => { - const currentDate = new Date() - const closingDate = new Date("2025-05-12T00:00:00Z") - if (currentDate >= closingDate) { - setButtonText("CFP Closed") - setIsDisabled(true) - } - } - - checkDate() - const timer = setInterval(checkDate, 60000) // Check every minute - - return () => clearInterval(timer) - }, []) - - const tabContent = { - dates: , - topics: , - types: , - notes: , - process: , - } - - return ( -
-

Call for Proposals

-

- Putting on an amazing conference depends on great content, which is - where you come in! Join other GraphQL leaders and community members as a - presenter by submitting to our Call for Proposals (CFP) and sharing your - experience across a wide range of topics. Please click through all of - the tabs below before submitting a proposal. -

-

- For any questions regarding the CFP process, please email{" "} - - cfp@linuxfoundation.org - - . -

- -

- Please be aware that the Linux Foundation uses Sessionize for CFP - submissions. Sessionize is a cloud-based event content management - software designed to be intuitive and user-friendly. If you need - guidance, please review{" "} - - how to submit your session - {" "} - for an event to see step-by-step instructions and helpful screenshots. -

-
-
- {["dates", "topics", "types", "notes", "process"].map(tab => ( - - ))} -
- {/* @ts-ignore - fine code */} -
{tabContent[activeTab]}
-
-
- ) -} diff --git a/src/app/conf/_design-system/button.tsx b/src/app/conf/_design-system/button.tsx index 6a8f8b4cd2..78957123e3 100644 --- a/src/app/conf/_design-system/button.tsx +++ b/src/app/conf/_design-system/button.tsx @@ -57,7 +57,7 @@ export type ButtonProps = export function Button(props: ButtonProps) { const className = clsx( - "relative flex items-center justify-center gap-2.5 font-normal text-base/none text-neu-0 bg-neu-900 hover:bg-neu-800 active:bg-neu-700 font-sans h-14 px-8 data-[size=md]:h-12 data-[variant=secondary]:bg-neu-100 data-[variant=secondary]:text-neu-900 data-[variant=secondary]:hover:bg-neu-200/75 data-[variant=secondary]:active:bg-neu-200/90 gql-focus-visible [aria-disabled]:bg-neu-800", + "relative flex items-center justify-center gap-2.5 font-normal text-base/none text-neu-0 bg-neu-900 hover:bg-neu-800 active:bg-neu-700 font-sans h-14 px-8 data-[size=md]:h-12 data-[variant=secondary]:bg-neu-100 data-[variant=secondary]:text-neu-900 data-[variant=secondary]:hover:bg-neu-200/75 data-[variant=secondary]:active:bg-neu-200/90 gql-focus-visible [aria-disabled]:bg-neu-800 aria-disabled:pointer-events-none", props.className, ) @@ -66,6 +66,8 @@ export function Button(props: ButtonProps) { if ("href" in props && typeof props.href === "string") { const { className: _1, size: _2, disabled, children, ...rest } = props + if (disabled) (rest as { href?: string }).href = undefined + return (