From 4aa3b3c2cacc09212a248c002d16c1b284861cc6 Mon Sep 17 00:00:00 2001 From: Amy Date: Wed, 18 Aug 2021 23:59:58 -0400 Subject: [PATCH 1/5] Add dynamic importing of upcoming events --- lib/events.ts | 46 +++++++++++++++++++++++++++++++++++ pages/index.module.css | 4 ++- pages/index.tsx | 55 +++++++++++++++++++++++++++--------------- 3 files changed, 84 insertions(+), 21 deletions(-) diff --git a/lib/events.ts b/lib/events.ts index 886b6954..1b9f4b4b 100644 --- a/lib/events.ts +++ b/lib/events.ts @@ -62,3 +62,49 @@ export async function getEventsByTerm( .filter((name) => name.endsWith(".md")) .map((name) => name.slice(0, -".md".length)); } + +export async function getUpcomingEvents(): Promise { + const today = new Date(); + const currentYear = today.getFullYear(); + const currentTerm = Math.trunc(today.getMonth() / 4); + const nextYear = currentTerm < 2 ? currentYear : currentYear + 1; + const nextTerm = (currentTerm + 1) % 3; + + let currentEvents: Event[] = []; + try { + currentEvents = await Promise.all( + ( + await getEventsByTerm(currentYear.toString(), TERMS[currentTerm]) + ).map( + async (slug) => + await getEventBySlug(currentYear.toString(), TERMS[currentTerm], slug) + ) + ); + } catch (error) { + currentEvents = []; + } + let nextEvents: Event[] = []; + try { + nextEvents = await Promise.all( + ( + await getEventsByTerm(nextYear.toString(), TERMS[nextTerm]) + ).map( + async (slug) => + await getEventBySlug(nextYear.toString(), TERMS[nextTerm], slug) + ) + ); + } catch (error) { + nextEvents = []; + } + return currentEvents + .concat(nextEvents) + .filter((ev) => { + return new Date(ev.metadata.date).getTime() > Date.now(); + }) + .sort((a, b) => { + return ( + new Date(a.metadata.date).getTime() - + new Date(b.metadata.date).getTime() + ); + }); +} diff --git a/pages/index.module.css b/pages/index.module.css index a68520e4..3d098dc4 100644 --- a/pages/index.module.css +++ b/pages/index.module.css @@ -119,6 +119,7 @@ } .cards > section { + width: calc(540rem / 16); max-width: calc(540rem / 16); } } @@ -171,13 +172,14 @@ .cards { flex-direction: column; justify-content: flex-start; - align-items: center; + align-items: stretch; gap: calc(8rem / 16); padding: calc(36rem / 16) calc(20rem / 16) calc(20rem / 16); } .cards > section { + width: unset; max-width: unset; } diff --git a/pages/index.tsx b/pages/index.tsx index 9d31b9e3..edb4d65c 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,3 +1,6 @@ +import { ParsedUrlQuery } from "querystring"; + +import { GetStaticProps } from "next"; import React from "react"; import { ConnectWithUs } from "@/components/ConnectWithUs"; @@ -7,27 +10,19 @@ import { EventDescriptionCard } from "@/components/EventDescriptionCard"; import { Image } from "@/components/Image"; import { NewsCard } from "@/components/NewsCard"; import { SocialLinks } from "@/components/SocialLinks"; +import { Event, getUpcomingEvents } from "@/lib/events"; -import AltTab, { - metadata as altTabEventMetadata, -} from "../content/playground/alt-tab.event.mdx"; -import OOTBReact, { - metadata as OOTBReactEventMetadata, -} from "../content/playground/ootb-react.event.mdx"; import UnavailableContent, { metadata as unavailableMetadata, } from "../content/playground/unavailable.news.mdx"; import styles from "./index.module.css"; -// temporary event and news imports - -export default function Home() { - const events = [ - { Content: OOTBReact, metadata: OOTBReactEventMetadata }, - { Content: AltTab, metadata: altTabEventMetadata }, - ]; +interface Props { + events: Event[]; +} +export default function Home(props: Props) { return ( <> @@ -54,18 +49,31 @@ export default function Home() {
- {/* TODO: add links to past events and past news */} + {/* TODO: add links to past/upcoming events and past news */}

Upcoming Events

See past events here

- {events.map(({ metadata }) => ( - - ))} + {props.events.length > 0 ? ( + props.events + .slice(0, 2) + .map((event) => ( + + )) + ) : ( +

+ There are no upcoming events right now. Please check back + later! +

+ )} + {props.events.length > 2 ? ( +

See more upcoming events here

+ ) : null}
@@ -92,3 +100,10 @@ export default function Home() { Home.Layout = function HomeLayout(props: { children: React.ReactNode }) { return
{props.children}
; }; + +type Params = ParsedUrlQuery; + +export const getStaticProps: GetStaticProps = async () => { + const events = await getUpcomingEvents(); + return { props: { events } }; +}; From 0a06301364a394b2643586c6ae725cbffb5ee500 Mon Sep 17 00:00:00 2001 From: Amy Date: Thu, 19 Aug 2021 00:18:33 -0400 Subject: [PATCH 2/5] Refactor getUpcomingEvents() --- lib/events.ts | 57 +++++++++++++++++++++++---------------------------- 1 file changed, 26 insertions(+), 31 deletions(-) diff --git a/lib/events.ts b/lib/events.ts index 1b9f4b4b..be78c66a 100644 --- a/lib/events.ts +++ b/lib/events.ts @@ -70,37 +70,32 @@ export async function getUpcomingEvents(): Promise { const nextYear = currentTerm < 2 ? currentYear : currentYear + 1; const nextTerm = (currentTerm + 1) % 3; - let currentEvents: Event[] = []; - try { - currentEvents = await Promise.all( - ( - await getEventsByTerm(currentYear.toString(), TERMS[currentTerm]) - ).map( - async (slug) => - await getEventBySlug(currentYear.toString(), TERMS[currentTerm], slug) - ) - ); - } catch (error) { - currentEvents = []; - } - let nextEvents: Event[] = []; - try { - nextEvents = await Promise.all( - ( - await getEventsByTerm(nextYear.toString(), TERMS[nextTerm]) - ).map( - async (slug) => - await getEventBySlug(nextYear.toString(), TERMS[nextTerm], slug) - ) - ); - } catch (error) { - nextEvents = []; - } - return currentEvents - .concat(nextEvents) - .filter((ev) => { - return new Date(ev.metadata.date).getTime() > Date.now(); - }) + const events: Event[] = ( + await Promise.all( + [ + { year: currentYear, term: currentTerm }, + { year: nextYear, term: nextTerm }, + ].map(async ({ year, term }) => { + try { + const eventsInTerm = await getEventsByTerm( + year.toString(), + TERMS[term] + ); + return await Promise.all( + eventsInTerm.map( + async (slug) => + await getEventBySlug(year.toString(), TERMS[term], slug) + ) + ); + } catch (error) { + return []; + } + }) + ) + ).flat(); + + return events + .filter((ev) => new Date(ev.metadata.date).getTime() > Date.now()) .sort((a, b) => { return ( new Date(a.metadata.date).getTime() - From 80890eef2aede4d57fe86dacf32fc01d75440205 Mon Sep 17 00:00:00 2001 From: Amy Date: Thu, 19 Aug 2021 01:47:25 -0400 Subject: [PATCH 3/5] Add getRecentEvents() --- lib/events.ts | 14 ++++------- lib/news.ts | 37 +++++++++++++++++++++++++++++ pages/index.tsx | 63 ++++++++++++++++++++++++++++--------------------- 3 files changed, 78 insertions(+), 36 deletions(-) diff --git a/lib/events.ts b/lib/events.ts index be78c66a..c9725f61 100644 --- a/lib/events.ts +++ b/lib/events.ts @@ -73,18 +73,14 @@ export async function getUpcomingEvents(): Promise { const events: Event[] = ( await Promise.all( [ - { year: currentYear, term: currentTerm }, - { year: nextYear, term: nextTerm }, + { year: currentYear.toString(), term: currentTerm }, + { year: nextYear.toString(), term: nextTerm }, ].map(async ({ year, term }) => { try { - const eventsInTerm = await getEventsByTerm( - year.toString(), - TERMS[term] - ); + const eventsInTerm = await getEventsByTerm(year, TERMS[term]); return await Promise.all( eventsInTerm.map( - async (slug) => - await getEventBySlug(year.toString(), TERMS[term], slug) + async (slug) => await getEventBySlug(year, TERMS[term], slug) ) ); } catch (error) { @@ -95,7 +91,7 @@ export async function getUpcomingEvents(): Promise { ).flat(); return events - .filter((ev) => new Date(ev.metadata.date).getTime() > Date.now()) + .filter((ev) => new Date(ev.metadata.date).getTime() >= Date.now()) .sort((a, b) => { return ( new Date(a.metadata.date).getTime() - diff --git a/lib/news.ts b/lib/news.ts index 0d9b8bdd..6329964b 100644 --- a/lib/news.ts +++ b/lib/news.ts @@ -65,3 +65,40 @@ export async function getNewsBySlug( metadata: metadata as Metadata, }; } + +export async function getRecentNews(): Promise { + const today = new Date(); + const currentYear = today.getFullYear(); + const currentTerm = Math.trunc(today.getMonth() / 4); + const prevYear = currentTerm > 0 ? currentYear : currentYear - 1; + const prevTerm = (currentTerm - 1 + 3) % 3; + + const news: News[] = ( + await Promise.all( + [ + { year: currentYear.toString(), term: currentTerm }, + { year: prevYear.toString(), term: prevTerm }, + ].map(async ({ year, term }) => { + try { + const newsInTerm = await getNewsByTerm(year, TERMS[term]); + return await Promise.all( + newsInTerm.map( + async (slug) => await getNewsBySlug(year, TERMS[term], slug) + ) + ); + } catch (error) { + return []; + } + }) + ) + ).flat(); + + return news + .filter((news) => new Date(news.metadata.date).getTime() <= Date.now()) + .sort((a, b) => { + return ( + new Date(b.metadata.date).getTime() - + new Date(a.metadata.date).getTime() + ); + }); +} diff --git a/pages/index.tsx b/pages/index.tsx index edb4d65c..6fe67c11 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,6 +1,7 @@ import { ParsedUrlQuery } from "querystring"; import { GetStaticProps } from "next"; +import { MDXRemote } from "next-mdx-remote"; import React from "react"; import { ConnectWithUs } from "@/components/ConnectWithUs"; @@ -11,15 +12,13 @@ import { Image } from "@/components/Image"; import { NewsCard } from "@/components/NewsCard"; import { SocialLinks } from "@/components/SocialLinks"; import { Event, getUpcomingEvents } from "@/lib/events"; - -import UnavailableContent, { - metadata as unavailableMetadata, -} from "../content/playground/unavailable.news.mdx"; +import { News, getRecentNews } from "@/lib/news"; import styles from "./index.module.css"; interface Props { events: Event[]; + news: News[]; } export default function Home(props: Props) { @@ -54,27 +53,29 @@ export default function Home(props: Props) {

Upcoming Events

See past events here

+ {props.events.length == 0 ? ( +

+ There are no upcoming events right now. Please check back later! +

+ ) : null}
- {props.events.length > 0 ? ( - props.events - .slice(0, 2) - .map((event) => ( - - )) - ) : ( -

- There are no upcoming events right now. Please check back - later! -

- )} - {props.events.length > 2 ? ( -

See more upcoming events here

- ) : null} + {props.events.length > 0 + ? props.events + .slice(0, 2) + .map((event) => ( + + )) + : null}
+ {props.events.length > 2 ? ( +

See more upcoming events here

+ ) : null}

News

@@ -83,9 +84,16 @@ export default function Home(props: Props) { See past news here

- - - + {props.news.length > 0 ? ( + + + + ) : ( +

There is no news right now. Please check back later!

+ )}
@@ -105,5 +113,6 @@ type Params = ParsedUrlQuery; export const getStaticProps: GetStaticProps = async () => { const events = await getUpcomingEvents(); - return { props: { events } }; + const news = await getRecentNews(); + return { props: { events, news } }; }; From 314272fe1e229de0eb9829ed11247f38268712dc Mon Sep 17 00:00:00 2001 From: Amy Date: Sun, 22 Aug 2021 17:17:43 -0400 Subject: [PATCH 4/5] Clean up props and add links based on PR comments --- pages/index.tsx | 78 ++++++++++++++++++++++++++++--------------------- 1 file changed, 44 insertions(+), 34 deletions(-) diff --git a/pages/index.tsx b/pages/index.tsx index 6fe67c11..0f6c266b 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,5 +1,3 @@ -import { ParsedUrlQuery } from "querystring"; - import { GetStaticProps } from "next"; import { MDXRemote } from "next-mdx-remote"; import React from "react"; @@ -9,6 +7,7 @@ import { DefaultLayout } from "@/components/DefaultLayout"; import { EmailSignup } from "@/components/EmailSignup"; import { EventDescriptionCard } from "@/components/EventDescriptionCard"; import { Image } from "@/components/Image"; +import { Link } from "@/components/Link"; import { NewsCard } from "@/components/NewsCard"; import { SocialLinks } from "@/components/SocialLinks"; import { Event, getUpcomingEvents } from "@/lib/events"; @@ -17,8 +16,9 @@ import { News, getRecentNews } from "@/lib/news"; import styles from "./index.module.css"; interface Props { - events: Event[]; - news: News[]; + numberOfEvents: number; // total number of upcoming events + events: Event[]; // array of 0 - 2 events + news: News; } export default function Home(props: Props) { @@ -48,52 +48,58 @@ export default function Home(props: Props) {
- {/* TODO: add links to past/upcoming events and past news */}

Upcoming Events

-

See past events here

+

+ See past events{" "} + + here + +

- {props.events.length == 0 ? ( + {props.numberOfEvents == 0 ? (

There are no upcoming events right now. Please check back later!

) : null}
{props.events.length > 0 - ? props.events - .slice(0, 2) - .map((event) => ( - - )) + ? props.events.map((event) => ( + + )) : null}
- {props.events.length > 2 ? ( -

See more upcoming events here

+ {props.numberOfEvents > 2 ? ( +

+ See more upcoming events{" "} + + here + +

) : null}

News

Updates from our execs!
- See past news here + See past news{" "} + + here +

- {props.news.length > 0 ? ( + { - + - ) : ( -

There is no news right now. Please check back later!

- )} + }
@@ -109,10 +115,14 @@ Home.Layout = function HomeLayout(props: { children: React.ReactNode }) { return
{props.children}
; }; -type Params = ParsedUrlQuery; - -export const getStaticProps: GetStaticProps = async () => { - const events = await getUpcomingEvents(); - const news = await getRecentNews(); - return { props: { events, news } }; +export const getStaticProps: GetStaticProps = async () => { + const upcomingEvents = await getUpcomingEvents(); + const recentNews = await getRecentNews(); + return { + props: { + numberOfEvents: upcomingEvents.length, + events: upcomingEvents.slice(0, 2), + news: recentNews[0], + }, + }; }; From fc3aec86674c89f3b97117bfd28437a8e7c0440c Mon Sep 17 00:00:00 2001 From: Amy Date: Mon, 23 Aug 2021 12:11:55 -0400 Subject: [PATCH 5/5] Fix small nitpicks --- lib/events.ts | 4 +--- lib/news.ts | 4 +--- pages/index.tsx | 2 +- 3 files changed, 3 insertions(+), 7 deletions(-) diff --git a/lib/events.ts b/lib/events.ts index c9725f61..0a0e9aab 100644 --- a/lib/events.ts +++ b/lib/events.ts @@ -79,9 +79,7 @@ export async function getUpcomingEvents(): Promise { try { const eventsInTerm = await getEventsByTerm(year, TERMS[term]); return await Promise.all( - eventsInTerm.map( - async (slug) => await getEventBySlug(year, TERMS[term], slug) - ) + eventsInTerm.map((slug) => getEventBySlug(year, TERMS[term], slug)) ); } catch (error) { return []; diff --git a/lib/news.ts b/lib/news.ts index 6329964b..a5ce2bc7 100644 --- a/lib/news.ts +++ b/lib/news.ts @@ -82,9 +82,7 @@ export async function getRecentNews(): Promise { try { const newsInTerm = await getNewsByTerm(year, TERMS[term]); return await Promise.all( - newsInTerm.map( - async (slug) => await getNewsBySlug(year, TERMS[term], slug) - ) + newsInTerm.map((slug) => getNewsBySlug(year, TERMS[term], slug)) ); } catch (error) { return []; diff --git a/pages/index.tsx b/pages/index.tsx index 0f6c266b..12a79d15 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -57,7 +57,7 @@ export default function Home(props: Props) {

- {props.numberOfEvents == 0 ? ( + {props.numberOfEvents === 0 ? (

There are no upcoming events right now. Please check back later!