www-new/pages/news/[year]/[term].tsx

85 lines
2.0 KiB
TypeScript

import { ParsedUrlQuery } from "querystring";
import { GetStaticPaths, GetStaticProps } from "next";
import { MDXRemote } from "next-mdx-remote";
import React from "react";
import { NewsCard } from "@/components/NewsCard";
import {
getNewsBySlug,
getNewsByTerm,
getNewsTermsByYear,
getNewsYears,
News,
} from "@/lib/news";
import styles from "./[term].module.css";
interface Props {
year: string;
term: string;
news: News[];
}
export default function TermNews({ year, term, news }: Props) {
return (
<div className={styles.page}>
<h1>
News Archive:{" "}
<span className={styles.term}>
{capitalize(term)} {year}
</span>
</h1>
{news.map(({ content, metadata }, idx) => (
<NewsCard
key={idx}
{...metadata}
date={new Date(metadata.date)}
fit={true}
>
<MDXRemote {...content} />
</NewsCard>
))}
</div>
);
}
export const getStaticProps: GetStaticProps<Props, Params> = async (
context
) => {
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
const { year, term } = context.params!;
const slugs = await getNewsByTerm(year, term);
const news = await Promise.all(
slugs.map((slug) => getNewsBySlug(year, term, slug))
);
// Reverse so that we are displaying the most recent news
// of term first
return { props: { year, term, news: news.reverse() } };
};
interface Params extends ParsedUrlQuery {
year: string;
term: string;
}
export const getStaticPaths: GetStaticPaths<Params> = async () => {
const years = await getNewsYears();
const terms = await Promise.all(
years.map(async (year) => {
const termsInYear = await getNewsTermsByYear(year);
return termsInYear.map((term) => ({ year, term }));
})
);
return {
paths: terms.flat().map((params) => ({ params })),
fallback: false,
};
};
function capitalize(str: string) {
return str.slice(0, 1).toUpperCase() + str.slice(1);
}