From b6b34aa7922836c50495344a7648fb181549880a Mon Sep 17 00:00:00 2001 From: Piotr Monwid-Olechnowicz Date: Thu, 1 May 2025 16:32:22 +0200 Subject: [PATCH 1/7] Add Call for Proposals section --- .../call-for-proposals.tsx} | 188 ++++++++++-------- src/app/conf/2025/page.tsx | 4 +- .../conf/2025/pixelarticons/arrow-down.svg | 3 + 3 files changed, 105 insertions(+), 90 deletions(-) rename src/app/conf/2025/{speakers.tsx => components/call-for-proposals.tsx} (71%) create mode 100644 src/app/conf/2025/pixelarticons/arrow-down.svg diff --git a/src/app/conf/2025/speakers.tsx b/src/app/conf/2025/components/call-for-proposals.tsx similarity index 71% rename from src/app/conf/2025/speakers.tsx rename to src/app/conf/2025/components/call-for-proposals.tsx index 5240155c04..ec86cd2b85 100644 --- a/src/app/conf/2025/speakers.tsx +++ b/src/app/conf/2025/components/call-for-proposals.tsx @@ -3,6 +3,8 @@ import clsx from "clsx" import { useState, useEffect, ReactNode } from "react" import Link from "next/link" +import { Button } from "../../_design-system/button" +import ArrowDownIcon from "../pixelarticons/arrow-down.svg?svgr" function TabHeading({ children, @@ -162,11 +164,7 @@ function NotesTab() { 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 @@ -180,13 +178,8 @@ function NotesTab() { 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. + reach out to us and we will + be more than happy to work with you on your proposal.

) @@ -286,10 +279,22 @@ function ProcessTab() { ) } -export function Speakers() { +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") + const [activeTab, setActiveTab] = useState("dates") useEffect(() => { const checkDate = () => { @@ -307,83 +312,90 @@ export function Speakers() { 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 => ( - - ))} + 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. +

+
- {/* @ts-ignore - fine code */} -
{tabContent[activeTab]}
+
+
+ {tabsInOrder.map((tab, i) => ( + + ))} +
+
{tabs[activeTab]}
+
) diff --git a/src/app/conf/2025/page.tsx b/src/app/conf/2025/page.tsx index 76ee2bd4f1..368cb3a1f6 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" @@ -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 @@ + + + From 628c8cf11b603b15f5ffc552f0175443369c2230 Mon Sep 17 00:00:00 2001 From: Piotr Monwid-Olechnowicz Date: Thu, 1 May 2025 19:47:38 +0200 Subject: [PATCH 2/7] make the dates table --- .../2025/components/call-for-proposals.tsx | 84 +++++++++++-------- 1 file changed, 49 insertions(+), 35 deletions(-) diff --git a/src/app/conf/2025/components/call-for-proposals.tsx b/src/app/conf/2025/components/call-for-proposals.tsx index ec86cd2b85..b81c6f57ae 100644 --- a/src/app/conf/2025/components/call-for-proposals.tsx +++ b/src/app/conf/2025/components/call-for-proposals.tsx @@ -22,34 +22,55 @@ function TabHeading({ 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 DefinitionListItem({ + className, + term, + definition, +}: { + className?: string + term: string + definition: string +}) { + return ( +
+
+ {term} +
+
+ {definition} +
+
+ ) +} function TopicsTab() { return ( <> -

- Last Updated: 2025-04-02 -

Suggested Topics
  • GraphQL Working Group
    • @@ -90,9 +111,6 @@ function TopicsTab() { function NotesTab() { return ( <> -

    - Last Updated: 2025-04-02 -

    Important Notes
    • @@ -188,9 +206,6 @@ function NotesTab() { function TypesTab() { return ( <> -

      - Last Updated: 2025-04-02 -

      Submission Types
      • @@ -212,9 +227,6 @@ function TypesTab() { function ProcessTab() { return ( <> -

        - Last Updated: 2025-04-02 -

        The Talk Selection Process

        The GraphQL Foundation strives to select conference talks based on fair @@ -315,7 +327,7 @@ export function CallForProposals() { return (

        -
        +

        Call for Proposals

        Putting on an amazing conference depends on great content, which is @@ -361,7 +373,7 @@ export function CallForProposals() { {buttonText}

        -
        +
        {tab.charAt(0).toUpperCase() + tab.slice(1)} - + ))}
        -
        {tabs[activeTab]}
        +
        + {tabs[activeTab]} +
        From 71165b6886644c8c2ae7ab67fa6eec4d8c0e1f89 Mon Sep 17 00:00:00 2001 From: Piotr Monwid-Olechnowicz Date: Thu, 1 May 2025 20:11:09 +0200 Subject: [PATCH 3/7] Improve styles --- .../2025/components/call-for-proposals.tsx | 45 ++++++++++--------- .../components/register-section/index.tsx | 4 +- src/app/conf/2025/page.tsx | 2 +- src/app/conf/_design-system/button.tsx | 4 +- src/globals.css | 3 +- 5 files changed, 31 insertions(+), 27 deletions(-) diff --git a/src/app/conf/2025/components/call-for-proposals.tsx b/src/app/conf/2025/components/call-for-proposals.tsx index b81c6f57ae..2af493dafa 100644 --- a/src/app/conf/2025/components/call-for-proposals.tsx +++ b/src/app/conf/2025/components/call-for-proposals.tsx @@ -70,7 +70,7 @@ function DefinitionListItem({ } function TopicsTab() { return ( - <> +
        Suggested Topics
        • GraphQL Working Group
          • @@ -104,13 +104,13 @@ function TopicsTab() {
        • Documentation
      - +
) } function NotesTab() { return ( - <> +
Important Notes
  • @@ -199,13 +199,13 @@ function NotesTab() { reach out to us and we will be more than happy to work with you on your proposal.

    - +
) } function TypesTab() { return ( - <> +
Submission Types
  • @@ -220,13 +220,13 @@ function TypesTab() {
  • Lightning Talk: Typically 5-10 minutes in length
  • Workshop: Typically 1-2 hours in length
- +
) } function ProcessTab() { return ( - <> +
The Talk Selection Process

The GraphQL Foundation strives to select conference talks based on fair @@ -287,7 +287,7 @@ function ProcessTab() { 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.

- +
) } @@ -386,20 +386,7 @@ export function CallForProposals() { aria-selected={activeTab === tab} className="gql-focus-visible flex items-center justify-between px-3 py-4 typography-body-lg hover:bg-sec-light focus:outline-none aria-selected:bg-sec-light" onFocus={() => setActiveTab(tab)} - onKeyDown={event => { - 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() - } - } - }} + onKeyDown={arrowsMoveSideways} > {tab.charAt(0).toUpperCase() + tab.slice(1)} @@ -414,3 +401,17 @@ export function CallForProposals() { ) } + +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() + } + } +} 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 368cb3a1f6..a7ff5277a4 100644 --- a/src/app/conf/2025/page.tsx +++ b/src/app/conf/2025/page.tsx @@ -20,7 +20,7 @@ export const metadata: Metadata = { export default function Page() { return ( -
+
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 ( Date: Thu, 1 May 2025 20:23:16 +0200 Subject: [PATCH 4/7] Begin mobile version --- src/app/conf/2025/components/call-for-proposals.tsx | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/src/app/conf/2025/components/call-for-proposals.tsx b/src/app/conf/2025/components/call-for-proposals.tsx index 2af493dafa..cb3f71b237 100644 --- a/src/app/conf/2025/components/call-for-proposals.tsx +++ b/src/app/conf/2025/components/call-for-proposals.tsx @@ -22,7 +22,7 @@ function TabHeading({ function DatesTab() { return ( -
+
-
+
+
{term}
-
+
{definition}
@@ -326,8 +326,8 @@ export function CallForProposals() { return (
-
-
+
+

Call for Proposals

Putting on an amazing conference depends on great content, which is @@ -373,6 +373,7 @@ export function CallForProposals() { {buttonText}

+ {/* todo: this might need to be a grid on mobile */}
Date: Thu, 1 May 2025 22:09:16 +0200 Subject: [PATCH 5/7] Tweak styles --- .../2025/components/call-for-proposals.tsx | 228 +++++++++++------- 1 file changed, 143 insertions(+), 85 deletions(-) diff --git a/src/app/conf/2025/components/call-for-proposals.tsx b/src/app/conf/2025/components/call-for-proposals.tsx index cb3f71b237..291bea2dbf 100644 --- a/src/app/conf/2025/components/call-for-proposals.tsx +++ b/src/app/conf/2025/components/call-for-proposals.tsx @@ -6,23 +6,9 @@ import Link from "next/link" import { Button } from "../../_design-system/button" import ArrowDownIcon from "../pixelarticons/arrow-down.svg?svgr" -function TabHeading({ - children, - className, -}: { - children: ReactNode - className?: string -}) { - return ( -

- {children} -

- ) -} - function DatesTab() { return ( -
+ -
+ ) } @@ -58,11 +44,11 @@ function DefinitionListItem({ definition: string }) { return ( -
-
+
+
{term}
-
+
{definition}
@@ -70,9 +56,9 @@ function DefinitionListItem({ } function TopicsTab() { return ( -
- Suggested Topics -
    +
    +

    Suggested Topics

    +
    • GraphQL Working Group
      • @@ -110,20 +96,20 @@ function TopicsTab() { function NotesTab() { return ( -
        - Important Notes - - The Technical Steering 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 -

          +

          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 @@ -262,13 +257,13 @@ function ProcessTab() { 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

            +

            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 @@ -277,10 +272,10 @@ function ProcessTab() { 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. @@ -325,7 +320,11 @@ export function CallForProposals() { }, []) return ( -

            +

            Call for Proposals

            @@ -340,7 +339,7 @@ export function CallForProposals() { For any questions regarding the CFP process, please email{" "} cfp@linuxfoundation.org @@ -354,7 +353,7 @@ export function CallForProposals() { how to submit your session {" "} @@ -377,25 +376,40 @@ export function CallForProposals() {
            {tabsInOrder.map((tab, i) => ( - + activeTab={activeTab} + setActiveTab={setActiveTab} + /> ))}
            -
            - {tabs[activeTab]} +
            + {tabsInOrder.map(tab => ( + <> + +
            + {tabs[tab]} +
            + + ))}
            @@ -403,6 +417,40 @@ export function CallForProposals() { ) } +interface TabButtonProps + extends Omit, "onFocus"> { + tab: Tab + tabIndex?: number + activeTab: Tab + setActiveTab: (tab: Tab) => void +} + +function TabButton({ + tab, + tabIndex, + activeTab, + setActiveTab, + ...props +}: TabButtonProps) { + return ( + + ) +} + function arrowsMoveSideways(event: React.KeyboardEvent) { if (event.key === "ArrowLeft") { const previousElement = event.currentTarget.previousElementSibling @@ -416,3 +464,13 @@ function arrowsMoveSideways(event: React.KeyboardEvent) { } } } + +function DefinitionListBox({ children }: { children: React.ReactNode }) { + return ( +
            +
            + {children} +
            +
            + ) +} From 870dbed5a198fdc8d624e21c392272e325f7c687 Mon Sep 17 00:00:00 2001 From: Piotr Monwid-Olechnowicz Date: Thu, 1 May 2025 22:54:19 +0200 Subject: [PATCH 6/7] Add the stripes --- .../2025/components/call-for-proposals.tsx | 103 +++++++++++++----- 1 file changed, 73 insertions(+), 30 deletions(-) diff --git a/src/app/conf/2025/components/call-for-proposals.tsx b/src/app/conf/2025/components/call-for-proposals.tsx index 291bea2dbf..b6a32faaf8 100644 --- a/src/app/conf/2025/components/call-for-proposals.tsx +++ b/src/app/conf/2025/components/call-for-proposals.tsx @@ -98,7 +98,7 @@ function NotesTab() { return (

            Important Notes

            -
              +
              • All speakers are required to adhere to our{" "} -
                  +
                  • 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?
                    • @@ -192,30 +192,28 @@ function NotesTab() { function TypesTab() { return ( -
                    -
                    - - - - - -
                    -
                    + + + + + + + ) } @@ -326,7 +324,7 @@ export function CallForProposals() { className="gql-conf-section gql-conf-container dark:text-neu-0" >
                    -
                    +

                    Call for Proposals

                    Putting on an amazing conference depends on great content, which is @@ -387,7 +385,7 @@ export function CallForProposals() { /> ))}

                    -
                    +
                    {tabsInOrder.map(tab => ( <> { console.log("focus") setActiveTab(tab) @@ -467,10 +469,51 @@ function arrowsMoveSideways(event: React.KeyboardEvent) { 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 ( +
                    +
                    +
                    ) } From e6c9e43c56921ae572fc4b6f30d4b77827595129 Mon Sep 17 00:00:00 2001 From: Piotr Monwid-Olechnowicz Date: Wed, 7 May 2025 14:15:02 +0200 Subject: [PATCH 7/7] Add missing keys --- src/app/conf/2025/components/call-for-proposals.tsx | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/app/conf/2025/components/call-for-proposals.tsx b/src/app/conf/2025/components/call-for-proposals.tsx index b6a32faaf8..f6784b0764 100644 --- a/src/app/conf/2025/components/call-for-proposals.tsx +++ b/src/app/conf/2025/components/call-for-proposals.tsx @@ -1,7 +1,7 @@ "use client" import clsx from "clsx" -import { useState, useEffect, ReactNode } from "react" +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" @@ -370,7 +370,6 @@ export function CallForProposals() { {buttonText}
                    - {/* todo: this might need to be a grid on mobile */}
                    {tabsInOrder.map(tab => ( - <> + {tabs[tab]}
                    - + ))}