Add events archive (#187)

Closes #117

Reviewed-on: www/www-new#187
Reviewed-by: j285he <j285he@localhost>
Co-authored-by: Aditya Thakral <a3thakra@csclub.uwaterloo.ca>
Co-committed-by: Aditya Thakral <a3thakra@csclub.uwaterloo.ca>
fix-md-font
Aditya Thakral 1 year ago
parent 4fb5b656bf
commit c31571f745
  1. 5
      components/ArchivePage.module.css
  2. 44
      components/ArchivePage.tsx
  3. 5
      pages/events/[year]/[term]/index.tsx
  4. 18
      pages/events/archive.tsx
  5. 5
      pages/news/[year]/[term].tsx
  6. 50
      pages/news/archive.tsx
  7. 3
      tsconfig.json
  8. 3
      utils.ts

@ -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"],

@ -0,0 +1,3 @@
export function capitalize(str: string) {
return str.slice(0, 1).toUpperCase() + str.slice(1);
}
Loading…
Cancel
Save