Skip to content

Commit 9cae87d

Browse files
rayriffyrayriffy
committed
feat: schedule
1 parent 73b744f commit 9cae87d

File tree

18 files changed

+447
-44
lines changed

18 files changed

+447
-44
lines changed

‎astro.config.mjs‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import svelte from '@astrojs/svelte'
66
// https://astro.build/config
77
export default defineConfig({
88
integrations: [tailwind(), svelte()],
9+
prefetch: true,
910
image: {
1011
domains: ["sessionize.com"],
1112
}

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@
2929
"typescript": "^5.5.4"
3030
},
3131
"dependencies": {
32-
"clsx": "^2.1.1"
32+
"clsx": "^2.1.1",
33+
"dayjs": "^1.11.13"
3334
}
3435
}

‎pnpm-lock.yaml‎

Lines changed: 8 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/packlets/new-front/dates.astro‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
---
2+
import ScheduleTabs from '$schedule/tabs.svelte'
3+
---
4+
5+
<section class="grid grid-cols-1 gap-8 bg-brand-orange px-8 py-12 text-white md:grid-cols-2">
6+
<div class="text-center font-bold">
7+
<h1 class="text-xl">Day 1</h1>
8+
<h2 class="text-4xl">Workshop</h2>
9+
<h3 class="text-xl">(Fri) October 18, 2024</h3>
10+
<p class="pt-4 text-lg font-normal">Microsoft Thailand</p>
11+
</div>
12+
<div class="text-center font-bold">
13+
<h1 class="text-xl">Day 2</h1>
14+
<h2 class="text-4xl">Conference</h2>
15+
<h3 class="text-xl">(Sat) October 19, 2024</h3>
16+
<p class="pt-4 text-lg font-normal">True Digital Park West</p>
17+
</div>
18+
</section>

‎src/packlets/new-front/schedule.astro‎

Lines changed: 30 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,33 @@
11
---
2-
import ScheduleTabs from '$schedule/tabs.svelte'
2+
import { experimental_AstroContainer } from 'astro/container'
3+
import { getSessionizeSchedules } from '$sessionize/getSessionizeSchedules'
4+
5+
import Day from "$schedule/day.astro";
6+
import Switcher from "$schedule/switcher.svelte";
7+
8+
const schedules = await getSessionizeSchedules()
9+
10+
const container = await experimental_AstroContainer.create();
11+
const workshopDay = await container.renderToString(Day, {
12+
// @ts-ignore
13+
props: schedules[0]
14+
});
15+
const conferenceDay = await container.renderToString(Day, {
16+
// @ts-ignore
17+
props: schedules[1]
18+
});
319
---
420

5-
<section class="grid grid-cols-1 gap-8 bg-brand-orange px-8 py-12 text-white md:grid-cols-2">
6-
<div class="text-center font-bold">
7-
<h1 class="text-xl">Day 1</h1>
8-
<h2 class="text-4xl">Workshop</h2>
9-
<h3 class="text-xl">(Fri) October 18, 2024</h3>
10-
<p class="pt-4 text-lg font-normal">Microsoft Thailand</p>
11-
</div>
12-
<div class="text-center font-bold">
13-
<h1 class="text-xl">Day 2</h1>
14-
<h2 class="text-4xl">Conference</h2>
15-
<h3 class="text-xl">(Sat) October 19, 2024</h3>
16-
<p class="pt-4 text-lg font-normal">True Digital Park West</p>
17-
</div>
18-
</section>
21+
<section class="py-12 px-8 bg-white">
22+
<div class="pb-12 text-center">
23+
<h1 class="pb-6 text-5xl font-bold text-brand-orange">Schedule</h1>
24+
</div>
25+
26+
<Switcher
27+
workshopHtml={workshopDay}
28+
conferenceHtml={conferenceDay}
29+
client:idle
30+
/>
31+
<!--<Day {...schedules[0]} />-->
32+
<!--<Day {...schedules[1]} />-->
33+
</section>

‎src/packlets/new-front/speakers.astro‎

Lines changed: 2 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,9 @@
11
---
22
import { Picture } from 'astro:assets'
33
import Kanok from '$sprites/kanok.svelte'
4+
import { getSessionizeData } from '$sessionize/getSessionizeData'
45
5-
interface Speaker {
6-
id: string
7-
firstName: string
8-
lastName: string
9-
fullName: string
10-
tagLine: string
11-
profilePicture: string
12-
isTopSpeaker: boolean
13-
}
14-
15-
const speakers: Speaker[] = await fetch("https://sessionize.com/api/v2/i9esy36q/view/SpeakerWall")
16-
.then(o => o.json())
6+
const { speakers } = await getSessionizeData()
177
---
188

199
<section class="bg-brand-green px-8 py-12">

‎src/packlets/new-front/tickets.astro‎

Lines changed: 18 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,20 +2,25 @@
22
import { Image } from 'astro:assets'
33
44
import ticketsAvailable from '$assets/tickets-avail.svg'
5+
6+
import './tickets.css'
57
---
68

7-
<section class="bg-brand-blue px-8 py-12">
8-
<h1 class="text-5xl font-bold text-white text-center pb-6">Tickets</h1>
9-
<p class="mx-auto max-w-3xl text-center text-white pb-12 text-lg">
10-
Tickets are on sale, and available for purchase at <a class="text-brand-green" href="https://www.eventpop.me/e/38704/javascript-bangkok-2-0-0">Eventpop</a>
11-
</p>
12-
<div class="flex justify-center">
13-
<a
14-
href="https://www.eventpop.me/e/38704/javascript-bangkok-2-0-0"
15-
target="_blank"
16-
rel="noopener noreferrer"
17-
class="bg-white rounded-tr-3xl shadow-lg p-2">
18-
<Image src={ticketsAvailable} alt="Ticket avaialble at Eventpop" class="w-72" />
19-
</a>
9+
<section class="bg-white pt-12">
10+
<div class="px-8">
11+
<h1 class="text-5xl font-bold text-brand-orange text-center pb-6">Tickets</h1>
12+
<p class="mx-auto max-w-3xl text-center pb-12 text-lg">
13+
Tickets are on sale, and available for purchase at <a class="text-brand-orange" href="https://www.eventpop.me/e/38704/javascript-bangkok-2-0-0">Eventpop</a>
14+
</p>
2015
</div>
16+
<eventpop-tickets-widget eventid="38704"></eventpop-tickets-widget>
17+
<!--<div class="flex justify-center">-->
18+
<!-- <a-->
19+
<!-- href="https://www.eventpop.me/e/38704/javascript-bangkok-2-0-0"-->
20+
<!-- target="_blank"-->
21+
<!-- rel="noopener noreferrer"-->
22+
<!-- class="bg-white rounded-tr-3xl shadow-lg p-2">-->
23+
<!-- <Image src={ticketsAvailable} alt="Ticket avaialble at Eventpop" class="w-72" />-->
24+
<!-- </a>-->
25+
<!--</div>-->
2126
</section>

‎src/packlets/new-front/tickets.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
div.root.svelte-voemo6 {
2+
background: transparent !important;
3+
}

‎src/packlets/schedule/day.astro‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
---
2+
import type { SessionizeDate } from "../sessionize/types";
3+
import { clsx } from "clsx";
4+
import Slot from '$schedule/slot.astro'
5+
import dayjs from "dayjs";
6+
import utc from 'dayjs/plugin/utc'
7+
import timezone from 'dayjs/plugin/timezone'
8+
9+
export type Props = SessionizeDate
10+
11+
dayjs.extend(utc)
12+
dayjs.extend(timezone)
13+
14+
const { rooms, timeSlots } = Astro.props
15+
---
16+
17+
<div class="grid gap-2 grid-cols-1 md:[grid-template-columns:minmax(100px,1fr)_minmax(0,3fr)_minmax(0,3fr)_minmax(0,3fr)]">
18+
{rooms.map((room, i) => (
19+
<div class={clsx(i === 0 && 'md:col-start-2', 'font-bold text-xl md:block hidden pb-2')}>{room.name.replace(/(\sat\s.+)$/, '').trim()}</div>
20+
))}
21+
{timeSlots.map((timeSlot, i) => {
22+
const time = dayjs(`2024-10-18T${timeSlot.slotStart}.000Z`).tz('Asia/Bangkok').format("HH:mm")
23+
24+
return (
25+
<>
26+
<div class="hidden md:block md:col-start-1">{time}</div>
27+
{timeSlot.rooms.map(room => (
28+
<Slot time={time} {...room} />
29+
))}
30+
{i + 1 !== timeSlots.length && (
31+
<div class="col-span-7 hidden md:block">
32+
<div class="border-b border-gray-300"></div>
33+
</div>
34+
)}
35+
</>
36+
)
37+
})}
38+
</div>

‎src/packlets/schedule/session.astro‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
---
2+
import { clsx } from 'clsx'
3+
import type { TimeSlot } from '$sessionize/types'
4+
5+
export type Props = TimeSlot['rooms'][number]['session'] & {
6+
time: string
7+
location: string
8+
}
9+
10+
const { time, location, isServiceSession, categories, title, speakers } = Astro.props
11+
---
12+
13+
<p class={clsx(!isServiceSession && "pb-2", 'md:hidden')}>{time} @{location.replace(/(\sat\s.+)$/, '').trim()}</p>
14+
15+
{!isServiceSession && (
16+
<div class="flex pb-2">
17+
<p class="text-xs bg-white px-2 py-0.5 text-black rounded-sm font-semibold">
18+
{categories.find(c => c.name === 'Session language')?.categoryItems[0].name === 'Thai' ? '🇹🇭 Thai' : '🇬🇧 English'}
19+
</p>
20+
</div>
21+
)}
22+
<p class="font-bold">{title}</p>
23+
{!isServiceSession && (
24+
<div class="pt-2">
25+
{speakers.map(speaker => (
26+
<p>{speaker.name}</p>
27+
))}
28+
</div>
29+
)}

0 commit comments

Comments
 (0)