feat: custom speakers, individual speaker, and schedule pages for conf (graphql#1497)

* feat: custom speakers, individual speaker, and schedule pages for conf

* fix: default avatar pink link

* add social links

* add trailing ... to long social handles

* better social media icons

* text justify on bio

* better back to speakers link

* ci: read gatsby's env var

* debug

* chore: remove debug

* build: fix

* feat: show concurrent events and events gloassary

* some style fixes

* custom event page

* fix: speakers breaking the build

* fix: event title, show event name

* fix: tag styles

* fix: sorting inconsistency on different browsers

* new color palette for schedule

* rearrange event tags

* lots of improvements

* fix: build issue

Author: YassinEldeeb

.github/workflows/CI.yml

@@ -13,6 +13,9 @@ jobs:
 
       - run: yarn install
 
+      - name: Set Sched's API token env
+        run: echo "SCHED_ACCESS_TOKEN=${{ secrets.SCHED_ACCESS_TOKEN }}" >> .env.production
+
       # Verify it compiles
       - run: yarn build
 

gatsby-node.ts

@@ -1,11 +1,18 @@
+import { ScheduleSession } from "./src/components/Conf/Schedule/ScheduleList"
+import { SchedSpeaker } from "./src/components/Conf/Speakers/Speaker"
 import { GatsbyNode } from "gatsby"
 import * as path from "path"
 import { glob } from "glob"
+import _ from "lodash"
 import { updateCodeData } from "./scripts/update-code-data/update-code-data"
 import { organizeCodeData } from "./scripts/update-code-data/organize-code-data"
 import { sortCodeData } from "./scripts/update-code-data/sort-code-data"
 import redirects from "./redirects.json"
 
+require("dotenv").config({
+  path: `.env.${process.env.NODE_ENV}`,
+})
+
 export const createSchemaCustomization: GatsbyNode["createSchemaCustomization"] =
   async ({ actions }) => {
     const gql = String.raw
@@ -111,12 +118,93 @@ export const onCreatePage: GatsbyNode["onCreatePage"] = async ({
   })
 }
 
+const fetchData = async (url: string) => {
+  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.message || error.toString()}`
+    )
+  }
+}
+
 export const createPages: GatsbyNode["createPages"] = async ({
   actions,
   graphql,
 }) => {
   const { createPage, createRedirect } = actions
 
+  try {
+    const schedAccessToken = process.env.SCHED_ACCESS_TOKEN
+
+    const schedule: ScheduleSession[] = await fetchData(
+      `https://graphqlconf23.sched.com/api/session/list?api_key=${schedAccessToken}&format=json`
+    )
+
+    const usernames: { username: string }[] = await fetchData(
+      `https://graphqlconf23.sched.com/api/user/list?api_key=${schedAccessToken}&format=json&fields=username`
+    )
+
+    // Fetch full info of each speaker individually and concurrently
+    const speakers: SchedSpeaker[] = await Promise.all(
+      usernames.map(async user => {
+        await new Promise(resolve => setTimeout(resolve, 2000)) // 2 second delay between requests, rate limit is 30req/min
+        return fetchData(
+          `https://graphqlconf23.sched.com/api/user/get?api_key=${schedAccessToken}&by=username&term=${user.username}&format=json&fields=username,company,position,name,about,location,url,avatar,role,socialurls`
+        )
+      })
+    )
+
+    // Create schedule page
+    createPage({
+      path: "/conf/schedule",
+      component: path.resolve("./src/templates/schedule.tsx"),
+      context: { schedule },
+    })
+
+    // Create schedule events' pages
+    schedule.forEach(event => {
+      const eventSpeakers = speakers.filter(e =>
+        event.speakers?.includes(e.name)
+      )
+
+      createPage({
+        path: `/conf/schedule/${event.id}`,
+        component: path.resolve("./src/templates/event.tsx"),
+        context: {
+          event,
+          speakers: eventSpeakers,
+        },
+      })
+    })
+
+    // Create speakers list page
+    createPage({
+      path: "/conf/speakers",
+      component: path.resolve("./src/templates/speakers.tsx"),
+      context: { speakers },
+    })
+
+    // Create a page for each speaker
+    speakers.forEach(speaker => {
+      createPage({
+        path: `/conf/speakers/${speaker.username}`,
+        component: path.resolve("./src/templates/speaker.tsx"),
+        context: { speaker, schedule },
+      })
+    })
+  } catch (error) {
+    console.log("CATCH ME:", error)
+  }
+
   createRedirect({
     fromPath: "/conf/program",
     toPath: "/conf/schedule",

package.json

@@ -26,6 +26,7 @@
     "clsx": "1.2.1",
     "codemirror": "5.65.1",
     "codemirror-graphql": "1.3.2",
+    "date-fns": "^2.30.0",
     "gatsby": "5.10.0",
     "gatsby-plugin-anchor-links": "1.2.1",
     "gatsby-plugin-feed": "5.10.0",
@@ -43,13 +44,15 @@
     "prismjs": "1.29.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-tooltip": "^5.18.1",
     "timeago.js": "4.0.2"
   },
   "devDependencies": {
     "@svgr/webpack": "^8.0.0",
     "@tailwindcss/typography": "0.5.9",
     "@types/codemirror": "5.60.7",
     "@types/prismjs": "1.26.0",
+    "@types/react-tooltip": "^4.2.4",
     "@typescript-eslint/parser": "5.59.7",
     "autoprefixer": "10.4.14",
     "eslint": "8.42.0",

src/assets/css/global.css

@@ -1,4 +1,4 @@
-/*@tailwind base;*/
+@tailwind base;
 @tailwind components;
 @tailwind utilities;
 

src/components/Conf/Header/index.tsx

@@ -1,45 +1,96 @@
-import React from "react"
+import React, { useState } from "react"
 import ButtonConf from "../Button"
+import { Cross2Icon } from "@radix-ui/react-icons"
 
 interface LinkItem {
   text: string
   href: string
-  noMobile?: boolean
 }
 
 const links: LinkItem[] = [
   { text: "Attend", href: "/conf/#attend" },
+  { text: "Speakers", href: "/conf/speakers/" },
   { text: "Schedule", href: "/conf/schedule/" },
   { text: "Sponsor", href: "/conf/sponsor/" },
   { text: "Partner", href: "/conf/partner/" },
   { text: "FAQ", href: "/conf/faq/" },
 ]
 
+const LinksList = () => (
+  <>
+    {links.map(link => (
+      <a
+        key={link.href}
+        href={link.href}
+        className="px-2.5 text-2xl md:text-lg text-white font-medium hover:text-white focus:text-white w-max"
+      >
+        {link.text}
+      </a>
+    ))}
+  </>
+)
+
 const HeaderConf = () => {
+  const [mobileDrawerOpen, setMobileDrawerOpen] = useState(false)
+
+  const handleDrawerClick = () => {
+    setMobileDrawerOpen(!mobileDrawerOpen)
+  }
+
   return (
     <header className="bg-[#171E26] gap-2 shadow-lg px-5 h-[70px]">
-      <div className="container flex items-center h-full gap-5 max-sm:justify-center">
+      <div className="container flex items-center h-full gap-5 max-sm:justify-end justify-between">
         <a href="/conf/" className="shrink-0 max-sm:hidden">
           <img
             src="/img/conf/graphql-conf-logo-simple.svg"
-            className="mt-[5px] mr-2 max-md:w-24"
+            className="mt-[5px] mr-2"
           />
         </a>
-        {links.map(link => (
-          <a
-            key={link.href}
-            href={link.href}
-            className="text-sm sm:text-lg text-white font-medium hover:text-white focus:text-white"
-          >
-            {link.text}
-          </a>
-        ))}
-        <ButtonConf
-          href="https://cvent.me/4zbxz9"
-          className="ml-auto max-sm:hidden"
+
+        {mobileDrawerOpen && (
+          <div
+            onClick={handleDrawerClick}
+            className="bg-black opacity-50 fixed inset-0 z-10"
+          />
+        )}
+
+        <nav
+          className={`lg:transform-none ${
+            mobileDrawerOpen ? "translate-x-0" : "translate-x-full"
+          }  lg:w-full lg:justify-between justify-start fixed lg:static bg-[#171e26] h-full lg:h-auto right-0 top-0 transition-transform duration-200 ease-in-out z-20 lg:items-center items-start min-w-[75%] flex flex-col lg:flex-row py-10 px-8 lg:p-0`}
+        >
+          {mobileDrawerOpen && (
+            <Cross2Icon
+              onClick={handleDrawerClick}
+              className="lg:hidden text-white w-9 h-9 mb-2 cursor-pointer"
+            />
+          )}
+          <div className="lg:block lg:gap-0 lg:mt-0 flex flex-col gap-5 mt-7">
+            <LinksList />
+          </div>
+
+          <div className="lg:flex items-center gap-5 mt-5 lg:mt-0 hidden">
+            <ButtonConf
+              href="https://cvent.me/4zbxz9"
+              className="ml-auto lg:visible"
+            >
+              Buy a Ticket!
+            </ButtonConf>
+          </div>
+        </nav>
+
+        <div
+          className="flex items-center space-x-4 lg:hidden"
+          onClick={handleDrawerClick}
         >
-          Buy a Ticket!
-        </ButtonConf>
+          <ButtonConf href="https://cvent.me/4zbxz9" className="lg:hidden">
+            Buy a Ticket!
+          </ButtonConf>
+          <div className="space-y-2 cursor-pointer py-3">
+            <span className="block w-8 h-0.5 bg-white"></span>
+            <span className="block w-5 h-0.5 bg-white"></span>
+          </div>
+        </div>
       </div>
     </header>
   )