From 30102822da576c0319319eac9e9a7d476ea97231 Mon Sep 17 00:00:00 2001
From: Aditya Thakral <a3thakra@csclub.uwaterloo.ca>
Date: Mon, 30 Aug 2021 19:20:16 -0400
Subject: [PATCH 1/2] Add title to all pages (#222)

Closes #221

Go to https://csclub.uwaterloo.ca/~a3thakra/csc/adi-page-titles and make sure that all pages have a title (you can hover over the tab)

Reviewed-on: https://git.csclub.uwaterloo.ca/www/www-new/pulls/222
Reviewed-by: j285he <j285he@localhost>
Co-authored-by: Aditya Thakral <a3thakra@csclub.uwaterloo.ca>
Co-committed-by: Aditya Thakral <a3thakra@csclub.uwaterloo.ca>
---
 components/ArchivePage.tsx                    | 39 +++++++++-------
 components/OrganizedContent.tsx               | 32 +++++++++++---
 components/OrganizedContent/ReadAll.tsx       | 44 +++++++++++--------
 components/OrganizedContent/Section.tsx       | 35 +++++++++------
 components/Title.tsx                          | 19 ++++++++
 components/playground.tsx                     |  7 ++-
 .../constitution/amendments-and-procedures.md |  2 +-
 content/about/constitution/code-of-conduct.md |  2 +-
 content/about/constitution/committees.md      |  2 +-
 content/about/constitution/dissolution.md     |  2 +-
 .../about/constitution/duties-of-officers.md  |  2 +-
 .../about/constitution/executive-council.md   |  2 +-
 content/about/constitution/finances.md        |  2 +-
 content/about/constitution/meetings.md        |  2 +-
 content/about/constitution/membership.md      |  2 +-
 content/about/constitution/name.md            |  2 +-
 content/about/constitution/officers.md        |  2 +-
 content/about/constitution/purpose.md         |  2 +-
 .../constitution/use-of-club-resources.md     |  2 +-
 pages/about/code-of-conduct/[section].tsx     |  2 +-
 .../index.tsx}                                |  7 ++-
 pages/about/constitution/[section].tsx        |  2 +-
 .../index.tsx}                                |  8 +++-
 pages/about/index.tsx                         |  2 +
 pages/about/our-supporters.tsx                |  2 +
 pages/about/team.tsx                          |  2 +
 pages/events/[year]/[term]/[event].tsx        | 27 ++++++++----
 pages/events/[year]/[term]/index.tsx          |  2 +
 pages/events/[year]/index.tsx                 |  2 +
 pages/events/index.tsx                        |  2 +-
 pages/get-involved.tsx                        |  2 +
 pages/index.tsx                               |  2 +
 pages/news/[year]/[term].tsx                  |  2 +
 pages/resources/advice/academic.tsx           | 11 +++--
 pages/resources/advice/coop.tsx               | 10 +++--
 pages/resources/advice/misc.tsx               | 11 +++--
 .../machine-usage-agreement/[section].tsx     |  2 +-
 .../index.tsx}                                |  0
 pages/resources/services/[section].tsx        |  2 +-
 .../{services.tsx => services/index.tsx}      |  0
 pages/resources/tech-talks/[slug].tsx         |  7 ++-
 .../index.module.css}                         |  0
 .../{tech-talks.tsx => tech-talks/index.tsx}  |  4 +-
 pages/themer.tsx                              |  4 +-
 44 files changed, 215 insertions(+), 102 deletions(-)
 create mode 100644 components/Title.tsx
 rename pages/about/{code-of-conduct.tsx => code-of-conduct/index.tsx} (74%)
 rename pages/about/{constitution.tsx => constitution/index.tsx} (69%)
 rename pages/resources/{machine-usage-agreement.tsx => machine-usage-agreement/index.tsx} (100%)
 rename pages/resources/{services.tsx => services/index.tsx} (100%)
 rename pages/resources/{tech-talks.module.css => tech-talks/index.module.css} (100%)
 rename pages/resources/{tech-talks.tsx => tech-talks/index.tsx} (91%)

diff --git a/components/ArchivePage.tsx b/components/ArchivePage.tsx
index bc1e1be7..522578a2 100644
--- a/components/ArchivePage.tsx
+++ b/components/ArchivePage.tsx
@@ -1,12 +1,14 @@
 import React from "react";
 
-import { Link } from "@/components/Link";
+import { capitalize } from "@/utils";
+
+import { Link } from "./Link";
 import {
   ShapesConfig,
   GetShapesConfig,
   defaultGetShapesConfig,
-} from "@/components/ShapesBackground";
-import { capitalize } from "@/utils";
+} from "./ShapesBackground";
+import { Title } from "./Title";
 
 import styles from "./ArchivePage.module.css";
 
@@ -20,20 +22,23 @@ export interface Props {
 
 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>
+    <>
+      <Title>{[capitalize(type), "Archive"]}</Title>
+      <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>
+    </>
   );
 }
 
diff --git a/components/OrganizedContent.tsx b/components/OrganizedContent.tsx
index c2f26627..a119b972 100644
--- a/components/OrganizedContent.tsx
+++ b/components/OrganizedContent.tsx
@@ -26,6 +26,7 @@ interface Props {
   children: ReactNode;
   pageTitle: string;
   link: Link;
+  numberedSections?: boolean;
 }
 
 export function OrganizedContent({
@@ -34,6 +35,7 @@ export function OrganizedContent({
   children,
   pageTitle,
   link: Link,
+  numberedSections = false,
 }: Props) {
   const [mobileNavOpen, setMobileNavOpen] = useState(false);
   const currentIndex = sections.findIndex(
@@ -71,6 +73,7 @@ export function OrganizedContent({
         currentIndex={currentIndex}
         link={Link}
         pageTitle={pageTitle}
+        numberedSections={numberedSections}
         mobileNavOpen={mobileNavOpen}
         setMobileNavOpen={setMobileNavOpen}
       />
@@ -80,7 +83,11 @@ export function OrganizedContent({
         ) : (
           <>
             <section>
-              <h1>{section.title}</h1>
+              <h1>
+                {numberedSections
+                  ? `${currentIndex}. ${section.title}`
+                  : section.title}
+              </h1>
               {children}
             </section>
             <Footer
@@ -108,6 +115,7 @@ interface NavProps {
   currentIndex: number;
   link: Link;
   pageTitle: string;
+  numberedSections: boolean;
   mobileNavOpen: boolean;
   setMobileNavOpen: (mobileNavOpen: boolean) => void;
 }
@@ -117,6 +125,7 @@ function Nav({
   currentIndex,
   link: Link,
   pageTitle,
+  numberedSections,
   mobileNavOpen,
   setMobileNavOpen,
 }: NavProps) {
@@ -150,7 +159,11 @@ function Nav({
           >
             <Link className={classNames.join(" ")} id={section.id}>
               <span className={styles.marker} />
-              <div>{section.title}</div>
+              <div>
+                {numberedSections && section.id !== READ_ALL_ID
+                  ? `${index}. ${section.title}`
+                  : section.title}
+              </div>
             </Link>
           </div>
         );
@@ -221,15 +234,18 @@ export interface SectionWithContent {
 
 export function createReadAllSection(
   sections: Section[],
-  content: false
+  content: false,
+  numberedSections?: undefined
 ): Section;
 export function createReadAllSection(
   sections: SectionWithContent[],
-  content: true
+  content: true,
+  numberedSections: boolean
 ): SectionWithContent;
 export function createReadAllSection(
   sections: SectionWithContent[] | Section[],
-  content = true
+  content = true,
+  numberedSections?: boolean
 ): SectionWithContent | Section {
   const readAllSection = {
     id: READ_ALL_ID,
@@ -243,9 +259,11 @@ export function createReadAllSection(
           return (
             <>
               {(sections as SectionWithContent[]).map(
-                ({ section: { id, title }, Content }) => (
+                ({ section: { id, title }, Content }, index) => (
                   <section key={id}>
-                    <h1>{title}</h1>
+                    <h1>
+                      {numberedSections ? `${index + 1}. ${title}` : title}
+                    </h1>
                     <Content />
                   </section>
                 )
diff --git a/components/OrganizedContent/ReadAll.tsx b/components/OrganizedContent/ReadAll.tsx
index 60019432..7343767a 100644
--- a/components/OrganizedContent/ReadAll.tsx
+++ b/components/OrganizedContent/ReadAll.tsx
@@ -9,6 +9,7 @@ import {
 } from "@/components/OrganizedContent";
 
 import { GetShapesConfig } from "../ShapesBackground";
+import { Title } from "../Title";
 
 import { Header } from "./Header";
 
@@ -32,6 +33,7 @@ export interface Options {
   imagePosition?: "left" | "right";
   link?: ComponentType<LinkProps>;
   description?: string;
+  numberedSections?: boolean;
 }
 
 export function createReadAllPage({
@@ -42,6 +44,7 @@ export function createReadAllPage({
   link,
   description,
   imagePosition,
+  numberedSections = false,
 }: Options) {
   const Link = link ?? createLink(pagePath);
 
@@ -53,28 +56,33 @@ export function createReadAllPage({
           return <MDXRemote {...content} />;
         },
       })),
-      true
+      true,
+      numberedSections
     );
 
     return (
-      <Header
-        title={title}
-        image={image}
-        description={description}
-        imagePosition={imagePosition}
-      >
-        <OrganizedContent
-          id={readAllSection.section.id}
-          sections={[
-            readAllSection.section,
-            ...sections.map(({ section }) => section),
-          ]}
-          pageTitle={title}
-          link={Link}
+      <>
+        <Title>{title}</Title>
+        <Header
+          title={title}
+          image={image}
+          description={description}
+          imagePosition={imagePosition}
         >
-          <readAllSection.Content />
-        </OrganizedContent>
-      </Header>
+          <OrganizedContent
+            id={readAllSection.section.id}
+            sections={[
+              readAllSection.section,
+              ...sections.map(({ section }) => section),
+            ]}
+            numberedSections={numberedSections}
+            pageTitle={title}
+            link={Link}
+          >
+            <readAllSection.Content />
+          </OrganizedContent>
+        </Header>
+      </>
     );
   }
 
diff --git a/components/OrganizedContent/Section.tsx b/components/OrganizedContent/Section.tsx
index b5dd64fb..9a928389 100644
--- a/components/OrganizedContent/Section.tsx
+++ b/components/OrganizedContent/Section.tsx
@@ -3,6 +3,8 @@ import React from "react";
 
 import { createLink, OrganizedContent } from "@/components/OrganizedContent";
 
+import { Title } from "../Title";
+
 import { Header } from "./Header";
 import { Options } from "./ReadAll";
 
@@ -25,26 +27,31 @@ export function createSectionPage({
   link,
   description,
   imagePosition,
+  numberedSections,
 }: Options) {
   const Link = link ?? createLink(pagePath);
 
   function Page(this: void, { content, sections, current }: Props) {
     return (
-      <Header
-        title={title}
-        image={image}
-        description={description}
-        imagePosition={imagePosition}
-      >
-        <OrganizedContent
-          sections={sections}
-          id={sections[current].id}
-          pageTitle={title}
-          link={Link}
+      <>
+        <Title>{[sections[current].title, title]}</Title>
+        <Header
+          title={title}
+          image={image}
+          description={description}
+          imagePosition={imagePosition}
         >
-          <MDXRemote {...content} />
-        </OrganizedContent>
-      </Header>
+          <OrganizedContent
+            sections={sections}
+            id={sections[current].id}
+            pageTitle={title}
+            link={Link}
+            numberedSections={numberedSections}
+          >
+            <MDXRemote {...content} />
+          </OrganizedContent>
+        </Header>
+      </>
     );
   }
 
diff --git a/components/Title.tsx b/components/Title.tsx
new file mode 100644
index 00000000..a9a000fc
--- /dev/null
+++ b/components/Title.tsx
@@ -0,0 +1,19 @@
+import Head from "next/head";
+import React from "react";
+
+interface Props {
+  children: string | string[];
+}
+
+export function Title(props: Props) {
+  const children =
+    typeof props.children === "string" ? [props.children] : props.children;
+
+  children.push("CSC", "University of Waterloo");
+
+  return (
+    <Head>
+      <title>{children.join(" - ")}</title>
+    </Head>
+  );
+}
diff --git a/components/playground.tsx b/components/playground.tsx
index 1a6be704..6defc641 100644
--- a/components/playground.tsx
+++ b/components/playground.tsx
@@ -146,7 +146,7 @@ export function EventDescriptionCardDemo() {
 export function EventCardDemo() {
   return (
     <>
-      {events.map(({ Content, metadata }, idx) => (
+      {events.map(({ Content, metadata }) => (
         <>
           <EventCard
             {...metadata}
@@ -220,12 +220,14 @@ export function LinkDemo() {
 
 export function OrganizedContentDemo() {
   const sections = [...constitution];
+  const numberedSections = false;
   const readAllSection = createReadAllSection(
     constitution.map(({ id, title, Content }) => ({
       Content,
       section: { id, title },
     })),
-    true
+    true,
+    numberedSections
   );
   sections.unshift({
     ...readAllSection.section,
@@ -253,6 +255,7 @@ export function OrganizedContentDemo() {
       id={id}
       link={FakeLink}
       pageTitle="Playground"
+      numberedSections={numberedSections}
     >
       <Content />
     </OrganizedContent>
diff --git a/content/about/constitution/amendments-and-procedures.md b/content/about/constitution/amendments-and-procedures.md
index cd6b8a35..fbaa0a9a 100644
--- a/content/about/constitution/amendments-and-procedures.md
+++ b/content/about/constitution/amendments-and-procedures.md
@@ -1,5 +1,5 @@
 ---
-title: 10. Amendments and Procedures
+title: Amendments and Procedures
 index: 10
 ---
 
diff --git a/content/about/constitution/code-of-conduct.md b/content/about/constitution/code-of-conduct.md
index 92a9d31c..d23cf6c3 100644
--- a/content/about/constitution/code-of-conduct.md
+++ b/content/about/constitution/code-of-conduct.md
@@ -1,5 +1,5 @@
 ---
-title: 12. Code of Conduct
+title: Code of Conduct
 index: 12
 ---
 
diff --git a/content/about/constitution/committees.md b/content/about/constitution/committees.md
index 855020db..48fa7b17 100644
--- a/content/about/constitution/committees.md
+++ b/content/about/constitution/committees.md
@@ -1,5 +1,5 @@
 ---
-title: 7. Committees
+title: Committees
 index: 7
 ---
 
diff --git a/content/about/constitution/dissolution.md b/content/about/constitution/dissolution.md
index 46905779..0ca1a34e 100644
--- a/content/about/constitution/dissolution.md
+++ b/content/about/constitution/dissolution.md
@@ -1,5 +1,5 @@
 ---
-title: 11. Dissolution
+title: Dissolution
 index: 11
 ---
 
diff --git a/content/about/constitution/duties-of-officers.md b/content/about/constitution/duties-of-officers.md
index 6f5fd81c..454f459b 100644
--- a/content/about/constitution/duties-of-officers.md
+++ b/content/about/constitution/duties-of-officers.md
@@ -1,5 +1,5 @@
 ---
-title: 5. Duties of Officers
+title: Duties of Officers
 index: 5
 ---
 
diff --git a/content/about/constitution/executive-council.md b/content/about/constitution/executive-council.md
index fa2c2bc2..93e53013 100644
--- a/content/about/constitution/executive-council.md
+++ b/content/about/constitution/executive-council.md
@@ -1,5 +1,5 @@
 ---
-title: 6. Executive Council
+title: Executive Council
 index: 6
 ---
 
diff --git a/content/about/constitution/finances.md b/content/about/constitution/finances.md
index 19363941..0e77bcc8 100644
--- a/content/about/constitution/finances.md
+++ b/content/about/constitution/finances.md
@@ -1,5 +1,5 @@
 ---
-title: 9. Finances
+title: Finances
 index: 9
 ---
 
diff --git a/content/about/constitution/meetings.md b/content/about/constitution/meetings.md
index 487d927a..61139fab 100644
--- a/content/about/constitution/meetings.md
+++ b/content/about/constitution/meetings.md
@@ -1,5 +1,5 @@
 ---
-title: 8. Meetings
+title: Meetings
 index: 8
 ---
 
diff --git a/content/about/constitution/membership.md b/content/about/constitution/membership.md
index 2bb6f920..8a17368d 100644
--- a/content/about/constitution/membership.md
+++ b/content/about/constitution/membership.md
@@ -1,5 +1,5 @@
 ---
-title: 3. Membership
+title: Membership
 index: 3
 ---
 
diff --git a/content/about/constitution/name.md b/content/about/constitution/name.md
index 00cfcd82..fe463bc3 100644
--- a/content/about/constitution/name.md
+++ b/content/about/constitution/name.md
@@ -1,5 +1,5 @@
 ---
-title: 1. Name
+title: Name
 index: 1
 ---
 
diff --git a/content/about/constitution/officers.md b/content/about/constitution/officers.md
index a6173934..c08fbace 100644
--- a/content/about/constitution/officers.md
+++ b/content/about/constitution/officers.md
@@ -1,5 +1,5 @@
 ---
-title: 4. Officers
+title: Officers
 index: 4
 ---
 
diff --git a/content/about/constitution/purpose.md b/content/about/constitution/purpose.md
index 212be1cf..f8a4fc26 100644
--- a/content/about/constitution/purpose.md
+++ b/content/about/constitution/purpose.md
@@ -1,5 +1,5 @@
 ---
-title: 2. Purpose
+title: Purpose
 index: 2
 ---
 
diff --git a/content/about/constitution/use-of-club-resources.md b/content/about/constitution/use-of-club-resources.md
index bd7752ff..7be76a69 100644
--- a/content/about/constitution/use-of-club-resources.md
+++ b/content/about/constitution/use-of-club-resources.md
@@ -1,5 +1,5 @@
 ---
-title: 13. Use of Club Resources
+title: Use of Club Resources
 index: 13
 ---
 
diff --git a/pages/about/code-of-conduct/[section].tsx b/pages/about/code-of-conduct/[section].tsx
index 7d71be05..07f34861 100644
--- a/pages/about/code-of-conduct/[section].tsx
+++ b/pages/about/code-of-conduct/[section].tsx
@@ -4,7 +4,7 @@ import {
   createSectionGetStaticProps,
 } from "@/components/OrganizedContent/static";
 
-import { options } from "../code-of-conduct";
+import { options } from "./";
 
 export default createSectionPage(options);
 
diff --git a/pages/about/code-of-conduct.tsx b/pages/about/code-of-conduct/index.tsx
similarity index 74%
rename from pages/about/code-of-conduct.tsx
rename to pages/about/code-of-conduct/index.tsx
index 3fc88256..7339b73f 100644
--- a/pages/about/code-of-conduct.tsx
+++ b/pages/about/code-of-conduct/index.tsx
@@ -1,9 +1,12 @@
 import path from "path";
 
-import { createReadAllPage } from "@/components/OrganizedContent/ReadAll";
+import {
+  createReadAllPage,
+  Options,
+} from "@/components/OrganizedContent/ReadAll";
 import { createReadAllGetStaticProps } from "@/components/OrganizedContent/static";
 
-export const options = {
+export const options: Options = {
   title: "Code of Conduct",
   image: "images/code-of-conduct.svg",
   pagePath: path.join("about", "code-of-conduct"),
diff --git a/pages/about/constitution/[section].tsx b/pages/about/constitution/[section].tsx
index bd7cb7a1..07f34861 100644
--- a/pages/about/constitution/[section].tsx
+++ b/pages/about/constitution/[section].tsx
@@ -4,7 +4,7 @@ import {
   createSectionGetStaticProps,
 } from "@/components/OrganizedContent/static";
 
-import { options } from "../constitution";
+import { options } from "./";
 
 export default createSectionPage(options);
 
diff --git a/pages/about/constitution.tsx b/pages/about/constitution/index.tsx
similarity index 69%
rename from pages/about/constitution.tsx
rename to pages/about/constitution/index.tsx
index cf1d7902..5bcded1b 100644
--- a/pages/about/constitution.tsx
+++ b/pages/about/constitution/index.tsx
@@ -1,12 +1,16 @@
 import path from "path";
 
-import { createReadAllPage } from "@/components/OrganizedContent/ReadAll";
+import {
+  createReadAllPage,
+  Options,
+} from "@/components/OrganizedContent/ReadAll";
 import { createReadAllGetStaticProps } from "@/components/OrganizedContent/static";
 
-export const options = {
+export const options: Options = {
   title: "Constitution",
   image: "images/constitution.svg",
   pagePath: path.join("about", "constitution"),
+  numberedSections: true,
 };
 
 export default createReadAllPage(options);
diff --git a/pages/about/index.tsx b/pages/about/index.tsx
index e0231904..e22ed457 100644
--- a/pages/about/index.tsx
+++ b/pages/about/index.tsx
@@ -8,6 +8,7 @@ import {
   GetShapesConfig,
   mobileShapesConfig,
 } from "@/components/ShapesBackground";
+import { Title } from "@/components/Title";
 
 import Content from "../../content/about/index.mdx";
 
@@ -16,6 +17,7 @@ import styles from "./index.module.css";
 export default function AboutUs() {
   return (
     <>
+      <Title>About</Title>
       <div className={styles.titleContainer}>
         <h1 className={styles.title}>About Us!</h1>
         <Image src="/images/about-us.svg" className={styles.codey} />
diff --git a/pages/about/our-supporters.tsx b/pages/about/our-supporters.tsx
index e7b31442..7822957e 100644
--- a/pages/about/our-supporters.tsx
+++ b/pages/about/our-supporters.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 
 import { Image } from "@/components/Image";
+import { Title } from "@/components/Title";
 
 import Content from "../../content/about/our-supporters.mdx";
 
@@ -9,6 +10,7 @@ import styles from "./our-supporters.module.css";
 export default function OurSupporters() {
   return (
     <>
+      <Title>Our Supporters</Title>
       <div className={styles.headerContainer}>
         <h1 className={styles.header}>Our Supporters</h1>
         <Image src="images/our-supporters/codey.svg" className={styles.codey} />
diff --git a/pages/about/team.tsx b/pages/about/team.tsx
index 6c4d0702..fcab06f2 100644
--- a/pages/about/team.tsx
+++ b/pages/about/team.tsx
@@ -8,6 +8,7 @@ import { Image } from "@/components/Image";
 import { Link } from "@/components/Link";
 import { TeamMember } from "@/components/TeamMember";
 import { TeamMemberCard } from "@/components/TeamMemberCard";
+import { Title } from "@/components/Title";
 import {
   getExec,
   getExecNames,
@@ -36,6 +37,7 @@ interface Props {
 export default function Team({ execs, programme, website, systems }: Props) {
   return (
     <>
+      <Title>Team</Title>
       <DefaultLayout>
         <div className={styles.headerContainer}>
           <div className={styles.headerTextContainer}>
diff --git a/pages/events/[year]/[term]/[event].tsx b/pages/events/[year]/[term]/[event].tsx
index 193d4725..33a2aeba 100644
--- a/pages/events/[year]/[term]/[event].tsx
+++ b/pages/events/[year]/[term]/[event].tsx
@@ -5,6 +5,7 @@ import { MDXRemote } from "next-mdx-remote";
 import React from "react";
 
 import { EventCard } from "@/components/EventCard";
+import { Title } from "@/components/Title";
 import {
   Event,
   getEventYears,
@@ -12,20 +13,26 @@ import {
   getEventsByTerm,
   getEventBySlug,
 } from "@/lib/events";
+import { capitalize } from "@/utils";
 
-export default function EventInfoPage(props: Props) {
+export default function EventInfoPage({ year, term, event }: Props) {
   return (
-    <EventCard
-      {...props.event.metadata}
-      date={new Date(props.event.metadata.date)}
-      showDescription
-    >
-      <MDXRemote {...props.event.content} />
-    </EventCard>
+    <>
+      <Title>{[event.metadata.name, `${capitalize(term)} ${year}`]}</Title>
+      <EventCard
+        {...event.metadata}
+        date={new Date(event.metadata.date)}
+        showDescription
+      >
+        <MDXRemote {...event.content} />
+      </EventCard>
+    </>
   );
 }
 
 interface Props {
+  year: string;
+  term: string;
   event: Event;
 }
 
@@ -40,7 +47,9 @@ export const getStaticProps: GetStaticProps<Props, Params> = async (
 ) => {
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   const { year, term, event } = context.params!;
-  return { props: { event: await getEventBySlug(year, term, event) } };
+  return {
+    props: { year, term, event: await getEventBySlug(year, term, event) },
+  };
 };
 
 export const getStaticPaths: GetStaticPaths<Params> = async () => {
diff --git a/pages/events/[year]/[term]/index.tsx b/pages/events/[year]/[term]/index.tsx
index 9e6593ae..9731005c 100644
--- a/pages/events/[year]/[term]/index.tsx
+++ b/pages/events/[year]/[term]/index.tsx
@@ -7,6 +7,7 @@ import React from "react";
 import { EventCard } from "@/components/EventCard";
 import { Link } from "@/components/Link";
 import { MiniEventCard } from "@/components/MiniEventCard";
+import { Title } from "@/components/Title";
 import {
   Event,
   getEventsPageProps,
@@ -54,6 +55,7 @@ export default function Term(props: Props) {
 
   return (
     <div className={styles.main}>
+      <Title>{["Events", `${capitalize(props.term)} ${props.year}`]}</Title>
       <div className={styles.header}>
         {headerTerms.map((link) => (
           <HeaderLink
diff --git a/pages/events/[year]/index.tsx b/pages/events/[year]/index.tsx
index a5cef72a..07e29e05 100644
--- a/pages/events/[year]/index.tsx
+++ b/pages/events/[year]/index.tsx
@@ -4,6 +4,7 @@ import { GetStaticPaths, GetStaticProps } from "next";
 import React from "react";
 
 import { Link } from "@/components/Link";
+import { Title } from "@/components/Title";
 import { getEventYears, getEventTermsByYear } from "@/lib/events";
 
 import styles from "./index.module.css";
@@ -16,6 +17,7 @@ interface Props {
 export default function Year(props: Props) {
   return (
     <div className={styles.main}>
+      <Title>{["Events", props.year]}</Title>
       <h2>
         Events Archive:<span className={styles.blue}>{` ${props.year}`}</span>
       </h2>
diff --git a/pages/events/index.tsx b/pages/events/index.tsx
index 5f016465..9d5b1796 100644
--- a/pages/events/index.tsx
+++ b/pages/events/index.tsx
@@ -2,7 +2,7 @@ import { GetStaticProps } from "next";
 
 import { getCurrentTerm, getEventsPageProps } from "@/lib/events";
 
-import Term, { Props } from "./[year]/[term]/index";
+import Term, { Props } from "./[year]/[term]";
 
 export default Term;
 
diff --git a/pages/get-involved.tsx b/pages/get-involved.tsx
index 78a3f6ab..6673a976 100644
--- a/pages/get-involved.tsx
+++ b/pages/get-involved.tsx
@@ -3,6 +3,7 @@ import React from "react";
 import { ConnectWithUs } from "@/components/ConnectWithUs";
 import { EmailSignup } from "@/components/EmailSignup";
 import { Image } from "@/components/Image";
+import { Title } from "@/components/Title";
 
 import Content from "../content/get-involved.mdx";
 
@@ -11,6 +12,7 @@ import styles from "./get-involved.module.css";
 export default function GetInvolved() {
   return (
     <div className={styles.page}>
+      <Title>Get Involved</Title>
       <header>
         <div className={styles.headerText}>
           <h1>Get Involved!</h1>
diff --git a/pages/index.tsx b/pages/index.tsx
index 5db3414c..bc58ea3d 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -11,6 +11,7 @@ import { Link } from "@/components/Link";
 import { NewsCard } from "@/components/NewsCard";
 import { GetShapesConfig } from "@/components/ShapesBackground";
 import { SocialLinks } from "@/components/SocialLinks";
+import { Title } from "@/components/Title";
 import { Event, getUpcomingEvents } from "@/lib/events";
 import { News, getRecentNews } from "@/lib/news";
 
@@ -25,6 +26,7 @@ interface Props {
 export default function Home(props: Props) {
   return (
     <>
+      <Title>{[]}</Title>
       <DefaultLayout>
         <header className={styles.intro}>
           <div className={styles.introTop} />
diff --git a/pages/news/[year]/[term].tsx b/pages/news/[year]/[term].tsx
index b7f5ce8a..06640a7e 100644
--- a/pages/news/[year]/[term].tsx
+++ b/pages/news/[year]/[term].tsx
@@ -10,6 +10,7 @@ import {
   defaultGetShapesConfig,
   GetShapesConfig,
 } from "@/components/ShapesBackground";
+import { Title } from "@/components/Title";
 import {
   getNewsBySlug,
   getNewsByTerm,
@@ -30,6 +31,7 @@ interface Props {
 export default function TermNews({ year, term, news }: Props) {
   return (
     <div className={styles.page}>
+      <Title>{["News", `${capitalize(term)} ${capitalize(year)}`]}</Title>
       <h1>
         News Archive:{" "}
         <span className={styles.term}>
diff --git a/pages/resources/advice/academic.tsx b/pages/resources/advice/academic.tsx
index aa7823a0..19fb35ea 100644
--- a/pages/resources/advice/academic.tsx
+++ b/pages/resources/advice/academic.tsx
@@ -1,13 +1,18 @@
 import React from "react";
 
+import { Title } from "@/components/Title";
+
 import Content from "../../../content/advice/academic-advice.mdx";
 
 import { Advice } from "./coop";
 
 export default function AcademicAdvice() {
   return (
-    <Advice>
-      <Content />
-    </Advice>
+    <>
+      <Title>Academic Advice</Title>
+      <Advice>
+        <Content />
+      </Advice>
+    </>
   );
 }
diff --git a/pages/resources/advice/coop.tsx b/pages/resources/advice/coop.tsx
index 0e91b2df..d46ebdf7 100644
--- a/pages/resources/advice/coop.tsx
+++ b/pages/resources/advice/coop.tsx
@@ -3,6 +3,7 @@ import { useRouter } from "next/router";
 import React, { ReactNode } from "react";
 
 import { Image } from "@/components/Image";
+import { Title } from "@/components/Title";
 
 import Content from "../../../content/advice/coop-advice.mdx";
 
@@ -10,9 +11,12 @@ import styles from "./coop.module.css";
 
 export default function CoopAdvice() {
   return (
-    <Advice>
-      <Content />
-    </Advice>
+    <>
+      <Title>Co-op Advice</Title>
+      <Advice>
+        <Content />
+      </Advice>
+    </>
   );
 }
 
diff --git a/pages/resources/advice/misc.tsx b/pages/resources/advice/misc.tsx
index e3ef7196..3e9774d6 100644
--- a/pages/resources/advice/misc.tsx
+++ b/pages/resources/advice/misc.tsx
@@ -1,13 +1,18 @@
 import React from "react";
 
+import { Title } from "@/components/Title";
+
 import Content from "../../../content/advice/misc-advice.mdx";
 
 import { Advice } from "./coop";
 
 export default function MiscAdvice() {
   return (
-    <Advice>
-      <Content />
-    </Advice>
+    <>
+      <Title>Additional Advice</Title>
+      <Advice>
+        <Content />
+      </Advice>
+    </>
   );
 }
diff --git a/pages/resources/machine-usage-agreement/[section].tsx b/pages/resources/machine-usage-agreement/[section].tsx
index d139a5ae..07f34861 100644
--- a/pages/resources/machine-usage-agreement/[section].tsx
+++ b/pages/resources/machine-usage-agreement/[section].tsx
@@ -4,7 +4,7 @@ import {
   createSectionGetStaticProps,
 } from "@/components/OrganizedContent/static";
 
-import { options } from "../machine-usage-agreement";
+import { options } from "./";
 
 export default createSectionPage(options);
 
diff --git a/pages/resources/machine-usage-agreement.tsx b/pages/resources/machine-usage-agreement/index.tsx
similarity index 100%
rename from pages/resources/machine-usage-agreement.tsx
rename to pages/resources/machine-usage-agreement/index.tsx
diff --git a/pages/resources/services/[section].tsx b/pages/resources/services/[section].tsx
index d54c0bd9..07f34861 100644
--- a/pages/resources/services/[section].tsx
+++ b/pages/resources/services/[section].tsx
@@ -4,7 +4,7 @@ import {
   createSectionGetStaticProps,
 } from "@/components/OrganizedContent/static";
 
-import { options } from "../services";
+import { options } from "./";
 
 export default createSectionPage(options);
 
diff --git a/pages/resources/services.tsx b/pages/resources/services/index.tsx
similarity index 100%
rename from pages/resources/services.tsx
rename to pages/resources/services/index.tsx
diff --git a/pages/resources/tech-talks/[slug].tsx b/pages/resources/tech-talks/[slug].tsx
index 28423d9c..131311d5 100644
--- a/pages/resources/tech-talks/[slug].tsx
+++ b/pages/resources/tech-talks/[slug].tsx
@@ -5,10 +5,12 @@ import { MDXRemote, MDXRemoteSerializeResult } from "next-mdx-remote";
 import React from "react";
 
 import { TechTalkCard } from "@/components/TechTalkCard";
+import { Title } from "@/components/Title";
 import { getTechTalk, getTechTalkNames, Metadata } from "@/lib/tech-talks";
 
-import { Header } from "../tech-talks";
-import styles from "../tech-talks.module.css";
+import { Header } from "./";
+
+import styles from "./index.module.css";
 
 interface Props {
   content: MDXRemoteSerializeResult;
@@ -18,6 +20,7 @@ interface Props {
 export default function TechTalk({ content, metadata }: Props) {
   return (
     <div className={styles.page}>
+      <Title>{[metadata.title, "Tech Talks"]}</Title>
       <Header />
       <TechTalkCard
         {...metadata}
diff --git a/pages/resources/tech-talks.module.css b/pages/resources/tech-talks/index.module.css
similarity index 100%
rename from pages/resources/tech-talks.module.css
rename to pages/resources/tech-talks/index.module.css
diff --git a/pages/resources/tech-talks.tsx b/pages/resources/tech-talks/index.tsx
similarity index 91%
rename from pages/resources/tech-talks.tsx
rename to pages/resources/tech-talks/index.tsx
index 9808b6b9..56841077 100644
--- a/pages/resources/tech-talks.tsx
+++ b/pages/resources/tech-talks/index.tsx
@@ -3,9 +3,10 @@ import React from "react";
 
 import { Image } from "@/components/Image";
 import { MiniTechTalkCard } from "@/components/MiniTechTalkCard";
+import { Title } from "@/components/Title";
 import { getTechTalks, Metadata } from "@/lib/tech-talks";
 
-import styles from "./tech-talks.module.css";
+import styles from "./index.module.css";
 
 interface Props {
   talks: Metadata[];
@@ -14,6 +15,7 @@ interface Props {
 export default function TechTalks({ talks }: Props) {
   return (
     <div className={styles.page}>
+      <Title>Tech Talks</Title>
       <Header />
       <div className={styles.miniCards}>
         {talks.map((talk) => (
diff --git a/pages/themer.tsx b/pages/themer.tsx
index 3d7ce016..7212e547 100644
--- a/pages/themer.tsx
+++ b/pages/themer.tsx
@@ -3,6 +3,7 @@ import React from "react";
 import { Button } from "@/components/Button";
 import { Input } from "@/components/Input";
 import { useThemeContext, emptyPalette } from "@/components/Theme";
+import { Title } from "@/components/Title";
 
 import styles from "./themer.module.css";
 
@@ -12,6 +13,7 @@ export default function Themer() {
 
   return (
     <main className={styles.page}>
+      <Title>Themer</Title>
       <h1>Themer</h1>
       <form onSubmit={(event) => event.preventDefault()}>
         <div className={styles.controls}>
@@ -72,7 +74,7 @@ export default function Themer() {
               </div>
             );
           })}
-        </div>{" "}
+        </div>
       </form>
     </main>
   );

From c0c2420ee6eb13ca25cfd421d26cb8ef4d7bb3c2 Mon Sep 17 00:00:00 2001
From: j285he <j285he@localhost>
Date: Mon, 30 Aug 2021 20:37:55 -0400
Subject: [PATCH 2/2] Fix mobile header (#231)

Closes #210

Co-authored-by: Jared He <66887902+jaredjhe@users.noreply.github.com>
Reviewed-on: https://git.csclub.uwaterloo.ca/www/www-new/pulls/231
Reviewed-by: Aditya Thakral <a3thakra@csclub.uwaterloo.ca>
Co-authored-by: j285he <j285he@localhost>
Co-committed-by: j285he <j285he@localhost>
---
 pages/events/[year]/[term]/index.module.css | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/pages/events/[year]/[term]/index.module.css b/pages/events/[year]/[term]/index.module.css
index ce7de862..c2dfa8cd 100644
--- a/pages/events/[year]/[term]/index.module.css
+++ b/pages/events/[year]/[term]/index.module.css
@@ -8,10 +8,15 @@
   border-bottom: 1px solid var(--primary-heading);
 }
 
+.header {
+  display: flex;
+  flex-wrap: wrap;
+}
+
 .header a {
   color: var(--text);
   font-size: calc(18rem / 16);
-  margin-right: calc(30rem / 16);
+  margin-right: 1rem;
 }
 
 .header a .curTerm {