Skip to content

Commit b26b54d

Browse files
beerosebeerose
authored
conf: style changes and seo improvements (graphql#1511)
1 parent 5b93ec6 commit b26b54d

File tree

8 files changed

+94
-67
lines changed

8 files changed

+94
-67
lines changed

‎src/components/Conf/Header/index.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ const LinksList = () => (
2222
<a
2323
key={link.href}
2424
href={link.href}
25-
className="px-2.5 text-2xl md:text-lg text-white font-medium hover:text-white focus:text-white w-max"
25+
className="px-2.5 text-2xl md:text-lg text-white font-medium hover:text-white focus:text-white"
2626
>
2727
{link.text}
2828
</a>
@@ -38,8 +38,8 @@ const HeaderConf = () => {
3838
}
3939

4040
return (
41-
<header className="bg-[#171E26] gap-2 shadow-lg px-5 h-[70px]">
42-
<div className="container flex items-center h-full gap-5 max-sm:justify-end justify-between">
41+
<header className="bg-[#171E26] px-6 lg:px-0 gap-2 shadow-lg h-[70px]">
42+
<div className="md:container flex items-center h-full gap-5 max-sm:justify-end justify-between">
4343
<a href="/conf/" className="shrink-0 max-sm:hidden">
4444
<img
4545
src="/img/conf/graphql-conf-logo-simple.svg"

‎src/components/Conf/Schedule/ScheduleList.tsx‎

Lines changed: 16 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
import { format, parseISO, compareAsc } from "date-fns"
22
import React, { FC, useEffect, useState } from "react"
3-
import { eventsColors } from "../../../templates/schedule"
43
import { Tooltip } from "react-tooltip"
5-
import EventTemplate, { EventComponent } from "../../../templates/event"
4+
import { eventsColors } from "../../../utils/eventsColors"
65

76
function groupByKey<T>(arr: T[], getKey: (entity: T) => any) {
87
return Array.from<[string, T[]]>(
@@ -85,7 +84,6 @@ const ScheduleList: FC<Props> = ({
8584
width: "400px",
8685
maxHeight: "350px",
8786
overflowY: "hidden", // Set this to hidden
88-
boxShadow: "0 25px 50px -12px rgb(0 0 0 / 0.25)",
8987
padding: "14px 20px",
9088
}}
9189
place="bottom-start"
@@ -113,8 +111,8 @@ const ScheduleList: FC<Props> = ({
113111
>
114112
<div>
115113
{hoveredSession && (
116-
<div className="text-[#111827] flex flex-col gap-2">
117-
<span className="text-lg font-medium">{hoveredSession.name}</span>
114+
<div className="text-gray-800 flex flex-col gap-2">
115+
<span className="font-medium">{hoveredSession.name}</span>
118116
<p className="" style={{ margin: 0 }}>
119117
{hoveredSession?.description
120118
? hoveredSession?.description.slice(0, 350) + "..."
@@ -126,15 +124,15 @@ const ScheduleList: FC<Props> = ({
126124
</Tooltip>
127125

128126
{groupedSessionsByDay.map(([date, concurrentSessionsGroup]) => (
129-
<div key={date} className="text-[#111827]">
130-
<h3 className="mt-10 mb-5 text-[22px]">
127+
<div key={date} className="text-gray-800 text-sm">
128+
<h3 className="mt-10 mb-5">
131129
{format(parseISO(date), "EEEE, MMMM d")}
132130
</h3>
133131
{concurrentSessionsGroup.map(([sharedStartDate, sessions]) => (
134132
<div key={`concurrent sessions on ${sharedStartDate}`}>
135133
<div className="lg:flex-row flex flex-col mb-4">
136134
<div className="relative">
137-
<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">
135+
<span className="lg:mr-7 mb-5 whitespace-nowrap text-gray-500 lg:mt-0 mt-3 inline-block lg:w-28 w-20">
138136
{format(parseISO(sharedStartDate), "hh:mmaaaa 'PDT'")}
139137
</span>
140138
<div className="lg:block hidden absolute right-3 top-0 h-full w-0.5 bg-gray-200" />
@@ -147,18 +145,19 @@ const ScheduleList: FC<Props> = ({
147145
session.event_type as string
148146
).substring(0, session.event_type.length - 1)
149147

150-
const [backgroundColor, textColor] = getSessionColor(
148+
const [borderColor, backgroundColor] = getSessionColor(
151149
session.event_type.toLowerCase()
152150
)
153151

154152
return session.event_type === "Breaks" ? (
155153
<div
156154
key={session.id}
157155
style={{
156+
borderLeft: `5px solid ${borderColor}`,
157+
borderRadius: "3px",
158158
backgroundColor,
159-
color: textColor,
160159
}}
161-
className="py-2 px-4 rounded-md shadow-lg w-full h-full font-light"
160+
className="font-normal flex items-center py-2 px-4 rounded-md w-full h-full text-black"
162161
>
163162
{showEventType ? singularEventType + " / " : ""}
164163
{session.name}
@@ -169,8 +168,12 @@ const ScheduleList: FC<Props> = ({
169168
data-tooltip-id="my-tooltip"
170169
href={`/conf/schedule/${session.id}?name=${session.name}`}
171170
key={session.id}
172-
style={{ backgroundColor, color: textColor }}
173-
className="relative py-2 px-4 rounded-md shadow-lg w-full h-full font-light no-underline hover:underline"
171+
style={{
172+
borderLeft: `5px solid ${borderColor}`,
173+
borderRadius: "3px",
174+
backgroundColor,
175+
}}
176+
className="font-normal flex items-center relative py-2 px-4 rounded-md w-full h-full no-underline hover:underline text-black"
174177
onMouseEnter={() => {
175178
setHoveredSession(session)
176179
setHoveredSessionId(`session-${session.id}`)

‎src/pages/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ export default ({ pageContext }: PageProps<{}, { sourcePath: string }>) => {
1818
<Hero />
1919
<section className="conf-banner">
2020
<a href="/conf/">
21-
<img src="/img/conf/graphql-conf-logo.svg" />
21+
<img src="/img/conf/graphql-conf-logo.svg" alt="GraphQLConf logo" />
2222
<div>
2323
<span>
2424
The official GraphQL conference, by the GraphQL Foundation

‎src/templates/event.tsx‎

Lines changed: 30 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { FC } from "react"
2-
import { PageProps } from "gatsby"
2+
import { HeadProps, PageProps } from "gatsby"
33
import FooterConf from "../components/Conf/Footer"
44
import HeaderConf from "../components/Conf/Header"
55
import LayoutConf from "../components/Conf/Layout"
@@ -56,7 +56,7 @@ export const EventComponent: FC<{
5656
}> = ({ event, speakers, hideBackButton }) => {
5757
return (
5858
<div className={`bg-white ${!hideBackButton ? "py-10" : ""}`}>
59-
<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]">
59+
<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">
6060
<div className="flex flex-col lg:px-0">
6161
{!hideBackButton && (
6262
<a
@@ -77,7 +77,7 @@ export const EventComponent: FC<{
7777
)}
7878
<div className="mt-10 flex flex-col">
7979
<div className="flex gap-3.5 mb-1.5">
80-
<span className="text-[#f6009b] text-lg flex items-center">
80+
<span className="text-[#f6009b] font-medium flex items-center">
8181
<svg
8282
className="mr-1.5 mb-0.5"
8383
width={20}
@@ -94,7 +94,7 @@ export const EventComponent: FC<{
9494

9595
{format(parseISO(event.event_start), "EEEE, MMM d")}
9696
</span>
97-
<span className="text-[#f6009b] text-lg flex items-center">
97+
<span className="text-[#f6009b] font-medium flex items-center">
9898
<svg
9999
className="mr-1.5 mb-0.5"
100100
width={20}
@@ -112,7 +112,7 @@ export const EventComponent: FC<{
112112
{format(parseISO(event.event_start), "hh:mmaaaa 'PDT'")}
113113
</span>
114114
</div>
115-
<h1 className="mt-0 lg:text-4xl text-3xl lg:leading-[50px] leading-[45px] font-medium mb-5">
115+
<h1 className="mt-0 text-2xl lg:text-3xl font-medium mb-5">
116116
{/* Event name without speaker's name and company */}
117117
{event.name}
118118
</h1>
@@ -121,9 +121,7 @@ export const EventComponent: FC<{
121121
<Tag text={event.audience} />
122122
<Tag text={event.event_subtype} />
123123
</div>
124-
<p className="mt-7 text-xl leading-9 lg:pr-20">
125-
{event.description}
126-
</p>
124+
<p className="mt-7 lg:pr-20">{event.description}</p>
127125

128126
<div className="flex lg:flex-row flex-col gap-4">
129127
{speakers?.map(speaker => (
@@ -137,14 +135,12 @@ export const EventComponent: FC<{
137135
<div className="flex flex-col lg:gap-1 gap-1.5">
138136
<a
139137
href={`/conf/speakers/${speaker.username}`}
140-
className="lg:text-2xl text-xl mt-0 font-bold text-[#333333] underline"
138+
className="text-xl mt-0 font-bold text-[#333333] underline"
141139
>
142140
{speaker.name}
143141
</a>
144142

145-
<span className="lg:text-base text-sm">
146-
{renderPositionAndCompany(speaker)}
147-
</span>
143+
<span>{renderPositionAndCompany(speaker)}</span>
148144
{!!speaker.socialurls?.length && (
149145
<div className="mt-0 text-[#333333]">
150146
<div className="flex gap-5 lg:gap-2.5">
@@ -191,8 +187,28 @@ const EventTemplate: FC<
191187

192188
export default EventTemplate
193189

194-
export function Head() {
195-
return <SeoConf title="GraphQLConf 2023 Speaker" />
190+
export function Head({
191+
pageContext,
192+
location,
193+
}: HeadProps<{}, { event: ScheduleSession; speakers: SchedSpeaker[] }>) {
194+
const { event } = pageContext
195+
196+
return (
197+
<>
198+
<SeoConf
199+
title={`${event.name} | GraphQLConf 2023`}
200+
description={event.description}
201+
/>
202+
<meta
203+
name="keywords"
204+
content={`GraphQL, GraphQLConf, GraphQLConf 2023, ${event.event_type}, ${event.audience}, ${event.event_subtype} ${event.event_start}`}
205+
/>
206+
<meta
207+
property="og:url"
208+
content={`https://graphql.org${location.pathname}`}
209+
/>
210+
</>
211+
)
196212
}
197213

198214
function renderPositionAndCompany(speaker: SchedSpeaker) {

‎src/templates/schedule.tsx‎

Lines changed: 4 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,7 @@ import { PageProps } from "gatsby"
77
import ScheduleList, {
88
ScheduleSession,
99
} from "../components/Conf/Schedule/ScheduleList"
10-
11-
export const eventsColors = [
12-
["Breaks", "#a7b7c4", "#171c24"], // Cool light blue with Dark Blue-Gray text
13-
["Keynote Sessions", "#a56be8", "#ffffff"], // Vibrant Purple with White text
14-
["Lightning Talks", "#16a596", "#ffffff"], // Turquoise with White text
15-
["Session Presentations", "#ec4646", "#ffffff"], // Vibrant Red with White text
16-
["Workshops", "#e6812f", "#ffffff"], // Slightly Darker Orange with White text
17-
]
10+
import { eventsColors } from "../utils/eventsColors"
1811

1912
const ScheduleTemplate: FC<PageProps<{}, { schedule: ScheduleSession[] }>> = ({
2013
pageContext: { schedule },
@@ -24,7 +17,7 @@ const ScheduleTemplate: FC<PageProps<{}, { schedule: ScheduleSession[] }>> = ({
2417
<HeaderConf />
2518

2619
<div className="bg-white">
27-
<div className="prose lg:prose-lg mx-auto py-10 max-sm:px-4 override-prose-w-with-85ch">
20+
<div className="prose lg:prose-lg mx-auto py-10 px-6 lg:px-0 override-prose-w-with-85ch">
2821
<h1>GraphQLConf 2023 Schedule</h1>
2922
<section className="px-0 my-8">
3023
<h4>September 19-21, 2023 I San Francisco Bay Area, CA</h4>
@@ -37,15 +30,12 @@ const ScheduleTemplate: FC<PageProps<{}, { schedule: ScheduleSession[] }>> = ({
3730
<b>subject to change</b>.
3831
</p>
3932

40-
<div className="flex lg:flex-row flex-col items-start mt-8 text-[#111827]">
41-
<span className="font-medium text-2xl lg:mr-4 lg:mb-0 mb-4 whitespace-nowrap">
42-
Event Types:
43-
</span>
33+
<div className="flex lg:flex-row flex-col items-start mt-8">
4434
<div className="flex gap-2.5 flex-wrap w-full">
4535
{eventsColors.map(([event, color]) => (
4636
<div className="flex items-center">
4737
<div
48-
className="w-6 h-6 rounded-full mr-2 border border-solid border-gray-200"
38+
className="w-5 h-5 rounded-full mr-2 border border-solid border-gray-200"
4939
style={{ background: color }}
5040
/>
5141
<span>{event}</span>

‎src/templates/speaker.tsx‎

Lines changed: 32 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import FooterConf from "../components/Conf/Footer"
33
import HeaderConf from "../components/Conf/Header"
44
import LayoutConf from "../components/Conf/Layout"
55
import SeoConf from "../components/Conf/Seo"
6-
import { PageProps } from "gatsby"
6+
import { HeadProps, PageProps } from "gatsby"
77
import { SchedSpeaker } from "../components/Conf/Speakers/Speaker"
88
import ScheduleList from "../components/Conf/Schedule/ScheduleList"
99
import { Avatar } from "../components/Conf/Speakers/Avatar"
@@ -49,12 +49,12 @@ const SpeakersTemplate: FC<
4949
<HeaderConf />
5050

5151
<div className="bg-white py-10">
52-
<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">
52+
<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">
5353
<>
5454
<div className="flex flex-col lg:px-0">
5555
<a
5656
href="/conf/speakers"
57-
className="w-max rounded-md cursor-pointer hover:opacity-80 transition-all underline text-[#333333] text-[18px]"
57+
className="w-max text-black text-sm cursor-pointer hover:opacity-80 transition-all underline"
5858
>
5959
<span
6060
style={{
@@ -67,28 +67,26 @@ const SpeakersTemplate: FC<
6767
</span>
6868
<span>Back to Speakers</span>
6969
</a>
70-
<div className="lg:mt-16 mt-6 flex lg:flex-row flex-col-reverse gap-10">
70+
<div className="lg:mt-16 mt-6 flex lg:flex-row flex-col-reverse lg:gap-10">
7171
<Avatar
7272
className="w-[300px] h-[300px] rounded-full border-solid border-2 border-gray-300"
7373
avatar={speaker.avatar}
7474
name={speaker.name}
7575
/>
7676

7777
<div>
78-
<div className="flex justify-between items-center mt-5">
79-
<h2 className="text-[40px] mt-0 font-bold">
80-
{speaker.name}
81-
</h2>
78+
<div className="flex justify-between items-center">
79+
<h2 className="mt-0 font-bold">{speaker.name}</h2>
8280

8381
{!!speaker.socialurls?.length && (
84-
<div className="mt-0 text-[#333333]">
82+
<div className="mt-0">
8583
<div className="flex gap-5 lg:gap-2.5">
8684
{speaker.socialurls.map(social => (
8785
<a
8886
key={social.url}
8987
href={social.url}
9088
target="_blank"
91-
className="flex items-center text-[#333333] w-max"
89+
className="flex items-center w-max"
9290
>
9391
<SocialMediaIcon
9492
service={
@@ -105,17 +103,14 @@ const SpeakersTemplate: FC<
105103
{renderPositionAndCompany(speaker)}
106104
</div>
107105
<p
108-
className="leading-8 lg:text-justify text-[18px]"
106+
className="lg:text-justify"
109107
dangerouslySetInnerHTML={{ __html: speaker.about }}
110108
/>
111109
</div>
112110
</div>
113111
</div>
114112

115113
<div className="lg:mt-16 mt-10">
116-
<h2 className="text-3xl font-medium mb-9 mt-0">
117-
My Speakers Sessions:
118-
</h2>
119114
{speaker && (
120115
<ScheduleList
121116
showEventType
@@ -139,8 +134,28 @@ const SpeakersTemplate: FC<
139134

140135
export default SpeakersTemplate
141136

142-
export function Head() {
143-
return <SeoConf title="GraphQLConf 2023 Speaker" />
137+
export function Head({
138+
pageContext,
139+
location,
140+
}: HeadProps<{}, { speaker: SchedSpeaker }>) {
141+
const { speaker } = pageContext
142+
143+
return (
144+
<>
145+
<SeoConf
146+
title={`${speaker.name} | GraphQLConf 2023`}
147+
description={speaker.about}
148+
/>
149+
<meta
150+
property="keywords"
151+
content={`GraphQL, GraphQLConf, GraphQLConf 2023, ${speaker.name}, ${speaker.company}, ${speaker.position}`}
152+
/>
153+
<meta
154+
property="og:url"
155+
content={`https://graphql.org${location.pathname}`}
156+
/>
157+
</>
158+
)
144159
}
145160

146161
function renderPositionAndCompany(speaker: SchedSpeaker) {
@@ -151,11 +166,7 @@ function renderPositionAndCompany(speaker: SchedSpeaker) {
151166
// Only include anchor element if url is not an empty string
152167
const companyElement =
153168
speaker.url !== "" ? (
154-
<a
155-
target="_blank"
156-
className="text-[#333333] underline text-[18px]"
157-
href={speaker.url}
158-
>
169+
<a target="_blank" className="underline" href={speaker.url}>
159170
{company}
160171
</a>
161172
) : (

‎src/templates/speakers.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ const SpeakersTemplate: FC<PageProps<{}, { speakers: SchedSpeaker[] }>> = ({
4646
<HeaderConf />
4747

4848
<div className="bg-white">
49-
<div className="prose lg:prose-lg mx-auto py-10 max-lg:px-4 override-prose-w-with-85ch">
49+
<div className="prose lg:prose-lg mx-auto py-10 px-6 lg:px-0 override-prose-w-with-85ch">
5050
<h1>GraphQLConf 2023 Speakers</h1>
5151
<p>
5252
Meet the unique lineup of insightful speakers we've carefully

‎src/utils/eventsColors.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
export const eventsColors = [
2+
["Breaks", "rgb(167, 183, 196)", "rgb(167, 183, 196, 0.1)"],
3+
["Keynote Sessions", "rgb(165, 107, 232)", "rgb(165, 107, 232, 0.1)"],
4+
["Lightning Talks", "rgb(22, 165, 150)", "rgb(22, 165, 150, 0.1)"],
5+
["Session Presentations", "rgb(236, 70, 70)", "rgb(236, 70, 70, 0.1)"],
6+
["Workshops", "rgb(230, 129, 47)", "rgb(230, 129, 47, 0.1)"],
7+
]

0 commit comments

Comments
 (0)