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>
pull/244/head
Aditya Thakral 1 year ago
parent 298e3c6efb
commit 30102822da
  1. 39
      components/ArchivePage.tsx
  2. 32
      components/OrganizedContent.tsx
  3. 44
      components/OrganizedContent/ReadAll.tsx
  4. 35
      components/OrganizedContent/Section.tsx
  5. 19
      components/Title.tsx
  6. 7
      components/playground.tsx
  7. 2
      content/about/constitution/amendments-and-procedures.md
  8. 2
      content/about/constitution/code-of-conduct.md
  9. 2
      content/about/constitution/committees.md
  10. 2
      content/about/constitution/dissolution.md
  11. 2
      content/about/constitution/duties-of-officers.md
  12. 2
      content/about/constitution/executive-council.md
  13. 2
      content/about/constitution/finances.md
  14. 2
      content/about/constitution/meetings.md
  15. 2
      content/about/constitution/membership.md
  16. 2
      content/about/constitution/name.md
  17. 2
      content/about/constitution/officers.md
  18. 2
      content/about/constitution/purpose.md
  19. 2
      content/about/constitution/use-of-club-resources.md
  20. 2
      pages/about/code-of-conduct/[section].tsx
  21. 7
      pages/about/code-of-conduct/index.tsx
  22. 2
      pages/about/constitution/[section].tsx
  23. 8
      pages/about/constitution/index.tsx
  24. 2
      pages/about/index.tsx
  25. 2
      pages/about/our-supporters.tsx
  26. 2
      pages/about/team.tsx
  27. 27
      pages/events/[year]/[term]/[event].tsx
  28. 2
      pages/events/[year]/[term]/index.tsx
  29. 2
      pages/events/[year]/index.tsx
  30. 2
      pages/events/index.tsx
  31. 2
      pages/get-involved.tsx
  32. 2
      pages/index.tsx
  33. 2
      pages/news/[year]/[term].tsx
  34. 11
      pages/resources/advice/academic.tsx
  35. 10
      pages/resources/advice/coop.tsx
  36. 11
      pages/resources/advice/misc.tsx
  37. 2
      pages/resources/machine-usage-agreement/[section].tsx
  38. 0
      pages/resources/machine-usage-agreement/index.tsx
  39. 2
      pages/resources/services/[section].tsx
  40. 0
      pages/resources/services/index.tsx
  41. 7
      pages/resources/tech-talks/[slug].tsx
  42. 0
      pages/resources/tech-talks/index.module.css
  43. 4
      pages/resources/tech-talks/index.tsx
  44. 4
      pages/themer.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>
</>
);
}

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

@ -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>
</>
);
}

@ -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>
</>
);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -1,5 +1,5 @@
---
title: 13. Use of Club Resources
title: Use of Club Resources
index: 13
---

@ -4,7 +4,7 @@ import {
createSectionGetStaticProps,
} from "@/components/OrganizedContent/static";
import { options } from "../code-of-conduct";
import { options } from "./";
export default createSectionPage(options);

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

@ -4,7 +4,7 @@ import {
createSectionGetStaticProps,
} from "@/components/OrganizedContent/static";
import { options } from "../constitution";
import { options } from "./";
export default createSectionPage(options);

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

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

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

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

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

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

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

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

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

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

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

@ -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>
</>
);
}

@ -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>
</>
);
}

@ -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>
</>
);
}

@ -4,7 +4,7 @@ import {
createSectionGetStaticProps,
} from "@/components/OrganizedContent/static";
import { options } from "../machine-usage-agreement";
import { options } from "./";
export default createSectionPage(options);

@ -4,7 +4,7 @@ import {
createSectionGetStaticProps,
} from "@/components/OrganizedContent/static";
import { options } from "../services";
import { options } from "./";
export default createSectionPage(options);

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

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

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

Loading…
Cancel
Save