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: #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

@@ -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";
+} from "./ShapesBackground";
-import { capitalize } from "@/utils";
+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>
+      <Title>{[capitalize(type), "Archive"]}</Title>
-      <ul className={styles.list}>
+      <div className={styles.page}>
-        {items.map(({ year, terms }) =>
+        <h1>{capitalize(type)} Archive</h1>
-          terms.map((term) => (
+        <ul className={styles.list}>
-            <li key={`/${type}/${year}/${term}`}>
+          {items.map(({ year, terms }) =>
-              <Link href={`/${type}/${year}/${term}`}>
+            terms.map((term) => (
-                {capitalize(term)} {year}
+              <li key={`/${type}/${year}/${term}`}>
-              </Link>
+                <Link href={`/${type}/${year}/${term}`}>
-            </li>
+                  {capitalize(term)} {year}
-          ))
+                </Link>
-        )}
+              </li>
-      </ul>
+            ))
-    </div>
+          )}
+        </ul>
+      </div>
+    </>
   );
 }
 

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>
                 )

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}
+        <Title>{title}</Title>
-        image={image}
+        <Header
-        description={description}
+          title={title}
-        imagePosition={imagePosition}
+          image={image}
-      >
+          description={description}
-        <OrganizedContent
+          imagePosition={imagePosition}
-          id={readAllSection.section.id}
-          sections={[
-            readAllSection.section,
-            ...sections.map(({ section }) => section),
-          ]}
-          pageTitle={title}
-          link={Link}
         >
-          <readAllSection.Content />
+          <OrganizedContent
-        </OrganizedContent>
+            id={readAllSection.section.id}
-      </Header>
+            sections={[
+              readAllSection.section,
+              ...sections.map(({ section }) => section),
+            ]}
+            numberedSections={numberedSections}
+            pageTitle={title}
+            link={Link}
+          >
+            <readAllSection.Content />
+          </OrganizedContent>
+        </Header>
+      </>
     );
   }
 

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}
+        <Title>{[sections[current].title, title]}</Title>
-        image={image}
+        <Header
-        description={description}
+          title={title}
-        imagePosition={imagePosition}
+          image={image}
-      >
+          description={description}
-        <OrganizedContent
+          imagePosition={imagePosition}
-          sections={sections}
-          id={sections[current].id}
-          pageTitle={title}
-          link={Link}
         >
-          <MDXRemote {...content} />
+          <OrganizedContent
-        </OrganizedContent>
+            sections={sections}
-      </Header>
+            id={sections[current].id}
+            pageTitle={title}
+            link={Link}
+            numberedSections={numberedSections}
+          >
+            <MDXRemote {...content} />
+          </OrganizedContent>
+        </Header>
+      </>
     );
   }
 

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>
+  );
+}

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>

content/about/constitution/amendments-and-procedures.md

@@ -1,5 +1,5 @@
 ---
-title: 10. Amendments and Procedures
+title: Amendments and Procedures
 index: 10
 ---
 

content/about/constitution/code-of-conduct.md

@@ -1,5 +1,5 @@
 ---
-title: 12. Code of Conduct
+title: Code of Conduct
 index: 12
 ---
 

content/about/constitution/committees.md

@@ -1,5 +1,5 @@
 ---
-title: 7. Committees
+title: Committees
 index: 7
 ---
 

content/about/constitution/dissolution.md

@@ -1,5 +1,5 @@
 ---
-title: 11. Dissolution
+title: Dissolution
 index: 11
 ---
 

content/about/constitution/duties-of-officers.md

@@ -1,5 +1,5 @@
 ---
-title: 5. Duties of Officers
+title: Duties of Officers
 index: 5
 ---
 

content/about/constitution/executive-council.md

@@ -1,5 +1,5 @@
 ---
-title: 6. Executive Council
+title: Executive Council
 index: 6
 ---
 

content/about/constitution/finances.md

@@ -1,5 +1,5 @@
 ---
-title: 9. Finances
+title: Finances
 index: 9
 ---
 

content/about/constitution/meetings.md

@@ -1,5 +1,5 @@
 ---
-title: 8. Meetings
+title: Meetings
 index: 8
 ---
 

content/about/constitution/membership.md

@@ -1,5 +1,5 @@
 ---
-title: 3. Membership
+title: Membership
 index: 3
 ---
 

content/about/constitution/name.md

@@ -1,5 +1,5 @@
 ---
-title: 1. Name
+title: Name
 index: 1
 ---
 

content/about/constitution/officers.md

@@ -1,5 +1,5 @@
 ---
-title: 4. Officers
+title: Officers
 index: 4
 ---
 

content/about/constitution/purpose.md

@@ -1,5 +1,5 @@
 ---
-title: 2. Purpose
+title: Purpose
 index: 2
 ---
 

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
 ---
 

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);
 

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"),

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);
 

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);

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} />

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} />

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}>

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}
+      <Title>{[event.metadata.name, `${capitalize(term)} ${year}`]}</Title>
-      date={new Date(props.event.metadata.date)}
+      <EventCard
-      showDescription
+        {...event.metadata}
-    >
+        date={new Date(event.metadata.date)}
-      <MDXRemote {...props.event.content} />
+        showDescription
-    </EventCard>
+      >
+        <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 () => {

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

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>

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;
 

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>

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} />

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}>

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 />
+      <Title>Academic Advice</Title>
-    </Advice>
+      <Advice>
+        <Content />
+      </Advice>
+    </>
   );
 }

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 />
+      <Title>Co-op Advice</Title>
-    </Advice>
+      <Advice>
+        <Content />
+      </Advice>
+    </>
   );
 }
 

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 />
+      <Title>Additional Advice</Title>
-    </Advice>
+      <Advice>
+        <Content />
+      </Advice>
+    </>
   );
 }

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);
 

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);
 

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 { Header } from "./";
-import styles from "../tech-talks.module.css";
+
+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}

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) => (

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>
   );