exec blurb (#693)

Co-authored-by: dlslo <dlslo@uwaterloo.ca>
Reviewed-on: #693
Reviewed-by: Tejas Srikanth <tcsrikan@csclub.uwaterloo.ca>

.drone.yml

@@ -4,18 +4,18 @@ type: docker
 name: node16
 
 steps:
-- name: check-lockfile
-  image: node:16
-  commands:
-  - node ./check-lockfile.js
-
 - name: install-deps
   image: node:16
-  depends_on:
-  - check-lockfile
   commands:
   - npm install
 
+- name: check-lockfile
+  image: node:16
+  depends_on:
+  - install-deps
+  commands:
+  - npm run check-lockfile
+
 - name: lint
   image: node:16
   depends_on:
@@ -23,16 +23,39 @@ steps:
   commands:
   - npm run lint
 
-- name: build
+- name: optimize-images
   image: node:16
   depends_on:
   - install-deps
   commands:
-  - npm run build
+  - npm run build:images
+
+- name: generate-calendar
+  image: node:16
+  depends_on:
+  - install-deps
+  commands:
+  - npm run build:calendar
+
+- name: generate-api
+  image: node:16
+  depends_on:
+  - install-deps
+  commands:
+  - npm run build:api
+
+- name: build
+  image: node:16
+  depends_on:
+  - optimize-images
+  commands:
+  - USE_LDAP=true npm run build:web
 
 - name: export
   image: node:16
   depends_on:
+  - generate-api
+  - generate-calendar
   - build
   commands:
   - npm run export
@@ -46,8 +69,27 @@ steps:
       from_secret: STAGING_TOKEN
   commands:
   - 'curl -XPOST -H "Authorization: $TOKEN" -H "X-Branch: $DRONE_BRANCH" "https://csclub.uwaterloo.ca/~a3thakra/update-csc/"'
+  when:
+    branch:
+      exclude:
+      - main
+
+- name: deploy (production)
+  image: node:16
+  depends_on:
+  - export
+  environment:
+    SSH_KEY:
+      from_secret: DEPLOYMENT_SSH_KEY
+  commands:
+  - 'echo "$SSH_KEY" > /tmp/ssh_key'
+  - chmod 600 /tmp/ssh_key
+  - ssh -4 -i /tmp/ssh_key www@caffeine.csclub.uwaterloo.ca -o StrictHostKeyChecking=no '~/bin/deploy-website.sh'
+  when:
+    branch:
+    - main
 
 trigger:
   event:
     exclude:
-    - pull_request #avoid double build on PRs
+    - pull_request #avoid double build on PRs

.eslintrc.js

@@ -17,7 +17,12 @@ module.exports = {
   ],
   plugins: ["@typescript-eslint", "react", "react-hooks", "prettier"],
   rules: {
-    "prettier/prettier": "error",
+    'prettier/prettier': [
+      'error',
+      {
+        'endOfLine': 'lf',
+      }
+    ], 
 
     "import/first": "error",
     "import/order": [

.gitignore

@@ -23,3 +23,15 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+# Calendar is automatically generated
+/public/events.ics
+
+# Images should be optimized
+/public/images
+
+# APIs should be automatically generated, schema should be checked in
+/public/api/*
+!/public/api/schema
+
+.idea/**

.vscode/settings.json

@@ -40,6 +40,11 @@
   "files.eol": "\n",
   "[markdown]": {
     "editor.wordWrap": "on",
-    "editor.quickSuggestions": false
+    "editor.quickSuggestions": {
+      "comments": "off",
+      "strings": "off",
+      "other": "off"
+    },
+    "editor.tabSize": 4
   }
 }

README.md

@@ -0,0 +1,34 @@
+# README
+
+## Documentation
+
+- [Architecture and Folder Structure](docs/architecture.md)
+- [Everything about pages](docs/pages.md)
+
+## Development
+
+### Dependencies
+
+Make sure that you have `node` >= 14 and `npm` >= 7. Node 14 ships with npm v6,
+so if you're using node 14, you would need to upgrade npm. Alternatively you
+could also upgrade to node 16, which ships with npm 7.
+
+How to upgrade npm: `npm i -g npm`
+
+### Local
+
+- `npm install` to install project dependencies
+- `npm run build:images` to optimize images for the first time after cloning
+- `npm run dev` to run the dev server (http://localhost:3000)
+
+### Production
+
+- `npm install` to install project dependencies
+- `npm run build` to generate html/css/js
+- `npm run export` to move the built files (along with assets in the public directory) to the `/out` directory
+- Use your favourite web server to host the files in the `/out` directory. (A very simple one would be `python -m http.server` - not sure if it should actually be used for production :P)
+
+## Deploy
+
+- `groups` (make sure you're in the `www` group)
+- `curl -o- https://git.csclub.uwaterloo.ca/www/www-new/raw/branch/main/deploy.sh | bash` (run on `caffeine`)

components/ArchivePage.module.css

@@ -3,7 +3,7 @@
 }
 
 .page > h1 {
-  border-bottom: calc(1rem / 16) solid var(--primary-heading);
+  border-bottom: calc(1rem / 16) solid var(--border);
   padding-bottom: 1rem;
 }
 

components/ArchivePage.tsx

@@ -1,12 +1,14 @@
 import React from "react";
 
-import { Link } from "@/components/Link";
+import { capitalize, Term } 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";
 
@@ -14,26 +16,29 @@ export interface Props {
   type: "news" | "events";
   items: {
     year: string;
-    terms: string[];
+    terms: Term[];
   }[];
 }
 
 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>
+    </>
   );
 }
 

components/Blockquote.module.css

@@ -0,0 +1,5 @@
+.blockquote {
+  margin: 0;
+  padding-left: calc(10rem / 16);
+  border-left: calc(3rem / 16) solid var(--primary-accent-light);
+}

components/Blockquote.tsx

@@ -0,0 +1,13 @@
+import React, { ReactNode } from "react";
+
+import styles from "./Blockquote.module.css";
+
+export interface Props {
+  children: ReactNode;
+}
+
+export function Blockquote(props: Props) {
+  return (
+    <blockquote className={styles.blockquote}>{props.children}</blockquote>
+  );
+}

components/Bubble.module.css

@@ -6,7 +6,6 @@
 
 .bubble {
   --border-radius: calc(5000rem / 16);
-
   display: flex;
   flex-direction: row;
   position: absolute;

components/Button.module.css

@@ -2,8 +2,8 @@
 .link {
   font-family: "Poppins", "sans-serif";
   border-radius: calc(20rem / 16);
-  background-color: var(--primary-accent);
-  color: var(--primary-background);
+  background-color: var(--button-background);
+  color: var(--text-light);
   border: none;
   outline: none;
   transition-duration: 0.3s;
@@ -17,6 +17,16 @@
   cursor: pointer;
 }
 
+.button:focus,
+.link:focus {
+  box-shadow: 0 0 0 calc(4rem / 16) var(--secondary-accent);
+}
+
+.small.button:focus,
+.small.link:focus {
+  box-shadow: 0 0 0 calc(3rem / 16) var(--secondary-accent);
+}
+
 .link {
   text-decoration: none;
 }

components/Button.tsx

@@ -21,6 +21,7 @@ export function Button(props: Props) {
       <a
         {...otherProps}
         target="_blank"
+        rel="noreferrer"
         className={`${styles.link} ${styles[btnSize]} ${
           otherProps.className ?? ""
         }`}

components/ConnectWithUs.tsx

@@ -20,7 +20,7 @@ export function ConnectWithUs() {
 
       <p>
         Send feedback through our{" "}
-        <Link href="https://bit.ly/uwcsclub-feedback-form">Feedback Form</Link>
+        <Link href="https://bit.ly/uwcsclub-feedback-form">Feedback Form</Link>.
       </p>
     </section>
   );

components/EventCard.module.css

@@ -31,6 +31,10 @@
   margin-bottom: 0;
 }
 
+.content > h1 a {
+  color: var(--primary-heading);
+}
+
 .content,
 .content > h2 {
   font-weight: 400;

components/EventCard.tsx

@@ -7,31 +7,39 @@ import { Link } from "./Link";
 
 import styles from "./EventCard.module.css";
 
-interface BaseProps {
+interface EventCardProps {
   name: string;
   short: string;
-  date: Date;
+  startDate: Date;
+  endDate?: Date;
   online: boolean;
   location: string;
   poster?: string;
   registerLink?: string;
+  permaLink: string;
+  showDescription?: boolean;
   children: ReactNode;
+  year: number;
+  term: string;
+  slug: string;
+  titleLinked: boolean;
 }
 
-type EventCardProps =
-  | (BaseProps & { showDescription?: false; link: string })
-  | (BaseProps & { showDescription: true; link?: string });
-
 export function EventCard({
-  link,
+  permaLink,
   name,
-  date,
+  startDate,
+  endDate,
   online,
   location,
   poster,
   registerLink,
   children,
   showDescription = false,
+  year,
+  term,
+  slug,
+  titleLinked,
 }: EventCardProps) {
   return (
     <article className={styles.card}>
@@ -56,12 +64,23 @@ export function EventCard({
           showDescription ? styles.mobileShowDescriptionContent : "",
         ].join(" ")}
       >
-        <h1>{name}</h1>
+        <h1>
+          {titleLinked ? (
+            <Link href={`/events/${year}/${term}/${slug}`}>{name}</Link>
+          ) : (
+            name
+          )}
+        </h1>
         <h2>
-          <EventSetting date={date} online={online} location={location} />
+          <EventSetting
+            startDate={startDate}
+            endDate={endDate}
+            online={online}
+            location={location}
+          />
         </h2>
-        {!showDescription && link && (
-          <Link href={link}>
+        {!showDescription && (
+          <Link href={permaLink}>
             <span className={styles.mobileLearnMore}>Learn more</span>
           </Link>
         )}

components/EventDescriptionCard.module.css

@@ -4,7 +4,7 @@
   max-width: calc(540rem / 16);
   padding: calc(24rem / 16);
   border-radius: calc(20rem / 16);
-  background-color: var(--primary-background);
+  background-color: var(--card-background);
 }
 
 .poster {
@@ -29,13 +29,16 @@
 }
 
 .logo {
+  display: flex;
+  justify-content: center;
+  align-items: center;
   width: calc(32rem / 16);
   margin-left: auto;
 }
 
 .setting {
   margin: 0;
-  color: var(--primary-accent);
+  color: var(--link);
   font-size: calc(14rem / 16);
   font-weight: 600;
 }

components/EventDescriptionCard.tsx

@@ -3,6 +3,7 @@ import React from "react";
 import { Button } from "./Button";
 import { EventSetting } from "./EventSetting";
 import { Image } from "./Image";
+import { Link } from "./Link";
 import { Discord, Twitch, Instagram, Facebook } from "./SocialLinks";
 
 import styles from "./EventDescriptionCard.module.css";
@@ -12,9 +13,11 @@ interface Props {
   short: string;
   online: boolean;
   location: string;
-  date: Date;
+  startDate: Date;
+  endDate?: Date;
   poster?: string;
   registerLink?: string;
+  permaLink: string;
 }
 
 /**
@@ -32,9 +35,11 @@ export function EventDescriptionCard({
   poster,
   name,
   short,
-  date,
+  startDate,
+  endDate,
   online,
   registerLink,
+  permaLink,
 }: Props) {
   const Icon = getIcon(location);
 
@@ -45,9 +50,15 @@ export function EventDescriptionCard({
       <div className={styles.details}>
         <h1 className={styles.name}>{name}</h1>
         <h2 className={styles.setting}>
-          <EventSetting date={date} online={online} location={location} />
+          <EventSetting
+            startDate={startDate}
+            endDate={endDate}
+            online={online}
+            location={location}
+          />
         </h2>
         <p className={styles.desc}>{short}</p>
+        <Link href={permaLink}>Learn more</Link>
 
         <footer>
           {registerLink && (

components/EventSetting.module.css

@@ -1,9 +1,18 @@
+.container {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.separator {
+  padding: 0 calc(8rem / 16);
+}
+
 @media only screen and (max-width: calc(768rem / 16)) {
+  .container {
+    flex-direction: column;
+  }
+
   .separator {
     display: none;
   }
-
-  .setting {
-    display: block;
-  }
 }

components/EventSetting.tsx

@@ -3,32 +3,51 @@ import React from "react";
 import styles from "./EventSetting.module.css";
 
 interface Props {
-  date: Date;
+  startDate: Date;
+  endDate?: Date;
   online: boolean;
   location: string;
 }
 
 export function EventSetting(props: Props) {
-  const date = props.date.toLocaleDateString("en-US", {
+  const date = props.startDate.toLocaleDateString("en-US", {
     day: "numeric",
     month: "long",
     year: "numeric",
   });
-  const time = props.date.toLocaleTimeString("en-US", {
+  const time = props.startDate.toLocaleTimeString("en-US", {
     hour: "numeric",
     minute: "numeric",
     timeZoneName: "short",
   });
+
+  const endDate =
+    props.endDate?.toLocaleDateString("en-US", {
+      day: "numeric",
+      month: "long",
+      year: "numeric",
+    }) ?? "";
+
   const location = props.online ? `Online - ${props.location}` : props.location;
   const separator = <span className={styles.separator}> | </span>;
 
   return (
-    <div>
-      <time className={styles.setting} dateTime={props.date.toISOString()}>
-        {date}
-      </time>
-      {separator}
-      <span className={styles.setting}>{time}</span>
+    <div className={styles.container}>
+      {!props.endDate || date == endDate ? (
+        // Single day event
+        <>
+          <time dateTime={props.startDate.toISOString()}>{date}</time>
+          {separator}
+          <span>{time}</span>
+        </>
+      ) : (
+        // Multi day event
+        <span>
+          <time dateTime={props.startDate.toISOString()}>{date}</time>
+          <span> - </span>
+          <time dateTime={props.startDate.toISOString()}>{endDate}</time>
+        </span>
+      )}
       {separator}
       {location}
     </div>

components/Footer.module.css

@@ -1,8 +1,7 @@
 .footer {
   box-sizing: border-box;
-  background: var(--primary-heading);
-  height: calc(66rem / 16);
-  padding: calc(14rem / 16) 0;
+  background: var(--footer-background);
+  padding: 1rem 0;
   width: 100%;
 }
 
@@ -18,7 +17,7 @@
 }
 
 .text {
-  color: var(--primary-background);
+  color: var(--text-light);
   font-style: normal;
   text-align: center;
 }
@@ -30,12 +29,14 @@
 
 @media only screen and (max-width: calc(768rem / 16)) {
   .footer {
-    height: calc(120rem / 16);
+    padding: 2rem 0;
+    height: unset;
   }
 
   .container {
     flex-direction: column-reverse;
     justify-content: space-around;
+    gap: 1rem;
     padding: 0 calc(24rem / 16);
   }
 }

components/Footer.tsx

@@ -1,11 +1,15 @@
 import Link from "next/link";
 import React from "react";
 
+import { Button } from "./Button";
 import { SocialLinks } from "./SocialLinks";
+import { useThemeContext } from "./Theme";
 
 import styles from "./Footer.module.css";
 
 export function Footer() {
+  const themeContext = useThemeContext();
+
   return (
     <footer className={styles.footer}>
       <div className={styles.container}>
@@ -15,6 +19,16 @@ export function Footer() {
             <a className={styles.email}>exec@csclub.uwaterloo.ca</a>
           </Link>
         </div>
+        <Button
+          size="small"
+          onClick={() =>
+            themeContext?.theme.name === "dark"
+              ? themeContext?.setTheme("light")
+              : themeContext?.setTheme("dark")
+          }
+        >
+          Toggle Theme
+        </Button>
         <SocialLinks color="white" size="small" />
       </div>
     </footer>

components/Link.module.css

@@ -1,5 +1,5 @@
 .link {
-  color: var(--primary-accent);
+  color: var(--link);
   transition-duration: 0.3s;
   text-decoration: none;
   white-space: normal;
@@ -7,5 +7,5 @@
 }
 
 .link:hover {
-  color: var(--secondary-accent);
+  color: var(--link-hover);
 }

components/MiniEventCard.module.css

@@ -2,10 +2,11 @@
   box-sizing: border-box;
   position: relative;
   padding: calc(20rem / 16);
+  color: var(--text);
 }
 
-.card:nth-child(odd) {
-  background-color: var(--secondary-accent-light);
+.darkBg {
+  background-color: var(--dark-card-background);
 }
 
 .name {
@@ -14,6 +15,10 @@
   margin: 0;
 }
 
+.name a {
+  color: var(--primary-heading);
+}
+
 .nameSpacer {
   width: calc(140rem / 16);
 }
@@ -45,10 +50,29 @@
   list-style: none;
 }
 
+.card > summary::marker {
+  display: none;
+}
+
+.card > summary::-webkit-details-marker {
+  display: none;
+}
+
 .dropDownIcon {
   fill: var(--primary-accent);
 }
 
+
+.card h1,
+.card h2,
+.card h3,
+.card h4 {
+  font-size: calc(18rem / 16);
+  margin-top: calc(24rem / 16);
+  margin-bottom: calc(8rem / 16);
+  color: var(--mini-event-card-text);
+}
+
 @media only screen and (max-width: calc(768rem / 16)) {
   .details {
     bottom: 0;

components/MiniEventCard.tsx

@@ -1,36 +1,54 @@
 import React, { ReactNode } from "react";
 
 import { EventSetting } from "./EventSetting";
+import { Link } from "./Link";
 
 import styles from "./MiniEventCard.module.css";
 
-interface Props {
+interface MiniEventCardProps {
   name: string;
   description: ReactNode;
   short: string;
   online: boolean;
   location: string;
-  date: Date;
+  startDate: Date;
+  endDate?: Date;
+  background: "dark-bg" | "normal-bg";
+  year: number;
+  term: string;
+  slug: string;
 }
 
-export const MiniEventCard: React.FC<Props> = ({
+export const MiniEventCard: React.FC<MiniEventCardProps> = ({
   name,
   short,
   description,
   location,
-  date,
+  startDate,
+  endDate,
   online,
+  background,
+  year,
+  term,
+  slug,
 }) => {
+  const cardBackground =
+    background === "dark-bg" ? `${styles.darkBg} ${styles.card}` : styles.card;
   return (
-    <details className={styles.card}>
+    <details className={cardBackground}>
       <summary>
         <div onClick={(event) => event.preventDefault()}>
           <h2 className={styles.name}>
-            <div>{name}</div>
+            <Link href={`/events/${year}/${term}/${slug}`}>{name}</Link>
             <div className={styles.nameSpacer}></div>
           </h2>
           <div className={styles.info}>
-            <EventSetting date={date} location={location} online={online} />
+            <EventSetting
+              startDate={startDate}
+              endDate={endDate}
+              location={location}
+              online={online}
+            />
           </div>
           <p className={styles.shortDescription}>{short}</p>
         </div>

components/Navbar.module.css

@@ -63,7 +63,7 @@
 }
 
 .navMenu a {
-  color: var(--primary-heading);
+  color: var(--primary-text);
   text-decoration: none;
 }
 
@@ -152,6 +152,11 @@
   visibility: visible;
 }
 
+/* Prevents a weird flash of opacity change on mobile */
+.navMobileBackground {
+  opacity: 0;
+}
+
 /* On a smaller desktop screen, keep the same navbar layout but decrease the
  * horizontal padding so it still fits
  */
@@ -214,6 +219,14 @@
     cursor: pointer;
   }
 
+  .icon line {
+    stroke: var(--icon);
+  }
+
+  .icon path {
+    fill: var(--icon);
+  }
+
   .navMobileBackground {
     position: fixed;
     visibility: hidden;
@@ -237,7 +250,7 @@
     box-sizing: border-box;
     height: 100%;
     top: 0;
-    right: 0;
+    left: 100%;
     overflow: auto;
     z-index: 30;
 
@@ -246,7 +259,6 @@
 
     background-color: var(--secondary-background);
 
-    transform: translateX(100vw);
     transition: 0.5s;
   }
 
@@ -364,7 +376,7 @@
   }
 
   .show.navMobileBackground + .navMenuWrapper {
-    transform: translateX(0);
+    transform: translateX(-100%);
   }
 
   .rotate {

components/Navbar.tsx

@@ -9,16 +9,15 @@ import styles from "./Navbar.module.css";
 type Menu = {
   name: string;
   route: string;
-  submenu?: {
-    name: string;
-    route: string;
-  }[];
+  exact?: boolean;
+  submenu?: Menu;
 }[];
 
 const menu: Menu = [
   {
     name: "Home",
     route: "/",
+    exact: true,
   },
   {
     name: "About",
@@ -27,11 +26,16 @@ const menu: Menu = [
       {
         name: "About Us",
         route: "/about",
+        exact: true,
       },
       {
         name: "Meet the Team",
         route: "/about/team",
       },
+      {
+        name: "Members",
+        route: "/about/members",
+      },
       {
         name: "Constitution",
         route: "/about/constitution",
@@ -76,11 +80,25 @@ const menu: Menu = [
       },
       {
         name: "Advice",
-        route: "/resources/advice/coop",
+        route: "/resources/advice/co-op",
+        submenu: [
+          {
+            name: "Co-op Advice",
+            route: "/resources/advice/co-op",
+          },
+          {
+            name: "Academic Advice",
+            route: "/resources/advice/academic",
+          },
+          {
+            name: "Additional Resources",
+            route: "/resources/advice/misc",
+          },
+        ],
       },
       {
         name: "Internships",
-        route: "https://github.com/uwcsc/winter2022-internships",
+        route: "https://github.com/uwcsc/2023-internships",
       },
     ],
   },
@@ -102,7 +120,7 @@ export function Navbar() {
           className={styles.hamburger}
           onClick={() => dispatch({ type: "open", route: router.pathname })}
         >
-          <Image src="/images/hamburger.svg" alt="Menu" />
+          <HamburgerSvg />
         </button>
         <div
           className={
@@ -198,10 +216,11 @@ interface NavItemProps {
 
 function NavItem(props: NavItemProps) {
   const router = useRouter();
-  const isCurrentPage =
-    router.pathname === props.route ||
-    (props.submenu != null &&
-      router.pathname.startsWith(getMainRoute(props.route)));
+  const isCurrentPage = shouldHighlight(
+    router.pathname,
+    props.name,
+    props.route
+  );
   const isExternalLink =
     props.route.includes("http://") || props.route.includes("https://");
 
@@ -244,7 +263,7 @@ function NavItem(props: NavItemProps) {
             }
             onClick={() => props.onToggle(props.route)}
           >
-            <Image src="/images/dropdown-icon.svg" alt="Dropdown Icon" />
+            <DropdownSvg />
           </button>
           <ul
             className={
@@ -273,6 +292,54 @@ function NavItem(props: NavItemProps) {
   );
 }
 
+interface Leaf {
+  name: string;
+  route: string;
+  exact?: boolean;
+  ancestors: { name: string; route: string }[];
+}
+
+function collectLeaves(
+  accumulator: Leaf[],
+  entry: {
+    name: string;
+    route: string;
+    exact?: boolean;
+    submenu?: Menu;
+  }
+): Leaf[] {
+  if (entry.submenu == null) {
+    return [...accumulator, { ...entry, ancestors: [] }];
+  }
+
+  const subleaves = entry.submenu.reduce(collectLeaves, [] as Leaf[]);
+  return [
+    ...accumulator,
+    ...subleaves.map((leaf) => ({
+      ...leaf,
+      ancestors: [...leaf.ancestors, { name: entry.name, route: entry.route }],
+    })),
+  ];
+}
+
+const leaves: Leaf[] = menu.reduce(collectLeaves, [] as Leaf[]);
+
+function shouldHighlight(
+  pathname: string,
+  name: string,
+  route: string
+): boolean {
+  const match = leaves.find((leaf) =>
+    leaf.exact ? leaf.route === pathname : pathname.startsWith(leaf.route)
+  );
+  return match
+    ? (match.name === name && match.route === route) ||
+        match.ancestors.find(
+          (ancestor) => ancestor.name === name && ancestor.route === route
+        ) != null
+    : false;
+}
+
 function getMainRoute(route: string) {
   if (route === "/") {
     return "/";
@@ -281,3 +348,64 @@ function getMainRoute(route: string) {
   }
   return "/" + route.split("/")[1];
 }
+
+function HamburgerSvg() {
+  return (
+    <svg
+      width="30"
+      height="23"
+      viewBox="0 0 30 23"
+      className={styles.icon}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <line
+        x1="28"
+        y1="2"
+        x2="2"
+        y2="2"
+        stroke="#2A2A62"
+        strokeWidth="4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <line
+        x1="28"
+        y1="11.375"
+        x2="2"
+        y2="11.375"
+        stroke="#2A2A62"
+        strokeWidth="4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <line
+        x1="28"
+        y1="20.75"
+        x2="2"
+        y2="20.75"
+        stroke="#2A2A62"
+        strokeWidth="4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function DropdownSvg() {
+  return (
+    <svg
+      width="14"
+      height="9"
+      viewBox="0 0 14 9"
+      fill="none"
+      className={styles.icon}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M7.75593 8.12713C7.35716 8.58759 6.64284 8.58759 6.24407 8.12713L0.638743 1.65465C0.0778675 1.00701 0.537921 0 1.39467 0L12.6053 0C13.4621 0 13.9221 1.00701 13.3613 1.65465L7.75593 8.12713Z"
+        fill="#2A2A62"
+      />
+    </svg>
+  );
+}

components/NewsCard.module.css

@@ -1,23 +1,26 @@
 .card {
   padding: calc(30rem / 16) calc(40rem / 16);
   max-width: calc(524rem / 16);
-  background-color: var(--primary-background);
+  background-color: var(--card-background);
   border-radius: calc(20rem / 16);
+  margin-bottom: 1rem;
 }
 
 .fit.card {
   max-width: unset;
   padding: unset;
   border-radius: unset;
+  background-color: var(--primary-background);
 }
 
 .date {
   font-size: calc(18rem / 16);
   margin: 0;
+  color: var(--primary-subtitle);
 }
 
 .author {
-  color: var(--secondary-heading);
+  color: var(--author-text);
   font-style: normal;
 }
 
@@ -30,6 +33,7 @@
     padding: 0;
     max-width: unset;
     background-color: transparent;
+    border-radius: 0;
   }
 
   .date {

components/NewsCard.tsx

@@ -1,11 +1,14 @@
 import React, { ReactNode } from "react";
 
+import { Link } from "./Link";
+
 import styles from "./NewsCard.module.css";
 
 interface NewsCardProps {
   date: Date;
   author: string;
   children: ReactNode;
+  permalink: string;
   fit?: boolean;
 }
 
@@ -13,7 +16,8 @@ export const NewsCard: React.FC<NewsCardProps> = ({
   date,
   author,
   children,
-  fit = false,
+  permalink,
+  fit = false, // resizes the article to fit the parent container if it's not a mini card
 }) => {
   const classes = fit ? [styles.card, styles.fit] : [styles.card];
 
@@ -30,6 +34,11 @@ export const NewsCard: React.FC<NewsCardProps> = ({
       </h1>
       <address className={styles.author}>{author}</address>
       <div className={styles.content}>{children}</div>
+      {!fit && (
+        <Link href={permalink}>
+          <span>Learn more</span>
+        </Link>
+      )}
     </article>
   );
 };

components/OrganizedContent.module.css

@@ -6,6 +6,7 @@
   display: flex;
   flex-direction: column;
   width: 100%;
+  overflow-x: auto;
 }
 
 .content h1 {
@@ -21,11 +22,15 @@
 }
 
 .nav {
-  top: calc(20rem / 16);
   position: sticky;
-  height: 100%;
-  margin: calc(8rem / 16) calc(32rem / 16) 0 0;
-  color: var(--primary-heading);
+  overflow: auto;
+  flex-shrink: 0;
+
+  top: calc(20rem / 16);
+  margin: calc(8rem / 16) calc(32rem / 16) calc(20rem / 16) 0;
+  height: calc(100vh - (44rem / 16));
+
+  color: var(--sidebar-text);
   font-weight: 500;
 }
 
@@ -50,10 +55,14 @@
 
 .selected {
   background-color: var(--primary-accent-lightest);
-  color: var(--primary-accent);
+  color: var(--primary-heading);
   font-weight: 700;
 }
 
+.selected div {
+  color: var(--primary-heading);
+}
+
 .readAll {
   font-weight: 700;
 }
@@ -64,7 +73,7 @@
 
 .selected .marker {
   display: inline;
-  background-color: var(--primary-accent);
+  background-color: var(--marker);
   height: calc(24rem / 16);
   width: calc(4rem / 16);
   margin-right: 1rem;
@@ -106,6 +115,7 @@
 .arrow {
   fill: var(--primary-accent);
   margin-top: calc(27rem / 16);
+  flex-shrink: 0;
 }
 
 .prevArrow {
@@ -133,7 +143,6 @@
 }
 
 @media only screen and (max-width: calc(768rem / 16)) {
-
   .burger {
     display: flex;
     position: fixed;
@@ -178,14 +187,19 @@
     margin-bottom: calc(8rem / 16);
   }
 
+  .content ul,
+  .content ol {
+    padding-left: 1rem;
+  }
+
   .nav {
     position: fixed;
 
     top: 0;
     left: 0;
-    overflow-y: auto;
     z-index: 30;
 
+    height: 100%;
     margin: 0;
     background: var(--primary-accent-lighter);
     width: calc(288rem / 16);
@@ -209,11 +223,11 @@
 
     transition: 0.5s;
   }
-  
+
   .mobileNavOpen {
     transform: translateX(0);
   }
-  
+
   .mobileNavTitle {
     display: flex;
     font-size: calc(24rem / 16);
@@ -227,4 +241,3 @@
     opacity: 100%;
   }
 }
-

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/Header.module.css

@@ -8,12 +8,12 @@
   flex-direction: row;
   align-items: flex-end;
   padding-bottom: 1rem;
-  border-bottom: calc(1rem / 16) solid var(--primary-heading);
+  border-bottom: calc(1rem / 16) solid var(--border);
 }
 
 .header {
   line-height: 1;
-  color: var(--primary-heading);
+  color: var(--primary-title);
   font-size: calc(48rem / 16);
   margin: 0 0 0 calc(36rem / 16);
   text-align: center;

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

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

components/ShapesBackground.tsx

@@ -45,7 +45,11 @@ export function ShapesBackground({ getConfig }: Props) {
   }, [getConfig, width, height, prevWidth, prevRoute, router.asPath]);
 
   return (
-    <div className={styles.shapesContainer} ref={shapesContainerRef}>
+    <div
+      className={styles.shapesContainer}
+      ref={shapesContainerRef}
+      aria-hidden
+    >
       {Object.entries(config).map(([type, instances]) =>
         instances.map((attributes, idx) => (
           <Shape

components/SocialLinks.module.css

@@ -22,5 +22,5 @@
 }
 
 .white {
-  fill: var(--primary-background);
+  fill: var(--text-light);
 }

components/SocialLinks.tsx

@@ -38,6 +38,11 @@ const iconList = [
     image: DiscordSvg,
     link: "https://discord.gg/pHfYBCg",
   },
+  {
+    name: "Libera",
+    image: LiberaSvg,
+    link: "ircs://irc.libera.chat:6697/csc",
+  },
 ];
 
 const links = iconList.map((icon) => {
@@ -60,7 +65,7 @@ const links = iconList.map((icon) => {
   return SocialLink;
 });
 
-export const [Facebook, Instagram, Twitch, Discord] = links;
+export const [Facebook, Instagram, Twitch, Discord, Libera] = links;
 
 function InstagramSvg(color: string) {
   return (
@@ -72,7 +77,7 @@ function InstagramSvg(color: string) {
       xmlns="http://www.w3.org/2000/svg"
     >
       <linearGradient id="bluegreen-gradient">
-        <stop offset="0%" stopColor="#1481E3" />
+        <stop offset="0%" stopColor="var(--blue-gradient)" />
         <stop offset="100%" stopColor="#4ED4B2" />
       </linearGradient>
       <path
@@ -89,38 +94,23 @@ function InstagramSvg(color: string) {
 function DiscordSvg(color: string) {
   return (
     <svg
-      width="31"
-      height="30"
-      viewBox="0 0 31 30"
-      fill="none"
       xmlns="http://www.w3.org/2000/svg"
+      width="29"
+      height="23"
+      viewBox="0 0 29 23"
+      version="1.1"
     >
-      <defs>
-        <linearGradient id="bluegreen-gradient">
-          <stop offset="0%" stopColor="#1481E3" />
-          <stop offset="100%" stopColor="#4ED4B2" />
-        </linearGradient>
-      </defs>
-      <g clipPath="url(#clip0)">
+      <linearGradient id="bluegreen-gradient">
+        <stop offset="0%" stopColor="var(--blue-gradient)" />
+        <stop offset="100%" stopColor="#4ED4B2" />
+      </linearGradient>
+      <g id="surface1">
         <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M24.4845 0.872314C26.1684 0.872314 27.5394 2.20412 27.5394 3.85441V29.8247L24.3355 27.0742L22.5323 25.4529L20.6249 23.7302L21.4147 26.4083H4.51584C2.83192 26.4083 1.46094 25.0765 1.46094 23.4262V3.85441C1.46094 2.20412 2.83192 0.872314 4.51584 0.872314H24.4845V0.872314ZM18.7323 19.7782C22.0256 19.6769 23.2923 17.5778 23.2923 17.5778C23.2923 12.9165 21.1464 9.13822 21.1464 9.13822C19.0005 7.57479 16.959 7.61822 16.959 7.61822L16.7504 7.84984C19.2837 8.6026 20.4609 9.68831 20.4609 9.68831C18.9111 8.86317 17.3911 8.45784 15.9755 8.2986C14.9025 8.18279 13.8743 8.21174 12.9653 8.32755L12.7119 8.35651C12.1904 8.39993 10.9237 8.58812 9.32917 9.26851C8.7778 9.5146 8.44996 9.68831 8.44996 9.68831C8.44996 9.68831 9.68682 8.5447 12.3692 7.79193L12.2202 7.61822C12.2202 7.61822 10.1786 7.57479 8.0327 9.13822C8.0327 9.13822 5.88682 12.9165 5.88682 17.5778C5.88682 17.5778 7.13859 19.6769 10.4319 19.7782C10.4319 19.7782 10.9833 19.1268 11.4304 18.5767C9.5378 18.0266 8.82251 16.8685 8.82251 16.8685L9.23976 17.1146L9.29937 17.158L9.35774 17.1906L9.37512 17.1978L9.43349 17.2304C9.80604 17.4331 10.1786 17.5923 10.5213 17.7226C11.1323 17.9542 11.8625 18.1858 12.7119 18.3451C13.8296 18.5477 15.1409 18.6201 16.5715 18.3596C17.2719 18.2437 17.9872 18.0411 18.7323 17.7371C19.2539 17.5489 19.8351 17.2738 20.446 16.883C20.446 16.883 19.7009 18.07 17.7488 18.6056C18.1958 19.1557 18.7323 19.7782 18.7323 19.7782ZM11.8029 13.0178C10.9535 13.0178 10.2829 13.7416 10.2829 14.6247C10.2829 15.5077 10.9684 16.2316 11.8029 16.2316C12.6523 16.2316 13.3229 15.5077 13.3229 14.6247C13.3378 13.7416 12.6523 13.0178 11.8029 13.0178ZM17.2421 13.0178C16.3927 13.0178 15.7221 13.7416 15.7221 14.6247C15.7221 15.5077 16.4076 16.2316 17.2421 16.2316C18.0915 16.2316 18.7621 15.5077 18.7621 14.6247C18.7621 13.7416 18.0915 13.0178 17.2421 13.0178Z"
           className={color !== "gradient" ? styles[color] : ""}
           fill={color === "gradient" ? "url(#bluegreen-gradient)" : ""}
+          d="M 24.550781 2.046875 C 22.703125 1.179688 20.71875 0.539062 18.648438 0.171875 C 18.609375 0.167969 18.570312 0.183594 18.550781 0.21875 C 18.296875 0.683594 18.015625 1.289062 17.816406 1.765625 C 15.589844 1.421875 13.371094 1.421875 11.1875 1.765625 C 10.988281 1.277344 10.695312 0.683594 10.441406 0.21875 C 10.421875 0.183594 10.382812 0.167969 10.347656 0.171875 C 8.273438 0.539062 6.292969 1.179688 4.441406 2.046875 C 4.425781 2.054688 4.414062 2.066406 4.402344 2.082031 C 0.644531 7.832031 -0.386719 13.441406 0.121094 18.980469 C 0.121094 19.007812 0.136719 19.035156 0.15625 19.050781 C 2.636719 20.917969 5.039062 22.046875 7.398438 22.800781 C 7.4375 22.8125 7.476562 22.796875 7.5 22.765625 C 8.058594 21.984375 8.554688 21.164062 8.980469 20.296875 C 9.007812 20.246094 8.984375 20.1875 8.933594 20.167969 C 8.144531 19.859375 7.390625 19.488281 6.667969 19.0625 C 6.613281 19.027344 6.609375 18.945312 6.660156 18.90625 C 6.8125 18.789062 6.964844 18.667969 7.109375 18.542969 C 7.136719 18.523438 7.171875 18.519531 7.203125 18.53125 C 11.949219 20.75 17.085938 20.75 21.777344 18.53125 C 21.808594 18.515625 21.84375 18.519531 21.871094 18.542969 C 22.019531 18.667969 22.167969 18.789062 22.324219 18.90625 C 22.375 18.945312 22.371094 19.027344 22.316406 19.0625 C 21.59375 19.496094 20.839844 19.859375 20.050781 20.164062 C 20 20.1875 19.976562 20.246094 20.003906 20.296875 C 20.4375 21.160156 20.933594 21.984375 21.484375 22.765625 C 21.503906 22.796875 21.546875 22.8125 21.585938 22.800781 C 23.953125 22.046875 26.355469 20.917969 28.835938 19.050781 C 28.859375 19.035156 28.871094 19.011719 28.875 18.984375 C 29.480469 12.578125 27.863281 7.015625 24.585938 2.082031 C 24.578125 2.066406 24.566406 2.054688 24.550781 2.046875 Z M 9.691406 15.609375 C 8.261719 15.609375 7.085938 14.265625 7.085938 12.617188 C 7.085938 10.96875 8.238281 9.625 9.691406 9.625 C 11.152344 9.625 12.320312 10.980469 12.296875 12.617188 C 12.296875 14.265625 11.140625 15.609375 9.691406 15.609375 Z M 19.328125 15.609375 C 17.898438 15.609375 16.722656 14.265625 16.722656 12.617188 C 16.722656 10.96875 17.875 9.625 19.328125 9.625 C 20.789062 9.625 21.957031 10.980469 21.933594 12.617188 C 21.933594 14.265625 20.789062 15.609375 19.328125 15.609375 Z M 19.328125 15.609375 "
         />
       </g>
-      <defs>
-        <clipPath id="clip0">
-          <rect
-            width="29.8039"
-            height="28.9524"
-            className={color !== "gradient" ? styles[color] : ""}
-            fill={color === "gradient" ? "url(#bluegreen-gradient)" : ""}
-            transform="translate(0.217773 0.872314)"
-          />
-        </clipPath>
-      </defs>
     </svg>
   );
 }
@@ -135,7 +125,7 @@ function TwitchSvg(color: string) {
       xmlns="http://www.w3.org/2000/svg"
     >
       <linearGradient id="bluegreen-gradient">
-        <stop offset="0%" stopColor="#1481E3" />
+        <stop offset="0%" stopColor="var(--blue-gradient)" />
         <stop offset="100%" stopColor="#4ED4B2" />
       </linearGradient>
       <g clipPath="url(#clip0)">
@@ -180,7 +170,7 @@ function FacebookSvg(color: string) {
       xmlns="http://www.w3.org/2000/svg"
     >
       <linearGradient id="bluegreen-gradient">
-        <stop offset="0%" stopColor="#1481E3" />
+        <stop offset="0%" stopColor="var(--blue-gradient)" />
         <stop offset="100%" stopColor="#4ED4B2" />
       </linearGradient>
       <path
@@ -193,3 +183,89 @@ function FacebookSvg(color: string) {
     </svg>
   );
 }
+
+function LiberaSvg(color: string) {
+  return (
+    <svg
+      width="32"
+      height="32"
+      viewBox="0 0 96.89 78.87"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <linearGradient id="bluegreen-gradient">
+        <stop offset="0%" stopColor="var(--blue-gradient)" />
+        <stop offset="100%" stopColor="#4ED4B2" />
+      </linearGradient>
+      <path
+        d="M40.86 9.3h-.01a32.2 32.2 0 00-.65.14l-.22.04a39.48 39.48 0 00-.43.1l-.21.05a39.35 39.35 0 00-5.68 1.8l-.12.06L44.8 48.82l.47-.55 1.26-1.48zm14.98-.04l-4.1 31.45 3.32-3.88.66 1.05 7.36-26.51-.18-.07a37.97 37.97 0 00-6.55-1.94 39.84 39.84 0 00-.43-.09zm-35.33 10.9a34.93 34.93 0 00-3.03 3.42 41.1 41.1 0 00-1.8 2.48v.02L37.2 49.59l1.62-2.12.08.04zm55.45-.44l-15.91 25.1 1.81 2.9 19.26-21.8a35.29 35.29 0 00-2.9-3.82 38.85 38.85 0 00-2.26-2.38zM9.98 39.94a38.23 38.23 0 00-.72 7.54L32.2 56.1l1.79-2.33zm77.07.67L65.2 53.1l1.72 2.75 20.7-7.55v-.1a22.66 22.66 0 00.01-.66v-.44-.22-.14-.22l-.01-.21v-.22l-.01-.22-.01-.22-.01-.22-.01-.22-.02-.21-.01-.22-.02-.22-.01-.22-.02-.21-.02-.22-.02-.22-.02-.22-.02-.21a31.66 31.66 0 00-.37-2.6v-.04zM12.42 62.57a39.78 39.78 0 003.96 7.03h.01l6.73-1.48.14-.18h-.16l4.18-5.44zm58.83.21l3.24 5.39 6.05 1.36.05-.06a36.02 36.02 0 002.53-4.1A37.2 37.2 0 0084.27 63z"
+        className={color !== "gradient" ? styles[color] : ""}
+        fill={color === "gradient" ? "url(#bluegreen-gradient)" : ""}
+        paintOrder="markers fill stroke"
+      />
+      <g fill={color === "gradient" ? "url(#bluegreen-gradient)" : ""}>
+        <path
+          style={{
+            lineHeight: "normal",
+            fontVariantLigatures: "normal",
+            fontVariantPosition: "normal",
+            fontVariantCaps: "normal",
+            fontVariantNumeric: "normal",
+            fontVariantAlternates: "normal",
+            fontVariantEastAsian: "normal",
+            fontFeatureSettings: "normal",
+            fontVariationSettings: "normal",
+            textIndent: "0",
+            textAlign: "start",
+            textDecorationLine: "none",
+            textDecorationStyle: "solid",
+            textDecorationColor: "#000",
+            textTransform: "none",
+            textOrientation: "mixed",
+            whiteSpace: "normal",
+            shapeMargin: "0",
+            inlineSize: "0",
+            isolation: "auto",
+            mixBlendMode: "normal",
+          }}
+          d="M55.53 35.83L44.12 48.86l-5.22-2.3-16.98 21.82h1.48l15.88-20.32 5.17 2.29 10.9-12.45c6.04 10.27 12.55 20.15 18.47 30.49h1.48z"
+          color="#000"
+          fontWeight="400"
+          fontFamily="sans-serif"
+          overflow="visible"
+        />
+        <path
+          style={{
+            lineHeight: "normal",
+            fontVariantLigatures: "normal",
+            fontVariantPosition: "normal",
+            fontVariantCaps: "normal",
+            fontVariantNumeric: "normal",
+            fontVariantAlternates: "normal",
+            fontVariantEastAsian: "normal",
+            fontFeatureSettings: "normal",
+            fontVariationSettings: "normal",
+            textIndent: "0",
+            textAlign: "start",
+            textDecorationLine: "none",
+            textDecorationStyle: "solid",
+            textDecorationColor: "#000",
+            textTransform: "none",
+            textOrientation: "mixed",
+            whiteSpace: "normal",
+            shapeMargin: "0",
+            inlineSize: "0",
+            isolation: "auto",
+            mixBlendMode: "normal",
+          }}
+          d="M55.32 39.73l-10.6 12.15-5.17-2.15-14.64 18.64h1.62l13.4-17.15 5.14 2.13L55.14 41.8l15.84 26.62 1.56-.03z"
+          color="#000"
+          fontWeight="400"
+          fontFamily="sans-serif"
+          overflow="visible"
+        />
+        <path d="M28.1 68.36l12.23-15.59 5.24 2.13 9.51-10.92 14.28 24.4z" />
+      </g>
+    </svg>
+  );
+}

components/Table.module.css

@@ -0,0 +1,36 @@
+.table {
+  display: block;
+  overflow-x: auto;
+  border-collapse: collapse;
+
+  --border: calc(2rem / 16) solid var(--primary-accent-light);
+}
+
+.table thead tr {
+  background: var(--table-header);
+}
+
+.table tbody tr {
+  text-align: center;
+  vertical-align: top;
+}
+
+.table tbody tr:nth-child(even) {
+  background: var(--table-section);
+}
+
+.table th {
+  color: var(--primary-heading);
+  text-align: left;
+  border-bottom: var(--border);
+}
+
+.table th:not(:last-child),
+.table td:not(:last-child) {
+  border-right: var(--border);
+}
+
+.table th,
+.table td {
+  padding: calc(12rem / 16);
+}

components/Table.tsx

@@ -0,0 +1,9 @@
+import React, { TableHTMLAttributes } from "react";
+
+import styles from "./Table.module.css";
+
+export function Table(props: TableHTMLAttributes<HTMLTableElement>) {
+  const className = [styles.table, props.className ?? ""].join(" ");
+
+  return <table {...props} className={className} />;
+}

components/TeamMember.module.css

@@ -1,14 +1,15 @@
 .container {
-  max-width: calc(126rem / 16);
+  width: calc(126rem / 16);
   display: flex;
   flex-direction: column;
   margin: 0;
 }
 
 .img {
-  width: 100%;
-  border-radius: 50%;
-  margin: 0 auto;
+  width: calc(118rem / 16);
+  height: calc(118rem / 16);
+
+  clip-path: circle();
   object-fit: cover;
 }
 
@@ -29,7 +30,8 @@
 
 @media only screen and (max-width: calc(768rem / 16)) {
   .img {
-    width: 100%;
+    width: calc(126rem / 16);
+    height: calc(126rem / 16);
   }
 
   .caption {

components/TeamMember.tsx

@@ -6,13 +6,13 @@ import styles from "./TeamMember.module.css";
 
 interface TeamMemberProps {
   name: string;
-  role: string;
+  role?: string;
   image: string;
 }
 
 export const TeamMember: React.FC<TeamMemberProps> = ({
   name,
-  role,
+  role = "",
   image,
 }) => {
   return (

components/TeamMemberCard.module.css

@@ -18,11 +18,15 @@
   max-width: calc(126rem / 16);
   max-height: calc(126rem / 16);
 
-  clip-path: circle(50%);
+  clip-path: circle();
 }
 
 .image {
-  width: 100%;
+  width: calc(126rem / 16);
+  height: calc(126rem / 16);
+
+  clip-path: circle();
+  object-fit: cover;
 }
 
 .name {
@@ -74,36 +78,50 @@
 
 .popupBackground {
   position: fixed;
-  z-index: 11;
-  background-color: var(--navbar-page-overlay);
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
+  z-index: 11;
+
+  background-color: var(--navbar-page-overlay);
   animation: revealBg 0.2s forwards;
 }
 
 .popupContainer {
   position: fixed;
-  display: flex;
-  z-index: 12;
-  flex-direction: column;
-  background-color: var(--secondary-background);
-  padding: calc(20rem / 16) calc(40rem / 16);
   left: 0;
+  right: 0;
   top: 50%;
+  z-index: 12;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+
+  box-sizing: border-box;
+  padding: calc(40rem / 16);
+  max-height: 75vh;
+  overflow: auto;
+
+  background-color: var(--secondary-background);
   animation: popup 0.7s forwards;
 }
 
 .closeBtn {
+  position: absolute;
   align-self: flex-end;
+  cursor: pointer;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
   /* reset default button styling */
-  width: min-content;
-  background: transparent;
-  border: 0px solid transparent;
+  background: none;
+  border: none;
   padding: 0;
-  font-family: inherit;
-  line-height: inherit;
 }
 
 .popupContent {
@@ -112,29 +130,27 @@
   align-items: center;
 }
 
-.popupImage {
-  width: 100%;
-}
-
-.popupName {
-  color: var(--primary-accent);
-  margin: calc(24rem / 16) 0 0 0;
+.popupContent .name {
+  margin-top: calc(24rem / 16);
   font-size: calc(18rem / 16);
   font-weight: 600;
 }
 
-.popupRole {
-  color: var(--primary-heading);
-  margin: 0 0 1rem 0;
-  text-align: center;
+.popupContent .role {
+  margin-bottom: calc(16rem / 16);
   font-size: calc(18rem / 16);
   font-weight: 600;
 }
 
-.popupDescription {
+.popupContent .description {
+  display: block;
   font-size: calc(14rem / 16);
 }
 
+.popupContent .description > *:last-child {
+  margin-bottom: 0;
+}
+
 @media only screen and (max-width: calc(768rem / 16)) {
   .card {
     display: flex;

components/TeamMemberCard.tsx

@@ -8,53 +8,26 @@ import styles from "./TeamMemberCard.module.css";
 
 export interface TeamMemberCardProps {
   name: string;
-  role: string;
+  role?: string;
   image: string;
   children: React.ReactNode;
 }
 
-interface TeamMemberInfoProps extends TeamMemberCardProps {
-  isPopup?: boolean;
-}
-
-function TeamMemberInfo({
-  name,
-  role,
-  image,
-  children,
-  isPopup = false,
-}: TeamMemberInfoProps) {
-  return (
-    <>
-      <div className={styles.picture}>
-        <Image
-          className={isPopup ? styles.popupImage : styles.image}
-          src={image}
-          alt={`Picture of ${name}`}
-        />
-      </div>
-      <h1 className={isPopup ? styles.popupName : styles.name}>{name}</h1>
-      <h2 className={isPopup ? styles.popupRole : styles.role}>{role}</h2>
-      <div className={isPopup ? styles.popupDescription : styles.description}>
-        {children}
-      </div>
-    </>
-  );
-}
-
 export function TeamMemberCard({
   name,
-  role,
+  role = "",
   image,
   children,
 }: TeamMemberCardProps) {
   const { width } = useWindowDimension();
   const [isOpen, setIsOpen] = useState(false);
+
   const handleClick = () => {
     if (isOpen || width <= 768) {
       setIsOpen(!isOpen);
     }
   };
+
   return (
     <>
       <article className={styles.card} onClick={handleClick}>
@@ -75,11 +48,39 @@ export function TeamMemberCard({
   );
 }
 
-interface Propup extends TeamMemberCardProps {
+function TeamMemberInfo({
+  name,
+  role = "",
+  image,
+  children,
+}: TeamMemberCardProps) {
+  return (
+    <>
+      <div className={styles.picture}>
+        <Image
+          className={styles.image}
+          src={image}
+          alt={`Picture of ${name}`}
+        />
+      </div>
+      <h1 className={styles.name}>{name}</h1>
+      <h2 className={styles.role}>{role}</h2>
+      <div className={styles.description}>{children}</div>
+    </>
+  );
+}
+
+interface PopupProps extends TeamMemberCardProps {
   handleClick: () => void;
 }
 
-function ExecPopup({ name, role, image, children, handleClick }: Propup) {
+function ExecPopup({
+  name,
+  role = "",
+  image,
+  children,
+  handleClick,
+}: PopupProps) {
   return (
     <>
       <div className={styles.popupBackground} onClick={handleClick} />
@@ -88,9 +89,7 @@ function ExecPopup({ name, role, image, children, handleClick }: Propup) {
           <Image src="images/team/popup-close.svg" />
         </button>
         <div className={styles.popupContent}>
-          <TeamMemberInfo {...{ name, role, image }} isPopup={true}>
-            {children}
-          </TeamMemberInfo>
+          <TeamMemberInfo {...{ name, role, image }}>{children}</TeamMemberInfo>
         </div>
       </div>
     </>

components/Theme.tsx

@@ -19,6 +19,10 @@ export const PALETTE_NAMES = [
   "--primary-background",
   "--secondary-background",
 
+  "--scrollbar-track",
+  "--scrollbar-thumb",
+  "--scrollbar-hover",
+
   "--primary-accent",
   "--primary-accent-soft",
   "--primary-accent-light",
@@ -29,19 +33,44 @@ export const PALETTE_NAMES = [
   "--secondary-accent-light",
 
   "--primary-heading",
-  "--secondary-heading",
 
+  "--primary-title",
+  "--primary-subtitle",
+  "--secondary-subtitle",
+
+  "--primary-text",
   "--text",
+  "--text-light",
+  "--author-text",
+  "--sidebar-text",
+  "--mini-event-card-text",
 
   "--form-invalid",
+  "--warning-background",
+  "--warning-text",
 
   "--input-background",
   "--input-placeholder-text",
   "--input-text",
 
+  "--icon",
+
   "--code-background",
+  "--button-background",
+  "--footer-background",
+  "--card-background",
+  "--dark-card-background",
+  "--table-header",
+  "--table-section",
 
   "--navbar-page-overlay",
+
+  "--link",
+  "--link-hover",
+
+  "--blue-gradient",
+  "--border",
+  "--marker",
 ] as const;
 
 export const emptyPalette = PALETTE_NAMES.reduce(
@@ -75,15 +104,9 @@ export function ThemeProvider(props: Props) {
   const setTheme = (input: SetThemeInput) => {
     if (typeof input === "string") {
       PALETTE_NAMES.forEach((name) =>
-        document.body.style.setProperty(name, "")
+        document.body.style.setProperty(name, "var(--" + input + name + ")")
       );
-
-      if (input === "light") {
-        document.body.classList.remove("dark");
-      } else if (input === "dark") {
-        document.body.classList.add("dark");
-      }
-
+      savePalette(getCurrentPalette(input));
       setThemeName(input);
     } else {
       const properties = Object.keys(input) as PaletteNames[];
@@ -105,7 +128,14 @@ export function ThemeProvider(props: Props) {
     const customPalette = getSavedPalette();
 
     if (customPalette == null) {
-      setThemeName("light");
+      const prefersDark = window.matchMedia(
+        "(prefers-color-scheme: dark)"
+      ).matches;
+      if (prefersDark) {
+        setTheme("dark");
+      } else {
+        setTheme("light");
+      }
     } else {
       setTheme(customPalette);
       setThemeName("custom");
@@ -122,11 +152,11 @@ export function ThemeProvider(props: Props) {
               theme: {
                 name: themeName,
                 get palette() {
-                  return getCurrentPalette();
+                  return getCurrentPalette(themeName);
                 },
               },
               setTheme,
-              save: () => savePalette(getCurrentPalette()),
+              save: () => savePalette(getCurrentPalette(themeName)),
               clearSaved: clearSavedPalette,
             }
       }
@@ -146,13 +176,30 @@ export type Palette = {
   [key in PaletteNames]: string;
 };
 
-function getCurrentPalette() {
-  const styles = getComputedStyle(document.body);
+function themePropertyName(
+  name: PaletteNames,
+  themeName: BuiltInThemes
+): string {
+  return `--${themeName}${name}`;
+}
 
+function getCurrentPalette(themeName: string) {
+  const styles = getComputedStyle(document.body);
+  if (themeName === "light" || themeName === "dark") {
+    return PALETTE_NAMES.reduce(
+      (partial, name) => ({
+        ...partial,
+        [name]: styles
+          .getPropertyValue(themePropertyName(name, themeName))
+          .trim(),
+      }),
+      {} as Palette
+    );
+  }
   return PALETTE_NAMES.reduce(
-    (partial, varName) => ({
+    (partial, name) => ({
       ...partial,
-      [varName]: styles.getPropertyValue(varName).trim(),
+      [name]: styles.getPropertyValue(name).trim(),
     }),
     {} as Palette
   );

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/WarningHeader.module.css

@@ -0,0 +1,12 @@
+.warning{
+  background-color: var(--warning-background);
+  padding: calc(6rem / 16);
+  color: var(--warning-text);
+  font-size: calc(16rem / 16);
+  text-align: center;
+  opacity: 1;
+  
+  /* The following are for a smooth fade in if there ever is a loading required for the warning, is not needed currently */
+  /* max-height: 500px;
+  /* transition: max-height 1000ms ease-in, padding 100ms ease-in; */ 
+}

components/WarningHeader.tsx

@@ -0,0 +1,61 @@
+import { parse } from "date-fns";
+import React from "react";
+
+import { DATE_FORMAT, getLocalDateFromEST } from "@/utils";
+
+import warnings from "../content/warnings/warnings.json";
+
+import styles from "./WarningHeader.module.css";
+
+interface Warning {
+  message: string;
+  startDate: string;
+  endDate: string;
+}
+
+function getCurrentWarning(): Warning | null {
+  const today = new Date();
+  const currentWarnings: Warning[] = warnings.filter((warning) => {
+    // convert dates to date objects in EST time zone
+    let startDate = parse(warning.startDate, DATE_FORMAT, new Date());
+    let endDate = parse(warning.endDate, DATE_FORMAT, new Date());
+
+    if (
+      !startDate ||
+      !endDate ||
+      isNaN(startDate.getTime()) || // this checks if the parsed date is not valid (eg. wrong format), since getLocalDateFromEST fails with invalid dates
+      isNaN(endDate.getTime())
+    ) {
+      throw new Error('WARNING WITH INVALID DATES: "' + warning.message + '"');
+    }
+
+    startDate = getLocalDateFromEST(startDate);
+    endDate = getLocalDateFromEST(endDate);
+
+    return (
+      startDate.getTime() <= today.getTime() &&
+      endDate.getTime() >= today.getTime()
+    );
+  });
+
+  if (currentWarnings.length > 1) {
+    // If more than one warning is scheduled, log an error to the console. We cannot throw an error, since the site would go down on the live
+    //  website, on the day when more than one warning is scheduled.
+    console.error(
+      "ERROR: MORE THAN ONE WARNING SCHEDULED CURRENTLY! ",
+      currentWarnings
+    );
+  }
+
+  return currentWarnings.length === 0 ? null : currentWarnings[0];
+}
+
+export function WarningHeader() {
+  const warning = getCurrentWarning();
+
+  if (warning == null) {
+    return null;
+  }
+
+  return <div className={styles.warning}>{warning.message}</div>;
+}

components/playground.module.css

@@ -1,104 +0,0 @@
-.newsDemo {
-  padding: calc(50rem / 16);
-  background-color: var(--secondary-background);
-  display: inline-block;
-}
-
-.newsTitle {
-  font-style: normal;
-  font-weight: bold;
-  color: var(--primary-heading);
-  font-size: calc(24rem / 16);
-  line-height: calc(36 / 24);
-  margin-bottom: calc(14rem / 16);
-}
-
-.newsDesc {
-  font-style: normal;
-  font-weight: normal;
-  font-size: calc(14rem / 16);
-  line-height: calc(21 / 14);
-  white-space: pre-line;
-  color: var(--primary-heading);
-  vertical-align: baseline;
-}
-
-.news > hr {
-  border: none;
-  height: calc(1rem / 16);
-  background-color: var(--primary-heading);
-  margin: 0 0 calc(13rem / 16) 0;
-}
-
-.eventDescriptionCardDemo {
-  padding: calc(50rem / 16) 0;
-  background-color: var(--secondary-background);
-  display: inline-block;
-}
-
-.eventDescriptionCardDemo > * {
-  margin: calc(12rem / 16) calc(50rem / 16);
-}
-
-.eventDescriptionCardDemo > *:first-child {
-  margin-top: 0;
-}
-
-.eventDescriptionCardDemo > *:last-child {
-  margin-bottom: 0;
-}
-
-.teamMemberDemo {
-  max-width: calc(847rem / 16);
-}
-
-.committee {
-  margin: 0;
-  color: var(--primary-heading);
-  font-weight: 600;
-  font-size: calc(24rem / 16);
-  line-height: calc(36 / 24);
-}
-
-.teamMemberDemo > hr {
-  border: none;
-  height: calc(1rem / 16);
-  background-color: var(--primary-accent);
-  width: 100%;
-  margin-top: calc(24rem / 16);
-  margin-bottom: calc(46rem / 16);
-}
-
-.teamMembers {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(calc(100rem / 16), 1fr));
-  row-gap: calc(43rem / 16);
-  column-gap: calc(53rem / 16);
-}
-
-.linkDemo {
-  padding: calc(50rem / 16);
-  background-color: var(--secondary-background);
-}
-
-.linkTitle {
-  font-weight: bold;
-  color: var(--primary-heading);
-  font-size: calc(24rem / 16);
-}
-
-.miniTechTalkDemo > *:nth-child(odd) {
-  background: var(--secondary-accent-light);
-}
-
-@media only screen and (max-width: calc(768rem / 16)) {
-  .newsDemo,
-  .eventDescriptionCardDemo {
-    padding: calc(20rem / 16);
-    background-color: var(--secondary-background);
-  }
-
-  .eventDescriptionCardDemo > * {
-    margin: 0;
-  }
-}

components/playground.tsx

@@ -1,293 +0,0 @@
-import React, { useState } from "react";
-
-import AfterHoursContent, {
-  metadata as afterHoursMetadata,
-} from "../content/playground/after-hours.event.mdx";
-import AltTab, {
-  metadata as altTabEventMetadata,
-} from "../content/playground/alt-tab.event.mdx";
-import CodeyInfo, {
-  metadata as codeyMetadata,
-} from "../content/playground/codey.team-member.mdx";
-import Duties, {
-  metadata as dutiesOrganizedContentMetadata,
-} from "../content/playground/constitution/duties-of-officers.section.mdx";
-import ExecutiveCouncil, {
-  metadata as executiveCouncilOrganizedContentMetadata,
-} from "../content/playground/constitution/executive-council.section.mdx";
-import Membership, {
-  metadata as membershipOrganizedContentMetadata,
-} from "../content/playground/constitution/membership.section.mdx";
-import Name, {
-  metadata as nameOrganizedContentMetadata,
-} from "../content/playground/constitution/name.section.mdx";
-import Officers, {
-  metadata as officersOrganizedContentMetadata,
-} from "../content/playground/constitution/officers.section.mdx";
-import Purpose, {
-  metadata as purposeOrganizedContentMetadata,
-} from "../content/playground/constitution/purpose.section.mdx";
-import { metadata as dogeMetadata } from "../content/playground/doge.team-member.mdx";
-import OOTBReact, {
-  metadata as OOTBReactEventMetadata,
-} from "../content/playground/ootb-react.event.mdx";
-import TempTechTalk, {
-  metadata as tempTechTalkMetadata,
-} from "../content/playground/temp.talk.mdx";
-import UnavailableContent, {
-  metadata as unavailableMetadata,
-} from "../content/playground/unavailable.news.mdx";
-
-import { Button } from "./Button";
-import { EventCard } from "./EventCard";
-import { EventDescriptionCard } from "./EventDescriptionCard";
-import { Link } from "./Link";
-import { MiniEventCard } from "./MiniEventCard";
-import { MiniTechTalkCard } from "./MiniTechTalkCard";
-import { NewsCard } from "./NewsCard";
-import {
-  OrganizedContent,
-  LinkProps,
-  createReadAllSection,
-} from "./OrganizedContent";
-import { TeamMember } from "./TeamMember";
-import { TeamMemberCard } from "./TeamMemberCard";
-import { TechTalkCard } from "./TechTalkCard";
-
-import styles from "./playground.module.css";
-
-const events = [
-  { Content: OOTBReact, metadata: OOTBReactEventMetadata },
-  { Content: AfterHoursContent, metadata: afterHoursMetadata },
-  { Content: AltTab, metadata: altTabEventMetadata },
-];
-
-const constitution = [
-  { Content: Name, ...nameOrganizedContentMetadata },
-  { Content: Purpose, ...purposeOrganizedContentMetadata },
-  { Content: Membership, ...membershipOrganizedContentMetadata },
-  { Content: Officers, ...officersOrganizedContentMetadata },
-  { Content: Duties, ...dutiesOrganizedContentMetadata },
-  {
-    Content: ExecutiveCouncil,
-    ...executiveCouncilOrganizedContentMetadata,
-  },
-];
-
-export function MiniEventCardDemo() {
-  return (
-    <div className={styles.miniEventCardDemo}>
-      {events.map(({ Content, metadata }) => (
-        <MiniEventCard
-          {...metadata}
-          description={<Content />}
-          key={metadata.name + metadata.date.toString()}
-        />
-      ))}
-    </div>
-  );
-}
-
-export function NewsCardDemo() {
-  return (
-    <div className={styles.newsDemo}>
-      <div className={styles.newsTitle}>News</div>
-      <div className={styles.newsDesc}>
-        Updates from our execs
-        <br />
-        <br />
-      </div>
-      <hr className={styles.newsHr} />
-      <NewsCard {...unavailableMetadata}>
-        <UnavailableContent />
-      </NewsCard>
-    </div>
-  );
-}
-
-export function ButtonDemo() {
-  return (
-    <>
-      <h3>Standard buttons</h3>
-      <p>
-        <Button isLink={true} href="/">
-          Link
-        </Button>
-      </p>
-      <p>
-        <Button>Button</Button>
-      </p>
-      <h3>Small buttons</h3>
-      <p>
-        <Button isLink={true} href="/" size="small">
-          Small Link
-        </Button>
-      </p>
-      <p>
-        <Button size="small">Small Button</Button>
-      </p>
-    </>
-  );
-}
-
-export function EventDescriptionCardDemo() {
-  return (
-    <div className={styles.eventDescriptionCardDemo}>
-      {events.map(({ metadata }) => (
-        <EventDescriptionCard
-          {...metadata}
-          key={metadata.name + metadata.date.toString()}
-        />
-      ))}
-    </div>
-  );
-}
-
-export function EventCardDemo() {
-  return (
-    <>
-      {events.map(({ Content, metadata }, idx) => (
-        <>
-          <EventCard
-            {...metadata}
-            key={metadata.name + metadata.date.toDateString() + "1"}
-            showDescription
-          >
-            <Content />
-          </EventCard>
-          <EventCard
-            {...metadata}
-            key={metadata.name + metadata.date.toDateString() + "2"}
-            link="#"
-          >
-            <Content />
-          </EventCard>
-        </>
-      ))}
-    </>
-  );
-}
-
-export function TeamMemberDemo() {
-  return (
-    <div className={styles.teamMemberDemo}>
-      <div className={styles.teamMemberHeader}>
-        <h1 className={styles.committee}>Programme Committee</h1>
-      </div>
-      <hr />
-      <div className={styles.teamMembers}>
-        <TeamMember {...dogeMetadata} image="/images/playground/doge.jpg" />
-        <TeamMember {...dogeMetadata} image="/images/playground/doge.jpg" />
-        <TeamMember {...dogeMetadata} image="/images/playground/doge.jpg" />
-        <TeamMember {...dogeMetadata} image="/images/playground/doge.jpg" />
-        <TeamMember {...dogeMetadata} image="/images/playground/doge.jpg" />
-        <TeamMember {...dogeMetadata} image="/images/playground/doge.jpg" />
-        <TeamMember {...dogeMetadata} image="/images/playground/doge.jpg" />
-        <TeamMember {...dogeMetadata} image="/images/playground/doge.jpg" />
-        <TeamMember {...dogeMetadata} image="/images/playground/doge.jpg" />
-        <TeamMember {...dogeMetadata} image="/images/playground/doge.jpg" />
-      </div>
-    </div>
-  );
-}
-
-export function TeamMemberCardDemo() {
-  return (
-    <div className={styles.teamMemberCardDemo}>
-      <TeamMemberCard {...codeyMetadata} image="/images/playground/doge.jpg">
-        <CodeyInfo />
-      </TeamMemberCard>
-    </div>
-  );
-}
-
-export function LinkDemo() {
-  return (
-    <div className={styles.linkDemo}>
-      <div className={styles.linkTitle}>Elections</div>
-      <p>
-        To find out when and where the next elections will be held, keep an eye
-        on the <Link href="https://csclub.uwaterloo.ca/news/">News</Link>. For
-        details on the elections, read our{" "}
-        <Link href="https://csclub.uwaterloo.ca/about/constitution">
-          Constitution
-        </Link>
-        .
-      </p>
-    </div>
-  );
-}
-
-export function OrganizedContentDemo() {
-  const sections = [...constitution];
-  const readAllSection = createReadAllSection(
-    constitution.map(({ id, title, Content }) => ({
-      Content,
-      section: { id, title },
-    })),
-    true
-  );
-  sections.unshift({
-    ...readAllSection.section,
-    Content: readAllSection.Content,
-  });
-
-  const [id, setId] = useState(sections[0].id);
-
-  function FakeLink({ className, id, children }: LinkProps) {
-    return (
-      <div className={className} onClick={() => setId(id)}>
-        {children}
-      </div>
-    );
-  }
-
-  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-  const Content = sections.find(
-    ({ id: sectionId }) => sectionId === id
-  )!.Content;
-
-  return (
-    <OrganizedContent
-      sections={sections}
-      id={id}
-      link={FakeLink}
-      pageTitle="Playground"
-    >
-      <Content />
-    </OrganizedContent>
-  );
-}
-
-export function TechTalkDemo() {
-  const poster =
-    tempTechTalkMetadata.thumbnails.large ??
-    tempTechTalkMetadata.thumbnails.small;
-
-  return (
-    <div>
-      <TechTalkCard {...tempTechTalkMetadata} poster={poster}>
-        <TempTechTalk />
-      </TechTalkCard>
-    </div>
-  );
-}
-
-export function MiniTechTalkDemo() {
-  return (
-    <div className={styles.miniTechTalkDemo}>
-      <MiniTechTalkCard
-        {...tempTechTalkMetadata}
-        poster={tempTechTalkMetadata.thumbnails.small}
-      />
-      <MiniTechTalkCard
-        {...tempTechTalkMetadata}
-        poster={tempTechTalkMetadata.thumbnails.small}
-      />
-      <MiniTechTalkCard
-        {...tempTechTalkMetadata}
-        poster={tempTechTalkMetadata.thumbnails.small}
-      />
-    </div>
-  );
-}

content/about/code-of-conduct/ORDER.json

@@ -0,0 +1,14 @@
+[
+  "purpose",
+  "expected-behaviour",
+  "unacceptable-behaviour",
+  "experiencing-unacceptable-behaviour",
+  "consequences-of-inappropriate-behaviour",
+  "addressing-grievances",
+  "confidentiality",
+  "scope-and-spaces",
+  "contact-information",
+  "additional-information",
+  "license-information-and-attribution",
+  "revision"
+]

content/about/code-of-conduct/additional-information.md

@@ -1,6 +1,5 @@
 ---
 title: Additional Information
-index: 10
 ---
 
 Additionally, the Executive Council are available to help Club members engage with local law enforcement or to otherwise help those experiencing unacceptable behaviour feel safe. In the context of in-person events, organizers will also provide escorts as desired by the person experiencing distress.

content/about/code-of-conduct/addressing-grievances.md

@@ -1,6 +1,5 @@
 ---
 title: Addressing Grievances
-index: 6
 ---
 
 If either the complainant or the subject disagree with the decision made by the Handling Officer, they can appeal to the Officers, who can overturn the decision with a majority vote of all the Officers.

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

@@ -1,6 +1,5 @@
 ---
 title: Confidentiality
-index: 7
 ---
 
 The Club recognizes that all members have a right to privacy, and will handle complaints confidentially.

content/about/code-of-conduct/consequences-of-inappropriate-behaviour.md

@@ -1,6 +1,5 @@
 ---
 title: Consequences of Inappropriate Behaviour
-index: 5
 ---
 
 After having done so, the Handling Officer shall use their best judgment to determine if the complaint is valid and, if so, determine with the relevant Officers the appropriate action to ensure that the complainant feels welcome in the Computer Science Club and to avoid a subsequent incident:

content/about/code-of-conduct/contact-information.md

@@ -1,6 +1,5 @@
 ---
 title: Contact Information
-index: 9
 ---
 
 - The Computer Science Club [Officers can be contacted as a whole](/about).

content/about/code-of-conduct/expected-behaviour.md

@@ -1,6 +1,5 @@
 ---
 title: Expected Behaviour
-index: 2
 ---
 
 - Participate in an authentic and active way. In doing so, you contribute to the health and longevity of this Club.

content/about/code-of-conduct/experiencing-unacceptable-behaviour.md

@@ -1,11 +1,10 @@
 ---
 title: Experiencing Unacceptable Behaviour
-index: 4
 ---
 
 _The Executive Council and Faculty Advisor are herein referred to as the Officers, or singularly as Officer._
 
-If you notice a dangerous situation, someone in distress, or violations of this Code of Conduct, [contact an Officer](/about). No situation is considered inconsequential. If you do not feel comfortable contacting an Executive Council member due to the nature of the incident, you may contact the [Faculty Advisor](/about#advisor).
+If you notice a dangerous situation, someone in distress, or violations of this Code of Conduct, [contact an Officer](mailto:coc@csclub.uwaterloo.ca). No situation is considered inconsequential. If you do not feel comfortable contacting an Executive Council member due to the nature of the incident, you may contact the faculty advisor, [Dr. Prabhakar Ragde](https://uwaterloo.ca/computer-science/about/people/plragde).
 
 Upon receiving a complaint the Officer will inform the first of the following people who is not personally involved in the situation, or in a close relationship with the someone involved in the situation and is available, and this person shall handle the complaint and shall here after be referred to as the Handling Officer.
 

content/about/code-of-conduct/license-information-and-attribution.md

@@ -1,6 +1,5 @@
 ---
 title: License Information and Attribution
-index: 11
 ---
 
-- The Code of Conduct is distributed under a [Creative Commons Attribution-ShareAlike License](http://creativecommons.org/licenses/by-sa/3.0/) , derived from the [Women in Computer Science Code of Conduct](http://wics.uwaterloo.ca/code-of-conduct/) , the [UW Amateur Radio Club Code of Conduct](http://uwarc.uwaterloo.ca/policies-procedures/code-of-conduct/) , and the [FASS Code of Conduct (Article 2, Section 16)](http://fass.uwaterloo.ca/wp-content/uploads/2015/03/constitution.pdf) .
+- The Code of Conduct is distributed under a [Creative Commons Attribution-ShareAlike License](http://creativecommons.org/licenses/by-sa/3.0/), derived from the [Women in Computer Science Code of Conduct](http://wics.uwaterloo.ca/deprecated/code-of-conduct/), the [UW Amateur Radio Club Code of Conduct](http://uwarc.uwaterloo.ca/policies-procedures/code-of-conduct/), and the [FASS Code of Conduct](http://fass.uwaterloo.ca/fassconstitution).

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

@@ -1,6 +1,5 @@
 ---
 title: Purpose
-index: 1
 ---
 
 One of the primary goals of the Computer Science Club of the University of Waterloo is the inclusion and support of all members of the University of Waterloo community who are interested in Computer Science. As such, we are committed to providing a friendly, safe and welcoming environment for all, regardless of gender, sex, sexual orientation, ability, ethnicity, socioeconomic status, age, and religion or lack thereof.

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

@@ -1,6 +1,5 @@
 ---
 title: Revision
-index: 12
 ---
 
 Revision 1.3, adopted by the Computer Science Club of the University of Waterloo on 25 January 2018.

content/about/code-of-conduct/scope-and-spaces.md

@@ -1,6 +1,5 @@
 ---
 title: Scope and Spaces
-index: 8
 ---
 
 In cases where the Code of Conduct contradicts University policies, or applicable laws and bylaws, the Code of Conduct does not apply to the extent to which it conflicts.
@@ -9,4 +8,5 @@ We expect all Club participants (participants, organizers, sponsors, and other g
 
 - The Code of Conduct applies in the office, where office staff are responsible for enforcing it.
 - The Code of Conduct applies in the IRC channel, where channel operators are responsible for enforcing it.
+- The Code of Conduct applies in the Discord channel, where moderators are responsible for enforcing it.
 - The Code of Conduct applies at events the CSC organizes or co-organizes, where a designated organizer is responsible for enforcing it.

content/about/code-of-conduct/unacceptable-behaviour.md

@@ -1,6 +1,5 @@
 ---
 title: Unacceptable Behaviour
-index: 3
 ---
 
 **Unacceptable behaviours include:**

content/about/constitution/ORDER.json

@@ -0,0 +1,16 @@
+[
+  "name",
+  "purpose",
+  "membership",
+  "officers",
+  "duties-of-officers",
+  "executive-council",
+  "committees",
+  "meetings",
+  "finances",
+  "amendments-and-procedures",
+  "dissolution",
+  "code-of-conduct",
+  "use-of-club-resources",
+  "revision"
+]

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

@@ -1,10 +1,9 @@
 ---
-title: 10. Amendments and Procedures
-index: 10
+title: Amendments and Procedures
 ---
 
-1. A proposed constitutional amendment can be initiated by the Executive Council or any ten (10) members.
-2. The proposed amendment shall be announced to all members by email to the members' mailing list.
-3. The proposed amendment shall be made available for viewing by all members in the Computer Science Club office.
-4. A general meeting shall be held to consider the amendment at least seven (7) days after the announcement and no more than thirty (30) days after, which may be the regular meeting for the term, or a special meeting.
+1. A constitutional amendment can be initiated by the Executive Council or any thirty (30) members. The initiation shall involve making the amendment available for viewing, including in the CSC office.
+2. There shall be at least twenty-eight (28) days between the amendment's initiation and announcement of the finalized version. Members shall be provided an avenue to discuss the amendment throughout this time period.
+3. The finalized version of the amendment shall be announced to all members, taking place through email to the members' mailing list.
+4. A general meeting shall be held to consider the finalized version of the amendment at least seven (7) and no more than thirty (30) days after its announcement, which may be the regular meeting for the term, or a special meeting.
 5. A constitutional amendment requires a 2/3 vote for adoption.

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

@@ -1,8 +1,7 @@
 ---
-title: 12. Code of Conduct
-index: 12
+title: Code of Conduct
 ---
 
 1. The Club has a [Code of Conduct](/about/code-of-conduct).
-2. The [scope of the Code of Conduct](/about/code-of-conduct/scopes-and-spaces) is specified by the Code of Conduct.
+2. The [scope of the Code of Conduct](/about/code-of-conduct/scope-and-spaces) is specified by the Code of Conduct.
 3. Changes to the Code of Conduct are governed by the same rules as changes to the Constitution.

content/about/constitution/committees.md

@@ -1,6 +1,5 @@
 ---
-title: 7. Committees
-index: 7
+title: Committees
 ---
 
 ## Programme Committee
@@ -8,20 +7,27 @@ index: 7
 1. The Programme Committee shall be a standing committee chaired by the Vice-President.
 2. The Vice-President shall appoint and remove members to and from the Programme Committee as needed.
 3. The Programme Committee shall plan and arrange the events of the Club.
-4. The Programme committee shall be responsible to the Executive Council and to the Vice-President.
+4. The Programme Committee shall be responsible to the Executive Council and to the Vice-President.
 
 ## Systems Committee
 
-1. The Systems Committee will be a standing committee, chaired by the Systems Administrator.
-2. The Systems Administrator shall appoint and remove members to and from the Systems Committee.
-3. Members should only be appointed to the Systems Committee if they show interest and some existing ability in systems administration.
-4. Members should only be removed from the Systems Committee with cause, or when they no longer show interest in systems administration.
+1. The Systems Committee (syscom) shall be a standing committee, chaired by the Systems Administrator (sysadmin).
+2. New members to the Systems Committee shall be appointed at the Systems Administrator’s discretion. Members should only be appointed to the Systems Committee if they show interest and some existing ability in systems administration.
+3. Members should only be removed from the Systems Committee with cause, or when they no longer show interest in systems administration.
+4. When a member is added to or removed from the Systems Committee, the Systems Committee and the Executive must be notified via both mailing lists.
 5. The Systems Committee will collectively, under the leadership of the Systems Administrator,
-   a. operate any and all equipment in the possession of the Club.
-   a. maintain and upgrade the software on equipment that is operated by the Club.
-   a. facilitate the use of equipment that is operated by the Club.
+    1. operate any and all equipment in the possession of the Club.
+    1. maintain and upgrade the software on equipment that is operated by the Club.
+    1. facilitate the use of equipment that is operated by the Club.
 6. Members of the Systems Committee shall have root access to the machines operated by the Club.
 
+## Web Committee
+
+1. The Web Committee (webcom) will be a standing committee, chaired by the Webmaster.
+2. The Webmaster shall appoint and remove members to and from the Web Committee as needed.
+3. The Web Committee shall maintain and develop the club website with infrastructure support from the Systems Committee, if necessary.
+
+
 ## Other Committees
 
-1. The President, with approval of the executive council, may appoint such special committees as are deemed necessary.
+1. The President, with approval of the Executive Council, may appoint such special committees as are deemed necessary.

content/about/constitution/dissolution.md

@@ -1,6 +1,5 @@
 ---
-title: 11. Dissolution
-index: 11
+title: Dissolution
 ---
 
 1. In the event of dissolution of the Club, all assets of the Club shall be transferred to the Mathematics Society of the University of Waterloo.

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

@@ -1,27 +1,27 @@
----
-title: 5. Duties of Officers
-index: 5
----
-
-1. The duties of the President shall be:
-   a. to call and preside at all general, special, and executive meetings of the Club, except during the election of officers;
-   a. to appoint special committees of the Club and the membership and chairs of such committees, with the approval of the Executive Council; and
-   a. to audit, or to appoint a representative to audit, the financial records of the club at the end of each academic term.
-   a. with the approval of the Faculty Advisor, rule on any point of procedure under the constitution that arises outside of a meeting.
-1. The duties of the Vice-President shall be:
-   a. to assume the duties of the President in the event of the President's absence;
-   a. to chair the Programme Committee;
-   a. to appoint members to and remove members from the Programme Committee;
-   a. to ensure that Club events are held regularly; and
-   a. to assume those duties of the President that are delegated to them by the President.
-1. The duties of the Secretary shall be:
-   a. to keep minutes of all Club meetings;
-   a. to care for all Club correspondence; and
-   a. manage any persons appointed to internal positions by the Executive.
-1. The duties of the Treasurer shall be:
-   a. to collect dues and maintain all financial and membership records;
-   a. to produce a financial or membership statement when requested.
-1. The duties of the System Administrator shall be:
-   a. to chair the Systems Committee;
-   a. to appoint members to and remove members from the Systems Committee.
-   a. to ensure that the duties of the Systems Committee are performed.
+---
+title: Duties of Officers
+---
+
+1. The duties of the President shall be:
+    1. to call and preside at all general, special, and executive meetings of the Club, except during the election of officers;
+    1. to appoint special committees of the Club and the membership and chairs of such committees, with the approval of the Executive Council;
+    1. to audit, or to appoint a representative to audit, the financial records of the club at the end of each academic term; and
+    1. with the approval of the Faculty Advisor, rule on any point of procedure under the constitution that arises outside of a meeting.
+1. The duties of the Vice-President shall be:
+    1. to assume the duties of the President in the event of the President's absence;
+    1. to chair the Programme Committee;
+    1. to appoint members to and remove members from the Programme Committee;
+    1. to ensure that Club events are held regularly; and
+    1. to assume those duties of the President that are delegated to them by the President.
+1. The duties of the Assistant Vice-President shall be:
+    1. to keep minutes of all Club meetings;
+    1. to care for all Club correspondence; and
+    1. to manage any persons appointed to internal positions by the Executive.
+1. The duties of the Treasurer shall be:
+    1. to collect dues and maintain all financial and membership records; and
+    1. to produce a financial or membership statement when requested.
+1. The duties of the System Administrator shall be:
+    1. to chair the Systems Committee;
+    1. to appoint members to and remove members from the Systems Committee;
+    1. to ensure that the duties of the Systems Committee are performed; and
+    1. to act as a liaison for the CSC with CSCF, IST, and similar organizations.

content/about/constitution/executive-council.md

@@ -1,10 +1,9 @@
----
-title: 6. Executive Council
-index: 6
----
-
-1. The Executive Council shall consist of the present officers of the Club and the Faculty Advisor (as a non-voting member) and has the power to run the affairs of this club within the limits of this constitution. This includes the power to overrule or issue directions to any officer.
-2. The Executive Council may appoint people to various positions to help manage the Club.
-3. The Executive Council must obey any instructions given to it by the members at a meeting and can be overruled by them.
-4. The Executive Council can act by consensus achieved on their mailing list.
-5. Minutes of the Executive Council meetings shall be available for inspection by any member of the Club and shall be filed with the Club records. On request, a member shall be shown the archive of any thread on the Executive Council mailing list which resulted in a decision being made.
+---
+title: Executive Council
+---
+
+1. The Executive Council shall consist of the present officers of the Club and the Faculty Advisor (as a non-voting member) and has the power to run the affairs of this club within the limits of this constitution. This includes the power to overrule or issue directions to any officer.
+2. The Executive Council may appoint people to various positions to help manage the Club.
+3. If members provide any points of feedback to the Executive Council at a meeting, then the Executive Council shall respond to them.
+4. The Executive Council can act by consensus achieved on their mailing list.
+5. Minutes of the Executive Council meetings shall be made available for inspection by any member of the Club and shall be filed with the Club records. On request, a member shall be shown the archive of any thread on the Executive Council mailing list which resulted in a decision being made.

content/about/constitution/finances.md

@@ -1,6 +1,5 @@
 ---
-title: 9. Finances
-index: 9
+title: Finances
 ---
 
 1. The Treasurer shall, each term, present to the Executive a financial statement for the previous term. They shall, before the end of the current term, ensure that the records are in a good condition to make this task as easy as possible for the next Treasurer.

content/about/constitution/meetings.md

@@ -1,13 +1,12 @@
 ---
-title: 8. Meetings
-index: 8
+title: Meetings
 ---
 
 1. A regular meeting of the Club shall be held each term. This meeting shall be called by the CRO and shall be the election meeting for that term.
-2. Special meetings may be called at any time deemed necessary by the Executive Council, by the Faculty Advisor, or by any ten (10) members.
+2. A special meeting for a motion to remove an executive from office may be called at any time deemed necessary by the Executive Council, by the Faculty Advisor, by any thirty (30) members, or by 1/3 of the Club membership if there are fewer than thirty (30) members.
 3. All members shall be notified at least two days prior to a forthcoming meeting of the meeting and of the business to be considered at that meeting. A message to the members' mailing list will be considered sufficient notification, though other forms of notification are also encouraged.
 4. The Club shall hold meetings only in places that are open to all members of the Club.
 5. The Club membership cannot act except at a general meeting.
-6. A quorum necessary for the conduct of business is defined as fifteen (15) full members or 2/3 of the full membership, whichever is smaller. If an election meeting lacks quorum, then the inquorate meeting can set a date and time for the elections, and can choose to either run the new elections with the same nominations or with a new nomination period (which does not need to meet the usual minimum requirement).
-7. A motion to remove an officer, or to call new elections (except at an election meeting), requires a 2/3 vote and at least a week's notice. Any other motion requires a majority vote.
+6. A quorum necessary for the conduct of business is defined as twenty-five (25) full members or 2/3 of the full membership, whichever is smaller. If an election meeting lacks quorum, then the inquorate meeting can set a date and time for the elections, and can choose to either run the new elections with the same nominations or with a new nomination period (which does not need to meet the usual minimum requirement).
+7. A motion to remove an officer, or to call new elections (except at a regular election meeting or in the case of vacancies), requires at least a week's notice; a quorum of fifty (50) full members or 2/3 of the full membership, whichever is smaller; and a 2/3 vote. Any other motion requires a majority vote.
 8. If a motion is defeated, it cannot be brought again for sixty (60) days.

content/about/constitution/membership.md

@@ -1,10 +1,9 @@
 ---
-title: 3. Membership
-index: 3
+title: Membership
 ---
 
 1. In compliance with MathSoc regulations and in recognition of the club being primarily targeted at undergraduate students, full membership is open to all Social Members of the Mathematics Society and restricted to the same.
 2. Affiliate membership in this Club shall be open to all members of the University community, including alumni. Affiliate members shall have all the rights of full members except for the rights of voting and holding executive office.
 3. Membership shall be accounted for on a termly basis, where a term begins at the start of lectures in Winter or Spring, and at the start of Orientation Week in Fall.
-4. A person is not a member until he or she has paid the current membership fee and has been enrolled in the member database. The termly membership fee is set from time to time by the Executive. Under conditions approved by the Executive, a member who purchases a membership at the end of the current term may be given membership for both the current term and the next term. If the membership fee changes, then this does not affect the validity of any membership terms already paid for.
+4. A person is not a member until he or she has paid the current membership fee and has been enrolled in the member database. A person must only be enrolled after paying the current membership fee, unless they are not a current undergraduate student at the University and the Executive grants them honorary membership free of charge. The termly membership fee is set from time to time by the Executive. Under conditions approved by the Executive, a member who purchases a membership at the end of the current term may be given membership for both the current term and the next term. If the membership fee changes, then this does not affect the validity of any membership terms already paid for.
 5. The Club may grant access to its systems, either free of charge or for a fee, to members of the University community in order to offer them services. This does not constitute membership.

content/about/constitution/name.md

@@ -1,6 +1,5 @@
 ---
-title: 1. Name
-index: 1
+title: Name
 ---
 
 The name of this organization shall be the "Computer Science Club of the University of Waterloo".

content/about/constitution/officers.md

@@ -1,30 +1,31 @@
----
-title: 4. Officers
-index: 4
----
-
-1. The officers of the Club shall be:
-   a. President
-   a. Vice-President
-   a. Secretary
-   a. Treasurer
-   a. System Administrator
-1. There shall additionally be a Faculty Advisor, selected by the Executive from time to time from among the faculty of the School of Computer Science. The Faculty Advisor shall be an ex-officio affiliate member of the Club.
-1. The choice of officers shall be limited to full members of the Club.
-1. All officers, other than the System Administrator, shall be elected at a meeting to be held no later than two weeks after the start of lectures in each term.
-1. The election of officers shall be accomplished by the following procedure:
-   a. Before the end of the prior term, the then-Executive shall choose a willing Chief Returning Officer, who is responsible for carrying out elections according to this procedure.
-   a. The CRO shall set the date and time of the election meeting, and set the nomination period. The nomination shall be at least one week long and shall end at least 24 hours before the start of the election meeting.
-   a. Announcements of the election and the nomination procedure must be distributed to all members by the members' mailing list, and should also be advertised by posters in the MC building.
-   a. During the nomination period, the Chief Returning Officer (CRO) shall be available to receive nominations for the posts of officers of the club, either in person, by email, by depositing nomination forms in the CSC's mailbox in the MathSoc office, or by writing the nomination in a place in the CSC office to be specified by the CRO.
-   a. A nomination shall consist of the nominee's userid, and post(s) nominated for. Nominees must be full members of the Computer Science Club. A member may decline a nomination at any point prior to the taking of the vote.
-   a. The election shall commence with the offering of memberships for sale. After a reasonable time, control of the meeting is given to the CRO who will preside over the election of the President, Vice-President, Treasurer, and Secretary, in that order.
-   a. During each election, if the position has no nominees, the CRO will take nominations from the floor. Any present, eligible member can be nominated.
-   a. Each election shall be carried out by secret vote, in a manner to be decided on by the CRO, with the approval of the members at the meeting. A simple heads-down-hands-up method is considered acceptable.
-   a. The CRO shall not vote except to break a tie.
-   a. The CRO may, if feasible, accept absentee ballots from full members. No absentee vote from a member shall be counted if the member is present at the time the vote is taken. The CRO shall make a best effort to ensure that absentee ballots are compatible with the method of voting chosen; if this is not possible (for instance, if the CRO is overruled by the membership), then the absentee votes shall not be counted.
-   a. Immediately after the vote is taken, the CRO will announce the results of the election and the winner will be removed from subsequent contests. If, due to lack of candidates (because there were no nominations, or candidates withdrew or were eliminated), there is no one elected to an office, then the members at the meeting will decide whether or not to hold extra elections in accordance with the procedure for vacancies. If they choose not to, this does not prevent the Executive or a group of members from calling extra elections later in the term in accordance with the usual vacancy provisions.
-1. Following the elections, it is the responsibility of the new executive to select a System Administrator. The selection of System Administrator must then be ratified by the members at the meeting. If a suitable System Administrator is not available, then the executive may delay their selection until one becomes available. In this case the selection of System Administrator must be ratified at the next meeting of the Club.
-1. Any two offices may be held by a single person with the approval of the President (if any), and the explicit approval of the members.
-1. In the case of a resignation of an officer or officers, including the President, or if a vacancy occurs for any other reason, the Executive, members at a meeting, or any ten (10) members may call extra elections to replace such officer(s). If extra elections are held, they are held for all vacant offices.
-1. Whenever extra elections are held, they shall follow the usual election procedure. If they are held after elections failed to elect an officer, then the nomination period may be shortened to less than a week in order to allow the extra elections to take place at the same date and time in the following week. The Executive (or the ten (10) members who called the election) may appoint a replacement CRO if the previous CRO is unwilling or unable to fulfill their duties.
+---
+title: Officers
+---
+
+1. The officers of the Club shall be:
+    1. President
+    1. Vice-President
+    1. Assistant Vice-President
+    1. Treasurer
+    1. Systems Administrator
+1. There shall additionally be a Faculty Advisor, selected by the Executive from time to time from among the faculty of the School of Computer Science. The Faculty Advisor shall be an ex-officio affiliate member of the Club.
+1. The choice of officers shall be limited to full members of the Club.
+1. All officers, other than the Systems Administrator, shall be elected at a meeting to be held no later than two weeks after the start of lectures in each term.
+1. The election of officers shall be accomplished by the following procedure:
+    1. Before the end of the prior term, the then-Executive shall choose a willing Chief Returning Officer, who is responsible for carrying out elections according to this procedure.
+    1. The CRO shall set the date and time of the election meeting, and set the nomination period. The nomination shall be at least one week long and shall end at least 24 hours before the start of the election meeting.
+    1. Announcements of the election and the nomination procedure must be distributed to all members by the members' mailing list.
+    1. During the nomination period, the Chief Returning Officer (CRO) shall be available to receive nominations for the posts of officers of the club, either in person, by email, or by writing the nomination in a place in the CSC office to be specified by the CRO.
+    1. A nomination shall consist of the nominee's userid, and post(s) nominated for. Nominees must be full members of the Computer Science Club. A member may decline a nomination at any point prior to the taking of the vote.
+    1. Within 24 hours of the CRO receiving a nomination, the CRO must publicize the nomination, such as by writing it on the CSC office whiteboard.
+    1. Each nominee shall make a platform and submit it to the CRO. Within 24 hours of the CRO receiving a platform from a nominee, the CRO must publicize the platform. Each nominee is also encouraged to publicize their platform on their own.
+    1. The election shall commence with the offering of memberships for sale. After a reasonable time, control of the meeting is given to the CRO who will preside over the election of the President, Vice-President, Assistant Vice-President, and Treasurer, in that order.
+    1. All nominees shall present their platforms. If a position has no nominees, then the CRO shall take nominations from the floor. Any present, eligible member can be nominated.
+    1. Voting shall be by secret ballot, in a manner that is to be decided on by the CRO and agreed upon by the members at the meeting. A simple heads-down-hands-up method is considered acceptable.
+    1. The CRO shall not vote except to break a tie.
+    1. The CRO may, if feasible, accept absentee ballots from full members. No absentee vote from a member shall be counted if the member is present at the time the vote is taken. The CRO shall make a best effort to ensure that absentee ballots are compatible with the method of voting chosen; if this is not possible (for instance, if the CRO is overruled by the membership), then the absentee votes shall not be counted.
+    1. Immediately after the vote is taken, the CRO will announce the results of the election and the winner will be removed from subsequent contests. If, due to a lack of candidates (because there were no nominations, or candidates withdrew or were eliminated), there is no one elected to an office, then the members at the meeting will decide whether or not to hold extra elections in accordance with the procedure for vacancies. If they choose not to, this does not prevent the Executive or a group of members from calling extra elections later in the term in accordance with the usual vacancy provisions.
+1. Following the elections, it is the responsibility of the new Executive to select a Systems Administrator. The selection of Systems Administrator must then be ratified by the members at the meeting. If a suitable Systems Administrator is not available, the duties of the Systems Administrator shall be carried out by the Systems Committee, with decisions made by consensus achieved on their mailing list.
+1. Any two offices may be held by a single person with the approval of the President (if any), and the explicit approval of the members.
+1. In the case of a resignation of an officer or officers, including the President, or if a vacancy occurs for any other reason, the Executive, members at a meeting, or any ten (10) members may call extra elections to replace such officer(s). If extra elections are held, they are held for all vacant offices.
+1. Whenever extra elections are held, they shall follow the usual election procedure. If they are held after elections failed to elect an officer, then the nomination period may be shortened to less than a week in order to allow the extra elections to take place at the same date and time in the following week. The Executive (or the ten (10) members who called the election) may appoint a replacement CRO if the previous CRO is unwilling or unable to fulfill their duties.

content/about/constitution/purpose.md

@@ -1,10 +1,9 @@
 ---
-title: 2. Purpose
-index: 2
+title: Purpose
 ---
 
 1. The Club is organized and will be operated exclusively for educational and scientific purposes in furtherance of:
-   a. promoting an increased knowledge of computer science and its applications;
-   a. providing a means of communication between persons having interest in computer science.
-   a. promoting a greater interest in computer science and its applications; and
-1. The above purposes will be fulfilled by the organization of discussions and lectures with professionals and academics in the field of computer science and related fields, the maintenance of a library of materials related to computer science, the maintenance of an office containing the library as an aid to aim (1.c) above, and such other means as decided by the club membership.
+    1. promoting an increased knowledge of computer science and its applications;
+    1. providing a means of communication between persons having interest in computer science.
+    1. promoting a greater interest in computer science and its applications; and
+1. The above purposes will be fulfilled by the organization of discussions and lectures with professionals and academics in the field of computer science and related fields, the maintenance of a library of materials related to computer science, the maintenance of an office containing the library as an aid to aim (1.3) above, and such other means as decided by the club membership.

content/about/constitution/revision.md

@@ -1,6 +1,5 @@
 ---
 title: Revision
-index: 14
 ---
 
-The constitution was last revised on 25 January 2018.
+The latest revision of the constitution is effective January 11, 2024.

content/about/constitution/use-of-club-resources.md

@@ -1,6 +1,5 @@
 ---
-title: 13. Use of Club Resources
-index: 13
+title: Use of Club Resources
 ---
 
 1. All resources under control of the Club are to be used in accordance with the aims of the Club.

content/about/index.mdx

@@ -16,13 +16,13 @@ growth.
 
 ## Our <span>Vision</span>
 
-1. Academic: Promoting the knowledge and interest of Computer Science, as well
+1. **Academic**: Promoting the knowledge and interest of Computer Science, as well
    as supporting students throughout their academic experiences.
 
-2. Career: Providing career guidance and resources to help students gain
+2. **Career**: Providing career guidance and resources to help students gain
    experience and knowledge for their own job search.
 
-3. Community: Encouraging interpersonal relationships through community building
+3. **Community**: Encouraging interpersonal relationships through community building
    and social events for all computing students.
 
 </Bubble>
@@ -51,7 +51,7 @@ The CS Club team is devoted to providing you with all the resources you could
 need as a student. We want to create a community that members can call home, to
 make it a place where you can reach out for career advice, for academic help, or
 even just to socialize. To fulfil this mission, we'll be running events and
-initiatives throughout the term, so please check out our [Events](/events/current)
+initiatives throughout the term, so please check out our [Events](/events)
 page to stay updated!
 
 </Bubble>
@@ -73,14 +73,14 @@ in the club.
 
 <address>
 
-Computer Science Club <br />
-Math & Computer 3036/3037 <br />
-University of Waterloo <br />
-200 University Avenue West <br />
-Waterloo, ON N2L 3G1 <br />
+Computer Science Club  
+Math & Computer 3036/3037  
+University of Waterloo  
+200 University Avenue West  
+Waterloo, ON&nbsp;&nbsp;N2L 3G1  
 Canada
 
-Our office phone number is [(519) 888-4567 x33870](tel:+15198884567,33870)
+Our office phone number is [(519) 888-4567 x33870](tel:+15198884567,33870).
 
 </address>
 

content/about/our-supporters.mdx

@@ -11,7 +11,6 @@ The [Mathematics Endowment Fund](https://uwaterloo.ca/math-endowment-fund/) ha
 - A gigabit switch for the MathSoc offices (including ours)
 - Academic talks
 - Linux CDs for first-year students
-- Caffeine, our primary server
 - Various books for the CSC library
 
 The Computer Science club graciously thanks the Mathematics Endowment Fund for their financial support.
@@ -26,6 +25,6 @@ The [MathSoc Capital Improvements Fund](https://mathsoc.uwaterloo.ca/wp-content
 
 ## Student Life Endowment Fund
 
-The [Student Life Endowment Fund](https://feds.ca/funding#fund-slef) has provided funding of new hardware:
+The [Student Life Endowment Fund](https://wusa.ca/about/your-money/funding/) has provided funding of new hardware:
 
 - Biloba, a server to improve CSC web hosting services

content/advice/academic-advice.mdx

@@ -1,16 +0,0 @@
-## Academic Advice
-
-Find a nice group of people that you study well with and meet every once in a while to work on things together, 
-you can do that generally by asking around via messaging platforms/office hours. To avoid plagiarism, avoid discussing 
-intricate details of the solution but rather bounce ideas off one another, and leave yourself 30 minutes after the meeting 
-before you write up a solution
-
-Try to complete your assignments without consulting your notes. It will be very challenging to do if you are not very confident 
-in the content and is a good indicator that you need to understand the content better! Try to review it again and do the 
-assignment without referring back to it.
-
-Try to manage your pace when it comes to work. It’s really easy to burn out and lose motivation in the middle to end of the term, 
-when you need it the most. Give yourself a breather and take breaks!
-
-Assignments can be pretty endless, so make sure you celebrate your small wins. Modularize your tasks and reflect on all the 
-work you’ve done over a period of time. It’s often much more than you think.

content/advice/coop-advice.mdx

@@ -1,98 +0,0 @@
-## Coop Advice
-
-Although WaterlooWorks is quite reliable, there are many more opportunities outside of the job board. 
-Being able to apply for jobs externally not only prepares you to look for jobs full time but it also 
-provides a way to start your study term without having to worry about looking for a co-op.
-
-
-Create rituals for starting your day and ending your day. Studies have shown that not having a post work activity 
-makes it harder to not think about work which leads to burn out and reduced productivity. Start your day by thinking 
-about what you want to achieve and how you want to feel. End your day by doing an activity i.e exercising, listing 
-todos for tomorrow, or even reflecting about the work day! This may help you have a more balanced lifestyle. 
-
-
-To make the best use of your time, set a time limit on how long you spend on the problem (e.g. 1 hour before 
-you ask for help). Asking for help on an issue you’ve been stuck on for some time can be beneficial. It’s much 
-better to take an hour of your mentor/boss’ time than to be stuck for days without any results. The solution 
-may be team/organization specific and asking can save a lot of time. Be sure to try your best to solve the 
-problem on your own first to maximize your ability to learn.
-
-
-If you have spent time diving into the codebase but you still are confused, schedule time with your mentor/coworkers 
-to have a code base walk through. Write up questions to ask during the meeting and take notes of unclear parts of the code. 
-
-
-Check over your code at least twice before submitting your code review. Reviewing the code a second time may 
-help you catch minor issues and/or problematic code that your reviewers may or may not comment on. If you are 
-unable to figure out a solution to an issue, then reach out to someone for help rather than implementing a 
-hacky solution. You will be more aware of your coding quality, less prone to ignoring issues, and overall 
-be a more responsible developer.
-
-
-Asking for feedback from  your manager/mentor throughout the term can go a long way. You can ask about your 
-performance in certain areas and ways you can improve. These feedbacks can help determine what you should continue 
-and/or change. For example, you can ask about their expectations and how you can achieve a specific rating on 
-the employer co-op rating to set up specific goals.
-
-
-Around the middle of the term, ask to go over your co-op evaluation form with your manager. In doing so, you will 
-be able to modify your current goals to match/exceed your manager’s expectations. This is especially helpful for 
-you to determine how you can achieve the co-op rating you want.
-
-
-Meeting and networking with people in and outside your team is an amazing way to learn and meet new people. 
-Coffee chats are a great way to learn about interesting roles and tasks others around the company perform. 
-Try to set up coffee chats with others at your company as you might meet an amazing connection or learn about 
-a really neat topic. This may lead to an idea of what you want to do in your future co-ops. A format you can 
-use is: “Hey, I'm the new intern of \<manager\> and I was wondering if I could put something on your calendar 
-so I can get to know you and your work a little better.”
-
-
-Aim to make most/all of your code testable. This will ensure the code is functioning properly and will save 
-time debugging in the future. This is a useful skill to have as a developer.
-
-
-Each push request (PR) should focus on a very specific change/feature. Modularizing the changes will make 
-reviewing the PR easier and quicker.
-
-
-Set up a system to stay on top of your work. This can be as simple as setting up a to-do list ready for the day. 
-The important thing is to be clear and intentional with your goals each day so you can optimize your focus on getting things done.
-
-
-Document any blockers you faced during onboarding, and how you overcame them because chances are others will face them too. 
-These can be tips/advice you would give new hires. Feel free to share these findings with your team, because they want to make 
-the onboarding process more efficient and up to date for future hires. Some examples of things to take note of are 
-outdated/incorrect/missing documentation and the way the team does a specific task.
-
-
-Negotiating compensation for an offer when you already have competing offers can be very beneficial for you and it’s normal 
-to do. For a general guide, you can use the format:
-
-
--------------------------------------------------------------------------------------------------------------------------------
-Hello [Name of recruiter],
-
-I am very interested in working \[company name\]. I have been given an opportunity at \[another company name\] that is offering \[compensation\]. 
-Would it be possible for [the company name] to match/increase the compensation.
-
-Thank you,
-
-[Name]
-
--------------------------------------------------------------------------------------------------------------------------------
-
-If you do not have competing offers you can still try to negotiate using the format:
-
--------------------------------------------------------------------------------------------------------------------------------
-Hello \[Name of recruiter\],
-
-Given my experiences, would it be possible to increase the compensation to [compensation]?
-
-Thank you,
-
-[Name]
-
--------------------------------------------------------------------------------------------------------------------------------
-
-Either way, it does not hurt to try as the worst they can say is no.

content/advice/misc-advice.mdx

@@ -1,42 +0,0 @@
-## Social Advice
-
-If you’re looking to watch movies with friends then you can either buy cheaper (Tuesday prices) 
-at the Student Life Center or Waterloo has a list of streaming sites where you can watch free movies.
-
-Join different clubs or societies! They’re a great way to make friends and manage your time better. 
-Plus, it makes going through a school term much more fun.
-
-Take up the opportunities for meeting people. You never know who you might meet. If you don’t put 
-yourself out there and take chances, it’s much harder to find a relationship, friendships, or even study buddies.
-
-Be kind. Celebrate your friends’ successes when they get a co-op job and support them when they’re struggling 
-too. Waterloo is so competitive and sometimes it can be hard to navigate through, so make sure you’re giving 
-and getting a good support network.
-Additional Resources
-
-Along with your tuition fees, part of your library fees grant you access to a database of [free movies](https://media3-criterionpic-com.proxy.lib.uwaterloo.ca/htbin/wwform/006/wwk770?&kw=zkcode%7C000005%7C)
-
-SE servers:
-
-[discord.gg/ZtmRPc59](https://discord.gg/ZtmRPc59)
-
-[discord.gg/XyQtsfe5](https://discord.gg/XyQtsfe5)
-
-Group Leetcode server:
-[discord.gg/kwCsCNb3](https://discord.gg/kwCsCNb3)
-
-There are many online resources for interview preparation including https://evykassirer.github.io/playing-the-internship-game/ and https://github.com/viraptor/reverse-interview
-
-If you have issues regarding courses, there are MathSoc class representatives who can help voice your concerns to involved faculty members.
-
-Access to eBooks: https://subjectguides.uwaterloo.ca/compsci/books
-
-More specifically O'Reilly Higher education: https://learning-oreilly-com.proxy.lib.uwaterloo.ca/home
-There are a lot of helpful books/videos that can teach you a variety of things from finance to leadership to a variety of cs topics! (With recommendations, case studies and playlist to help you get started)
-
-We have GPUs: https://uwaterloo.ca/math-faculty-computing-facility/services/service-catalogue-teaching-linux/access-teaching-gpu-cluster
-
-List of math faculty services: https://uwaterloo.ca/math-faculty-computing-facility/services
-
-Internship/Interview advice
-https://www.techintern.io/ 

content/events/1994/fall/ACM-Style-Programming-Contest.md

@@ -1,14 +1,13 @@
 ---
-name: 'ACM-Style Programming Contest'
-short: 'No description available'
-date: 'Sat Oct 15 1994 11:00:00 GMT-0400 (Eastern Daylight Time)'
+name: "ACM-Style Programming Contest"
+short: ""
+startDate: 'October 15 1994 11:00'
 online: false
-location: 'MC 3022'
+location: "MC 3022"
 ---
 
 ### Big Money and Prizes!
 
-So you think you're a pretty good programmer? Pit your skills	against others on campus in this triannual event! Contestants will	have three hours to solve five programming problems in either C or	Pascal.
-
-Last fall's winners went on to the International Finals and came	first overall! You could be there, too!
+So you think you're a pretty good programmer? Pit your skills against others on campus in this triannual event! Contestants will have three hours to solve five programming problems in either C or Pascal.
 
+Last fall's winners went on to the International Finals and came first overall! You could be there, too!

content/events/1994/fall/CSC-Elections.md

@@ -1,9 +1,9 @@
 ---
-name: 'CSC Elections'
-short: 'No description available'
-date: 'Fri Sep 16 1994 17:30:00 GMT-0400 (Eastern Daylight Time)'
+name: "CSC Elections"
+short: ""
+startDate: 'September 16 1994 17:30'
 online: false
-location: 'MC 4040'
+location: "MC 4040"
 ---
 
-No abstract available
+No abstract available

content/events/1994/fall/Exploring-the-Internet.md

@@ -1,14 +1,13 @@
 ---
-name: 'Exploring the Internet'
-short: 'No description available'
-date: 'Thu Oct 20 1994 17:30:00 GMT-0400 (Eastern Daylight Time)'
+name: "Exploring the Internet"
+short: ""
+startDate: 'October 20 1994 17:30'
 online: false
-location: 'MC 3009'
+location: "MC 3009"
 ---
 
 ### Need something to do between assignments/beers?
 
 Did you know that your undergrad account at Waterloo gives you access to the world's largest computer network? With thousands of discussion groups, gigabytes of files to download, multimedia information browsers, even on-line entertainment?
 
-The resources available on the Internet are vast and wondrous, but	the tools for navigating it are sometimes confusing and arcane. In	this hands-on tutorial you will get the chance to get your feet wet	with the world's most mind-bogglingly big computer network, the	protocols and programs used, and how to use them responsibly and	effectively.
-
+The resources available on the Internet are vast and wondrous, but the tools for navigating it are sometimes confusing and arcane. In this hands-on tutorial you will get the chance to get your feet wet with the world's most mind-bogglingly big computer network, the protocols and programs used, and how to use them responsibly and effectively.

content/events/1994/fall/Game-Theory.md

@@ -1,9 +1,9 @@
 ---
-name: 'Game Theory'
-short: 'No description available'
-date: 'Wed Nov 02 1994 17:30:00 GMT-0500 (Eastern Standard Time)'
+name: "Game Theory"
+short: ""
+startDate: 'November 02 1994 17:30'
 online: false
-location: 'MC 2038'
+location: "MC 2038"
 ---
 
 ### From the Minimax Theorem, through Alpha-Beta, and beyond...
@@ -11,4 +11,3 @@ location: 'MC 2038'
 This will be a discussion of the pitfalls of using mathematics and algorithms to play classical board games. Thorough descriptions shall be presented of the simple techniques used as the building blocks that make all modern computer game players. I will use tic-tac-toe as a control for my arguments. Other games such as Chess, Othello and Go shall be the be a greater measure of progress; and more importantly the targets of our dreams.
 
 To enhance the discussion of the future, Barney Pell's Metagamer shall be introduced. His work in define classes of games is important in identifying the features necessary for analysis.
-

content/events/1994/fall/Movie-Outing-Brainstorm.md

@@ -1,7 +1,7 @@
 ---
 name: 'Movie Outing: Brainstorm'
 short: '	No description available.	'
-date: 'Tue Sep 13 1994 22:00:00 GMT-0400 (Eastern Daylight Time)'
+startDate: 'September 13 1994 21:00'
 online: false
 location: 'Princess Cinema'
 ---

content/events/1994/fall/Prograph-Picture-the-Future.md

@@ -1,16 +1,15 @@
 ---
-name: 'Prograph: Picture the Future'
-short: 'No description available'
-date: 'Thu Oct 13 1994 18:00:00 GMT-0400 (Eastern Daylight Time)'
+name: "Prograph: Picture the Future"
+short: ""
+startDate: 'October 13 1994 18:00'
 online: false
-location: 'DC 1302'
+location: "DC 1302"
 ---
 
-What is the next step in the evolution of computer languages?	Intelligent agents? Distributed objects? or visual languages?
+What is the next step in the evolution of computer languages? Intelligent agents? Distributed objects? or visual languages?
 
-Visual languages overcome many of the drawbacks and limitations	of the textual languages that software development is based on	today. Do you think about programming in a linear fashion? Or do	you draw a mental picture of your algorithm and then linearize it	for the benefit of your compiler? Wouldn't it be nice if you could	code the same way you think?
+Visual languages overcome many of the drawbacks and limitations of the textual languages that software development is based on today. Do you think about programming in a linear fashion? Or do you draw a mental picture of your algorithm and then linearize it for the benefit of your compiler? Wouldn't it be nice if you could code the same way you think?
 
-Visual C++ and Visual BASIC aren't visual languages, but Prograph	is. Prograph is a commercially available, visual, object-oriented,	data-flow language. It is well suited to graphical user interface	development, but is as powerful for general-purpose programming as	any textual language.
-
-The talk will comprise a discussion of the problems of textual	languages that visual languages solve, a live demonstration of	Prograph, and some of my observations of the applications of	Prograph to software development.
+Visual C++ and Visual BASIC aren't visual languages, but Prograph is. Prograph is a commercially available, visual, object-oriented, data-flow language. It is well suited to graphical user interface development, but is as powerful for general-purpose programming as any textual language.
 
+The talk will comprise a discussion of the problems of textual languages that visual languages solve, a live demonstration of Prograph, and some of my observations of the applications of Prograph to software development.

content/events/1994/fall/SIGGRAPH-Video-Night.md

@@ -1,9 +1,9 @@
 ---
-name: 'SIGGRAPH Video Night'
-short: 'No description available'
-date: 'Wed Sep 21 1994 19:30:00 GMT-0400 (Eastern Daylight Time)'
+name: "SIGGRAPH Video Night"
+short: ""
+startDate: 'September 21 1994 19:30'
 online: false
-location: 'DC 1302'
+location: "DC 1302"
 ---
 
-No abstract available
+No abstract available

content/events/1994/fall/UNIX-I-Tutorial.md

@@ -1,9 +1,9 @@
 ---
-name: 'UNIX I Tutorial'
-short: 'No description available'
-date: 'Thu Sep 22 1994 17:30:00 GMT-0400 (Eastern Daylight Time)'
+name: "UNIX I Tutorial"
+short: ""
+startDate: 'September 22 1994 17:30'
 online: false
-location: 'MC 3022'
+location: "MC 3022"
 ---
 
-No abstract available
+No abstract available

content/events/1994/fall/UNIX-II-Tutorial.md

@@ -1,9 +1,9 @@
 ---
-name: 'UNIX II Tutorial'
-short: 'No description available'
-date: 'Mon Sep 26 1994 17:30:00 GMT-0400 (Eastern Daylight Time)'
+name: "UNIX II Tutorial"
+short: ""
+startDate: 'September 26 1994 17:30'
 online: false
-location: 'MC 3022'
+location: "MC 3022"
 ---
 
-No abstract available
+No abstract available

content/events/1999/fall/Calculational-Mathematics.md

@@ -1,7 +1,7 @@
 ---
 name: 'Calculational Mathematics'
 short: 'By Edgar Dijkstra'
-date: 'Thu Dec 02 1999 14:30:00 GMT-0500 (Eastern Standard Time)'
+startDate: 'December 02 1999 13:30'
 online: false
 location: 'DC1302'
 ---

content/events/1999/fall/Ctrl-D.md

@@ -1,7 +1,7 @@
 ---
 name: 'Ctrl-D'
 short: 'End-of-term dinner'
-date: 'Wed Dec 01 1999 20:00:00 GMT-0500 (Eastern Standard Time)'
+startDate: 'December 01 1999 19:00'
 online: false
 location: 'Golf''s Steakhouse'
 ---

content/events/1999/fall/GDB,-Purify-Tutorial.md

@@ -1,14 +1,13 @@
 ---
-name: 'GDB, Purify Tutorial'
-short: 'No description available.'
-date: 'Tue Oct 19 1999 17:30:00 GMT-0400 (Eastern Daylight Time)'
+name: "GDB, Purify Tutorial"
+short: ""
+startDate: 'October 19 1999 17:30'
 online: false
-location: 'DC1304'
+location: "DC1304"
 ---
 
 Debugging can be the most difficult and time consuming part of any program's life-cycle. Far from an exact science, it's more of an art ... and close to some kind of dark magic. Cryptic error messages, lousy error checking, and icky things like implicit casts can make it nearly impossible to know what's going on inside your program.
 
 Several tools are available to help automate your debugging. GDB and Purify are among the most powerful debugging tools available in a UNIX environment. GDB is an interactive debugger, allowing you to \`step' through a program, examine function calls, variable contents, stack traces and let you look at the state of a program after it crashes. Purify is a commercial program designed to help find and remove memory leaks from programs written in languages without automatic garbage collection.
 
-This talk will cover how to compile your C and C++ programs	for use with GDB and Purify, as well as how to use the	available X interfaces. If a purify license is available on	undergrad at the time of the talk, we will cover how to use it	during runtime.
-
+This talk will cover how to compile your C and C++ programs for use with GDB and Purify, as well as how to use the available X interfaces. If a purify license is available on undergrad at the time of the talk, we will cover how to use it during runtime.

content/events/1999/fall/Homebrew-Processors-and-Integrated-Systems-in-FPGAs.md

@@ -1,7 +1,7 @@
 ---
 name: 'Homebrew Processors and Integrated Systems in FPGAs'
 short: 'By Jan Gray'
-date: 'Wed Dec 01 1999 17:30:00 GMT-0500 (Eastern Standard Time)'
+startDate: 'December 01 1999 16:30'
 online: false
 location: 'MC2066'
 ---

content/events/1999/fall/Living-Laboratories-The-Future-Computing-Environments-at-Georgia-Tech.md

@@ -2,7 +2,7 @@
 name: 'Living Laboratories: The Future Computing Environments at
   Georgia Tech'
 short: 'By Blair MacIntyre and Elizabeth Mynatt'
-date: 'Mon Oct 18 1999 15:30:00 GMT-0400 (Eastern Daylight Time)'
+startDate: 'October 18 1999 14:30'
 online: false
 location: 'DC1304'
 ---

content/events/1999/fall/Open-Q&A-session.md

@@ -1,7 +1,7 @@
 ---
 name: 'Open Q&A session'
 short: 'By Edsger Dijkstra'
-date: 'Fri Dec 03 1999 16:00:00 GMT-0500 (Eastern Standard Time)'
+startDate: 'December 03 1999 15:00'
 online: false
 location: 'DC1351'
 ---

content/events/1999/fall/Proofs-and-Programs.md

@@ -1,7 +1,7 @@
 ---
 name: 'Proofs and Programs'
 short: 'By Edsger Dijkstra'
-date: 'Fri Dec 03 1999 11:00:00 GMT-0500 (Eastern Standard Time)'
+startDate: 'December 03 1999 10:00'
 online: false
 location: 'Siegfried Hall,
   St Jerome''s'

content/events/2000/fall/CSC-Elections.md

@@ -1,7 +1,7 @@
 ---
 name: 'CSC Elections'
 short: 'Fall 2000 Elections for the CSC.'
-date: 'Thu Sep 14 2000 19:00:00 GMT-0400 (Eastern Daylight Time)'
+startDate: 'September 14 2000 18:00'
 online: false
 location: 'DC1302'
 ---

content/events/2000/fall/Realising-the-Next-Generation-Internet.md

@@ -1,7 +1,7 @@
 ---
 name: 'Realising the Next Generation Internet'
 short: 'By Frank Clegg of Microsoft Canada'
-date: 'Mon Sep 25 2000 15:30:00 GMT-0400 (Eastern Daylight Time)'
+startDate: 'September 25 2000 14:30'
 online: false
 location: 'DC1302'
 ---

content/events/2000/fall/SIGGraph-Video-Night.md

@@ -1,7 +1,7 @@
 ---
 name: 'SIGGraph Video Night'
 short: ' SIGGraph Video Night Featuring some truly awesome computer animations from Siggraph ''99. '
-date: 'Thu Sep 14 2000 20:00:00 GMT-0400 (Eastern Daylight Time)'
+startDate: 'September 14 2000 19:00'
 online: false
 location: 'DC1302'
 ---