+
a:hover)]:[--bg:hsl(var(--color-neu-0)/.9)] dark:[&:has(>a:hover)]:[--bg:hsl(var(--color-neu-0)/.8)]",
+ "group relative size-full p-4 font-normal no-underline ring-neu-400 focus-visible:z-[1] dark:ring-neu-100 [&:has(>a:hover)]:ring-1",
+ blockTimeFraction < 1 && "[--bg:hsl(var(--color-neu-0)/50)]",
+ )}
+ style={
+ {
+ "--time": `${blockTimeFraction * 100}%`,
+ background:
+ blockTimeFraction < 1
+ ? `linear-gradient(to bottom, var(--bg), var(--bg) var(--time), hsl(var(--color-neu-0)/.8) var(--time), hsl(var(--color-neu-0)/.8))`
+ : "var(--bg)",
+ } as {}
+ }
+ >
s.name).join(", ")}`}
+ aria-label={`Read more about "${eventTitle}" by ${speakers
+ .map(s => s.name)
+ .join(", ")}`}
/>
{eventType && (
@@ -83,9 +122,28 @@ export function ScheduleSessionCard({
))}
)}
-
-
- {session.venue}
+
+
+
+ {session.venue}
+
+ {blockTimeFraction < 1 && (
+
+
+ {Math.round(
+ (new Date(session.event_end).getTime() -
+ new Date(session.event_start).getTime()) /
+ (1000 * 60),
+ )}{" "}
+ min
+
+ )}
+
@@ -93,3 +151,82 @@ export function ScheduleSessionCard({
)
}
+
+function AddToCalendarLink({
+ eventTitle,
+ session,
+ speakers,
+ className,
+}: {
+ eventTitle: string
+ session: ScheduleSession
+ speakers: SchedSpeaker[]
+ className?: string
+}) {
+ const calendarEvent: CalendarEvent = {
+ title: eventTitle,
+ start: session.event_start,
+ end: session.event_end,
+ description: session.description,
+ location: session.venue,
+ organizer: {
+ name: `GraphQLConf ${new Date().getFullYear()}`,
+ email: "graphql_events@linuxfoundation.org",
+ },
+ guests: speakers.map(s => s.name),
+ }
+
+ const calendars = {
+ ICS: ics,
+ Google: google,
+ Outlook: outlook,
+ }
+
+ return (
+
+ )
+}
diff --git a/src/app/conf/2025/speakers/[id]/long-session-card.tsx b/src/app/conf/2025/speakers/[id]/long-session-card.tsx
index 32ba47f9fd..6b046b9da2 100644
--- a/src/app/conf/2025/speakers/[id]/long-session-card.tsx
+++ b/src/app/conf/2025/speakers/[id]/long-session-card.tsx
@@ -1,5 +1,5 @@
import { clsx } from "clsx"
-import { ics } from "calendar-link"
+import { CalendarEvent, google, ics, outlook } from "calendar-link"
import { SchedSpeaker, ScheduleSession } from "@/app/conf/2023/types"
import { Button } from "@/app/conf/_design-system/button"
@@ -11,8 +11,10 @@ import PlusIcon from "@/app/conf/_design-system/pixelarticons/plus.svg?svgr"
import PlayIcon from "@/app/conf/_design-system/pixelarticons/play.svg?svgr"
import { findVideo } from "../../schedule/[id]/session-video"
import { getEventTitle } from "../../utils"
-import React from "react"
+import React, { Fragment } from "react"
import { SessionTags } from "../../components/session-tags"
+import { Menu, MenuItem, MenuItems, Transition } from "@headlessui/react"
+import { MenuButton } from "@headlessui/react"
export interface LongSessionCardProps
extends React.HTMLAttributes
{
@@ -159,29 +161,71 @@ function AddToCalendarLink({
eventTitle,
session,
speakers,
+ className,
}: {
eventTitle: string
session: ScheduleSession
speakers: SchedSpeaker[]
+ className?: string
}) {
+ const calendarEvent: CalendarEvent = {
+ title: eventTitle,
+ start: session.event_start,
+ end: session.event_end,
+ description: session.description,
+ location: session.venue,
+ organizer: {
+ name: `GraphQLConf ${new Date().getFullYear()}`,
+ email: "graphql_events@linuxfoundation.org",
+ },
+ guests: speakers.map(s => s.name),
+ }
+
+ const calendars = {
+ ICS: ics,
+ Google: google,
+ Outlook: outlook,
+ }
+
return (
- s.name),
- })}
- >
-
- Add to calendar
-
+
)
}
diff --git a/src/app/conf/_design-system/pixelarticons/clock.svg b/src/app/conf/_design-system/pixelarticons/clock.svg
index 9f0e6b1f9a..bfc82287a8 100644
--- a/src/app/conf/_design-system/pixelarticons/clock.svg
+++ b/src/app/conf/_design-system/pixelarticons/clock.svg
@@ -3,10 +3,9 @@
width="16"
height="16"
viewBox="0 0 16 16"
- fill="none"
+ fill="currentColor"
>
diff --git a/src/globals.css b/src/globals.css
index 8d33d859df..ac04ce6d8d 100644
--- a/src/globals.css
+++ b/src/globals.css
@@ -533,6 +533,7 @@ div[id^="headlessui-menu-items"] {
}
/* without this Headless UI breaks sticky navbar */
-html:has([role="listbox"][data-open]) {
+html:has([role="listbox"][data-open]),
+html:has([role="menu"][data-open]) {
overflow: visible !important;
}