From f83e281746c58157c53c3edca49d8bee18fd32fa Mon Sep 17 00:00:00 2001 From: Jake Ginnivan Date: Tue, 1 Oct 2024 21:39:25 +0800 Subject: [PATCH 1/8] Fixed error with svg ids on hydration --- website/vite.config.mjs | 74 ++++++++++++++++++----------------------- 1 file changed, 32 insertions(+), 42 deletions(-) diff --git a/website/vite.config.mjs b/website/vite.config.mjs index cf182c0..758634e 100644 --- a/website/vite.config.mjs +++ b/website/vite.config.mjs @@ -1,6 +1,5 @@ import mdx from '@mdx-js/rollup' import { vitePlugin as remix } from '@remix-run/dev' -import { customAlphabet } from 'nanoid' import rehypePrettyCode from 'rehype-pretty-code' import remarkFrontmatter from 'remark-frontmatter' import remarkMdxFrontmatter from 'remark-mdx-frontmatter' @@ -11,49 +10,40 @@ import svgr from 'vite-plugin-svgr' import tsconfigPaths from 'vite-tsconfig-paths' const prettyCodeOptions = { - theme: 'catppuccin-latte', -} -const prefixList = new Set() -const nanoid = customAlphabet('0123456789abcdefghijklmnopqrstuvwxyz', 10) -const uniquePrefix = () => { - let prefix - do { - prefix = nanoid() - } while (prefixList.has(prefix)) - return prefix + theme: 'catppuccin-latte', } export default defineConfig({ - // eslint-disable-next-line no-undef - root: __dirname, - server: { - port: 3800, - hmr: { - port: 3805, - }, - }, - plugins: [ - tsconfigPaths(), - remixDevTools(), - mdx({ - remarkPlugins: [remarkFrontmatter, remarkMdxFrontmatter], - rehypePlugins: [[rehypePrettyCode, prettyCodeOptions]], - /* jsxImportSource: …, otherOptions… */ - }), - remix({ - buildDirectory: 'build/remix', - }), - remixRoutes({ - outDir: '.', - strict: true, - }), - svgr({ - svgrOptions: { - plugins: ['@svgr/plugin-svgo', '@svgr/plugin-jsx'], - svgoConfig: { - plugins: [{ name: 'prefixIds', params: { prefix: uniquePrefix } }], + // eslint-disable-next-line no-undef + root: __dirname, + server: { + port: 3800, + hmr: { + port: 3805, }, - }, - }), - ], + }, + plugins: [ + tsconfigPaths(), + remixDevTools(), + mdx({ + remarkPlugins: [remarkFrontmatter, remarkMdxFrontmatter], + rehypePlugins: [[rehypePrettyCode, prettyCodeOptions]], + /* jsxImportSource: …, otherOptions… */ + }), + remix({ + buildDirectory: 'build/remix', + }), + remixRoutes({ + outDir: '.', + strict: true, + }), + svgr({ + svgrOptions: { + plugins: ['@svgr/plugin-svgo', '@svgr/plugin-jsx'], + svgoConfig: { + plugins: [{ name: 'prefixIds', params: { prefixIds: true } }], + }, + }, + }), + ], }) From 9026d84350fd28b425622e0cf17cf31a3c9280e2 Mon Sep 17 00:00:00 2001 From: Jake Ginnivan Date: Tue, 1 Oct 2024 21:39:37 +0800 Subject: [PATCH 2/8] Lined up header to content better on desktop --- website/app/components/header/header.tsx | 125 +++++++++++------------ 1 file changed, 62 insertions(+), 63 deletions(-) diff --git a/website/app/components/header/header.tsx b/website/app/components/header/header.tsx index 2922ba0..fcf0867 100644 --- a/website/app/components/header/header.tsx +++ b/website/app/components/header/header.tsx @@ -4,71 +4,70 @@ import { Box, Flex, styled } from '../../../styled-system/jsx' import { AppLink } from '../app-link' export function Header() { - return ( - <> - - - - - - - - - - - {/* + return ( + + + + + + + + + + + {/* Speakers */} - - Agenda - - - About - - {/* + + Agenda + + + About + + {/* Blog */} - - Buy Tickets ↗ - - - - - - - - ) + + Buy Tickets{' '} + ↗ + + + + + + + ) } From a0dff51a535e9f662f2689a931c06040286c33f2 Mon Sep 17 00:00:00 2001 From: Jake Ginnivan Date: Tue, 1 Oct 2024 21:39:49 +0800 Subject: [PATCH 3/8] Split sponsor sections up more --- .../page-components/SponsorSection.tsx | 18 +++++++++--------- website/app/lib/config-types.ts | 1 + 2 files changed, 10 insertions(+), 9 deletions(-) diff --git a/website/app/components/page-components/SponsorSection.tsx b/website/app/components/page-components/SponsorSection.tsx index 90e18fa..898d5a7 100644 --- a/website/app/components/page-components/SponsorSection.tsx +++ b/website/app/components/page-components/SponsorSection.tsx @@ -7,6 +7,7 @@ export function SponsorSection({ sponsors, year }: { sponsors: YearSponsors | un gold: { gradientFrom: '#453927', logoSize: 'md' }, silver: { gradientFrom: '#2A3251', logoSize: 'sm' }, bronze: { gradientFrom: '#452927', logoSize: 'xs' }, + room: { gradientFrom: '#1F1F4E', logoSize: 'xs' }, digital: { gradientFrom: '#371F4E', logoSize: 'xs' }, community: { gradientFrom: '#1F1F4E', logoSize: 'xs' }, coffeeCart: { gradientFrom: '#1F1F4E', logoSize: 'xs' }, @@ -94,18 +95,17 @@ export function SponsorSection({ sponsors, year }: { sponsors: YearSponsors | un if (!sponsors) return null return ( - + {year} Sponsors - {renderSponsorGroup('Major Sponsors', [ - { sponsors: sponsors.platinum, category: 'platinum' }, - { sponsors: sponsors.gold, category: 'gold' }, - { sponsors: sponsors.silver, category: 'silver' }, - { sponsors: sponsors.bronze, category: 'bronze' }, - ])} - {renderSponsorGroup('Minor Sponsors', [ - { sponsors: sponsors.digital, category: 'digital' }, + {renderSponsorGroup('Platinum', [{ sponsors: sponsors.platinum, category: 'platinum' }])} + {renderSponsorGroup('Gold', [{ sponsors: sponsors.gold, category: 'gold' }])} + {renderSponsorGroup('Silver', [{ sponsors: sponsors.silver, category: 'silver' }])} + {renderSponsorGroup('Bronze', [{ sponsors: sponsors.bronze, category: 'bronze' }])} + {renderSponsorGroup('Room', [{ sponsors: sponsors.room, category: 'room' }])} + {renderSponsorGroup('Digital', [{ sponsors: sponsors.digital, category: 'digital' }])} + {renderSponsorGroup('Other Sponsors', [ { sponsors: sponsors.community, category: 'community' }, { sponsors: sponsors.coffeeCart, category: 'coffeeCart' }, { sponsors: sponsors.quietRoom, category: 'quietRoom' }, diff --git a/website/app/lib/config-types.ts b/website/app/lib/config-types.ts index 81be8af..445c9dc 100644 --- a/website/app/lib/config-types.ts +++ b/website/app/lib/config-types.ts @@ -82,6 +82,7 @@ export interface YearSponsors { quietRoom?: Sponsor[] keynotes?: Sponsor[] + room?: Sponsor[] } export interface Sponsor { From bbcd3c5dfd595c35754fbfd5edcbe820c784fa82 Mon Sep 17 00:00:00 2001 From: Jake Ginnivan Date: Tue, 1 Oct 2024 21:40:18 +0800 Subject: [PATCH 4/8] Add more 2024 sponsors --- website/app/config/years/2024.ts | 213 ++++++++++-------- website/public/images/sponsors/2024-afg.svg | 3 + .../public/images/sponsors/2024-akkodis.svg | 8 +- .../public/images/sponsors/2024-bankwest.svg | 15 ++ .../public/images/sponsors/2024-insight.svg | 15 ++ .../public/images/sponsors/2024-interfuze.svg | 3 + .../public/images/sponsors/2024-makerx.svg | 37 +-- .../public/images/sponsors/2024-microsoft.svg | 9 + .../images/sponsors/2024-softwareone.svg | 4 + .../images/sponsors/2024-telstra-versent.svg | 32 +++ 10 files changed, 218 insertions(+), 121 deletions(-) create mode 100644 website/public/images/sponsors/2024-afg.svg create mode 100644 website/public/images/sponsors/2024-bankwest.svg create mode 100644 website/public/images/sponsors/2024-insight.svg create mode 100644 website/public/images/sponsors/2024-interfuze.svg create mode 100644 website/public/images/sponsors/2024-microsoft.svg create mode 100644 website/public/images/sponsors/2024-softwareone.svg create mode 100644 website/public/images/sponsors/2024-telstra-versent.svg diff --git a/website/app/config/years/2024.ts b/website/app/config/years/2024.ts index 6b2ebcf..c967d57 100644 --- a/website/app/config/years/2024.ts +++ b/website/app/config/years/2024.ts @@ -3,101 +3,138 @@ import { ConferenceYear } from '../../lib/config-types' Settings.throwOnInvalid = true declare module 'luxon' { - interface TSSettings { - throwOnInvalid: true - } + interface TSSettings { + throwOnInvalid: true + } } export const conference2024: ConferenceYear = { - year: '2024', - venue: undefined, + year: '2024', + venue: undefined, - ticketPrice: '$60', - sessionizeUrl: 'https://sessionize.com/ddd-perth-2024', + ticketPrice: '$60', + sessionizeUrl: 'https://sessionize.com/ddd-perth-2024', - sessions: { - kind: 'sessionize', - sessionizeEndpoint: 'https://sessionize.com/api/v2/vedvlykn', - }, + sessions: { + kind: 'sessionize', + sessionizeEndpoint: 'https://sessionize.com/api/v2/vedvlykn', + }, - conferenceDate: DateTime.fromISO('2024-11-16'), - agendaPublishedDateTime: DateTime.fromISO('2024-08-20T17:00:00', { - zone: 'Australia/Perth', - }), - cfpDates: { - opens: DateTime.fromISO('2024-06-14T08:00:00', { - zone: 'Australia/Perth', + conferenceDate: DateTime.fromISO('2024-11-16'), + agendaPublishedDateTime: DateTime.fromISO('2024-08-20T17:00:00', { + zone: 'Australia/Perth', }), - closes: DateTime.fromISO('2024-07-12T23:59:59', { - zone: 'Australia/Perth', + cfpDates: { + opens: DateTime.fromISO('2024-06-14T08:00:00', { + zone: 'Australia/Perth', + }), + closes: DateTime.fromISO('2024-07-12T23:59:59', { + zone: 'Australia/Perth', + }), + }, + talkVotingDates: { + opens: DateTime.fromISO('2024-07-23T00:00:00', { + zone: 'Australia/Perth', + }), + closes: DateTime.fromISO('2024-08-06T23:59:59', { + zone: 'Australia/Perth', + }), + }, + ticketSalesDates: { + opens: DateTime.fromISO('2024-06-21T08:00:00', { + zone: 'Australia/Perth', + }), + closes: DateTime.fromISO('2024-11-15T23:59:59', { + zone: 'Australia/Perth', + }), + }, + feedbackOpenUntilDateTime: DateTime.fromISO('2024-11-21T23:59:59', { + zone: 'Australia/Perth', }), - }, - talkVotingDates: { - opens: DateTime.fromISO('2024-07-23T00:00:00', { - zone: 'Australia/Perth', - }), - closes: DateTime.fromISO('2024-08-06T23:59:59', { - zone: 'Australia/Perth', - }), - }, - ticketSalesDates: { - opens: DateTime.fromISO('2024-06-21T08:00:00', { - zone: 'Australia/Perth', - }), - closes: DateTime.fromISO('2024-11-15T23:59:59', { - zone: 'Australia/Perth', - }), - }, - feedbackOpenUntilDateTime: DateTime.fromISO('2024-11-21T23:59:59', { - zone: 'Australia/Perth', - }), - ticketInfo: { - type: 'tito', - accountId: 'dddperth', - eventId: '2024', - }, + ticketInfo: { + type: 'tito', + accountId: 'dddperth', + eventId: '2024', + }, - sponsors: { - platinum: [ - { - name: 'MakerX', - website: 'https://makerx.com.au/', - logoUrl: '/images/sponsors/2024-makerx.svg', - }, - ], - gold: [ - { - name: 'Mantel Group', - website: 'https://mantelgroup.com.au/', - logoUrl: '/images/sponsors/2024-mantel-group.svg', - }, - { - name: 'Virtual Gaming Worlds', - website: 'https://www.vgw.co/', - logoUrl: '/images/sponsors/2024-vgw.svg', - }, - { - name: 'Qoria', - website: 'https://qoria.com/', - logoUrl: '/images/sponsors/2024-qoria.svg', - }, - { - name: 'Tricentis', - website: 'https://www.tricentis.com/', - logoUrl: '/images/sponsors/2024-tricentis.svg', - }, - { - name: 'Woodside Energy', - website: 'https://www.woodside.com/', - logoUrl: '/images/sponsors/2024-woodside.svg', - }, - ], - digital: [ - { - name: 'Akkodis', - website: 'https://akkodis.com/', - logoUrl: '/images/sponsors/2024-akkodis.svg', - }, - ], - }, + sponsors: { + platinum: [ + { + name: 'Bankwest', + website: 'https://www.bankwest.com.au/', + logoUrl: '/images/sponsors/2024-bankwest.svg', + }, + { + name: 'MakerX', + website: 'https://makerx.com.au/', + logoUrl: '/images/sponsors/2024-makerx.svg', + }, + ], + gold: [ + { + name: 'Insight', + website: 'https://au.insight.com/', + logoUrl: '/images/sponsors/2024-insight.svg', + }, + { + name: 'Mantel Group', + website: 'https://mantelgroup.com.au/', + logoUrl: '/images/sponsors/2024-mantel-group.svg', + }, + { + name: 'Qoria', + website: 'https://qoria.com/', + logoUrl: '/images/sponsors/2024-qoria.svg', + }, + { + name: 'Telstra / Versent', + website: 'https://www.telstra.com.au/', + logoUrl: '/images/sponsors/2024-telstra-versent.svg', + }, + { + name: 'Tricentis', + website: 'https://www.tricentis.com/', + logoUrl: '/images/sponsors/2024-tricentis.svg', + }, + { + name: 'Virtual Gaming Worlds', + website: 'https://www.vgw.co/', + logoUrl: '/images/sponsors/2024-vgw.svg', + }, + { + name: 'Woodside Energy', + website: 'https://www.woodside.com/', + logoUrl: '/images/sponsors/2024-woodside.svg', + }, + ], + room: [ + { + name: 'Microsoft', + website: 'https://www.microsoft.com/', + logoUrl: '/images/sponsors/2024-microsoft.svg', + }, + { + name: 'SoftwareOne', + website: 'https://www.softwareone.com/', + logoUrl: '/images/sponsors/2024-softwareone.svg', + }, + ], + digital: [ + { + name: 'AFG', + website: 'https://www.afgonline.com.au/', + logoUrl: '/images/sponsors/2024-afg.svg', + }, + { + name: 'Akkodis', + website: 'https://akkodis.com/', + logoUrl: '/images/sponsors/2024-akkodis.svg', + }, + { + name: 'Interfuze', + website: 'https://interfuze.com/', + logoUrl: '/images/sponsors/2024-interfuze.svg', + }, + ], + }, } diff --git a/website/public/images/sponsors/2024-afg.svg b/website/public/images/sponsors/2024-afg.svg new file mode 100644 index 0000000..c686c02 --- /dev/null +++ b/website/public/images/sponsors/2024-afg.svg @@ -0,0 +1,3 @@ + + + diff --git a/website/public/images/sponsors/2024-akkodis.svg b/website/public/images/sponsors/2024-akkodis.svg index 0b42492..d3b1e27 100644 --- a/website/public/images/sponsors/2024-akkodis.svg +++ b/website/public/images/sponsors/2024-akkodis.svg @@ -1,5 +1,5 @@ - - - - + + + diff --git a/website/public/images/sponsors/2024-bankwest.svg b/website/public/images/sponsors/2024-bankwest.svg new file mode 100644 index 0000000..7a49bde --- /dev/null +++ b/website/public/images/sponsors/2024-bankwest.svg @@ -0,0 +1,15 @@ + + Bankwest logo + + + + + + + + + + + + + diff --git a/website/public/images/sponsors/2024-insight.svg b/website/public/images/sponsors/2024-insight.svg new file mode 100644 index 0000000..f6f091c --- /dev/null +++ b/website/public/images/sponsors/2024-insight.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + diff --git a/website/public/images/sponsors/2024-interfuze.svg b/website/public/images/sponsors/2024-interfuze.svg new file mode 100644 index 0000000..7c15904 --- /dev/null +++ b/website/public/images/sponsors/2024-interfuze.svg @@ -0,0 +1,3 @@ + + + diff --git a/website/public/images/sponsors/2024-makerx.svg b/website/public/images/sponsors/2024-makerx.svg index 390fc05..a345764 100644 --- a/website/public/images/sponsors/2024-makerx.svg +++ b/website/public/images/sponsors/2024-makerx.svg @@ -1,31 +1,10 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + diff --git a/website/public/images/sponsors/2024-microsoft.svg b/website/public/images/sponsors/2024-microsoft.svg new file mode 100644 index 0000000..1b32f96 --- /dev/null +++ b/website/public/images/sponsors/2024-microsoft.svg @@ -0,0 +1,9 @@ + + + + + + + + diff --git a/website/public/images/sponsors/2024-softwareone.svg b/website/public/images/sponsors/2024-softwareone.svg new file mode 100644 index 0000000..5866e9d --- /dev/null +++ b/website/public/images/sponsors/2024-softwareone.svg @@ -0,0 +1,4 @@ + + + + diff --git a/website/public/images/sponsors/2024-telstra-versent.svg b/website/public/images/sponsors/2024-telstra-versent.svg new file mode 100644 index 0000000..94e2fb0 --- /dev/null +++ b/website/public/images/sponsors/2024-telstra-versent.svg @@ -0,0 +1,32 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + From b69b5b3d3cc9b9113e3688b1fcdeb538db6a5a38 Mon Sep 17 00:00:00 2001 From: Jake Ginnivan Date: Tue, 1 Oct 2024 21:40:36 +0800 Subject: [PATCH 5/8] Fixed mdx variables missing --- website/app/lib/mdx.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/website/app/lib/mdx.tsx b/website/app/lib/mdx.tsx index f9b28d9..74fe18b 100644 --- a/website/app/lib/mdx.tsx +++ b/website/app/lib/mdx.tsx @@ -109,7 +109,13 @@ function getMdxComponent(code: string, conferenceState: SerializeFrom['0']) { - return + return ( + + ) } return MdxComponent } From 10a00c7eae5a0008ad3442c16c9a50240ea44679 Mon Sep 17 00:00:00 2001 From: Jake Ginnivan Date: Tue, 1 Oct 2024 21:42:52 +0800 Subject: [PATCH 6/8] Added speaker images to agenda page --- website/app/lib/sessionize.server.ts | 70 +++++++++++++++++++ .../_layout.agenda.$year.talk.$sessionId.tsx | 33 +++++++-- 2 files changed, 98 insertions(+), 5 deletions(-) diff --git a/website/app/lib/sessionize.server.ts b/website/app/lib/sessionize.server.ts index ba15a93..74cfdd9 100644 --- a/website/app/lib/sessionize.server.ts +++ b/website/app/lib/sessionize.server.ts @@ -21,6 +21,14 @@ const sessionsCache = new LRUCache>({ return JSON.stringify(value).length + (key ? key.length : 0) }, }) +const speakersCache = new LRUCache>({ + max: 250, + maxSize: 1024 * 1024 * 12, // 12 mb + ttl: 1000 * 60 * 60 * 24, // 24 hours + sizeCalculation(value, key) { + return JSON.stringify(value).length + (key ? key.length : 0) + }, +}) interface Options { sessionizeEndpoint: string @@ -88,6 +96,34 @@ export const sessionsSchema = z.array( }), ) +export const speakersSchema = z.array( + z.object({ + id: z.string().uuid(), + firstName: z.string(), + lastName: z.string(), + fullName: z.string(), + bio: z.string(), + tagLine: z.string(), + profilePicture: z.string().url(), + sessions: z.array( + z.object({ + id: z.number(), + name: z.string(), + }), + ), + isTopSpeaker: z.boolean(), + links: z.array( + z.object({ + title: z.string(), + url: z.string().url(), + linkType: z.string(), + }), + ), + questionAnswers: z.array(z.any()), + categories: z.array(z.any()), + }), +) + export async function getScheduleGrid(opts: Options): Promise> { const { noCache = NO_CACHE ?? false } = opts if (!noCache) { @@ -155,6 +191,40 @@ export async function getConfSessions(opts: Options): Promise> { + const { noCache = NO_CACHE ?? false } = opts + if (!noCache) { + const cached = speakersCache.get(opts.sessionizeEndpoint) + if (cached) { + return cached as z.infer + } + } + + const fetched = await fetch(`${opts.sessionizeEndpoint}/view/Speakers`, { + method: 'GET', + headers: { + 'Content-Type': 'application/json', + }, + }) + + if (!fetched.ok) { + throw new Error('Error fetching speakers, responded with status: ' + fetched.status) + } + + const json = await fetched.json() + if (!json || !Array.isArray(json)) { + throw new Error('Error fetching speakers. Expected an array, received:\n\n' + json) + } + + const speakers = speakersSchema.parse(json) + + if (!noCache) { + speakersCache.set(opts.sessionizeEndpoint, speakers) + } + + return speakers +} + export function formatDate(date: string, opts: Intl.DateTimeFormatOptions): string { return ( DateTime.fromISO(date) diff --git a/website/app/routes/_layout.agenda.$year.talk.$sessionId.tsx b/website/app/routes/_layout.agenda.$year.talk.$sessionId.tsx index 4e58785..14b3624 100644 --- a/website/app/routes/_layout.agenda.$year.talk.$sessionId.tsx +++ b/website/app/routes/_layout.agenda.$year.talk.$sessionId.tsx @@ -10,7 +10,7 @@ import { SponsorSection } from '~/components/page-components/SponsorSection' import { ConferenceConfigYear, ConferenceImportantInformation, ConferenceYear, Year } from '~/lib/config-types' import { localeTimeFormat } from '~/lib/dates/formatting' import { conferenceConfig } from '../config/conference-config' -import { getConfSessions, sessionsSchema } from '../lib/sessionize.server' +import { getConfSessions, getConfSpeakers, sessionsSchema, speakersSchema } from '../lib/sessionize.server' export async function loader({ params, context }: LoaderFunctionArgs) { const { year, sessionId } = $params('/agenda/:year/talk/:sessionId', params) @@ -48,6 +48,15 @@ export async function loader({ params, context }: LoaderFunctionArgs) { throw new Response(JSON.stringify({ message: 'No session found' }), { status: 404 }) } + const speakers: TypeOf = + yearConfig.sessions?.kind === 'sessionize' + ? await getConfSpeakers({ + sessionizeEndpoint: yearConfig.sessions.sessionizeEndpoint, + confTimeZone: conferenceConfig.timezone, + }) + : [] + const talkSpeakers = session.speakers.map((speakerId) => speakers.find((speaker) => speaker.id === speakerId.id)) + return json( { year: year as Year, @@ -56,6 +65,7 @@ export async function loader({ params, context }: LoaderFunctionArgs) { year: conf.year, })), session, + talkSpeakers, sessionStart: DateTime.fromISO(session.startsAt).toLocaleString(DateTime.TIME_SIMPLE), sessionEnd: DateTime.fromISO(session.endsAt).toLocaleString(DateTime.TIME_SIMPLE), }, @@ -64,7 +74,8 @@ export async function loader({ params, context }: LoaderFunctionArgs) { } export default function Agenda() { - const { session, sponsors, conferences, year, sessionStart, sessionEnd } = useLoaderData() + const { session, sponsors, conferences, year, sessionStart, sessionEnd, talkSpeakers } = + useLoaderData() return ( {session?.speakers?.length ? ( - - 💬 {session?.speakers.map((speaker) => speaker.name)?.join(', ')} - + + {talkSpeakers.map((speaker) => ( + + + {speaker.fullName} + + ))} + ) : null} {session.description} From dc117496681a7d332f981544c68b7964cdb62210 Mon Sep 17 00:00:00 2001 From: Jake Ginnivan Date: Tue, 1 Oct 2024 21:43:11 +0800 Subject: [PATCH 7/8] Styling fixes for talk page --- .../_layout.agenda.$year.talk.$sessionId.tsx | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/website/app/routes/_layout.agenda.$year.talk.$sessionId.tsx b/website/app/routes/_layout.agenda.$year.talk.$sessionId.tsx index 14b3624..4b595bb 100644 --- a/website/app/routes/_layout.agenda.$year.talk.$sessionId.tsx +++ b/website/app/routes/_layout.agenda.$year.talk.$sessionId.tsx @@ -89,10 +89,12 @@ export default function Agenda() { p="4" > - + Back to {year} Agenda - {session.title} + + {session.title} + 🕓 {sessionStart} - {sessionEnd} - + 📍 {session.room} + {session.description} {session?.speakers?.length ? ( {talkSpeakers.map((speaker) => ( @@ -123,12 +127,9 @@ export default function Agenda() { ))} ) : null} - {session.description} + + - - - - ) } From e72fe2ffa8b683f1df5735560dabf0f15a3b640e Mon Sep 17 00:00:00 2001 From: Jake Ginnivan Date: Tue, 1 Oct 2024 21:43:55 +0800 Subject: [PATCH 8/8] Agenda page style tweaks, removed links and rooms from service sessions --- website/app/routes/_layout.agenda.($year).tsx | 389 +++++++++--------- 1 file changed, 198 insertions(+), 191 deletions(-) diff --git a/website/app/routes/_layout.agenda.($year).tsx b/website/app/routes/_layout.agenda.($year).tsx index 435afe6..b42e714 100644 --- a/website/app/routes/_layout.agenda.($year).tsx +++ b/website/app/routes/_layout.agenda.($year).tsx @@ -112,15 +112,14 @@ export default function Agenda() { mx="auto" p="4" > - + `[time-${timeSlot.slotStart.replace(/:/g, '')}] auto`, - ), - ].join(' '), - '--room-columns': [ - '[times] auto', - ...schedule.rooms.map((room, index, rooms) => - index === 0 - ? `[room-${room.id}-start] 1fr` - : index + 1 === rooms.length - ? `[room-${rooms[index - 1].id}-end room-${room.id}-start] 1fr [room-${room.id}-end]` - : `[room-${rooms[index - 1].id}-end room-${room.id}-start] 1fr`, - ), - ].join(' '), - } as React.CSSProperties - } - xl={{ - display: 'grid', - gridTemplateRows: 'var(--slot-rows)', - gridTemplateColumns: 'var(--room-columns)', - gridGap: '1', - }} - > - {schedule.rooms.map((room) => ( - /* hidden on small screens and browsers without grid support */ - - ))} + '--slot-rows': [ + '[rooms] auto', + ...schedule.timeSlots.map( + (timeSlot) => `[time-${timeSlot.slotStart.replace(/:/g, '')}] auto`, + ), + ].join(' '), + '--room-columns': [ + '[times] auto', + ...schedule.rooms.map((room, index, rooms) => + index === 0 + ? `[room-${room.id}-start] 1fr` + : index + 1 === rooms.length + ? `[room-${rooms[index - 1].id}-end room-${room.id}-start] 1fr [room-${room.id}-end]` + : `[room-${rooms[index - 1].id}-end room-${room.id}-start] 1fr`, + ), + ].join(' '), + } as React.CSSProperties + } + xl={{ + display: 'grid', + gridTemplateRows: 'var(--slot-rows)', + gridTemplateColumns: 'var(--room-columns)', + gridGap: '1', + }} + > + {schedule.rooms.map((room) => ( + /* hidden on small screens and browsers without grid support */ + + ))} - {schedule.timeSlots.map((timeSlot, timeSlotIndex) => { - const startTime12 = DateTime.fromISO(timeSlot.slotStart).toFormat('h:mm a').toLowerCase() - const timeSlotSimple = timeSlot.slotStart.replace(/:/g, '') - const nextTimeSlot = schedule.timeSlots[timeSlotIndex + 1] - const nextTimeSlotStart = nextTimeSlot?.slotStart.replace(/:/g, '') + {schedule.timeSlots.map((timeSlot, timeSlotIndex) => { + const startTime12 = DateTime.fromISO(timeSlot.slotStart).toFormat('h:mm a').toLowerCase() + const timeSlotSimple = timeSlot.slotStart.replace(/:/g, '') + const nextTimeSlot = schedule.timeSlots[timeSlotIndex + 1] + const nextTimeSlotStart = nextTimeSlot?.slotStart.replace(/:/g, '') - return ( - - - {startTime12} - {nextTimeSlot?.slotStart ? ( - - {' '} - - {DateTime.fromISO(nextTimeSlot.slotStart).toFormat('h:mm a').toLowerCase()} - - ) : null} - + return ( + + + {startTime12} + {nextTimeSlot?.slotStart ? ( + + {' '} + -{' '} + {DateTime.fromISO(nextTimeSlot.slotStart).toFormat('h:mm a').toLowerCase()} + + ) : null} + - {timeSlot.rooms.map((room) => { - const fullSession = schedule.rooms - .find((r) => r.id === room.id) - ?.sessions.find((session) => session.id === room.session.id) - const endsAtTime = fullSession?.endsAt.replace(/\d{4}-\d{2}-\d{2}T/, '') - const endTime12 = fullSession?.endsAt - ? DateTime.fromISO(fullSession.endsAt).toFormat('h:mm a').toLowerCase() - : undefined + {timeSlot.rooms.map((room) => { + const fullSession = schedule.rooms + .find((r) => r.id === room.id) + ?.sessions.find((session) => session.id === room.session.id) + const endsAtTime = fullSession?.endsAt.replace(/\d{4}-\d{2}-\d{2}T/, '') + const endTime12 = fullSession?.endsAt + ? DateTime.fromISO(fullSession.endsAt).toFormat('h:mm a').toLowerCase() + : undefined - const timeSlotEnd = endsAtTime?.replace(/:/g, '') ?? '' - const earliestEnd = !availableTimeSlots?.includes(timeSlotEnd) - ? nextTimeSlotStart - : (timeSlotEnd ?? nextTimeSlotStart) + const timeSlotEnd = endsAtTime?.replace(/:/g, '') ?? '' + const earliestEnd = !availableTimeSlots?.includes(timeSlotEnd) + ? nextTimeSlotStart + : (timeSlotEnd ?? nextTimeSlotStart) - return ( - - - - - {fullSession?.title} - - - - - - - {startTime12} - {endTime12} - - - + {fullSession?.title} + + )} + + - - - {room.name} - - {fullSession?.speakers?.length ? ( - - {fullSession?.speakers.map((speaker) => speaker.name)?.join(', ')} - - ) : null} - - - ) - })} - - ) - })} + {startTime12} - {endTime12} + + {fullSession?.isServiceSession ? null : ( + + + + + {room.name} + + )} + {fullSession?.speakers?.length ? ( + + + + + {fullSession?.speakers + .map((speaker) => speaker.name) + ?.join(', ')} + + ) : null} + + + ) + })} + + ) + })} + + + - - - - ) }