@@ -1,74 +1,47 @@
11import Head from "next/head";
2−import Meta from "../components/Meta";
32import Link from "next/link";
3+import { DateTime } from "luxon";
4+
5+import Meta from "../components/Meta";
46import Container from "../components/Container";
57import Footer from "../components/Footer";
68import Header from "../components/Header";
79import SingleColumn from "../components/SingleColumn";
810import Section from "../components/Section";
9−import { getAllPosts, formatDate } from "../lib/lib";
11+import EventPreview from "../components/EventPreview";
12+import { ShowOrHide } from "../components/Snippets";
1013import { contact } from "../lib/constants";
14+import {
15+ getAllPosts,
16+ generateDisplayDate,
17+ generateRealtimeDate,
18+ formatDate,
19+ formatTime,
20+} from "../lib/lib";
1121
12−export function EventCard({ event, dir, className }) {
13− // Event tiles have a 'dark mode' used when their background images are dark and white text is needed for legibility.
14− const grayText = event.extra?.dark ? "text-midWhite" : "text-wall-500";
15− const blackText = event.extra?.dark ? "text-white" : "text-wall-600";
16−
17− return (
18− <div
19− key={event.slug}
20− className={`mb-24 cursor-pointer bg-wall-100 rounded-xl h-96 bg-cover bg-center bg-no-repeat ${className}`}
21− style={{
22− backgroundImage:
23− `${
24− event.extra?.overlay
25− ? "linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)),"
26− : ""
27− }url(${event.extra?.image})` || "",
28− }}
29− >
30− <Link href={`${dir ? dir : "/events/"}${event.slug}`}>
31− <div className="flex flex-col p-8 justify-between items-between h-full relative">
32− <div className="flex-grow-1 flex flex-col justify-center h-full">
33− <h3 className={`mb-4 ${blackText}`}>{event.title}</h3>
34− <h4 className={grayText}>{event?.type}</h4>
35− </div>
36− <div className="absolute left-8 bottom-8 w-full">
37− <p className={grayText}>{event.extra.host}</p>
38− <p className={grayText}>{event.extra.guests}</p>
39− </div>
40− {event.extra.youtube ? (
41− <a
42− onClick={(e) => e.stopPropagation()}
43− className="absolute w-16 h-16 right-8 bottom-8 bg-white flex items-center justify-center rounded-full"
44− target="_blank"
45− href={`https://www.youtube.com/watch?v=${event.extra.youtube}`}
46− >
47− <svg
48− width="48"
49− height="48"
50− viewBox="0 0 16 16"
51− fill="none"
52− xmlns="http://www.w3.org/2000/svg"
53− >
54− <path
55− d="M11.25 7.56699C11.5833 7.75944 11.5833 8.24056 11.25 8.43301L6.75 11.0311C6.41667 11.2235 6 10.983 6 10.5981L6 5.40192C6 5.01702 6.41667 4.77646 6.75 4.96891L11.25 7.56699Z"
56− fill="black"
57− />
58− </svg>
59− </a>
60− ) : null}
61− </div>
62− </Link>
63− </div>
64− );
65−}
66−
67−export default function Events({ pastEvents, comingSoon, search }) {
22+export default function Events({ posts, search }) {
6823 const post = {
6924 title: "Events",
7025 description: "In-person, remote, and recorded events about Urbit.",
7126 };
27+
28+ const now = DateTime.now();
29+
30+ const pastEvents = posts.filter((post) => {
31+ const ends = generateRealtimeDate(post.ends);
32+ return ends < now;
33+ });
34+
35+ const futureEvents = posts.filter((post) => {
36+ const starts = generateRealtimeDate(post.date);
37+ return starts > now;
38+ });
39+ const happeningNow = posts.filter((post) => {
40+ const starts = generateRealtimeDate(post.date);
41+ const ends = generateRealtimeDate(post.ends);
42+ return starts > DateTime.now() && ends < now;
43+ });
44+
7245 return (
7346 <Container>
7447 <Head>
@@ -77,7 +50,7 @@ export default function Events({ pastEvents, comingSoon, search }) {
7750 </Head>
7851 <SingleColumn>
7952 <Header search={search} />
80− <Section narrow>
53+ <Section short narrow>
8154 <div className="measure">
8255 <h1 className="pb-16">Events</h1>
8356 <p className="pb-6">
@@ -91,21 +64,32 @@ export default function Events({ pastEvents, comingSoon, search }) {
9164 </Section>
9265
9366 <Section narrow>
94− {comingSoon.length > 0 ? (
67+ {happeningNow.length > 0 ? (
68+ <>
69+ <div className="mb-8 mt-16 table">
70+ <h3 className="text-green-400">Happening Now</h3>
71+ </div>
72+ {happeningNow.map((post) => {
73+ return <EventPreview big event={post} />;
74+ })}
75+ </>
76+ ) : null}
77+ {futureEvents.length > 0 ? (
9578 <>
96− <div className="mb-8 table">
97− <h3 className="text-wall-500">Coming Soon</h3>
79+ <div className="mb-8 mt-16 table">
80+ <h3 className="text-green-400">Coming Soon</h3>
9881 </div>
99− {comingSoon.map((post) => {
100− return <EventCard event={post} />;
82+ {futureEvents.map((post) => {
83+ return <EventPreview big event={post} />;
10184 })}
10285 </>
10386 ) : null}
104− <div className="mb-8 table">
87+ <div className="mb-8 mt-16 table">
10588 <h3 className="text-wall-500">Past Events</h3>
10689 </div>
90+
10791 {pastEvents.map((post) => {
108− return <EventCard event={post} />;
92+ return <EventPreview big event={post} className="mb-8" />;
10993 })}
11094 </Section>
11195 </SingleColumn>
@@ -115,15 +99,25 @@ export default function Events({ pastEvents, comingSoon, search }) {
11599}
116100
117101export async function getStaticProps() {
118− const posts = getAllPosts(["title", "slug", "date", "extra"], "events");
119−
120− // NB Gavin: This logic can change based on how we want to separate past vs current events
121− // const pastEvents = posts.filter((post) => !post.extra.pinned);
122− // const comingSoon = posts.filter((post) => post.extra.pinned);
123− const pastEvents = posts;
124− const comingSoon = posts;
102+ const posts = getAllPosts(
103+ [
104+ "title",
105+ "ends",
106+ "location",
107+ "image",
108+ "registration_url",
109+ "youtube",
110+ "description",
111+ "date",
112+ "hosts",
113+ "guests",
114+ "dark",
115+ "slug",
116+ ],
117+ "events"
118+ );
125119
126120 return {
127− props: { pastEvents, comingSoon },
121+ props: { posts },
128122 };
129123}