on master help sign in
complete events preview
commite66cdb464f62e20058784e036c0a062059f9e580 authorGavin Atkinson <gvnatknsn@protonmail.com> dateMon 16 Aug 2021, 17:52 (5 years ago) parent7886148
8 files changed+81−39
components/EventPreview.js+20−6 content/events/2021-09-02-21q3-dc-meetup.md+2−2 lib/lib.js+46−19 pages/events.js+4−2 pages/events/[slug].js−1 pages/index.js+1−1 scripts/event_date_upgrade.js+7−7 styles/globals.css+1−1
components/EventPreview.js+20−6
@@ -1,23 +1,37 @@
11import Link from "next/link";
2−import { formatDateWithTime } from "../lib/lib";
2+import { DateTime } from "luxon";
3+import {
4+ generateDisplayDate,
5+ generateRealtimeDate,
6+ formatDate,
7+ formatTime,
8+} from "../lib/lib";
39
410export default function EventPreview({ event, className, rsvp }) {
511 // Event tiles have a 'dark mode' used when their background images are dark and white text is needed for legibility.
612 const grayText = event.extra?.dark ? "text-midWhite" : "text-wall-500";
713 const blackText = event.extra?.dark ? "text-white" : "text-wall-600";
814
15+ const starts = generateDisplayDate(event.date);
16+ const ends = generateDisplayDate(event.ends);
17+
18+ const hasEnded = generateRealtimeDate(event.ends) > DateTime.now();
19+
920 return (
1021 <div className={`cursor-pointer ${className}`}>
1122 <div
1223 key={event.slug}
13− className={`bg-wall rounded-xl h-96 bg-cover bg-center bg-no-repeat`}
24+ className={`bg-wall-100 rounded-xl h-80 bg-cover bg-center bg-no-repeat`}
1425 style={{ backgroundImage: `url(${event?.image})` || "" }}
1526 >
1627 <Link href={`/events/${event.slug}`}>
17− <div className="flex flex-col p-4 justify-between items-between h-full relative">
28+ <div className="flex flex-col p-6 justify-between items-between h-full relative">
1829 <div className="flex-grow-1 flex flex-col justify-center h-full">
1930 <h4 className={`${blackText}`}>{event.title}</h4>
20− <p className={grayText}>{formatDateWithTime(event.date)}</p>
31+ <p className={grayText}>{formatDate(starts)}</p>
32+ <p className={grayText}>
33+ {formatTime(starts)} to {formatTime(ends)}
34+ </p>
2135 </div>
2236 <div className="absolute p-4 left-0 bottom-0 w-full">
2337 {event.hosts
@@ -61,10 +75,10 @@ export default function EventPreview({ event, className, rsvp }) {
6175 ))
6276 : null}
6377 </div>
64− {rsvp && event.registration_url ? (
78+ {hasEnded && event.registration_url ? (
6579 <div className="absolute right-0 bottom-0 p-4">
6680 <a
67− className="button-sm bg-green text-white"
81+ className="button-sm bg-green-400 text-white"
6882 href={event.registration_url}
6983 >
7084 RSVP
content/events/2021-09-02-21q3-dc-meetup.md+2−2
@@ -1,11 +1,11 @@
11+++
22title = "Urbit DC Meetup Q3 2021"
3−ends = "2021-09-02T17:30:00.000-07:00"
3+ends = "2021-09-02T17:30:00.000-04:00"
44location = "Room 1213, 1730 Rhode Island Ave NW, Washington, DC"
55image = ""
66registration_url = "https://www.meetup.com/DC-Urbit-Meetup-Group/events/279885879/"
77description = "Urbit Meetup in DC"
8−date = "2021-09-02T14:30:00.000-07:00"
8+date = "2021-09-02T14:30:00.000-04:00"
99
1010[[hosts]]
1111patp = "~tillys-fasryp"
lib/lib.js+46−19
@@ -129,30 +129,30 @@ export function getPreviousPost(slug, fields = [], key, sort = "date") {
129129 return resultPost;
130130}
131131
132−export function formatDate(d) {
133− // const wk = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
134− const mn = [
135− "January",
136− "February",
137− "March",
138− "April",
139− "May",
140− "June",
141− "July",
142− "August",
143− "September",
144− "October",
145− "November",
146− "December",
147− ];
148− return mn[d.getMonth()] + " " + d.getDate() + ", " + d.getFullYear();
149−}
132+// export function formatDate(d) {
133+// const wk = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
134+// const mn = [
135+// "January",
136+// "February",
137+// "March",
138+// "April",
139+// "May",
140+// "June",
141+// "July",
142+// "August",
143+// "September",
144+// "October",
145+// "November",
146+// "December",
147+// ];
148+// return mn[d.getMonth()] + " " + d.getDate() + ", " + d.getFullYear();
149+// }
150150
151151export function formatDateWithTime(d) {
152152 const date = DateTime.fromISO(d, {
153153 setZone: true,
154154 }).toLocaleString(DateTime.DATETIME_FULL);
155− console.log(date.zoneName);
155+ // console.log(date.zoneName);
156156 return date;
157157}
158158
@@ -160,6 +160,33 @@ export function capitalize(str) {
160160 return str.charAt(0).toUpperCase() + str.slice(1);
161161}
162162
163+// Takes an ISO 8601 date string
164+// Returns a time relative to the timezone in the iso8601 string
165+export function generateDisplayDate(iso8601) {
166+ return DateTime.fromISO(iso8601, { setZone: true });
167+}
168+
169+// Takes an ISO 8601 date string
170+// Returns a time relative to user's current timezone
171+export function generateRealtimeDate(iso8601) {
172+ return DateTime.fromISO(iso8601).setZone("system");
173+}
174+
175+// Formats a DateTime object to something like "July 15, 2021, 5:00 PM"
176+export function formatDateAndTime(dateTimeObject) {
177+ return dateTimeObject.toLocaleString(DateTime.DATETIME_HUGE);
178+}
179+
180+// Formats a DateTime object to something like "5:00 PM"
181+export function formatTime(dateTimeObject) {
182+ return dateTimeObject.toLocaleString(DateTime.TIME_SIMPLE);
183+}
184+
185+// Formats a DateTime object to something like "Jul 15, 2021"
186+export function formatDate(dateTimeObject) {
187+ return dateTimeObject.toLocaleString(DateTime.DATE_HUGE);
188+}
189+
163190// export function generateCrumbs(path) {
164191// const crumbs = path.split('/')
165192// return crumbs
pages/events.js+4−2
@@ -118,8 +118,10 @@ export async function getStaticProps() {
118118 const posts = getAllPosts(["title", "slug", "date", "extra"], "events");
119119
120120 // 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);
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;
123125
124126 return {
125127 props: { pastEvents, comingSoon },
pages/events/[slug].js−1
@@ -16,7 +16,6 @@ import SingleColumn from "../../components/SingleColumn";
1616import Contact from "../../components/Contact";
1717import EventPreview from "../../components/EventPreview";
1818import Section from "../../components/Section";
19−import markdownStyles from "../../styles/markdown.module.css";
2019import { decode } from "html-entities";
2120
2221export default function Event({
pages/index.js+1−1
@@ -262,7 +262,7 @@ export async function getStaticProps() {
262262 );
263263
264264 const events = getAllPosts(
265− ["title", "slug", "date", "guests", "hosts", "registration_url"],
265+ ["title", "slug", "date", "guests", "hosts", "registration_url", "ends"],
266266 "events"
267267 );
268268
scripts/event_date_upgrade.js+7−7
@@ -28,12 +28,12 @@ fs.readdirSync(dir, { withFileTypes: true })
2828 // const starts = DateTime.fromSeconds(fileContents.data.starts).toISO();
2929 // const ends = DateTime.fromSeconds(fileContents.data.ends).toISO();
3030 //
31− fileContents.data.date = DateTime.fromISO(fileContents.data.date).plus({
32− hours: 12,
33− });
34− fileContents.data.ends = DateTime.fromISO(fileContents.data.ends).plus({
35− hours: 12,
36− });
31+ // fileContents.data.date = DateTime.fromISO(fileContents.data.date).plus({
32+ // hours: 12,
33+ // });
34+ // fileContents.data.ends = DateTime.fromISO(fileContents.data.ends).plus({
35+ // hours: 12,
36+ // });
3737
3838 const data = matter.stringify(
3939 fileContents.content,
@@ -43,5 +43,5 @@ fs.readdirSync(dir, { withFileTypes: true })
4343
4444 console.log(data);
4545
46− fs.writeFileSync(path.join(dir, f.name), data);
46+ // fs.writeFileSync(path.join(dir, f.name), data);
4747 });
styles/globals.css+1−1
@@ -100,7 +100,7 @@ code .type-code {
100100}
101101
102102.button-sm {
103− @apply flex-center px-3 h-8 rounded-lg type-ui;
103+ @apply flex-center px-3 h-10 rounded-lg type-ui;
104104}
105105
106106.button-lg {