Add dynamic importing of upcoming events
This commit is contained in:
parent
a8cae99c11
commit
7f64aadebc
|
@ -62,3 +62,49 @@ export async function getEventsByTerm(
|
||||||
.filter((name) => name.endsWith(".md"))
|
.filter((name) => name.endsWith(".md"))
|
||||||
.map((name) => name.slice(0, -".md".length));
|
.map((name) => name.slice(0, -".md".length));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export async function getUpcomingEvents(): Promise<Event[]> {
|
||||||
|
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()
|
||||||
|
);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
|
@ -119,6 +119,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.cards > section {
|
.cards > section {
|
||||||
|
width: calc(540rem / 16);
|
||||||
max-width: calc(540rem / 16);
|
max-width: calc(540rem / 16);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -171,13 +172,14 @@
|
||||||
.cards {
|
.cards {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
align-items: center;
|
align-items: stretch;
|
||||||
gap: calc(8rem / 16);
|
gap: calc(8rem / 16);
|
||||||
|
|
||||||
padding: calc(36rem / 16) calc(20rem / 16) calc(20rem / 16);
|
padding: calc(36rem / 16) calc(20rem / 16) calc(20rem / 16);
|
||||||
}
|
}
|
||||||
|
|
||||||
.cards > section {
|
.cards > section {
|
||||||
|
width: unset;
|
||||||
max-width: unset;
|
max-width: unset;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -1,3 +1,6 @@
|
||||||
|
import { ParsedUrlQuery } from "querystring";
|
||||||
|
|
||||||
|
import { GetStaticProps } from "next";
|
||||||
import React from "react";
|
import React from "react";
|
||||||
|
|
||||||
import { ConnectWithUs } from "@/components/ConnectWithUs";
|
import { ConnectWithUs } from "@/components/ConnectWithUs";
|
||||||
|
@ -7,27 +10,19 @@ import { EventDescriptionCard } from "@/components/EventDescriptionCard";
|
||||||
import { Image } from "@/components/Image";
|
import { Image } from "@/components/Image";
|
||||||
import { NewsCard } from "@/components/NewsCard";
|
import { NewsCard } from "@/components/NewsCard";
|
||||||
import { SocialLinks } from "@/components/SocialLinks";
|
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, {
|
import UnavailableContent, {
|
||||||
metadata as unavailableMetadata,
|
metadata as unavailableMetadata,
|
||||||
} from "../content/playground/unavailable.news.mdx";
|
} from "../content/playground/unavailable.news.mdx";
|
||||||
|
|
||||||
import styles from "./index.module.css";
|
import styles from "./index.module.css";
|
||||||
|
|
||||||
// temporary event and news imports
|
interface Props {
|
||||||
|
events: Event[];
|
||||||
export default function Home() {
|
}
|
||||||
const events = [
|
|
||||||
{ Content: OOTBReact, metadata: OOTBReactEventMetadata },
|
|
||||||
{ Content: AltTab, metadata: altTabEventMetadata },
|
|
||||||
];
|
|
||||||
|
|
||||||
|
export default function Home(props: Props) {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<DefaultLayout>
|
<DefaultLayout>
|
||||||
|
@ -54,18 +49,31 @@ export default function Home() {
|
||||||
</DefaultLayout>
|
</DefaultLayout>
|
||||||
<div className={styles.cardsBackground}>
|
<div className={styles.cardsBackground}>
|
||||||
<div className={styles.cards}>
|
<div className={styles.cards}>
|
||||||
{/* TODO: add links to past events and past news */}
|
{/* TODO: add links to past/upcoming events and past news */}
|
||||||
<section className={styles.events}>
|
<section className={styles.events}>
|
||||||
<h1 className={styles.cardsHeading}>Upcoming Events</h1>
|
<h1 className={styles.cardsHeading}>Upcoming Events</h1>
|
||||||
<p className={styles.cardsDescription}>See past events here</p>
|
<p className={styles.cardsDescription}>See past events here</p>
|
||||||
<hr className={styles.cardsDividingLine} />
|
<hr className={styles.cardsDividingLine} />
|
||||||
<div className={styles.eventCards}>
|
<div className={styles.eventCards}>
|
||||||
{events.map(({ metadata }) => (
|
{props.events.length > 0 ? (
|
||||||
<EventDescriptionCard
|
props.events
|
||||||
{...metadata}
|
.slice(0, 2)
|
||||||
key={metadata.name + metadata.date.toString()}
|
.map((event) => (
|
||||||
/>
|
<EventDescriptionCard
|
||||||
))}
|
{...event.metadata}
|
||||||
|
date={new Date(event.metadata.date)}
|
||||||
|
key={event.metadata.name + event.metadata.date.toString()}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
) : (
|
||||||
|
<p>
|
||||||
|
There are no upcoming events right now. Please check back
|
||||||
|
later!
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
{props.events.length > 2 ? (
|
||||||
|
<p>See more upcoming events here</p>
|
||||||
|
) : null}
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
<section className={styles.news} id="news">
|
<section className={styles.news} id="news">
|
||||||
|
@ -92,3 +100,10 @@ export default function Home() {
|
||||||
Home.Layout = function HomeLayout(props: { children: React.ReactNode }) {
|
Home.Layout = function HomeLayout(props: { children: React.ReactNode }) {
|
||||||
return <div className={styles.page}>{props.children}</div>;
|
return <div className={styles.page}>{props.children}</div>;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
type Params = ParsedUrlQuery;
|
||||||
|
|
||||||
|
export const getStaticProps: GetStaticProps<Props, Params> = async () => {
|
||||||
|
const events = await getUpcomingEvents();
|
||||||
|
return { props: { events } };
|
||||||
|
};
|
||||||
|
|
Loading…
Reference in New Issue