Merge branch 'main' of https://git.csclub.uwaterloo.ca/www/www-new into feat/meet-the-team-page

.drone.yml

@@ -4,8 +4,15 @@ 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
 
@@ -30,6 +37,16 @@ steps:
   commands:
   - npm run export
 
+- name: deploy (staging)
+  image: node:16
+  depends_on:
+  - export
+  environment:
+    TOKEN:
+      from_secret: STAGING_TOKEN
+  commands:
+  - 'curl -XPOST -H "Authorization: $TOKEN" -H "X-Branch: $DRONE_BRANCH" "https://csclub.uwaterloo.ca/~a3thakra/update-csc/"'
+
 trigger:
   event:
     exclude:

check-lockfile.js

@@ -0,0 +1,10 @@
+const lockfile = require('./package-lock.json')
+
+if (lockfile.lockfileVersion !== 2) {
+  console.error(`
+Please upgrade to npm v7 and revert changes to the lockfile.
+
+- \`npm i -g npm\` to upgrade.
+`.trim())
+  process.exit(1)
+}

components/Code.module.css

@@ -0,0 +1,6 @@
+.code {
+  padding: 0 calc(4rem / 16);
+  background: var(--code-background);
+  border-radius: calc(5rem / 16);
+  word-wrap: break-word;
+}

components/Code.tsx

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

components/EmailSignup.module.css

@@ -1,7 +1,3 @@
-.container form {
-  box-sizing: border-box;
-}
-
 .header {
   color: var(--primary-accent);
   font-weight: 600;
@@ -9,8 +5,9 @@
 }
 
 .button {
-  margin-top: calc(34rem / 16);
+  margin-top: calc(26rem / 16);
   display: block;
+  width: fit-content;
 }
 
 @media only screen and (max-width: calc(768rem / 16)) {

components/EmailSignup.tsx

@@ -1,21 +1,24 @@
 import React from "react";
 
 import { Button } from "./Button";
-import { Input } from "./Input";
 
 import styles from "./EmailSignup.module.css";
 
 export function EmailSignup() {
   return (
     <section className={styles.container}>
-      <h1 className={styles.header}>Join Our Mailing List!</h1>
-      <form className={styles.form} action="">
-        <Input type="text" placeholder="Full Name*" required />
-        <Input type="email" placeholder="Email*" required />
-        <Button type="submit" className={styles.button}>
-          Subscribe
-        </Button>
-      </form>
+      <h1 className={styles.header}>Join our mailing list!</h1>
+      <p>
+        Join our mailing list to receive email notifications about important
+        news and upcoming events!
+      </p>
+      <Button
+        isLink={true}
+        href="https://mailman.csclub.uwaterloo.ca/postorius/lists/csc-general.csclub.uwaterloo.ca/"
+        className={styles.button}
+      >
+        Subscribe
+      </Button>
     </section>
   );
 }

components/Footer.module.css

@@ -23,6 +23,11 @@
   text-align: center;
 }
 
+.email {
+  color: unset;
+  text-decoration: unset;
+}
+
 @media only screen and (max-width: calc(768rem / 16)) {
   .footer {
     height: calc(120rem / 16);

components/Footer.tsx

@@ -1,3 +1,4 @@
+import Link from "next/link";
 import React from "react";
 
 import { SocialLinks } from "./SocialLinks";
@@ -9,7 +10,10 @@ export function Footer() {
     <footer className={styles.footer}>
       <div className={styles.container}>
         <div className={styles.text}>
-          Have questions? Email us at XX@XXX.COM
+          Have questions? Email us at{" "}
+          <Link href="mailto:exec@csclub.uwaterloo.ca">
+            <a className={styles.email}>exec@csclub.uwaterloo.ca</a>
+          </Link>
         </div>
         <SocialLinks color="white" size="small" />
       </div>

components/HorizontalLine.module.css

@@ -0,0 +1,7 @@
+.line {
+  display: block;
+  margin: calc(34rem / 16) 0;
+  height: calc(1rem / 16);
+  border: none;
+  background-color: var(--primary-heading);
+}

components/HorizontalLine.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+import styles from "./HorizontalLine.module.css";
+
+export function HorizontalLine() {
+  return <hr className={styles.line} />;
+}

components/Image.tsx

@@ -1,6 +1,10 @@
 import React, { ImgHTMLAttributes } from "react";
 
 export function Image(props: ImgHTMLAttributes<HTMLImageElement>) {
+  if (props.src?.startsWith("http://") || props.src?.startsWith("https://")) {
+    return <img {...props} />;
+  }
+
   const { src: relativeSrc = "" } = props;
 
   let absoluteSrc = process.env.NEXT_PUBLIC_BASE_PATH ?? "/";

components/MiniTechTalkCard.module.css

@@ -1,15 +1,16 @@
-.card {
+.card > a {
   display: flex;
   flex-direction: row;
   box-sizing: border-box;
   padding: calc(16rem / 16);
-  color: var(--purple-2);
   font-size: 1rem;
+  color: inherit;
+  text-decoration: inherit;
 }
 
 .card aside {
   max-width: calc(142rem / 16);
-  margin-right: calc(45rem / 16);
+  margin-right: 1rem;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -29,6 +30,7 @@
   margin: 0;
   margin-top: calc(4rem / 16);
   font-size: calc(18rem / 16);
+  color: var(--primary-heading);
 }
 
 .card section {

components/MiniTechTalkCard.tsx

@@ -1,3 +1,4 @@
+import Link from "next/link";
 import React from "react";
 
 import { Image } from "./Image";
@@ -5,19 +6,36 @@ import { Image } from "./Image";
 import styles from "./MiniTechTalkCard.module.css";
 
 interface MiniTechTalkProps {
-  name: string;
-  short: string;
-  poster?: string;
+  slug: string;
+  title: string;
+  presentors: string[];
+  poster: string;
 }
 
-export function MiniTechTalkCard({ name, poster, short }: MiniTechTalkProps) {
+export function MiniTechTalkCard({
+  slug,
+  title,
+  presentors,
+  poster,
+}: MiniTechTalkProps) {
+  const presentorsStr = presentors.join(", ");
+
   return (
     <article className={styles.card}>
-      <aside>{poster && <Image alt={name} src={poster} />}</aside>
-      <div className={styles.content}>
-        <h1>{name}</h1>
-        <p>{short}</p>
-      </div>
+      <Link href={`/resources/tech-talks/${slug}`}>
+        <a>
+          <aside>
+            <Image
+              alt={`Thumbnail of tech talk by ${presentorsStr}: ${title}`}
+              src={poster}
+            />
+          </aside>
+          <div className={styles.content}>
+            <h1>{title}</h1>
+            <p>{presentorsStr}</p>
+          </div>
+        </a>
+      </Link>
     </article>
   );
 }

components/Navbar.tsx

@@ -62,6 +62,10 @@ const menu: Menu = [
         name: "Services",
         route: "/resources/services",
       },
+      {
+        name: "Machine Usage",
+        route: "/resources/machine-usage-agreement",
+      },
       {
         name: "Tech Talks",
         route: "/resources/tech-talks",
@@ -70,6 +74,14 @@ const menu: Menu = [
         name: "CS Club Wiki",
         route: "https://wiki.csclub.uwaterloo.ca",
       },
+      {
+        name: "Advice",
+        route: "/resources/advice/coop",
+      },
+      {
+        name: "Internships",
+        route: "https://github.com/uwcsc/winter2022-internships",
+      },
     ],
   },
 ];

components/OrganizedContent/Header.module.css

@@ -19,6 +19,15 @@
   text-align: center;
 }
 
+.imageRight {
+  flex-direction: row-reverse;
+}
+
+.imageRight .header {
+  text-align: left;
+  margin-left: 0;
+}
+
 @media only screen and (max-width: calc(768rem / 16)) {
   .headerContainer {
     flex-direction: column;
@@ -34,4 +43,8 @@
   .headerImage {
     width: calc(100rem / 16);
   }
+
+  .description {
+    display: none;
+  }
 }

components/OrganizedContent/Header.tsx

@@ -8,14 +8,29 @@ export interface Props {
   title: string;
   image: string;
   children: ReactNode;
+  description?: string;
+  imagePosition?: "left" | "right";
 }
 
-export function Header({ title, image, children }: Props) {
+export function Header({
+  title,
+  image,
+  children,
+  description,
+  imagePosition,
+}: Props) {
   return (
     <main className={styles.page}>
-      <header className={styles.headerContainer}>
+      <header
+        className={`${styles.headerContainer} ${
+          imagePosition === "right" ? styles.imageRight : ""
+        }`}
+      >
         <Image src={image} className={styles.headerImage} />
-        <h1 className={styles.header}>{title}</h1>
+        <div>
+          <h1 className={styles.header}>{title}</h1>
+          {description && <p className={styles.description}>{description}</p>}
+        </div>
       </header>
       {children}
     </main>

components/OrganizedContent/ReadAll.tsx

@@ -26,10 +26,19 @@ export interface Options {
   pagePath: string;
   title: string;
   image: string;
+  imagePosition?: "left" | "right";
   link?: ComponentType<LinkProps>;
+  description?: string;
 }
 
-export function createReadAllPage({ title, image, pagePath, link }: Options) {
+export function createReadAllPage({
+  title,
+  image,
+  pagePath,
+  link,
+  description,
+  imagePosition,
+}: Options) {
   const Link = link ?? createLink(pagePath);
 
   return function Page({ sections }: Props) {
@@ -44,7 +53,12 @@ export function createReadAllPage({ title, image, pagePath, link }: Options) {
     );
 
     return (
-      <Header title={title} image={image}>
+      <Header
+        title={title}
+        image={image}
+        description={description}
+        imagePosition={imagePosition}
+      >
         <OrganizedContent
           id={readAllSection.section.id}
           sections={[

components/OrganizedContent/Section.tsx

@@ -1,13 +1,10 @@
 import { MDXRemote, MDXRemoteSerializeResult } from "next-mdx-remote";
-import React, { ComponentType } from "react";
+import React from "react";
 
-import {
-  createLink,
-  LinkProps,
-  OrganizedContent,
-} from "@/components/OrganizedContent";
+import { createLink, OrganizedContent } from "@/components/OrganizedContent";
 
 import { Header } from "./Header";
+import { Options } from "./ReadAll";
 
 interface Section {
   id: string;
@@ -20,19 +17,24 @@ export interface Props {
   current: number;
 }
 
-export interface Options {
-  title: string;
-  pagePath: string;
-  image: string;
-  link?: ComponentType<LinkProps>;
-}
-
-export function createSectionPage({ title, image, pagePath, link }: Options) {
+export function createSectionPage({
+  title,
+  image,
+  pagePath,
+  link,
+  description,
+  imagePosition,
+}: Options) {
   const Link = link ?? createLink(pagePath);
 
   return function Page(this: void, { content, sections, current }: Props) {
     return (
-      <Header title={title} image={image}>
+      <Header
+        title={title}
+        image={image}
+        description={description}
+        imagePosition={imagePosition}
+      >
         <OrganizedContent
           sections={sections}
           id={sections[current].id}

components/Pre.module.css

@@ -0,0 +1,6 @@
+.pre {
+  padding: calc(10rem / 16);
+  background: var(--code-background);
+  overflow-x: auto;
+  border-radius: calc(5rem / 16);
+}

components/Pre.tsx

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

components/TechTalkCard.module.css

@@ -24,11 +24,31 @@
   font-style: normal;
   margin-top: 0;
   margin-bottom: 0;
-  color: var(--blue-2);
+  color: var(--primary-accent);
+}
+
+.content h2,
+.content h3,
+.content h4 {
+  font-size: calc(18rem / 16);
 }
 
 @media only screen and (max-width: calc(768rem / 16)) {
   .card {
     flex-direction: column;
   }
+
+  .card aside {
+    margin: 0;
+    margin-bottom: 1rem;
+    flex: unset;
+  }
+
+  .card aside img {
+    margin: 0;
+  }
+
+  .content ul {
+    padding-left: 1rem;
+  }
 }

components/TechTalkCard.tsx

@@ -1,26 +1,57 @@
 import React, { ReactNode } from "react";
 
 import { Image } from "./Image";
+import { Link } from "./Link";
 
 import styles from "./TechTalkCard.module.css";
 
+interface DownloadLink {
+  file: string;
+  type: string;
+  size?: string;
+}
+
 interface TechTalkProps {
-  name: string;
-  poster?: string;
+  title: string;
+  presentors: string[];
+  poster: string;
+  links: DownloadLink[];
   children: ReactNode;
 }
 
-export function TechTalkCard({ name, poster, children }: TechTalkProps) {
+export function TechTalkCard({
+  title,
+  poster,
+  presentors,
+  links,
+  children,
+}: TechTalkProps) {
   return (
     <article className={styles.card}>
       <aside>
-        {poster && <Image alt={name} src={poster} />}
-        {!poster && <div className={styles.spacer}></div>}
+        <Image
+          alt={`Thumbnail of tech talk by ${presentors.join(", ")}: ${title}`}
+          src={poster}
+        />
       </aside>
       <section className={styles.content}>
-        <h1>{name}</h1>
+        <h1>{title}</h1>
         <div>{children}</div>
+
+        <h2>Download:</h2>
+        <ul>
+          {links.map((link) => (
+            <li key={link.file + link.type}>
+              <DownloadLink {...link} />
+            </li>
+          ))}
+        </ul>
       </section>
     </article>
   );
 }
+
+function DownloadLink({ file, type, size }: DownloadLink) {
+  const text = size ? `${type} (${size})` : type;
+  return <Link href={file}>{text}</Link>;
+}

components/Theme.tsx

@@ -38,6 +38,8 @@ export const PALETTE_NAMES = [
   "--input-placeholder-text",
   "--input-text",
 
+  "--code-background",
+
   "--navbar-page-overlay",
 ] as const;
 

components/playground.tsx

@@ -245,9 +245,13 @@ export function OrganizedContentDemo() {
 }
 
 export function TechTalkDemo() {
+  const poster =
+    tempTechTalkMetadata.thumbnails.large ??
+    tempTechTalkMetadata.thumbnails.small;
+
   return (
     <div>
-      <TechTalkCard {...tempTechTalkMetadata}>
+      <TechTalkCard {...tempTechTalkMetadata} poster={poster}>
         <TempTechTalk />
       </TechTalkCard>
     </div>
@@ -257,15 +261,18 @@ export function TechTalkDemo() {
 export function MiniTechTalkDemo() {
   return (
     <div className={styles.miniTechTalkDemo}>
-      <MiniTechTalkCard {...tempTechTalkMetadata}>
-        <TempTechTalk />
-      </MiniTechTalkCard>
-      <MiniTechTalkCard {...tempTechTalkMetadata}>
-        <TempTechTalk />
-      </MiniTechTalkCard>
-      <MiniTechTalkCard {...tempTechTalkMetadata}>
-        <TempTechTalk />
-      </MiniTechTalkCard>
+      <MiniTechTalkCard
+        {...tempTechTalkMetadata}
+        poster={tempTechTalkMetadata.thumbnails.small}
+      />
+      <MiniTechTalkCard
+        {...tempTechTalkMetadata}
+        poster={tempTechTalkMetadata.thumbnails.small}
+      />
+      <MiniTechTalkCard
+        {...tempTechTalkMetadata}
+        poster={tempTechTalkMetadata.thumbnails.small}
+      />
     </div>
   );
 }

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

@@ -5,4 +5,4 @@ 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.
 
-Changes to the Code of Conduct are governed by the Club's [constitution](https://csclub.uwaterloo.ca/about/constitution).
+Changes to the Code of Conduct are governed by the Club's [constitution](/about/constitution).

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

@@ -3,4 +3,4 @@ title: Contact Information
 index: 9
 ---
 
-- The Computer Science Club [Officers can be contacted as a whole](https://csclub.uwaterloo.ca/about/).
+- The Computer Science Club [Officers can be contacted as a whole](/about).

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

@@ -5,7 +5,7 @@ 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](https://csclub.uwaterloo.ca/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](https://csclub.uwaterloo.ca/about/exec#advisor).
+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).
 
 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/constitution/code-of-conduct.md

@@ -3,6 +3,6 @@ title: 12. Code of Conduct
 index: 12
 ---
 
-1. The Club has a [Code of Conduct](https://csclub.uwaterloo.ca/about/code-of-conduct).
-2. The [scope of the Code of Conduct](https://csclub.uwaterloo.ca/about/code-of-conduct/scopes-and-spaces) is specified by the 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.
 3. Changes to the Code of Conduct are governed by the same rules as changes to the Constitution.

content/advice/academic-advice.mdx

@@ -0,0 +1,16 @@
+## 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

@@ -0,0 +1,98 @@
+## 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

@@ -0,0 +1,42 @@
+## 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/get-involved.mdx

@@ -14,10 +14,10 @@ a bunch of ways you can join and help out.
 1. Drop by our office in **MC 3036/3037** with
     - your WatCard, and
     - $2 for term that you would like to pay for
-2. Sign our [Machine Usage Agreement](https://csclub.uwaterloo.ca/services/machine_usage) 
+2. Sign our [Machine Usage Agreement](/resources/machine-usage-agreement) 
 
 That's all! After your account created, you'll have access to all the
-[services](https://csclub.uwaterloo.ca/services/) available to members.
+[services](/resources/services) available to members.
 
 #### Membership Renewal
 
@@ -36,7 +36,7 @@ University of Waterloo email address with the following:
 1. a scan or photograph copy of your **WatCard**,
 2. your **WatIAM userid**, and
 3. your acknowledgement of having read, understood, and agreeing with our 
-[Machine Usage Agreement](https://csclub.uwaterloo.ca/services/machine_usage).
+[Machine Usage Agreement](/resources/machine-usage-agreement).
 
 #### Membership Renewal
 
@@ -82,4 +82,4 @@ Each term the CSC holds elections to determine the executive council.
 
 To find out when and where the next elections will be held, keep an eye on on the [News](/).
 
-For details on the elections, see the [Constitution](https://csclub.uwaterloo.ca/about/constitution).
+For details on the elections, see the [Constitution](/about/constitution).

content/playground/temp.talk.mdx

@@ -1,19 +1,67 @@
 export const metadata = {
-  name: "Tech Talk Title",
-  short: "Learn how React works and make your own version!",
-  poster: "/images/playground/alt-tab.jpg",
+  slug: "not-a-valid-slug",
+  title: "1989 Bill Gates Talk on Microsoft",
+  presentors: ["Bill Gates"],
+  thumbnails: {
+    small: "/images/playground/alt-tab.jpg",
+    large: "/images/playground/alt-tab.jpg",
+  },
+  links: [
+    {
+      file: "http://mirror.csclub.uwaterloo.ca/csclub/bill-gates-1989.mp3",
+      type: "mp3",
+      size: "85M",
+    },
+    {
+      file: "http://mirror.csclub.uwaterloo.ca/csclub/bill-gates-1989.flac",
+      type: "flac",
+      size: "540M",
+    },
+    {
+      file: "http://mirror.csclub.uwaterloo.ca/csclub/bill-gates-1989.ogg",
+      type: "ogg",
+      size: "56M",
+    },
+    {
+      file: "http://mirror.csclub.uwaterloo.ca/csclub/bill-gates-1989.wav",
+      type: "wav",
+      size: "945M",
+    },
+  ]
 };
 
-You've got a game, but you didn't write it. You're running it by emulating the machine it was meant to run on, and the machine it was
-meant to run on never had support for networking. Now, you want to play with your friend, over the Internet. Oh, and it's not
-acceptable to incur any latency between your controller and the game while we're at it. Surely that can't be possible, right?
-Wrong. This talk will discuss the re-emulation technique for netplay used commercially by a system called GGPO and freely in
-an emulator frontend called RetroArch, and how similar techniques can be applied to make networking work in other scenarios
-it was never meant for. This will be an unprepared, impromptu talk with no slides, so it should either be a fascinating dive
-into a little-heard-of technique, or an impenetrable mess of jargon and algorithms. Either way, it should be fun. Professor
-Richards is the maintainer of the netplay infrastructure for RetroArch, a popular emulator frontend for multiple platforms.
+Bill Gates discusses the software and computer industry, and how Microsoft has contributed. Gates also discusses his views on the future of the computing industry. The talk was recorded in 1989 but was only recently digitized.
 
-# Download
+Topics include:
 
-- BitTorrent:[Netplay in Emulators (mp4)]
-- HTTP (web browser):[Netplay in Emulators (mp4)]
+- The start and history of the microcomputer industry
+- Microsoft BASIC and the Altair 880 computer
+- The transition from 8-bit to 16-bit computers
+- Microsoft's history with IBM
+- 640k memory barrier and 16-bit architectures
+- 32-bit 386 and 486 architectures
+- RISC and multi-processor machines
+- EGA graphics and WYSIWYG editors
+- Decreasing cost of memory, harddisks and hardware in general
+- The importance and future of the mouse
+- Object-oriented programming
+- MS-DOS and OS/2
+- Multi-threaded and multi-application systems
+- Synchronization in multi-threaded applications
+- Diskette-based software
+- UNIX standardization and POSIX
+- History of the Macintosh and Microsoft' involvement
+- Involvement of Xerox in graphical user interfaces
+- Apple vs. Microsoft lawsuit regarding user interfaces
+- OS/2 future as a replacement for MS-DOS
+- Microsoft Office on Macintosh
+- Thin/dumb clients
+- Compact discs
+- Multimedia applications
+- Gates' current role at Microsoft
+
+<!-- -->
+
+The following picture was taken after the talk (click for higher-res).
+
+[![null](<http://mirror.csclub.uwaterloo.ca/csclub/bill-gates-1989.jpg>)](<http://mirror.csclub.uwaterloo.ca/csclub/bill-gates-1989-big.jpg>)

content/resources/machine-usage-agreement/acceptable-and-unacceptable-use.md

@@ -0,0 +1,8 @@
+---
+title: Acceptable and Unacceptable Use
+index: 3
+---
+
+The CSC machines are intended for research, personal projects, and general use in accordance with the aims of the CSC (see the [CSC Constitution](/about/constitution) for further details). Projects that are of interest to the CSC may be given special priority by the CSC Systems Committee.
+
+Users must adhere to the CSC's policies concerning machine usage.

content/resources/machine-usage-agreement/club-accounts.md

@@ -0,0 +1,24 @@
+---
+title: Club Accounts
+index: 7
+---
+
+The club accounts policy is divided into the following 2 sections:
+
+1. Access Control
+1. Responsibility and Accountability
+
+## Access Control
+
+_Note: For the given section, any mention of the club, except in direct reference to the Computer Science Club, will refer to a club other than the CSC, which has, or requests, an account on a Computer Science Club machine._
+
+Clubs are given accounts and provided with an e-mail and WWW pages, but are subject to the following to certain rules. They are as follows:
+
+1. The club account is subject to all restrictions of a users account, except that it is a shareable account.
+1. The club members must have regular user accounts on the CSC machine that the club account will be on. If the club member does not already have such an account, one will be created to allow the member to manage the club account.
+1. The members of the club with access to the club account shall be known to the CSC Systems Administrator to ensure that these people are aware of this section of the user agreement.
+1. The club members with access to the club account shall not grant access to any other members by any means that are available to them, other than approaching the CSC System Administrator and requesting the change of access.
+
+## Responsibility and Accountability
+
+The account is the responsibility of the members who have access. If the resources owned by the club account are found to be in violation of any policy/rule/law of any of, but not limited to, the Computer Science Club, MFCF, the University of Waterloo, or any relevant law enforcement agency, then the members with access will be held **equally** responsible for that action.

content/resources/machine-usage-agreement/definitions.md

@@ -0,0 +1,43 @@
+---
+title: Definitions
+index: 8
+---
+
+CSC
+
+- The University of Waterloo [Computer Science Club](/) whose office is located in room 3036/3037 of Mathematics and Computer Building (UW campus), telephone number (519) 888-4657 x3870.
+
+CSC Network
+
+- The network of computer hardware and peripherals owned by, rented to, on loan to, or otherwise under the control of the CSC.
+
+MFCF
+
+- The [Math Faculty Computing Facility](http://www.math.uwaterloo.ca/mfcf/) at the University of Waterloo.
+
+Machine
+
+- Computer, terminal or other piece of hardware.
+- Non-CSC machines include MFCF's xterms and printers.
+
+Systems Committee
+
+- An appointed body responsible for the operation of the CSC network and the software that runs on it. A complete description is available in the [CSC Constitution](/about/constitution).
+
+Network Bandwidth
+
+- The percentage of bytes per unit of time that can be handled by the network(s) in question. These networks include the University of Waterloo on-campus network and the Internet.
+
+Computing Resources
+
+- Resources the CSC considers limited include
+  - Public temporary disk space
+  - Swap space
+  - Other commonly held disk space (which may include the home file system)
+  - inodes
+  - Memory
+  - CPU time
+  - Processes
+  - TTYs and pseudo-TTYs
+  - Network bandwidth
+  - Ports

content/resources/machine-usage-agreement/rights-of-syscom-and-exec.md

@@ -0,0 +1,10 @@
+---
+title: Rights of the Systems Committee and the CSC Executive
+index: 6
+---
+
+The Systems Committee may examine any files or programs believed to be out of control or in violation of the usage policies for the CSC network. Examination of a program includes examination of the running process and its binary. Files believed to be the data or source to the process may also be examined. The process may be killed, stopped or otherwise interrupted at the discretion of the Systems Committee. If the Systems Committee takes any of the above actions, the owner of the process will be notified.
+
+The Systems Committee may at any time revoke a user's permission to access an account provided that a written (possibly electronic) explanation is given. Cause for removal of access to an account includes, but is not limited to, violation of the machine usage policy. In the event of a dispute, a user whose account has been revoked may appeal to the CSC Executive for its reinstatement, as per the [CSC Constitution](/about/constitution).
+
+The CSC Executive has the right to update any policy, including this one, with reasonable notice.

content/resources/machine-usage-agreement/security.md

@@ -0,0 +1,13 @@
+---
+title: Security
+index: 5
+---
+
+Users may not attempt to gain access to accounts other than those which they have been permitted to use. Similarly, users may not attempt to access other users' private files, nor may they attempt to find out the password of any account.
+
+An account may only be used by the person assigned to it. *Do not tell your password to anybody, or let anyone else use your account*. Users should consider the security implications of their actions. For example:
+
+- Passwords for accounts on CSC machines should not be used on other machines
+- Accounts not on MFCF or CSC machines should not be granted automatic access to CSC accounts (e.g. via .rhosts files).
+
+The appropriate members of the systems committee must be notified immediately in the event that a security problem is found. Naturally, the problem should neither be exploited nor made public until it can be corrected.

content/resources/machine-usage-agreement/summary.md

@@ -0,0 +1,31 @@
+---
+title: Summary
+index: 1
+---
+
+This is a brief version of the usage policy. Everyone who receives an account on one of the CS Club machines must sign the full Machine Usage Agreement, and this summary lists the things that the users will agree to.
+
+## Use of accounts
+
+- One person per account only.
+- Usage intended for personal or course work.
+- Don't abuse system resources.
+- Use the machines in a respectful manner.
+
+## Security
+
+- Your `.rhosts` file should only contain your user IDs on CSC and MFCF machines.
+- Don't use passwords that you use elsewhere, and *never* tell anyone your password.
+- If you find security holes, report them to the [Systems Committee](mailto:syscom@csclub.uwaterloo.ca). Intentional malpractice will not be tolerated.
+
+## The Systems Committee may
+
+- Examine programs that seem to be violating policy or security; this includes the following, *when necessary*,
+- Remove accounts with short/no notice and provide an reasonable explanation to the user as to why their account was removed.
+
+## General
+
+- You are completely responsible for your actions.
+- Don't do anything illegal, damaging, or unethical.
+- The executive team can change their policies with reasonable notice.
+- CS Club machines will not be up at all times, and may crash while you are using them.

content/resources/machine-usage-agreement/usage-policy.md

@@ -0,0 +1,15 @@
+---
+title: Usage Policy
+index: 2
+---
+
+Everyone who receives an account on one of the CS Club machines must sign the agreement in the final section. This document does not state who will be allowed accounts on CS Club machines, the normal expiry period of accounts, nor any other similar matters. Further, this policy does not, in general, guarantee any rights to users.
+
+_Note: that in the following sections, the term "user" implies a user of a CS Club machine, unless otherwise specified._
+
+The usage policy is divided into the following sections:
+
+1. [Acceptable and Unacceptable Use](/resources/machine-usage-agreement/acceptable-and-unacceptable-use)
+1. [User Responsibilities](/resources/machine-usage-agreement/user-responsibilities)
+1. [Security](/resources/machine-usage-agreement/security)
+1. [Rights of the Systems Committee and the CSC Executive](/resources/machine-usage-agreement/rights-of-syscom-and-exec)

content/resources/machine-usage-agreement/user-agreement.md

@@ -0,0 +1,20 @@
+---
+title: User Agreement
+index: 9
+---
+
+I have read and understood the usage policy of 29 August 2007, and I agree to use my account(s) on the CSC network in accordance with this policy. I am responsible for all actions taken by anyone using this account. Furthermore, I accept full legal responsibility for all of the actions that I commit using the CSC network according to any and all applicable laws.
+
+I understand that with little or no notice machines on the CSC network and resources on these machines may become unavailable. Machines may shut down while users are using them, and I will not hold the CSC responsible for lost time or data.
+
+```
+Name:         ___________________________
+
+Signature:    ___________________________
+
+Office Staff: ___________________________
+
+Signature:    ___________________________
+
+Date:         ___________________________
+```

content/resources/machine-usage-agreement/user-responsibilities.md

@@ -0,0 +1,10 @@
+---
+title: User Responsibilities
+index: 4
+---
+
+Users must be responsible for their behaviour. Users, and not the CSC, will be held accountable for any of their illegal, damaging or unethical actions. Such actions are obviously not permitted on CSC machines.
+
+Users must act responsibly, and the needs of others with regard to computing resources must be considered at all times. In particular, no user should use any resource to an extent that other users are prevented from similarly using that resource, and no user's actions shall disrupt the work of other users.
+
+Users must also abide by the usage policies of all machines that they connect to from CSC machines, or use to connect to CSC machines. It is the users' responsibility to check the policies of *all* machines that they connect to.

content/resources/services/club-web-hosting.md

@@ -0,0 +1,11 @@
+---
+title: Club Web Hosting
+index: 4
+---
+
+If you're a club and looking for web space, the CS Club is the place go.
+
+- Clubs have access to the same member services (e.g. disk quota, databases).
+- We also offer club.uwaterloo.ca domain registration.
+
+For more details, see the club hosting [wiki page](http://wiki.csclub.uwaterloo.ca/Club_Hosting).

content/resources/services/cs-club-email.md

@@ -0,0 +1,12 @@
+---
+title: CS Club Email
+index: 2
+---
+
+Members also receive a **username@csclub.uwaterloo.ca** email address.
+
+- Mailboxes are considered as part of your disk quota, so your mailbox may grow up to the amount of disk quota you have.
+- Attachments of any file size or type may be sent.
+- Our mail server runs a POP3, IMAP, and SMTP server with SSL/TLS enabled.
+
+You can also access your mail via a [Roundcube web mail client](https://mail.csclub.uwaterloo.ca/).

content/resources/services/in-office-books.md

@@ -0,0 +1,6 @@
+---
+title: In-Office Books
+index: 9
+---
+
+The CS Club maintains an [extensive collection of Computer Science-related books](http://csclub.uwaterloo.ca/library/). Feel free to come by the office to take a look at our library.

content/resources/services/irc.md

@@ -0,0 +1,10 @@
+---
+title: IRC
+index: 6
+---
+
+We host an instance of [The Lounge](https://chat.csclub.uwaterloo.ca/) for all of our members. The Lounge is a web-based IRC client which is simple to setup and use. It also has a Progressive Web App available for mobile devices.
+
+We also host an instance of [ZNC](https://znc.csclub.uwaterloo.ca/) for those who wish to use their own IRC client but do not want to run their own bouncer. ZNC saves your messages persistently so you do not have to keep your IRC client running 24/7.
+
+For more information, see [this page](https://wiki.csclub.uwaterloo.ca/How_to_IRC) on our wiki.

content/resources/services/live-streaming.md

@@ -0,0 +1,8 @@
+---
+title: Live Streaming
+index: 8
+---
+
+We host an instance of [Icecast](https://icy.csclub.uwaterloo.ca/), which can stream live audio and video. We have successfully streamed live events to Icecast using OBS Studio. Latency usually ranges between 5-10 sec.
+
+If you are interested in live streaming via Icecast, please contact the [Systems Committee](mailto:syscom@csclub.uwaterloo.ca) (syscom at csclub dot uwaterloo dot ca).

content/resources/services/machine-accounts.md

@@ -0,0 +1,21 @@
+---
+title: Machine Accounts
+index: 1
+---
+
+The main benefit of becoming a CS Club member is to get access to our various machines.
+
+- We offer a large range of hardware, including Alpha, MIPS, UltraSPARC, i386, and AMD64. Our primary development machine, high-fructose-corn-syrup, is a 4x AMD Opteron (64 cores at 2.4 GHz) with 64 GiB of RAM, and it easily outperforms the Linux machines available through CSCF.
+- Most of our machines are connected via gigabit ethernet. We offer 4 GB of disk quota that is accessible across all of our machines. Our wiki contains a [full machine list](https://wiki.csclub.uwaterloo.ca/wiki/Machine_List).
+
+SSH key fingerprints for caffeine (our main server) can be found below:
+
+```
+RSA: 0c:a3:66:52:10:19:7e:d6:9c:96:3f:60:c1:0c:d6:24
+ED25519: 9e:a8:11:bb:65:1a:31:23:38:6b:94:9d:83:fd:ba:b1
+```
+
+<!-- TODO: this page doesn't exist -->
+[SSH key fingerprints for other machines](/services/fingerprints)
+
+<button isLink size="small" href="/resources/machine-usage-agreement">Machine Usage Agreement</button>

content/resources/services/mailing-lists.md

@@ -0,0 +1,10 @@
+---
+title: Mailing Lists
+index: 10
+---
+
+Our [csc-general mailing list](http://mailman.csclub.uwaterloo.ca/listinfo/csc-general) informs members about our current events.
+
+Our [csc-industry mailing list](http://mailman.csclub.uwaterloo.ca/listinfo/csc-industry) allows students to opt-in to receiving emails from industry representatives.
+
+- Corporate events, job postings, info sessions, and related events may be posted here.

content/resources/services/open-source-software-mirror.md

@@ -0,0 +1,6 @@
+---
+title: Open-Source Software Mirror
+index: 5
+---
+
+The CSC runs a mirror of popular open source software. The [mirror](http://mirror.csclub.uwaterloo.ca/) has a list of available software. More information is available on our [wiki article](http://wiki.csclub.uwaterloo.ca/Mirror).

content/resources/services/video-conferencing.md

@@ -0,0 +1,8 @@
+---
+title: Video Conferencing
+index: 7
+---
+
+We host an instance of [BigBlueButton](https://bbb.csclub.uwaterloo.ca/), a free and open-source video conferencing platform. BigBlueButton offers many useful features such as a multi-user whiteboard, breakout rooms, shared notes, and more.
+
+To get the most out of BigBlueButton, you can watch some tutorial videos [here](https://bigbluebutton.org/html5).

content/resources/services/web-hosting.md

@@ -0,0 +1,17 @@
+---
+title: Web Hosting
+index: 3
+---
+
+Many of members take advantage of our web hosting service. Our web server runs on Apache, and has PHP, Python, and Perl modules installed. We also have MySQL and PostgreSQL databases available upon request.
+
+If you are already a member, you can enable your web space as follows:
+
+1. Log in to one of the CSC machines (e.g. csclub.uwaterloo.ca) using an [SSH](http://www.openssh.com/) client (e.g. [PuTTY](http://www.chiark.greenend.org.uk/~sgtatham/putty/) on Windows or [OpenSSH](http://www.openssh.com/) on \*nix).
+2. Create a directory called `www` in your home directory by typing `mkdir ~/www`. (This directory may already exist.)
+3. Put the files you want on your web page in your new `www` directory. `index.{html,php}` will be loaded by default. You can upload files using an scp client (e.g. [WinSCP](http://winscp.net/) on Windows or [OpenSSH](http://www.openssh.com/) on \*nix).
+4. Visit your new web page at `http://csclub.uwaterloo.ca/~username/`, where `username` should be replaced by your username.
+
+Examples of configurations for more advanced web hosting setups can be found in [this wiki article](https://wiki.csclub.uwaterloo.ca/Web_Hosting).
+
+If you're still having trouble getting your page up, contact the [Systems Committee](mailto:syscom@csclub.uwaterloo.ca).

content/tech-talks/1989-bill-gates-talk-on-microsoft.md

@@ -0,0 +1,58 @@
+---
+index: 55
+title: '1989 Bill Gates Talk on Microsoft'
+presentors:
+  - 'Bill Gates'
+thumbnails:
+  small: 'http://mirror.csclub.uwaterloo.ca/csclub/audio-file.png'
+  large: 'http://mirror.csclub.uwaterloo.ca/csclub/audio-file.png'
+links:
+  - file: 'http://mirror.csclub.uwaterloo.ca/csclub/bill-gates-1989.mp3'
+    type: 'mp3'
+    size: '85M'
+  - file: 'http://mirror.csclub.uwaterloo.ca/csclub/bill-gates-1989.flac'
+    type: 'flac'
+    size: '540M'
+  - file: 'http://mirror.csclub.uwaterloo.ca/csclub/bill-gates-1989.ogg'
+    type: 'ogg'
+    size: '56M'
+  - file: 'http://mirror.csclub.uwaterloo.ca/csclub/bill-gates-1989.wav'
+    type: 'wav'
+    size: '945M'
+---
+
+Bill Gates discusses the software and computer industry, and how Microsoft has contributed. Gates also discusses his views on the future of the computing industry. The talk was recorded in 1989 but was only recently digitized.
+
+Topics include:
+
+- The start and history of the microcomputer industry
+- Microsoft BASIC and the Altair 880 computer
+- The transition from 8-bit to 16-bit computers
+- Microsoft's history with IBM
+- 640k memory barrier and 16-bit architectures
+- 32-bit 386 and 486 architectures
+- RISC and multi-processor machines
+- EGA graphics and WYSIWYG editors
+- Decreasing cost of memory, harddisks and hardware in general
+- The importance and future of the mouse
+- Object-oriented programming
+- MS-DOS and OS/2
+- Multi-threaded and multi-application systems
+- Synchronization in multi-threaded applications
+- Diskette-based software
+- UNIX standardization and POSIX
+- History of the Macintosh and Microsoft' involvement
+- Involvement of Xerox in graphical user interfaces
+- Apple vs. Microsoft lawsuit regarding user interfaces
+- OS/2 future as a replacement for MS-DOS
+- Microsoft Office on Macintosh
+- Thin/dumb clients
+- Compact discs
+- Multimedia applications
+- Gates' current role at Microsoft
+
+<!-- -->