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/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" },

src/app/conf/2025/schedule/[id]/page.tsx

@@ -0,0 +1,194 @@
+import { notFound } from "next/navigation"
+import { Metadata } from "next"
+import clsx from "clsx"
+import { format, parseISO } from "date-fns"
+
+import { metadata as layoutMetadata } from "@/app/conf/2023/layout"
+import { Avatar } from "../../../_components/speakers/avatar"
+import {
+  SocialMediaIcon,
+  SocialMediaIconServiceType,
+} from "../../../_components/speakers/social-media"
+import { speakers, schedule } from "../../_data"
+import { ScheduleSession } from "../../../2023/types"
+
+import { SessionVideo } from "./session-video"
+import { NavbarPlaceholder } from "../../components/navbar"
+import { BackLink } from "../_components/back-link"
+
+function getEventTitle(event: ScheduleSession, speakers: string[]): string {
+  let { name } = event
+
+  if (!speakers) {
+    return name
+  }
+
+  speakers?.forEach(speaker => {
+    const speakerInTitle = name.indexOf(`- ${speaker.replace("ı", "i")}`)
+    if (speakerInTitle > -1) {
+      name = name.slice(0, speakerInTitle)
+    }
+  })
+
+  return name
+}
+
+type SessionProps = { params: { id: string } }
+
+export function generateMetadata({ params }: SessionProps): Metadata {
+  const event = schedule.find(s => s.id === params.id)!
+
+  const keywords = [
+    event.event_type,
+    event.audience,
+    event.event_subtype,
+    ...(event.speakers || []).map(s => s.name),
+  ].filter(Boolean)
+
+  return {
+    title: event.name,
+    description: event.description,
+    keywords: [...layoutMetadata.keywords, ...keywords],
+    openGraph: {
+      images: `/img/__og-image/2024/${event.id}.png`,
+    },
+  }
+}
+
+export function generateStaticParams() {
+  return schedule.filter(s => s.id).map(s => ({ id: s.id }))
+}
+
+const Tag = ({
+  text,
+  featured = false,
+}: {
+  text: string
+  featured?: boolean
+}) =>
+  !text ? null : (
+    <span
+      className={clsx(
+        "h-max whitespace-nowrap rounded-full border border-solid px-3 py-1 typography-tagline",
+        featured && "border-2 border-pri-darker bg-pri-darker text-white",
+      )}
+    >
+      {text}
+    </span>
+  )
+
+export default function SessionPage({ params }: SessionProps) {
+  const event = schedule.find(s => s.id === params.id)
+  if (!event) {
+    notFound()
+  }
+
+  // @ts-expect-error -- fixme
+  event.speakers = (event.speakers || []).map(speaker =>
+    speakers.find(s => s.username === speaker.username),
+  )
+
+  const eventType = event.event_type.endsWith("s")
+    ? event.event_type.slice(0, -1)
+    : event.event_type
+
+  const eventTitle = getEventTitle(
+    event,
+    event.speakers!.map(s => s.name),
+  )
+
+  return (
+    <main className="gql-all-anchors-focusable">
+      <NavbarPlaceholder className="top-0 bg-neu-0 before:bg-white/40 dark:bg-pri-darker dark:before:bg-black/30" />
+      <div className="gql-conf-container gql-conf-navbar-strip text-neu-900 before:bg-white/40 before:dark:bg-blk/30">
+        <div className="py-10">
+          <section className="xs:px-0 mx-auto min-h-[80vh] flex-col justify-center px-2 md:container lg:justify-between">
+            <BackLink year="2025" kind="schedule" />
+            <SessionVideo event={event} eventTitle={eventTitle} />
+
+            <div className="mx-auto mt-10 flex flex-col self-center sm:space-y-4">
+              <div className="space-y-5">
+                <div className="flex flex-wrap gap-3">
+                  <Tag text={eventType} featured />
+                  <Tag text={event.audience} />
+                  <Tag text={event.event_subtype} />
+                </div>
+                <h1 className="mt-0 typography-h1">{eventTitle}</h1>
+                <time dateTime={event.event_start} className="mt-4">
+                  {format(
+                    parseISO(event.event_start),
+                    "EEEE, MMMM d / hh:mmaaaa 'PDT'",
+                  )}{" "}
+                  - {format(parseISO(event.event_end), "hh:mmaaaa 'PDT'")}
+                </time>
+              </div>
+              <div className="mt-8 flex flex-col flex-wrap gap-5 lg:flex-row">
+                {event.speakers!.map(speaker => (
+                  <div
+                    className={`flex w-full items-center gap-3 ${event?.speakers?.length || 0 > 1 ? "max-w-[320px]" : ""}`}
+                    key={speaker.username}
+                  >
+                    <Avatar
+                      className="size-[100px] rounded-full lg:size-[120px]"
+                      avatar={speaker.avatar}
+                      name={speaker.name}
+                    />
+
+                    <div className="flex flex-col gap-1.5 lg:gap-1">
+                      <a
+                        href={`/conf/2024/speakers/${speaker.username}`}
+                        className="mt-0 typography-body-lg"
+                      >
+                        {speaker.name}
+                      </a>
+
+                      <span className="typography-body-sm">
+                        <span>{speaker.company}</span>
+                        {speaker.company && ", "}
+                        {speaker.position}
+                      </span>
+                      {speaker.socialurls?.length ? (
+                        <div className="mt-0 text-[#333333]">
+                          <div className="flex space-x-2">
+                            {speaker.socialurls.map(social => (
+                              <a
+                                key={social.url}
+                                href={social.url}
+                                target="_blank"
+                                rel="noreferrer"
+                                className="flex items-center text-black"
+                              >
+                                <SocialMediaIcon
+                                  service={
+                                    social.service.toLowerCase() as SocialMediaIconServiceType
+                                  }
+                                />
+                              </a>
+                            ))}
+                          </div>
+                        </div>
+                      ) : null}
+                    </div>
+                  </div>
+                ))}
+              </div>
+              <p>{event.description}</p>
+
+              <div className="py-8">
+                {event.files?.map(({ path }) => (
+                  <div key={path}>
+                    <a href={path} target="_blank" rel="noreferrer">
+                      View Full PDF{" "}
+                      <span className="font-sans text-2xl font-light">↗</span>
+                    </a>
+                    <iframe src={path} className="aspect-video size-full" />
+                  </div>
+                ))}
+              </div>
+            </div>
+          </section>
+        </div>
+      </div>
+    </main>
+  )
+}