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";
|
||||
a3thakra marked this conversation as resolved
Outdated
|
||||
|
||||
a3thakra marked this conversation as resolved
Outdated
j285he
commented
We have been using 60px for margin-bottom in [term], but I see 40px for this component. Maybe we change one or the other for consistency? We have been using 60px for margin-bottom in [term], but I see 40px for this component. Maybe we change one or the other for consistency?
a3thakra
commented
The line height is a lot more (3 instead of 1.5ish) than other sections, so imo 40px actually looks a lot like 60px. I tried to make it 60px and that was a lot. The line height is a lot more (3 instead of 1.5ish) than other sections, so imo 40px actually looks a lot like 60px. I tried to make it 60px and that was a lot.
|
||||
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
After the title, there's a missing border-bottom as per Figma
Also inspect element says the title is h1, should be h2
It should be h1 because it's the only heading of the page, so semantically it makes sense for it to be h1