Add /events/[year] page #151
|
@ -0,0 +1,21 @@
|
|||
.main {
|
||||
margin-top: calc(60rem / 16);
|
||||
}
|
||||
|
||||
.main > h2 {
|
||||
padding-bottom: calc(1rem / 16);
|
||||
border-bottom: 1px solid var(--primary-heading);
|
||||
j285he marked this conversation as resolved
|
||||
}
|
||||
|
||||
.blue {
|
||||
color: var(--primary-accent);
|
||||
}
|
||||
|
||||
.list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.list > li {
|
||||
line-height: 3;
|
||||
}
|
|
@ -0,0 +1,61 @@
|
|||
import { ParsedUrlQuery } from "querystring";
|
||||
|
||||
import { GetStaticPaths, GetStaticProps } from "next";
|
||||
import React from "react";
|
||||
|
||||
import { Link } from "@/components/Link";
|
||||
import { getEventYears, getEventTermsByYear } from "@/lib/events";
|
||||
|
||||
import styles from "./index.module.css";
|
||||
|
||||
interface Props {
|
||||
year: string;
|
||||
terms: string[];
|
||||
}
|
||||
|
||||
export default function Year(props: Props) {
|
||||
return (
|
||||
<div className={styles.main}>
|
||||
<h2>
|
||||
Events Archive:<span className={styles.blue}>{` ${props.year}`}</span>
|
||||
</h2>
|
||||
<ul className={styles.list}>
|
||||
{props.terms.map((term) => (
|
||||
<li key={`${props.year}-${term}`}>
|
||||
<Link href={`/events/${props.year}/${term}`}>
|
||||
{`${term.charAt(0).toUpperCase()}${term.slice(1)}`}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface Params extends ParsedUrlQuery {
|
||||
year: string;
|
||||
}
|
||||
|
||||
export const getStaticProps: GetStaticProps<Props, Params> = async (
|
||||
context
|
||||
) => {
|
||||
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
||||
const { year } = context.params!;
|
||||
return {
|
||||
props: {
|
||||
year: year,
|
||||
terms: await getEventTermsByYear(year),
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
export const getStaticPaths: GetStaticPaths<Params> = async () => {
|
||||
const years = await getEventYears();
|
||||
const paths = years.map((curYear) => ({
|
||||
params: { year: curYear },
|
||||
}));
|
||||
return {
|
||||
paths: paths,
|
||||
fallback: false,
|
||||
};
|
||||
};
|
Loading…
Reference in New Issue
calc(1rem / 16)