Add /events/[year]/[term] page (#158)
continuous-integration/drone/push Build is passing Details

Closes #113

Co-authored-by: Jared He <66887902+jaredjhe@users.noreply.github.com>
Co-authored-by: Aditya Thakral <a3thakra@csclub.uwaterloo.ca>
Reviewed-on: #158
Reviewed-by: Aditya Thakral <a3thakra@csclub.uwaterloo.ca>
Co-authored-by: j285he <j285he@localhost>
Co-committed-by: j285he <j285he@localhost>
This commit is contained in:
Jared He 2021-08-27 16:14:53 -04:00 committed by Aditya Thakral
parent 4237da76e3
commit e548bd9c5a
5 changed files with 330 additions and 6 deletions

2
.gitignore vendored
View File

@ -22,4 +22,4 @@
# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*
yarn-error.log*

View File

@ -5,8 +5,10 @@ import matter from "gray-matter";
import { MDXRemoteSerializeResult } from "next-mdx-remote";
import { serialize } from "next-mdx-remote/serialize";
import type { Props } from "../pages/events/[year]/[term]/index";
const EVENTS_PATH = path.join("content", "events");
const TERMS = ["winter", "spring", "fall"];
export const TERMS = ["winter", "spring", "fall"];
export async function getEventYears(): Promise<string[]> {
return (await fs.readdir(EVENTS_PATH, { withFileTypes: true }))
@ -58,9 +60,13 @@ export async function getEventsByTerm(
year: string,
term: string
): Promise<string[]> {
return (await fs.readdir(path.join(EVENTS_PATH, year, term)))
.filter((name) => name.endsWith(".md"))
.map((name) => name.slice(0, -".md".length));
try {
return (await fs.readdir(path.join(EVENTS_PATH, year, term)))
.filter((name) => name.endsWith(".md"))
.map((name) => name.slice(0, -".md".length));
} catch {
return [];
}
}
export async function getUpcomingEvents(): Promise<Event[]> {
@ -97,3 +103,135 @@ export async function getUpcomingEvents(): Promise<Event[]> {
);
});
}
export async function getProps(year: string, term: string): Promise<Props> {
const eventNames = await getEventsByTerm(year, term);
const events: Event[] = (
await Promise.all(
eventNames.map((file: string) => getEventBySlug(year, term, file))
)
).sort(
(a, b) =>
new Date(a.metadata.date).getTime() - new Date(b.metadata.date).getTime()
);
const pastEvents = events
.filter((event) => new Date(event.metadata.date).getTime() < Date.now())
.reverse();
const futureEvents = events.filter(
(event) => new Date(event.metadata.date).getTime() >= Date.now()
);
const current = getCurrentTerm();
const eventYears = await getEventYears();
const minYear = eventYears[0];
const pastTerms: { year: string; term: string }[] = [];
let curPastYear = year;
let curPastTerm = term;
while (parseInt(curPastYear) >= parseInt(minYear) && pastTerms.length < 2) {
const pastTerm = getPastTerm(curPastYear, curPastTerm);
curPastYear = pastTerm.year;
curPastTerm = pastTerm.term;
if ((await getEventsByTerm(curPastYear, curPastTerm)).length !== 0) {
pastTerms.push(pastTerm);
}
}
pastTerms.reverse();
const maxYear = eventYears[eventYears.length - 1];
const futureTerms: { year: string; term: string }[] = [];
let curFutureYear = year;
let curFutureTerm = term;
while (
parseInt(curFutureYear) <= parseInt(maxYear) &&
futureTerms.length < 2
) {
const futureTerm = getFutureTerm(curFutureYear, curFutureTerm);
curFutureYear = futureTerm.year;
curFutureTerm = futureTerm.term;
if ((await getEventsByTerm(curFutureYear, curFutureTerm)).length !== 0) {
futureTerms.push(futureTerm);
}
}
return {
year: year,
term: term,
pastEvents: pastEvents,
futureEvents: futureEvents,
isCurrentTerm: term === current.term && year === current.year,
pastTerms: pastTerms,
futureTerms: futureTerms,
};
}
export function getCurrentTerm(): { year: string; term: string } {
const date = new Date();
let term = "";
const year = date.getUTCFullYear().toString();
if (
new Date(`${year}-01-01 EST`).getTime() <= date.getTime() &&
date.getTime() <= new Date(`${year}-04-30 EST`).getTime()
) {
term = "winter";
} else if (
new Date(`${year}-05-01 EST`).getTime() <= date.getTime() &&
date.getTime() <= new Date(`${year}-08-31 EST`).getTime()
) {
term = "spring";
} else if (
new Date(`${year}-09-01 EST`).getTime() <= date.getTime() &&
date.getTime() <= new Date(`${year}-12-31 EST`).getTime()
) {
term = "fall";
}
return { year, term };
}
function getPastTerm(
year: string,
term: string
): { year: string; term: string } {
const index = TERMS.indexOf(term);
if (index === -1) {
throw new Error("Not a valid term");
}
return index === 0
? {
year: (parseInt(year) - 1).toString(),
term: TERMS[TERMS.length - 1],
}
: {
year: year,
term: TERMS[index - 1],
};
}
function getFutureTerm(
year: string,
term: string
): { year: string; term: string } {
const index = TERMS.indexOf(term);
if (index === -1) {
throw new Error("Not a valid term");
}
return index === TERMS.length - 1
? {
year: (parseInt(year) + 1).toString(),
term: TERMS[0],
}
: {
year: year,
term: TERMS[index + 1],
};
}

View File

@ -1 +0,0 @@
# Events page

View File

@ -0,0 +1,33 @@
.main {
margin-top: calc(60rem / 16);
margin-bottom: calc(60rem / 16);
}
.main > h2 {
padding-bottom: 1rem;
border-bottom: 1px solid var(--primary-heading);
}
@media only screen and (max-width: calc(768rem / 16)) {
.main {
margin-top: calc(60rem / 16);
}
}
.header a {
color: var(--text);
font-size: calc(18rem / 16);
margin-right: calc(30rem / 16);
}
.header a .curTerm {
color: var(--primary-accent);
}
.blue {
color: var(--primary-accent);
}
.miniEventCards {
margin-top: calc(30rem / 16);
}

View File

@ -0,0 +1,154 @@
import { ParsedUrlQuery } from "querystring";
import { GetStaticPaths, GetStaticProps } from "next";
import { MDXRemote } from "next-mdx-remote";
import React from "react";
import { EventCard } from "@/components/EventCard";
import { Link } from "@/components/Link";
import { MiniEventCard } from "@/components/MiniEventCard";
import {
Event,
getProps,
getEventYears,
getEventTermsByYear,
} from "@/lib/events";
import styles from "./index.module.css";
export interface Props {
year: string;
term: string;
pastEvents: Event[];
futureEvents: Event[];
isCurrentTerm: boolean;
pastTerms: { year: string; term: string }[];
futureTerms: { year: string; term: string }[];
}
export default function Term(props: Props) {
let headerTerms = [{ year: props.year, term: props.term }];
// p, Current, f
if (props.pastTerms.length > 0 && props.futureTerms.length > 0) {
headerTerms = [
...props.pastTerms.slice(-1),
...headerTerms,
...props.futureTerms.slice(0, 1),
];
}
// p, p, Current
else if (props.pastTerms.length > 0) {
headerTerms = [...props.pastTerms.slice(-2), ...headerTerms];
}
// Current, f, f
else {
headerTerms = [...headerTerms, ...props.futureTerms.slice(0, 2)];
}
headerTerms.reverse();
const hasPastEvents = props.pastEvents.length !== 0;
const hasFutureEvents = props.futureEvents.length !== 0;
return (
<div className={styles.main}>
<div className={styles.header}>
{headerTerms.map((link) => (
<HeaderLink
{...link}
isCurrentTerm={link.year === props.year && link.term === props.term}
key={link.year + link.term}
/>
))}
<Link href="/events/archives">Archives</Link>
</div>
{hasFutureEvents && (
<>
<h2>Upcoming Events</h2>
<div className={styles.miniEventCards}>
{props.futureEvents.map(({ content, metadata }) => (
<EventCard
{...metadata}
date={new Date(metadata.date)}
key={metadata.name + metadata.date.toString()}
>
<MDXRemote {...content} />
</EventCard>
))}
</div>
</>
)}
{hasPastEvents && props.isCurrentTerm && <h2>Past Events</h2>}
{hasPastEvents && !props.isCurrentTerm && (
<h2>
Events Archive:
<span className={styles.blue}>
{` ${capitalize(props.term)} ${props.year}`}
</span>
</h2>
)}
<div className={styles.miniEventCards}>
{props.pastEvents.map(({ content, metadata }) => (
<MiniEventCard
{...metadata}
date={new Date(metadata.date)}
description={<MDXRemote {...content} />}
key={metadata.name + metadata.date.toString()}
/>
))}
</div>
</div>
);
}
function HeaderLink(props: {
year: string;
term: string;
isCurrentTerm?: boolean;
}) {
return (
<Link href={`/events/${props.year}/${props.term}`}>
<span className={props.isCurrentTerm ? styles.curTerm : ""}>
{`${capitalize(props.term)} ${props.year}`}
</span>
</Link>
);
}
interface Params extends ParsedUrlQuery {
year: string;
term: string;
}
export const getStaticProps: GetStaticProps<Props, Params> = async (
context
) => {
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
const { year, term } = context.params!;
return { props: await getProps(year, term) };
};
export const getStaticPaths: GetStaticPaths<Params> = async () => {
const years = await getEventYears();
const paths = (
await Promise.all(
years.map(async (year) => {
const terms = await getEventTermsByYear(year);
return terms.map((curTerm) => ({
params: { year: year, term: curTerm },
}));
})
)
).flat();
return {
paths: paths,
fallback: false,
};
};
function capitalize(str: string) {
return str.slice(0, 1).toUpperCase() + str.slice(1);
}