Draft new Speakers and Schedule pages

Author: hasparus

src/app/conf/2025/_data.ts

@@ -0,0 +1,84 @@
+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}"`)
+    }
+
+    return {
+      ...session,
+      description: description && stripHtml(description).result,
+    }
+  })
+
+  return result
+}
+
+// @ts-expect-error -- fixme
+export const speakers = await getSpeakers()
+
+// @ts-expect-error -- fixme
+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/hero/index.tsx

@@ -14,7 +14,7 @@ export function Hero() {
   return (
     <article className="gql-conf-navbar-strip relative isolate flex flex-col justify-center bg-pri-base text-neu-0 selection:bg-blk/40 before:bg-white/30 dark:bg-pri-darker dark:text-neu-900 dark:selection:bg-white/40 before:dark:bg-blk/40">
       <article className="relative">
-        <Stripes />
+        <HeroStripes />
         <div className="gql-conf-container mx-auto flex max-w-full flex-col gap-12 overflow-hidden p-4 pt-6 sm:p-8 sm:pt-12 md:gap-12 md:bg-left md:p-12 lg:px-24 lg:pb-16 lg:pt-24">
           <div className="flex gap-10 max-md:flex-col md:justify-between">
             <h1 className="flex flex-wrap gap-2 typography-d1">
@@ -35,7 +35,7 @@ export function Hero() {
           </div>
 
           <div className="flex flex-col gap-8">
-            <DateAndLocation />
+            <HeroDateAndLocation />
             <Button className="md:w-fit" href={GET_TICKETS_LINK}>
               Get your tickets
             </Button>
@@ -55,7 +55,7 @@ export function Hero() {
   )
 }
 
-function DateAndLocation() {
+export function HeroDateAndLocation() {
   return (
     <div className="flex flex-col gap-4 typography-body-md md:flex-row md:gap-6">
       <div className="flex items-center gap-2">
@@ -77,7 +77,7 @@ const maskEven =
 const maskOdd =
   "repeating-linear-gradient(to right, black, black 12px, transparent 12px, transparent 24px)"
 
-function Stripes() {
+export function HeroStripes() {
   return (
     <ImageLoaded
       role="presentation"

src/app/conf/2025/components/image-loaded.tsx

@@ -3,19 +3,34 @@
 import type { StaticImageData } from "next/image"
 import { useEffect, useState } from "react"
 
+const _cache = new Map<string, HTMLImageElement>()
+
 export interface ImageLoadedProps extends React.HTMLAttributes<HTMLDivElement> {
   image: string | StaticImageData
 }
 
 export function ImageLoaded({ image, ...rest }: ImageLoadedProps) {
   const [loaded, setLoaded] = useState(false)
+  const src = typeof image === "string" ? image : image.src
+
+  const alreadyLoaded = _cache.get(src)?.complete
 
   useEffect(() => {
-    const img = new Image()
-    const src = typeof image === "string" ? image : image.src
-    img.src = src
-    img.onload = () => setLoaded(true)
-  }, [image])
+    let img: HTMLImageElement
+    if (_cache.has(src)) {
+      img = _cache.get(src)!
+      if (img.complete) {
+        setLoaded(true)
+      } else {
+        img.addEventListener("load", () => setLoaded(true))
+      }
+    } else {
+      img = new Image()
+      img.src = src
+      img.addEventListener("load", () => setLoaded(true))
+      _cache.set(src, img)
+    }
+  }, [src])
 
-  return <div data-loaded={loaded} {...rest} />
+  return <div data-loaded={alreadyLoaded || loaded} {...rest} />
 }

src/app/conf/2025/components/navbar.tsx

@@ -36,10 +36,7 @@ export function Navbar({ links, year }: NavbarProps): ReactElement {
           mobileDrawerOpen ? "static" : "absolute",
         )}
       />
-      <div
-        // placeholder: the colors here on `before` must match the ones on Hero `before` strip
-        className="absolute h-[calc(var(--navbar-h)+1px)] w-full bg-pri-base before:absolute before:top-0 before:h-[calc(var(--navbar-h)+1px)] before:w-full before:bg-white/30 dark:bg-pri-darker dark:before:bg-black/40"
-      />
+      <NavbarPlaceholder className="bg-pri-base before:bg-white/30 dark:bg-pri-darker dark:before:bg-black/40" />
       <header
         className={clsx(
           "gql-all-anchors-focusable top-0 z-10 w-full border-b border-black/60 font-mono text-neu-900 antialiased dark:border-white/80",
@@ -131,3 +128,19 @@ function BackdropBlur() {
     />
   )
 }
+
+export function NavbarPlaceholder({
+  className,
+  ...rest
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      // placeholder: the colors here on `before` must match the ones on Hero `before` strip
+      className={clsx(
+        "absolute h-[calc(var(--navbar-h)+1px)] w-full before:absolute before:top-0 before:h-[calc(var(--navbar-h)+1px)] before:w-full",
+        className,
+      )}
+      {...rest}
+    />
+  )
+}

src/app/conf/2025/layout.tsx

@@ -40,9 +40,9 @@ export default function Layout({
       <Navbar
         year={2025}
         links={[
-          { children: "Sponsor", href: "/conf/2025/#sponsors" },
-          { children: "Submit to Speak", href: "/conf/2025/#speakers" },
-          { children: "Register", href: "/conf/2025/#register" },
+          { children: "Schedule", href: "/conf/2025/schedule" },
+          { children: "Speakers", href: "/conf/2025/speakers" },
+          { children: "Sponsors", href: "/conf/2025/#sponsors" },
           { children: "Recap", href: "/conf/2024" },
           { children: "Resources", href: "/conf/2025/resources" },
           { children: "FAQ", href: "/conf/2025/#faq" },