Add events archive #187
|
@ -2,6 +2,11 @@
|
|||
margin-bottom: calc(40rem / 16);
|
||||
}
|
||||
|
||||
.page > h1 {
|
||||
border-bottom: calc(1rem / 16) solid var(--primary-heading);
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.list {
|
||||
list-style: none;
|
||||
padding: 0;
|
|
@ -0,0 +1,44 @@
|
|||
import React from "react";
|
||||
|
||||
import { Link } from "@/components/Link";
|
||||
import {
|
||||
ShapesConfig,
|
||||
GetShapesConfig,
|
||||
defaultGetShapesConfig,
|
||||
} from "@/components/ShapesBackground";
|
||||
import { capitalize } from "@/utils";
|
||||
|
||||
import styles from "./ArchivePage.module.css";
|
||||
|
||||
export interface Props {
|
||||
type: "news" | "events";
|
||||
items: {
|
||||
year: string;
|
||||
terms: string[];
|
||||
}[];
|
||||
}
|
||||
|
||||
export function ArchivePage({ items, type }: Props) {
|
||||
return (
|
||||
<div className={styles.page}>
|
||||
<h1>{capitalize(type)} Archive</h1>
|
||||
<ul className={styles.list}>
|
||||
{items.map(({ year, terms }) =>
|
||||
terms.map((term) => (
|
||||
<li key={`/${type}/${year}/${term}`}>
|
||||
<Link href={`/${type}/${year}/${term}`}>
|
||||
{capitalize(term)} {year}
|
||||
</Link>
|
||||
</li>
|
||||
))
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
ArchivePage.getShapesConfig = ((width, height) => {
|
||||
return window.innerWidth <= 768
|
||||
? ({} as ShapesConfig)
|
||||
: defaultGetShapesConfig(width, height);
|
||||
}) as GetShapesConfig;
|
|
@ -13,6 +13,7 @@ import {
|
|||
getEventYears,
|
||||
getEventTermsByYear,
|
||||
} from "@/lib/events";
|
||||
import { capitalize } from "@/utils";
|
||||
|
||||
import styles from "./index.module.css";
|
||||
|
||||
|
@ -154,7 +155,3 @@ export const getStaticPaths: GetStaticPaths<Params> = async () => {
|
|||
fallback: false,
|
||||
};
|
||||
};
|
||||
|
||||
function capitalize(str: string) {
|
||||
return str.slice(0, 1).toUpperCase() + str.slice(1);
|
||||
}
|
||||
|
|
|
@ -0,0 +1,18 @@
|
|||
import { GetStaticProps } from "next";
|
||||
|
||||
import { ArchivePage, Props } from "@/components/ArchivePage";
|
||||
import { getEventTermsByYear, getEventYears } from "@/lib/events";
|
||||
|
||||
export default ArchivePage;
|
||||
|
||||
export const getStaticProps: GetStaticProps<Props> = async () => {
|
||||
const years = (await getEventYears()).reverse();
|
||||
const yearsWithTerms = await Promise.all(
|
||||
years.map(async (year) => ({
|
||||
year,
|
||||
terms: (await getEventTermsByYear(year)).reverse(),
|
||||
}))
|
||||
);
|
||||
|
||||
return { props: { items: yearsWithTerms, type: "events" } };
|
||||
};
|
|
@ -17,6 +17,7 @@ import {
|
|||
getNewsYears,
|
||||
News,
|
||||
} from "@/lib/news";
|
||||
import { capitalize } from "@/utils";
|
||||
|
||||
import styles from "./[term].module.css";
|
||||
|
||||
|
@ -89,7 +90,3 @@ export const getStaticPaths: GetStaticPaths<Params> = async () => {
|
|||
fallback: false,
|
||||
};
|
||||
};
|
||||
|
||||
function capitalize(str: string) {
|
||||
return str.slice(0, 1).toUpperCase() + str.slice(1);
|
||||
}
|
||||
|
|
|
@ -1,47 +1,9 @@
|
|||
import { getNewsTermsByYear, getNewsYears } from "lib/news";
|
||||
import { GetStaticProps } from "next";
|
||||
import React from "react";
|
||||
|
||||
import { Link } from "@/components/Link";
|
||||
import {
|
||||
ShapesConfig,
|
||||
GetShapesConfig,
|
||||
defaultGetShapesConfig,
|
||||
} from "@/components/ShapesBackground";
|
||||
import { ArchivePage, Props } from "@/components/ArchivePage";
|
||||
import { getNewsTermsByYear, getNewsYears } from "@/lib/news";
|
||||
|
||||
import styles from "./archive.module.css";
|
||||
|
||||
interface Props {
|
||||
items: {
|
||||
year: string;
|
||||
terms: string[];
|
||||
}[];
|
||||
}
|
||||
|
||||
export default function NewsArchive({ items }: Props) {
|
||||
return (
|
||||
<div className={styles.page}>
|
||||
<h1>News Archive</h1>
|
||||
<ul className={styles.list}>
|
||||
{items.map(({ year, terms }) =>
|
||||
terms.map((term) => (
|
||||
<li key={`${year}-${term}`}>
|
||||
<Link href={`/news/${year}/${term}`}>
|
||||
{capitalize(term)} {year}
|
||||
</Link>
|
||||
</li>
|
||||
))
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
NewsArchive.getShapesConfig = ((width, height) => {
|
||||
return window.innerWidth <= 768
|
||||
? ({} as ShapesConfig)
|
||||
: defaultGetShapesConfig(width, height);
|
||||
}) as GetShapesConfig;
|
||||
export default ArchivePage;
|
||||
|
||||
export const getStaticProps: GetStaticProps<Props> = async () => {
|
||||
const years = (await getNewsYears()).reverse();
|
||||
|
@ -52,9 +14,5 @@ export const getStaticProps: GetStaticProps<Props> = async () => {
|
|||
}))
|
||||
);
|
||||
|
||||
return { props: { items: yearsWithTerms } };
|
||||
return { props: { items: yearsWithTerms, type: "news" } };
|
||||
};
|
||||
|
||||
function capitalize(str: string) {
|
||||
return str.slice(0, 1).toUpperCase() + str.slice(1);
|
||||
}
|
||||
|
|
|
@ -23,7 +23,8 @@
|
|||
"paths": {
|
||||
"@/components/*": ["components/*"],
|
||||
"@/lib/*": ["lib/*"],
|
||||
"@/hooks/*": ["hooks/*"]
|
||||
"@/hooks/*": ["hooks/*"],
|
||||
"@/utils": ["utils"]
|
||||
}
|
||||
},
|
||||
"include": ["next-env.d.ts", "types.d.ts", "**/*.ts", "**/*.tsx"],
|
||||
|
|
Loading…
Reference in New Issue