new conf design — speakers and schedule

src/app/conf/2023/page.tsx

@@ -24,7 +24,7 @@ export default function ConfPage() {
 
 function Hero() {
   return (
-    <div className="bg-black/20 bg-[url('/img/conf/graphql-conf-bg.png')] bg-cover text-white bg-blend-multiply max-md:text-base">
+    <div className="bg-blk/20 bg-[url('/img/conf/graphql-conf-bg.png')] bg-cover text-white bg-blend-multiply max-md:text-base">
       <div className="container py-16 md:py-20">
         <div className="flex items-center gap-6">
           <GraphQLConf className="h-14" />

src/app/conf/2025/_data.ts

@@ -0,0 +1,85 @@
+import "server-only"
+import { stripHtml } from "string-strip-html"
+import { SchedSpeaker, ScheduleSession } from "@/app/conf/2023/types"
+import pLimit from "p-limit"
+
+async function fetchData<T>(url: string): Promise<T> {
+  try {
+    const response = await fetch(url, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "User-Agent": "GraphQL Conf / GraphQL Foundation",
+      },
+    })
+    const data = await response.json()
+    return data
+  } catch (error) {
+    throw new Error(
+      `Error fetching data from ${url}: ${(error as Error).message || (error as Error).toString()}`,
+    )
+  }
+}
+
+const token = process.env.SCHED_ACCESS_TOKEN_2024
+
+async function getUsernames(): Promise<string[]> {
+  const response = await fetchData<{ username: string }[]>(
+    `https://graphqlconf2024.sched.com/api/user/list?api_key=${token}&format=json&fields=username`,
+  )
+  return response.map(user => user.username)
+}
+
+const limit = pLimit(40) // rate limit is 30req/min
+
+async function getSpeakers(): Promise<SchedSpeaker[]> {
+  const usernames = await getUsernames()
+
+  const users = await Promise.all(
+    usernames.map(username =>
+      limit(() => {
+        return fetchData<SchedSpeaker>(
+          `https://graphqlconf2024.sched.com/api/user/get?api_key=${token}&by=username&term=${username}&format=json&fields=username,company,position,name,about,location,url,avatar,role,socialurls`,
+        )
+      }),
+    ),
+  )
+
+  const result = users
+    .filter(speaker => speaker.role.includes("speaker"))
+    .map(user => {
+      return {
+        ...user,
+        about: stripHtml(user.about).result,
+      }
+    })
+
+  return result
+}
+
+async function getSchedule(): Promise<ScheduleSession[]> {
+  const sessions = await fetchData<ScheduleSession[]>(
+    `https://graphqlconf2024.sched.com/api/session/export?api_key=${token}&format=json`,
+  )
+
+  const result = sessions.map(session => {
+    const { description } = session
+    if (description?.includes("<")) {
+      // console.log(`Found HTML element in about field for session "${session.name}"`)
+    }
+
+    // TODO: Preserve formatting??
+
+    return {
+      ...session,
+      description: description && stripHtml(description).result,
+    }
+  })
+
+  return result
+}
+
+export const speakers = await getSpeakers()
+
+// TODO: Collect tags from schedule for speakers.
+export const schedule = await getSchedule()

src/app/conf/2025/_videos.ts

@@ -0,0 +1,10 @@
+export const videos: {
+  id: string
+  title: string
+}[] = [
+  // temporary
+  {
+    id: "fA81OFu9BVY",
+    title: `Top 10 GraphQL Security Checks for Every Developer - Ankita Gupta, Ankush Jain - Akto.io`,
+  },
+]

src/app/conf/2025/components/become-a-sponsor/index.tsx

@@ -0,0 +1,125 @@
+import clsx from "clsx"
+
+import { Button } from "../../../_design-system/button"
+
+import blurBlob from "./blur-blob.webp"
+import { StripesDecoration } from "@/app/conf/_design-system/stripes-decoration"
+
+export function BecomeASponsor() {
+  return (
+    <section id="sponsors" className="relative overflow-hidden">
+      <Stripes />
+      <div className="gql-conf-container gql-conf-section xl:py-16">
+        <header className="flex flex-col gap-x-48 gap-y-4 md:flex-row md:items-end md:justify-between">
+          <div>
+            <h2 className="typography-h2">Become a Sponsor</h2>
+            <p className="mt-6 text-pretty typography-body-lg">
+              Connect with the global GraphQL community and showcase your brand
+              to industry leaders and decision-makers.
+            </p>
+          </div>
+          <Button
+            variant="primary"
+            href="https://events.linuxfoundation.org/sponsor-GraphQLConf-25?utm_source=graphql_conf_2025&utm_medium=website&utm_campaign=sponsor_section"
+            target="_blank"
+            rel="noreferrer"
+            className="shrink-0"
+          >
+            Download the Prospectus
+          </Button>
+        </header>
+        <dl className="relative z-10 mt-10 border border-neu-300 md:backdrop-blur-[6.4px] xl:mt-16">
+          <DefinitionListItem
+            term="Brand Visibility"
+            definition="Showcase your brand to thousands of GraphQL enthusiasts and decision-makers."
+          />
+          <DefinitionListItem
+            term="Lead Generation"
+            definition="Connect with potential customers and partners in the GraphQL ecosystem."
+          />
+          <DefinitionListItem
+            term="Thought Leadership"
+            definition="Position your company as a leader in the GraphQL space."
+          />
+          <DefinitionListItem
+            term="Talent Acquisition"
+            definition="Meet and recruit top GraphQL developers and engineers."
+          />
+          <DefinitionListItem
+            term="Product Feedback"
+            definition="Gather valuable feedback from the GraphQL community."
+          />
+          <DefinitionListItem
+            term="Community Impact"
+            definition="Support and shape the future of GraphQL technology."
+          />
+        </dl>
+      </div>
+    </section>
+  )
+}
+
+function DefinitionListItem({
+  className,
+  term,
+  definition,
+}: {
+  className?: string
+  term: string
+  definition: string
+}) {
+  return (
+    <div
+      className={clsx(
+        className,
+        "flex border-b border-neu-300 last:border-b-0 max-sm:flex-col",
+      )}
+    >
+      <dt className="flex min-w-[320px] shrink-0 items-center whitespace-pre border-b border-neu-300 p-4 typography-body-lg max-sm:w-full sm:border-b-0 sm:border-r">
+        {term}
+      </dt>
+      <dd className="flex items-center p-4 typography-body-md">{definition}</dd>
+    </div>
+  )
+}
+
+function Stripes() {
+  return (
+    <div
+      role="presentation"
+      // prettier-ignore
+      // false positive
+      // eslint-disable-next-line tailwindcss/no-contradicting-classname
+      className="pointer-events-none absolute inset-0
+        [--start-1:hsl(var(--color-sec-lighter))]
+        [--end-1:hsl(hsl(320deg_100%_96%/.8)]
+        dark:[--start-1:hsl(var(--color-sec-lighter))]
+        dark:[--end-1:hsl(var(--color-pri-lighter)/.2)]
+
+        [--start-2:#FFEAF8]
+        [--end-2:hsl(var(--color-neu-0))]
+        dark:[--start-2:rgba(255,204,239,.1)]
+        dark:[--end-2:hsl(var(--color-pri-lighter)/.4)]
+
+        translate-y-12
+
+        [mask-size:120%]
+        3xl:[mask-size:2000px] 2xl:opacity-50
+        max-md:[mask-size:600%] max-md:opacity-50
+      "
+      style={{
+        maskImage: `url(${blurBlob.src})`,
+        WebkitMaskImage: `url(${blurBlob.src})`,
+        maskPosition: "center",
+        WebkitMaskPosition: "center",
+        maskRepeat: "no-repeat",
+        WebkitMaskRepeat: "no-repeat",
+      }}
+    >
+      <StripesDecoration
+        evenClassName="bg-[linear-gradient(180deg,var(--start-1)_-200%,var(--end-1)_100%)]"
+        oddClassName="bg-[linear-gradient(180deg,var(--start-2)_0%,var(--end-2)_100%)]"
+      />
+    </div>
+  )
+}

src/app/conf/2025/components/call-for-proposals.tsx

@@ -44,7 +44,7 @@ function DefinitionListItem({
   definition: string
 }) {
   return (
-    <div className={clsx(className, "flex typography-body-md max-sm:flex-col")}>
+    <div className={clsx(className, "typography-body-md flex max-sm:flex-col")}>
       <dt className="flex w-[184.5px] shrink-0 items-center whitespace-pre border-neu-300 bg-white/[0.79] px-3 py-2 max-sm:w-full sm:border-r sm:p-4">
         {term}
       </dt>
@@ -139,7 +139,7 @@ function NotesTab() {
           event.
         </li>
       </ul>
-      <h3 className="mt-6 typography-h3">Preparing to Submit Your Proposal</h3>
+      <h3 className="typography-h3 mt-6">Preparing to Submit Your Proposal</h3>
       <p className="mt-2">
         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
@@ -160,7 +160,7 @@ function NotesTab() {
         letting you share your experiences, educate the community about an
         issue, or generate interest in a project.
       </p>
-      <h3 className="mt-6 typography-h3">How to Give a Great Talk</h3>
+      <h3 className="typography-h3 mt-6">How to Give a Great Talk</h3>
       <p className="mt-2">
         We want to make sure submitters receive resources to help put together a
         great submission and if accepted, give the best presentation possible.
@@ -175,7 +175,7 @@ function NotesTab() {
         </a>
         .
       </p>
-      <h3 className="mt-6 typography-h3">
+      <h3 className="typography-h3 mt-6">
         Have More Questions? First Time Submitting? Don't Feel Intimidated
       </h3>
       <p className="mt-2">
@@ -237,7 +237,7 @@ function ProcessTab() {
         <li>The new Subject Matter Experts initiative (SMEs)</li>
         <li>The Program Committee</li>
       </ul>
-      <h3 className="mt-6 typography-h3">The Technical Steering Committee</h3>
+      <h3 className="typography-h3 mt-6">The Technical Steering Committee</h3>
       <p className="mt-2">
         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
@@ -251,7 +251,7 @@ function ProcessTab() {
         <li>Quality of Presentation</li>
         <li>Importance</li>
       </ul>
-      <h3 className="mt-6 typography-h3">Subject Matter Experts</h3>
+      <h3 className="typography-h3 mt-6">Subject Matter Experts</h3>
       <p className="mt-2">
         The SME initiative is new for 2025. This will be a panel of volunteers
         drawn from industry experts, working group members, security and
@@ -265,7 +265,7 @@ function ProcessTab() {
         <li>Originality</li>
         <li>Audience Engagement</li>
       </ul>
-      <h3 className="mt-6 typography-h3">The Program Committee</h3>
+      <h3 className="typography-h3 mt-6">The Program Committee</h3>
       <p className="mt-2">
         The Program Committee is made up of representatives from the GraphQL
         Foundation board and interested members of the GraphQL community who
@@ -275,7 +275,7 @@ function ProcessTab() {
         demographics, to ensure a varied and well-rounded representation of the
         GraphQL ecosystem.
       </p>
-      <h3 className="mt-6 typography-h3">
+      <h3 className="typography-h3 mt-6">
         Have More Questions? First Time Submitting? Don't Feel Intimidated
       </h3>
       <p className="mt-2">
@@ -348,7 +348,7 @@ export function CallForProposals() {
             </a>
             .
           </p>
-          <p className="mt-6 typography-body-sm md:mt-10">
+          <p className="typography-body-sm mt-6 md:mt-10">
             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
@@ -382,6 +382,7 @@ export function CallForProposals() {
           >
             {tabsInOrder.map((tab, i) => (
               <TabButton
+                key={tab}
                 tab={tab}
                 tabIndex={i === 0 ? 0 : -1}
                 activeTab={activeTab}
@@ -441,7 +442,7 @@ function TabButton({
       tabIndex={tabIndex}
       aria-selected={activeTab === tab}
       className={clsx(
-        "gql-focus-visible flex items-center justify-between px-3 py-4 typography-body-lg hover:bg-sec-light focus:outline-none max-lg:border-b max-lg:border-sec-dark max-lg:first:border-t lg:[--collapsible:1] lg:aria-selected:bg-sec-light",
+        "gql-focus-visible typography-body-lg flex items-center justify-between px-3 py-4 hover:bg-sec-light focus:outline-none max-lg:border-b max-lg:border-sec-dark max-lg:first:border-t lg:[--collapsible:1] lg:aria-selected:bg-sec-light",
         className,
       )}
       onFocus={() => {

src/app/conf/2025/components/cta-card-section/index.tsx

@@ -0,0 +1,66 @@
+import { StripesDecoration } from "@/app/conf/_design-system/stripes-decoration"
+
+import logoMask from "./logo-mask.webp"
+
+export interface CtaCardSectionProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "title"> {
+  title: React.ReactNode
+  description: string
+  children: React.ReactNode
+}
+
+export function CtaCardSection({
+  className,
+  title: heading,
+  description,
+  children,
+  ...rest
+}: CtaCardSectionProps) {
+  return (
+    <div className="gql-conf-section">
+      <section
+        className="relative overflow-hidden bg-gradient-to-r from-pri-dark to-pri-base p-6 dark:from-pri-darker dark:to-pri-dark sm:p-16"
+        {...rest}
+      >
+        <div className="relative z-10 flex flex-col gap-10 sm:items-start [@media(max-width:420px)]:text-center">
+          <div className="flex flex-col gap-6">
+            <h2 className="typography-d1 text-neu-0 dark:text-neu-900">
+              {heading}
+            </h2>
+            <p className="typography-body-lg max-w-[555px] text-pretty text-neu-50 dark:text-neu-800">
+              {description}
+            </p>
+          </div>
+
+          {children}
+        </div>
+
+        <div
+          role="presentation"
+          // prettier-ignore
+          className="
+              pointer-events-none absolute
+              sm:bottom-[-277px] inset-0 sm:left-1/3 xl:left-1/2 sm:top-[-107px] xl:right-[-391px]
+              [--start:hsl(var(--color-sec-base))]
+              [--end:hsl(var(--color-sec-lighter))]
+              dark:[--start:hsl(var(--color-sec-dark))]
+              dark:[--end:hsl(var(--color-sec-base))]
+
+              [mask-size:cover]
+              max-sm:[mask-position:center] max-sm:opacity-50
+              sm:[mask-size:1117px]
+            "
+          style={{
+            maskImage: `url(${logoMask.src})`,
+            maskRepeat: "no-repeat",
+          }}
+        >
+          <StripesDecoration
+            thin
+            oddClassName="bg-[linear-gradient(180deg,var(--start)_0%,var(--end)_100%)]"
+          />
+        </div>
+      </section>
+    </div>
+  )
+}