diff --git a/src/components/content/PostCard.astro b/src/components/content/PostCard.astro index 7de83e2..a5b3797 100644 --- a/src/components/content/PostCard.astro +++ b/src/components/content/PostCard.astro @@ -24,6 +24,15 @@ const date = publishedAt ?? sharedAt; const authorLabel = author.displayName || `@${author.handle}`; const tag = tags?.[0]; const community = `@${source}`; + +function hueFromString(input: string): number { + let h = 0; + for (let i = 0; i < input.length; i++) { + h = (h * 31 + input.charCodeAt(i)) | 0; + } + return ((h % 360) + 360) % 360; +} +const communityHue = hueFromString(source); ---
@@ -38,12 +47,15 @@ const community = `@${source}`;

{title}

{excerpt &&

{excerpt}

}
- {tag && {tag}} - {community} + {community} {authorLabel} + {tag && #{tag}}
@@ -130,8 +142,20 @@ const community = `@${source}`; .post-card__date { color: var(--separator-fg); } - .post-card__date::before { - content: '·'; - margin-right: var(--space-sm); + + .post-card__tag { + color: var(--link); + font-weight: 500; + text-decoration: underline; + text-decoration-color: color-mix(in oklch, var(--link) 35%, transparent); + text-underline-offset: 2px; + } + .post-card__link:hover .post-card__tag { + text-decoration-color: currentColor; + } + + .post-card :global(.badge--location) { + background: oklch(94% 0.04 var(--community-hue, 250)); + color: oklch(38% 0.12 var(--community-hue, 250)); } diff --git a/src/components/events/EventCard.astro b/src/components/events/EventCard.astro index 5d798bf..6f5fa38 100644 --- a/src/components/events/EventCard.astro +++ b/src/components/events/EventCard.astro @@ -3,6 +3,7 @@ import { actions } from "astro:actions"; import EventLocation from "./EventLocation.astro"; import CheckIcon from "./icons/CheckIcon.astro"; import ExternalLinkIcon from "./icons/ExternalLinkIcon.astro"; +import { eventAnchorId } from "../../lib/community/happening-now"; interface Props { atUri: string; @@ -27,6 +28,7 @@ const { cid, name, startsAt, + endsAt, location, mode = "inperson", description, @@ -37,6 +39,23 @@ const { rsvpStatus, } = Astro.props; +const anchorId = eventAnchorId(atUri); +const DEFAULT_DURATION_MS = 2 * 60 * 60 * 1000; +const computedEndsAt = endsAt ?? new Date(startsAt.getTime() + DEFAULT_DURATION_MS); +const nowMs = Date.now(); +const isLive = + startsAt.getTime() <= nowMs && nowMs < computedEndsAt.getTime(); + +const dateKeyFmt = new Intl.DateTimeFormat("en-CA", { + year: "numeric", + month: "2-digit", + day: "2-digit", +}); +const isToday = + !isLive && + startsAt.getTime() > nowMs && + dateKeyFmt.format(startsAt) === dateKeyFmt.format(new Date(nowMs)); + const formattedDate = startsAt.toLocaleDateString("en-US", { weekday: "short", month: "short", @@ -64,7 +83,17 @@ const rsvpButtonAriaLabel = isGoing const canRsvp = showRsvp && isLoggedIn && Boolean(cid); --- -
+
{ sourceLabel && (
@@ -193,15 +222,69 @@ const canRsvp = showRsvp && isLoggedIn && Boolean(cid); .event-card { position: relative; padding: var(--space-base) var(--space-lg); - transition: border-color 0.15s ease; + transition: border-color 0.15s ease, box-shadow 0.2s ease, background 0.2s ease; display: flex; flex-direction: column; height: 100%; + scroll-margin-top: var(--space-2xl); } .event-card:hover { border-color: var(--card-border-hover); } + .event-card--live { + border-color: color-mix(in oklch, var(--primary) 55%, var(--border)); + background: + radial-gradient( + circle at 100% 0%, + color-mix(in oklch, var(--primary) 10%, var(--card)) 0%, + var(--card) 65% + ); + } + .event-card--live::before, + .event-card--today::before { + position: absolute; + top: var(--space-sm); + right: var(--space-sm); + padding: 2px var(--space-sm); + border-radius: var(--radius-pill); + font-size: 10px; + font-weight: 700; + letter-spacing: 0.1em; + text-transform: uppercase; + line-height: 1.4; + } + .event-card--live::before { + content: "Live now"; + background: var(--primary); + color: var(--primary-foreground); + } + .event-card--today::before { + content: "Today"; + background: color-mix(in oklch, var(--primary) 14%, var(--card)); + color: var(--primary); + border: 1px solid color-mix(in oklch, var(--primary) 35%, var(--border)); + } + + .event-card:target { + border-color: var(--primary); + box-shadow: 0 0 0 3px color-mix(in oklch, var(--primary) 28%, transparent); + animation: event-card-target-pulse 1.4s ease-out; + } + @keyframes event-card-target-pulse { + 0% { + box-shadow: 0 0 0 0 color-mix(in oklch, var(--primary) 45%, transparent); + } + 100% { + box-shadow: 0 0 0 3px color-mix(in oklch, var(--primary) 28%, transparent); + } + } + @media (prefers-reduced-motion: reduce) { + .event-card:target { + animation: none; + } + } + .event-card__date { font-size: var(--text-sm); font-weight: 700; diff --git a/src/components/events/HappeningNow.astro b/src/components/events/HappeningNow.astro new file mode 100644 index 0000000..230ecbe --- /dev/null +++ b/src/components/events/HappeningNow.astro @@ -0,0 +1,462 @@ +--- +import { + eventAnchorId, + formatStartsIn, + formatTimeLeft, + selectHappeningNowGroups, +} from "../../lib/community/happening-now"; + +interface HappeningNowEvent { + atUri: string; + uri: string; + name: string; + startsAt: Date; + endsAt?: Date; + location?: string; + mode?: "inperson" | "virtual" | "hybrid"; + source?: string; +} + +interface Props { + events: HappeningNowEvent[]; +} + +const { events } = Astro.props; + +const groups = selectHappeningNowGroups(events); +const nowMs = Date.now(); + +const sections = [ + { + id: "now", + heading: "Now", + label: "Live", + items: groups.now, + empty: "Nothing live right now.", + }, + { + id: "today", + heading: "Today", + label: "Today", + items: groups.today, + empty: "Nothing else today.", + }, + { + id: "week", + heading: "This week", + label: "This week", + items: groups.thisWeek, + empty: "Nothing else this week.", + }, +]; +const hasItems = sections.some((section) => section.items.length > 0); + +// SSR fallback for the absolute start time; the client script swaps this +// for the visitor's local time zone on hydration. +const startTimeFmt = new Intl.DateTimeFormat("en-US", { + hour: "numeric", + minute: "2-digit", + timeZone: "UTC", +}); +--- + +{ + hasItems && ( +
+
+
+

+ {groups.now.length > 0 && ( +

+

Live and upcoming community events.

+
+ +
+ {sections.map((section, sectionIndex) => ( +
+

+ {section.heading} +

+
+ {section.items.length > 0 ? ( + section.items.map((item, itemIndex) => { + const status = item.isLive ? "live" : "soon"; + const relative = item.isLive + ? formatTimeLeft(item.endsAt.getTime() - nowMs) + : formatStartsIn(item.startsAt.getTime() - nowMs); + const startIso = item.startsAt.toISOString(); + const endIso = item.endsAt.toISOString(); + return ( + +
+ + {item.isLive ? ( + <> + + + {relative} + +
+ +

{item.event.name}

+ +
+ + {item.event.location && ( + <> + + + {item.event.location} + + + )} +
+ + ); + }) + ) : ( +

{section.empty}

+ )} +
+
+ ))} +
+
+
+ ) +} + + + + diff --git a/src/components/layout/GetInvolved.astro b/src/components/layout/GetInvolved.astro index 59c5ada..cca314d 100644 --- a/src/components/layout/GetInvolved.astro +++ b/src/components/layout/GetInvolved.astro @@ -36,13 +36,16 @@ const highlights = [
{ highlights.map((highlight) => ( -
+

{highlight.title}

{highlight.description}

- - {highlight.linkText} - -
+ {highlight.linkText} + )) }
@@ -58,6 +61,20 @@ const highlights = [ display: flex; flex-direction: column; gap: var(--space-sm); + color: inherit; + text-decoration: none; + transition: border-color 0.15s ease, transform 0.15s ease; + } + .highlight-card:hover { + border-color: var(--card-border-hover, var(--primary)); + } + .highlight-card:hover .highlight-card__cta { + text-decoration: underline; + text-underline-offset: 2px; + } + .highlight-card:focus-visible { + outline: 2px solid var(--ring, var(--primary)); + outline-offset: 2px; } .highlight-card h3 { font-family: var(--font-body); @@ -69,7 +86,9 @@ const highlights = [ color: var(--foreground-muted); line-height: var(--leading-normal); } - .highlight-card a { + .highlight-card__cta { + margin-top: auto; + color: var(--primary); font-size: var(--text-xs); font-weight: 500; } diff --git a/src/lib/community/happening-now.ts b/src/lib/community/happening-now.ts new file mode 100644 index 0000000..1238f9d --- /dev/null +++ b/src/lib/community/happening-now.ts @@ -0,0 +1,154 @@ +const DEFAULT_DURATION_MS = 2 * 60 * 60 * 1000; +const THIS_WEEK_WINDOW_MS = 7 * 24 * 60 * 60 * 1000; + +export function eventAnchorId(atUri: string): string { + return `event-${atUri.replace(/[^a-zA-Z0-9]+/g, "-").replace(/^-+|-+$/g, "")}`; +} + +export const HAPPENING_NOW_LIMIT = 3; +export const HAPPENING_TODAY_LIMIT = 3; +export const HAPPENING_THIS_WEEK_LIMIT = 6; + +export interface HappeningNowCandidate { + atUri: string; + startsAt: Date; + endsAt?: Date; +} + +export interface HappeningNowAnnotation { + event: T; + isLive: boolean; + startsAt: Date; + endsAt: Date; +} + +export interface HappeningNowGroups { + now: HappeningNowAnnotation[]; + today: HappeningNowAnnotation[]; + thisWeek: HappeningNowAnnotation[]; +} + +export function selectHappeningNow( + events: T[], + now: Date = new Date(), +): HappeningNowAnnotation[] { + return annotateEvents(events) + .map((it) => withLiveState(it, now)) + .filter((it) => it.isLive) + .sort((a, b) => a.endsAt.getTime() - b.endsAt.getTime()) + .slice(0, HAPPENING_NOW_LIMIT); +} + +export function selectHappeningNowGroups( + events: T[], + now: Date = new Date(), + timeZone: string = Intl.DateTimeFormat().resolvedOptions().timeZone, +): HappeningNowGroups { + const annotated = annotateEvents(events) + .map((it) => withLiveState(it, now)) + .filter((it) => it.endsAt.getTime() > now.getTime()) + .sort((a, b) => a.startsAt.getTime() - b.startsAt.getTime()); + + const nowItems = annotated + .filter((it) => it.isLive) + .slice(0, HAPPENING_NOW_LIMIT); + const liveUris = new Set(nowItems.map((it) => it.event.atUri)); + + const todayKey = getDateKey(now, timeZone); + const thisWeekEndsAt = now.getTime() + THIS_WEEK_WINDOW_MS; + + const today = annotated + .filter( + (it) => + !liveUris.has(it.event.atUri) && + it.startsAt.getTime() > now.getTime() && + getDateKey(it.startsAt, timeZone) === todayKey, + ) + .slice(0, HAPPENING_TODAY_LIMIT); + const todayUris = new Set(today.map((it) => it.event.atUri)); + + const thisWeek = annotated + .filter( + (it) => + !liveUris.has(it.event.atUri) && + !todayUris.has(it.event.atUri) && + it.startsAt.getTime() > now.getTime() && + it.startsAt.getTime() < thisWeekEndsAt, + ) + .slice(0, HAPPENING_THIS_WEEK_LIMIT); + + return { now: nowItems, today, thisWeek }; +} + +function annotateEvents( + events: T[], +): HappeningNowAnnotation[] { + return events + .map((event) => { + const startsAt = event.startsAt; + const endsAt = event.endsAt + ? event.endsAt + : new Date(startsAt.getTime() + DEFAULT_DURATION_MS); + return { event, isLive: false, startsAt, endsAt }; + }) + .filter((it) => it.endsAt.getTime() > it.startsAt.getTime()); +} + +function isLiveAt( + item: HappeningNowAnnotation, + now: Date, +): boolean { + const nowMs = now.getTime(); + return ( + item.startsAt.getTime() <= nowMs && + nowMs < item.endsAt.getTime() + ); +} + +function withLiveState( + item: HappeningNowAnnotation, + now: Date, +): HappeningNowAnnotation { + return { ...item, isLive: isLiveAt(item, now) }; +} + +function getDateKey(date: Date, timeZone: string): string { + return new Intl.DateTimeFormat("en-CA", { + timeZone, + year: "numeric", + month: "2-digit", + day: "2-digit", + }).format(date); +} + +// Display helpers — no Temporal import here so they stay cheap in the +// client bundle that re-renders countdowns on a tick. + +const RTF = new Intl.RelativeTimeFormat("en", { numeric: "auto" }); + +type DisplayUnit = "minute" | "hour" | "day"; + +function pickUnit(ms: number): { value: number; unit: DisplayUnit } { + const abs = Math.abs(ms); + if (abs < 3_600_000) + return { value: Math.round(ms / 60_000), unit: "minute" }; + if (abs < 86_400_000) + return { value: Math.round(ms / 3_600_000), unit: "hour" }; + return { value: Math.round(ms / 86_400_000), unit: "day" }; +} + +export function formatStartsIn(diffMs: number): string { + if (diffMs <= 0) return "starting now"; + const { value, unit } = pickUnit(diffMs); + return RTF.format(value, unit); +} + +export function formatTimeLeft(diffMs: number): string { + if (diffMs <= 0) return "ended"; + const { value, unit } = pickUnit(diffMs); + return `${new Intl.NumberFormat("en", { + style: "unit", + unit, + unitDisplay: "long", + }).format(value)} left`; +} diff --git a/src/pages/events.astro b/src/pages/events.astro index 35ef2a1..f671cb4 100644 --- a/src/pages/events.astro +++ b/src/pages/events.astro @@ -6,6 +6,7 @@ import { getLiveCollection } from 'astro:content'; import Base from '../layouts/Base.astro'; import Header from '../components/layout/Header.astro'; import Footer from '../components/layout/Footer.astro'; +import HappeningNow from '../components/events/HappeningNow.astro'; import EventCard from '../components/events/EventCard.astro'; import RsvpNotice from '../components/events/RsvpNotice.astro'; import { getRsvpsForEvents, type CalendarRsvp } from '../lib/rsvps'; @@ -64,6 +65,8 @@ const rsvpMessage = Astro.url.searchParams.get('rsvp');

We couldn't check which events you're going to right now.

)} + + {upcomingEvents.length > 0 ? (
{upcomingEvents.map((event) => ( @@ -110,7 +113,7 @@ const rsvpMessage = Astro.url.searchParams.get('rsvp'); .events-sub { color: var(--foreground-secondary); - font-size: var(--text-sm); + font-size: var(--text-base); max-width: 55ch; line-height: var(--leading-relaxed); } diff --git a/src/styles/tokens.components.css b/src/styles/tokens.components.css index 4caff35..c1aca33 100644 --- a/src/styles/tokens.components.css +++ b/src/styles/tokens.components.css @@ -6,14 +6,14 @@ :root { /* Badges */ - --badge-tag-bg: var(--primary-muted); - --badge-tag-fg: var(--primary-muted-foreground); + --badge-tag-bg: color-mix(in oklch, var(--color-accent) 18%, var(--color-base-100)); + --badge-tag-fg: color-mix(in oklch, var(--color-accent) 75%, var(--color-base-content)); --badge-online-bg: var(--primary-muted); --badge-online-fg: var(--primary-muted-foreground); - --badge-location-bg: var(--success-muted); - --badge-location-fg: var(--success-muted-foreground); + --badge-location-bg: color-mix(in oklch, var(--color-success) 22%, var(--color-base-100)); + --badge-location-fg: color-mix(in oklch, var(--color-success) 75%, var(--color-base-content)); /* Buttons */ --btn-primary-bg: var(--primary);