conf: style changes and seo improvements

src/components/Conf/Header/index.tsx

@@ -22,7 +22,7 @@ const LinksList = () => (
       <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"
+        className="px-2.5 text-2xl md:text-lg text-white font-medium hover:text-white focus:text-white"
       >
         {link.text}
       </a>
@@ -38,8 +38,8 @@ const HeaderConf = () => {
   }
 
   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-end justify-between">
+    <header className="bg-[#171E26] px-6 lg:px-0 gap-2 shadow-lg h-[70px]">
+      <div className="md: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"

src/components/Conf/Schedule/ScheduleList.tsx

@@ -2,7 +2,6 @@ import { format, parseISO, compareAsc } from "date-fns"
 import React, { FC, useEffect, useState } from "react"
 import { eventsColors } from "../../../templates/schedule"
 import { Tooltip } from "react-tooltip"
-import EventTemplate, { EventComponent } from "../../../templates/event"
 
 function groupByKey<T>(arr: T[], getKey: (entity: T) => any) {
   return Array.from<[string, T[]]>(
@@ -85,7 +84,6 @@ const ScheduleList: FC<Props> = ({
           width: "400px",
           maxHeight: "350px",
           overflowY: "hidden", // Set this to hidden
-          boxShadow: "0 25px 50px -12px rgb(0 0 0 / 0.25)",
           padding: "14px 20px",
         }}
         place="bottom-start"
@@ -113,8 +111,8 @@ const ScheduleList: FC<Props> = ({
       >
         <div>
           {hoveredSession && (
-            <div className="text-[#111827] flex flex-col gap-2">
-              <span className="text-lg font-medium">{hoveredSession.name}</span>
+            <div className="text-gray-800 flex flex-col gap-2">
+              <span className="font-medium">{hoveredSession.name}</span>
               <p className="" style={{ margin: 0 }}>
                 {hoveredSession?.description
                   ? hoveredSession?.description.slice(0, 350) + "..."
@@ -126,15 +124,15 @@ const ScheduleList: FC<Props> = ({
       </Tooltip>
 
       {groupedSessionsByDay.map(([date, concurrentSessionsGroup]) => (
-        <div key={date} className="text-[#111827]">
-          <h3 className="mt-10 mb-5 text-[22px]">
+        <div key={date} className="text-gray-800 text-sm">
+          <h3 className="mt-10 mb-5">
             {format(parseISO(date), "EEEE, MMMM d")}
           </h3>
           {concurrentSessionsGroup.map(([sharedStartDate, sessions]) => (
             <div key={`concurrent sessions on ${sharedStartDate}`}>
               <div className="lg:flex-row flex flex-col mb-4">
                 <div className="relative">
-                  <span className="lg:mr-7 mb-5 whitespace-nowrap text-gray-500 font-light lg:mt-0 text-base mt-3 inline-block lg:w-28 w-20">
+                  <span className="lg:mr-7 mb-5 whitespace-nowrap text-gray-500 lg:mt-0 mt-3 inline-block lg:w-28 w-20">
                     {format(parseISO(sharedStartDate), "hh:mmaaaa 'PDT'")}
                   </span>
                   <div className="lg:block hidden absolute right-3 top-0 h-full w-0.5 bg-gray-200" />
@@ -158,7 +156,7 @@ const ScheduleList: FC<Props> = ({
                           backgroundColor,
                           color: textColor,
                         }}
-                        className="py-2 px-4 rounded-md shadow-lg w-full h-full font-light"
+                        className="font-normal flex items-center py-2 px-4 rounded-md w-full h-full"
                       >
                         {showEventType ? singularEventType + " / " : ""}
                         {session.name}
@@ -170,7 +168,7 @@ const ScheduleList: FC<Props> = ({
                         href={`/conf/schedule/${session.id}?name=${session.name}`}
                         key={session.id}
                         style={{ backgroundColor, color: textColor }}
-                        className="relative py-2 px-4 rounded-md shadow-lg w-full h-full font-light no-underline hover:underline"
+                        className="font-normal flex items-center relative py-2 px-4 rounded-md w-full h-full no-underline hover:underline"
                         onMouseEnter={() => {
                           setHoveredSession(session)
                           setHoveredSessionId(`session-${session.id}`)

src/components/Conf/Seo/index.tsx

@@ -1,3 +1,4 @@
+import { graphql, useStaticQuery } from "gatsby"
 import React from "react"
 
 export const defaults = {
@@ -9,6 +10,22 @@ export const defaults = {
   image: "http://graphql.org/img/conf/social-pk.jpg",
 }
 
+export const useSiteMetadata = () => {
+  const data = useStaticQuery(graphql`
+    query {
+      site {
+        siteMetadata {
+          title
+          description
+          siteUrl
+        }
+      }
+    }
+  `)
+
+  return data.site.siteMetadata
+}
+
 export default function SeoConf(props: {
   title?: string
   twitterTitle?: string

src/templates/event.tsx

@@ -1,5 +1,5 @@
 import React, { FC } from "react"
-import { PageProps } from "gatsby"
+import { HeadProps, PageProps } from "gatsby"
 import FooterConf from "../components/Conf/Footer"
 import HeaderConf from "../components/Conf/Header"
 import LayoutConf from "../components/Conf/Layout"
@@ -56,7 +56,7 @@ export const EventComponent: FC<{
 }> = ({ event, speakers, hideBackButton }) => {
   return (
     <div className={`bg-white ${!hideBackButton ? "py-10" : ""}`}>
-      <section className="text-[#333333] min-h-[80vh] flex-col mx-auto max-sm:px-4 px-0 lg:justify-between justify-center max-w-[1100px]">
+      <section className="text-[#333333] min-h-[80vh] flex-col mx-auto px-6 lg:px-0 lg:justify-between justify-center override-prose-w-with-85ch">
         <div className="flex flex-col lg:px-0">
           {!hideBackButton && (
             <a
@@ -77,7 +77,7 @@ export const EventComponent: FC<{
           )}
           <div className="mt-10 flex flex-col">
             <div className="flex gap-3.5 mb-1.5">
-              <span className="text-[#f6009b] text-lg flex items-center">
+              <span className="text-[#f6009b] font-medium flex items-center">
                 <svg
                   className="mr-1.5 mb-0.5"
                   width={20}
@@ -94,7 +94,7 @@ export const EventComponent: FC<{
 
                 {format(parseISO(event.event_start), "EEEE, MMM d")}
               </span>
-              <span className="text-[#f6009b] text-lg flex items-center">
+              <span className="text-[#f6009b] font-medium flex items-center">
                 <svg
                   className="mr-1.5 mb-0.5"
                   width={20}
@@ -112,7 +112,7 @@ export const EventComponent: FC<{
                 {format(parseISO(event.event_start), "hh:mmaaaa 'PDT'")}
               </span>
             </div>
-            <h1 className="mt-0 lg:text-4xl text-3xl lg:leading-[50px] leading-[45px] font-medium mb-5">
+            <h1 className="mt-0 text-2xl lg:text-3xl font-medium mb-5">
               {/* Event name without speaker's name and company */}
               {event.name}
             </h1>
@@ -121,9 +121,7 @@ export const EventComponent: FC<{
               <Tag text={event.audience} />
               <Tag text={event.event_subtype} />
             </div>
-            <p className="mt-7 text-xl leading-9 lg:pr-20">
-              {event.description}
-            </p>
+            <p className="mt-7 lg:pr-20">{event.description}</p>
 
             <div className="flex lg:flex-row flex-col gap-4">
               {speakers?.map(speaker => (
@@ -137,14 +135,12 @@ export const EventComponent: FC<{
                   <div className="flex flex-col lg:gap-1 gap-1.5">
                     <a
                       href={`/conf/speakers/${speaker.username}`}
-                      className="lg:text-2xl text-xl mt-0 font-bold text-[#333333] underline"
+                      className="text-xl mt-0 font-bold text-[#333333] underline"
                     >
                       {speaker.name}
                     </a>
 
-                    <span className="lg:text-base text-sm">
-                      {renderPositionAndCompany(speaker)}
-                    </span>
+                    <span>{renderPositionAndCompany(speaker)}</span>
                     {!!speaker.socialurls?.length && (
                       <div className="mt-0 text-[#333333]">
                         <div className="flex gap-5 lg:gap-2.5">
@@ -191,8 +187,25 @@ const EventTemplate: FC<
 
 export default EventTemplate
 
-export function Head() {
-  return <SeoConf title="GraphQLConf 2023 Speaker" />
+export function Head({
+  pageContext,
+  location,
+}: HeadProps<{}, { event: ScheduleSession; speakers: SchedSpeaker[] }>) {
+  const { event } = pageContext
+
+  return (
+    <>
+      <SeoConf
+        title={`${event.name} | GraphQLConf 2023`}
+        description={event.description}
+        twitterTitle={`${event.name} | GraphQLConf 2023`}
+      />
+      <meta
+        property="og:url"
+        content={`https://graphql.org${location.pathname}`}
+      />
+    </>
+  )
 }
 
 function renderPositionAndCompany(speaker: SchedSpeaker) {

src/templates/schedule.tsx

@@ -9,11 +9,11 @@ import ScheduleList, {
 } from "../components/Conf/Schedule/ScheduleList"
 
 export const eventsColors = [
-  ["Breaks", "#a7b7c4", "#171c24"], // Cool light blue with Dark Blue-Gray text
-  ["Keynote Sessions", "#a56be8", "#ffffff"], // Vibrant Purple with White text
-  ["Lightning Talks", "#16a596", "#ffffff"], // Turquoise with White text
-  ["Session Presentations", "#ec4646", "#ffffff"], // Vibrant Red with White text
-  ["Workshops", "#e6812f", "#ffffff"], // Slightly Darker Orange with White text
+  ["Breaks", "#a7b7c485", "#000"], // Cool light blue with Dark Blue-Gray text
+  ["Keynote Sessions", "#a56be885", "#000"], // Vibrant Purple with White text
+  ["Lightning Talks", "#16a59680", "#000"], // Turquoise with White text
+  ["Session Presentations", "#ec464669", "#000"], // Vibrant Red with White text
+  ["Workshops", "#e6812f7d", "#000"], // Slightly Darker Orange with White text
 ]
 
 const ScheduleTemplate: FC<PageProps<{}, { schedule: ScheduleSession[] }>> = ({
@@ -24,7 +24,7 @@ const ScheduleTemplate: FC<PageProps<{}, { schedule: ScheduleSession[] }>> = ({
       <HeaderConf />
 
       <div className="bg-white">
-        <div className="prose lg:prose-lg mx-auto py-10 max-sm:px-4 override-prose-w-with-85ch">
+        <div className="prose lg:prose-lg mx-auto py-10 px-6 lg:px-0 override-prose-w-with-85ch">
           <h1>GraphQLConf 2023 Schedule</h1>
           <section className="px-0 my-8">
             <h4>September 19-21, 2023 I San Francisco Bay Area, CA</h4>
@@ -37,15 +37,12 @@ const ScheduleTemplate: FC<PageProps<{}, { schedule: ScheduleSession[] }>> = ({
               <b>subject to change</b>.
             </p>
 
-            <div className="flex lg:flex-row flex-col items-start mt-8 text-[#111827]">
-              <span className="font-medium text-2xl lg:mr-4 lg:mb-0 mb-4 whitespace-nowrap">
-                Event Types:
-              </span>
+            <div className="flex lg:flex-row flex-col items-start mt-8">
               <div className="flex gap-2.5 flex-wrap w-full">
                 {eventsColors.map(([event, color]) => (
                   <div className="flex items-center">
                     <div
-                      className="w-6 h-6 rounded-full mr-2 border border-solid border-gray-200"
+                      className="w-5 h-5 rounded-full mr-2 border border-solid border-gray-200"
                       style={{ background: color }}
                     />
                     <span>{event}</span>

src/templates/speaker.tsx

@@ -3,7 +3,7 @@ import FooterConf from "../components/Conf/Footer"
 import HeaderConf from "../components/Conf/Header"
 import LayoutConf from "../components/Conf/Layout"
 import SeoConf from "../components/Conf/Seo"
-import { PageProps } from "gatsby"
+import { HeadProps, PageProps } from "gatsby"
 import { SchedSpeaker } from "../components/Conf/Speakers/Speaker"
 import ScheduleList from "../components/Conf/Schedule/ScheduleList"
 import { Avatar } from "../components/Conf/Speakers/Avatar"
@@ -49,12 +49,12 @@ const SpeakersTemplate: FC<
       <HeaderConf />
 
       <div className="bg-white py-10">
-        <section className="text-[#333333] min-h-[80vh] flex-col mx-auto max-lg:px-4 px-0 lg:justify-between justify-center override-prose-w-with-85ch">
+        <section className="min-h-[80vh] flex-col mx-auto max-lg:px-4 px-6 lg:px-0 lg:justify-between justify-center override-prose-w-with-85ch">
           <>
             <div className="flex flex-col lg:px-0">
               <a
                 href="/conf/speakers"
-                className="w-max rounded-md cursor-pointer hover:opacity-80 transition-all underline text-[#333333] text-[18px]"
+                className="w-max rounded-md cursor-pointer hover:opacity-80 transition-all underline"
               >
                 <span
                   style={{
@@ -67,28 +67,26 @@ const SpeakersTemplate: FC<
                 </span>
                 <span>Back to Speakers</span>
               </a>
-              <div className="lg:mt-16 mt-6 flex lg:flex-row flex-col-reverse gap-10">
+              <div className="lg:mt-16 mt-6 flex lg:flex-row flex-col-reverse lg:gap-10">
                 <Avatar
                   className="w-[300px] h-[300px] rounded-full border-solid border-2 border-gray-300"
                   avatar={speaker.avatar}
                   name={speaker.name}
                 />
 
                 <div>
-                  <div className="flex justify-between items-center mt-5">
-                    <h2 className="text-[40px] mt-0 font-bold">
-                      {speaker.name}
-                    </h2>
+                  <div className="flex justify-between items-center">
+                    <h2 className="mt-0 font-bold">{speaker.name}</h2>
 
                     {!!speaker.socialurls?.length && (
-                      <div className="mt-0 text-[#333333]">
+                      <div className="mt-0">
                         <div className="flex gap-5 lg:gap-2.5">
                           {speaker.socialurls.map(social => (
                             <a
                               key={social.url}
                               href={social.url}
                               target="_blank"
-                              className="flex items-center text-[#333333] w-max"
+                              className="flex items-center w-max"
                             >
                               <SocialMediaIcon
                                 service={
@@ -105,17 +103,14 @@ const SpeakersTemplate: FC<
                     {renderPositionAndCompany(speaker)}
                   </div>
                   <p
-                    className="leading-8 lg:text-justify text-[18px]"
+                    className="lg:text-justify"
                     dangerouslySetInnerHTML={{ __html: speaker.about }}
                   />
                 </div>
               </div>
             </div>
 
             <div className="lg:mt-16 mt-10">
-              <h2 className="text-3xl font-medium mb-9 mt-0">
-                My Speakers Sessions:
-              </h2>
               {speaker && (
                 <ScheduleList
                   showEventType
@@ -139,8 +134,25 @@ const SpeakersTemplate: FC<
 
 export default SpeakersTemplate
 
-export function Head() {
-  return <SeoConf title="GraphQLConf 2023 Speaker" />
+export function Head({
+  pageContext,
+  location,
+}: HeadProps<{}, { speaker: SchedSpeaker }>) {
+  const { speaker } = pageContext
+
+  return (
+    <>
+      <SeoConf
+        title={`${speaker.name} | GraphQLConf 2023`}
+        description={speaker.about}
+        twitterTitle={`${speaker.name} | GraphQLConf 2023`}
+      />
+      <meta
+        property="og:url"
+        content={`https://graphql.org${location.pathname}`}
+      />
+    </>
+  )
 }
 
 function renderPositionAndCompany(speaker: SchedSpeaker) {
@@ -151,11 +163,7 @@ function renderPositionAndCompany(speaker: SchedSpeaker) {
   // Only include anchor element if url is not an empty string
   const companyElement =
     speaker.url !== "" ? (
-      <a
-        target="_blank"
-        className="text-[#333333] underline text-[18px]"
-        href={speaker.url}
-      >
+      <a target="_blank" className="underline" href={speaker.url}>
         {company}
       </a>
     ) : (

src/templates/speakers.tsx

@@ -46,7 +46,7 @@ const SpeakersTemplate: FC<PageProps<{}, { speakers: SchedSpeaker[] }>> = ({
       <HeaderConf />
 
       <div className="bg-white">
-        <div className="prose lg:prose-lg mx-auto py-10 max-lg:px-4 override-prose-w-with-85ch">
+        <div className="prose lg:prose-lg mx-auto py-10 px-6 lg:px-0 override-prose-w-with-85ch">
           <h1>GraphQLConf 2023 Speakers</h1>
           <p>
             Meet the unique lineup of insightful speakers we've carefully