diff --git a/src/components/Conf/Header/index.tsx b/src/components/Conf/Header/index.tsx index 96a7d8be7d..b1b4d22c3e 100644 --- a/src/components/Conf/Header/index.tsx +++ b/src/components/Conf/Header/index.tsx @@ -22,7 +22,7 @@ const LinksList = () => ( {link.text} @@ -38,8 +38,8 @@ const HeaderConf = () => { } return ( -
-
+
+
(arr: T[], getKey: (entity: T) => any) { return Array.from<[string, T[]]>( @@ -85,7 +84,6 @@ const ScheduleList: FC = ({ 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 = ({ >
{hoveredSession && ( -
- {hoveredSession.name} +
+ {hoveredSession.name}

{hoveredSession?.description ? hoveredSession?.description.slice(0, 350) + "..." @@ -126,15 +124,15 @@ const ScheduleList: FC = ({ {groupedSessionsByDay.map(([date, concurrentSessionsGroup]) => ( -

-

+
+

{format(parseISO(date), "EEEE, MMMM d")}

{concurrentSessionsGroup.map(([sharedStartDate, sessions]) => (
- + {format(parseISO(sharedStartDate), "hh:mmaaaa 'PDT'")}
@@ -147,7 +145,7 @@ const ScheduleList: FC = ({ session.event_type as string ).substring(0, session.event_type.length - 1) - const [backgroundColor, textColor] = getSessionColor( + const [borderColor, backgroundColor] = getSessionColor( session.event_type.toLowerCase() ) @@ -155,10 +153,11 @@ const ScheduleList: FC = ({
{showEventType ? singularEventType + " / " : ""} {session.name} @@ -169,8 +168,12 @@ const ScheduleList: FC = ({ data-tooltip-id="my-tooltip" 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" + style={{ + borderLeft: `5px solid ${borderColor}`, + borderRadius: "3px", + backgroundColor, + }} + className="font-normal flex items-center relative py-2 px-4 rounded-md w-full h-full no-underline hover:underline text-black" onMouseEnter={() => { setHoveredSession(session) setHoveredSessionId(`session-${session.id}`) diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 47edb76978..eb1f41e623 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -18,7 +18,7 @@ export default ({ pageContext }: PageProps<{}, { sourcePath: string }>) => {
- + GraphQLConf logo
The official GraphQL conference, by the GraphQL Foundation diff --git a/src/templates/event.tsx b/src/templates/event.tsx index fb8f36955f..d5cd787535 100644 --- a/src/templates/event.tsx +++ b/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 (
-
+
-

- {event.description} -

+

{event.description}

{speakers?.map(speaker => ( @@ -137,14 +135,12 @@ export const EventComponent: FC<{
{speaker.name} - - {renderPositionAndCompany(speaker)} - + {renderPositionAndCompany(speaker)} {!!speaker.socialurls?.length && (
@@ -191,8 +187,28 @@ const EventTemplate: FC< export default EventTemplate -export function Head() { - return +export function Head({ + pageContext, + location, +}: HeadProps<{}, { event: ScheduleSession; speakers: SchedSpeaker[] }>) { + const { event } = pageContext + + return ( + <> + + + + + ) } function renderPositionAndCompany(speaker: SchedSpeaker) { diff --git a/src/templates/schedule.tsx b/src/templates/schedule.tsx index 485ba2f930..8b5d22c7ea 100644 --- a/src/templates/schedule.tsx +++ b/src/templates/schedule.tsx @@ -7,14 +7,7 @@ import { PageProps } from "gatsby" import ScheduleList, { ScheduleSession, } 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 -] +import { eventsColors } from "../utils/eventsColors" const ScheduleTemplate: FC> = ({ pageContext: { schedule }, @@ -24,7 +17,7 @@ const ScheduleTemplate: FC> = ({
-
+

GraphQLConf 2023 Schedule

September 19-21, 2023 I San Francisco Bay Area, CA

@@ -37,15 +30,12 @@ const ScheduleTemplate: FC> = ({ subject to change.

-
- - Event Types: - +
{eventsColors.map(([event, color]) => (
{event} diff --git a/src/templates/speaker.tsx b/src/templates/speaker.tsx index 826aacbcd9..f7676b0cad 100644 --- a/src/templates/speaker.tsx +++ b/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<
-
+
<>
Back to Speakers -
+
-
-

- {speaker.name} -

+
+

{speaker.name}

{!!speaker.socialurls?.length && ( -
+
{speaker.socialurls.map(social => (

@@ -113,9 +111,6 @@ const SpeakersTemplate: FC<
-

- My Speakers Sessions: -

{speaker && ( +export function Head({ + pageContext, + location, +}: HeadProps<{}, { speaker: SchedSpeaker }>) { + const { speaker } = pageContext + + return ( + <> + + + + + ) } function renderPositionAndCompany(speaker: SchedSpeaker) { @@ -151,11 +166,7 @@ function renderPositionAndCompany(speaker: SchedSpeaker) { // Only include anchor element if url is not an empty string const companyElement = speaker.url !== "" ? ( - + {company} ) : ( diff --git a/src/templates/speakers.tsx b/src/templates/speakers.tsx index ed3bd8b553..5e292c0042 100644 --- a/src/templates/speakers.tsx +++ b/src/templates/speakers.tsx @@ -46,7 +46,7 @@ const SpeakersTemplate: FC> = ({
-
+

GraphQLConf 2023 Speakers

Meet the unique lineup of insightful speakers we've carefully diff --git a/src/utils/eventsColors.ts b/src/utils/eventsColors.ts new file mode 100644 index 0000000000..445682a3fb --- /dev/null +++ b/src/utils/eventsColors.ts @@ -0,0 +1,7 @@ +export const eventsColors = [ + ["Breaks", "rgb(167, 183, 196)", "rgb(167, 183, 196, 0.1)"], + ["Keynote Sessions", "rgb(165, 107, 232)", "rgb(165, 107, 232, 0.1)"], + ["Lightning Talks", "rgb(22, 165, 150)", "rgb(22, 165, 150, 0.1)"], + ["Session Presentations", "rgb(236, 70, 70)", "rgb(236, 70, 70, 0.1)"], + ["Workshops", "rgb(230, 129, 47)", "rgb(230, 129, 47, 0.1)"], +]