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

[YassinEldeeb]

Description

This adds custom pages for:

• /conf/schedule shows the schedule of the conference
• /conf/speakers shows a list of all of the speakers
• /conf/speakers/${username} shows the individual speaker's info and his/her talks
• /conf/schedule/${id} shows a schedule event's details.

But why?

In the currently deployed version, we're embedding an iframe of the https://graphqlconf23.sched.com/ page, this introduced quite a few issues:

• The speakers show up approx. after 2.5sec of loading after the time that the page takes to fully load, ~2sec of which is queued waiting for the website’s hydration. (visit https://graphql.org/conf/schedule to experience it)
• No direct control on what's showing up, previously this page (https://graphql.org/conf/schedule) showed the speakers, but now it shows the schedule, with an additional tab for "Speakers".
• No control over caching, instead of always fetching the speakers, it could have some time of caching, so that the page can be statically loaded for most visitors including web crawlers
• Loss of deep linking, since it’s a loaded iframe, the individual speaker’s page can’t be shared through a link, as the URL only internally changes, with the original domain being unchanged, “Schedule”, “Speakers” and “Individua's speaker” pages can’t be shared through a link.
• Since everything is loaded within an iframe, and it takes more than 2sec on average for the speakers to load independently from the page, it can significantly impact the SEO performance and ranking bc it can give up quicker or give a lower score, also while Google’s crawler is capable of crawling iframes, it treats the iframe as a separate page. This means the content within the iframe isn’t considered as part of the host page graphql.conf. And not all search engines can crawl iframes effectively.
• the individual’s speaker page has the info text wrapped weirdly, we have no control over the design of the components
• navigating back from an individual’s info to the speakers page jumps up at the start of the page, losing scrolling position

This hack of loading an iframe saved up a LOT of work, and the other approach of using Sched’s API took more work (but not too much) to design the components but solves all of the above issues.

This PR uses Sched's API and implements the individual pages related to the GraphQL Conference 2023 and statically builds them and serves them instantly because they're built beforehand. We've full control over the designs, and now we can share links on social media about the individual pieces of the conference (a specific speaker's page, speakers page, and schedule page)

⚠️ Note

For Gatsby to be able to use Sched's API to build those pages statically, we need to prove this env var by setting it in Gatsby Cloud Environment Variables

SCHED_ACCESS_TOKEN = "a readonly Sched's access token"

[gatsby-cloud]

✅ graphql.github.io-source deploy preview ready

• Deploy preview
• Build logs · 3m build time
• Performance 54 🟠 · Accessibility 77 🟠 · Best Practices 92 💚 · SEO 75 🟠 — View full report

[benjie]

Thanks for doing this, Yassin, the improved experience will be appreciated!