Merge branch 'main' into feat/shapes-background

.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
 
@@ -38,10 +45,7 @@ steps:
     TOKEN:
       from_secret: STAGING_TOKEN
   commands:
-  - 'curl -XPOST -H "Authorization: $TOKEN" "https://csclub.uwaterloo.ca/~a3thakra/update-csc/"'
-  when:
-    branch:
-    - main
+  - 'curl -XPOST -H "Authorization: $TOKEN" -H "X-Branch: $DRONE_BRANCH" "https://csclub.uwaterloo.ca/~a3thakra/update-csc/"'
 
 trigger:
   event:

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

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

@@ -28,8 +28,10 @@ export interface Options {
   pagePath: string;
   title: string;
   image: string;
-  getShapesConfig: GetShapesConfig;
+  getShapesConfig?: GetShapesConfig;
+  imagePosition?: "left" | "right";
   link?: ComponentType<LinkProps>;
+  description?: string;
 }
 
 export function createReadAllPage({
@@ -38,6 +40,8 @@ export function createReadAllPage({
   pagePath,
   getShapesConfig,
   link,
+  description,
+  imagePosition,
 }: Options) {
   const Link = link ?? createLink(pagePath);
 
@@ -53,7 +57,12 @@ export function createReadAllPage({
     );
 
     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,15 +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 { GetShapesConfig } from "../ShapesBackground";
+import { createLink, OrganizedContent } from "@/components/OrganizedContent";
 
 import { Header } from "./Header";
+import { Options } from "./ReadAll";
 
 interface Section {
   id: string;
@@ -22,26 +17,25 @@ export interface Props {
   current: number;
 }
 
-export interface Options {
-  title: string;
-  pagePath: string;
-  image: string;
-  getShapesConfig: GetShapesConfig;
-  link?: ComponentType<LinkProps>;
-}
-
 export function createSectionPage({
   title,
   image,
   pagePath,
   getShapesConfig,
   link,
+  description,
+  imagePosition,
 }: Options) {
   const Link = link ?? createLink(pagePath);
 
   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/Theme.tsx

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

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

pages/_app.css

@@ -26,6 +26,8 @@ body {
   --input-placeholder-text: #bbbbbb;
   --input-text: #6b6b6b;
 
+  --code-background: #f0f0f0;
+
   --navbar-page-overlay: #787878b2;
 
   background-color: var(--primary-background);

pages/_app.tsx

@@ -3,11 +3,14 @@ import { NextComponentType, NextPageContext } from "next";
 import { AppProps as DefaultAppProps } from "next/app";
 import React, { ComponentType, ReactNode } from "react";
 
+import { Button } from "@/components/Button";
+import { Code } from "@/components/Code";
 import { DefaultLayout } from "@/components/DefaultLayout";
 import { Footer } from "@/components/Footer";
 import { HorizontalLine } from "@/components/HorizontalLine";
 import { Link } from "@/components/Link";
 import { Navbar } from "@/components/Navbar";
+import { Pre } from "@/components/Pre";
 import {
   GetShapesConfig,
   ShapesBackground,
@@ -24,7 +27,15 @@ export default function App({ Component, pageProps }: AppProps): JSX.Element {
 
   return (
     <ThemeProvider>
-      <MDXProvider components={{ a: Link, hr: HorizontalLine }}>
+      <MDXProvider
+        components={{
+          a: Link,
+          hr: HorizontalLine,
+          button: Button,
+          pre: Pre,
+          inlineCode: Code,
+        }}
+      >
         <div className={styles.appContainer}>
           <Navbar />
           {/* Wrapping content with a div to allow for a display: block parent */}

pages/about/code-of-conduct.tsx

@@ -3,12 +3,12 @@ import path from "path";
 import { createReadAllPage } from "@/components/OrganizedContent/ReadAll";
 import { createReadAllGetStaticProps } from "@/components/OrganizedContent/static";
 
-export const CODE_OF_CONDUCT_PAGE = path.join("about", "code-of-conduct");
-
-export default createReadAllPage({
+export const options = {
   title: "Code of Conduct",
   image: "images/code-of-conduct.svg",
-  pagePath: CODE_OF_CONDUCT_PAGE,
-});
+  pagePath: path.join("about", "code-of-conduct"),
+};
+
+export default createReadAllPage(options);
 
-export const getStaticProps = createReadAllGetStaticProps(CODE_OF_CONDUCT_PAGE);
+export const getStaticProps = createReadAllGetStaticProps(options.pagePath);

pages/about/code-of-conduct/[section].tsx

@@ -4,13 +4,9 @@ import {
   createSectionGetStaticProps,
 } from "@/components/OrganizedContent/static";
 
-import { CODE_OF_CONDUCT_PAGE } from "../code-of-conduct";
+import { options } from "../code-of-conduct";
 
-export default createSectionPage({
-  title: "Code of Conduct",
-  image: "images/code-of-conduct.svg",
-  pagePath: CODE_OF_CONDUCT_PAGE,
-});
+export default createSectionPage(options);
 
-export const getStaticProps = createSectionGetStaticProps(CODE_OF_CONDUCT_PAGE);
-export const getStaticPaths = createSectionGetStaticPaths(CODE_OF_CONDUCT_PAGE);
+export const getStaticProps = createSectionGetStaticProps(options.pagePath);
+export const getStaticPaths = createSectionGetStaticPaths(options.pagePath);

pages/about/constitution.tsx

@@ -7,14 +7,14 @@ import {
   aboutShapesConfig,
 } from "@/components/ShapesBackground";
 
-export const CONSTITUTION_PAGE = path.join("about", "constitution");
-
-export default createReadAllPage({
+export const options = {
+  pagePath: path.join("about", "constitution"),
   title: "Constitution",
   image: "images/constitution.svg",
-  pagePath: CONSTITUTION_PAGE,
   getShapesConfig: () =>
     window.innerWidth <= 768 ? mobileShapesConfig : aboutShapesConfig,
-});
+};
+
+export default createReadAllPage(options);
 
-export const getStaticProps = createReadAllGetStaticProps(CONSTITUTION_PAGE);
+export const getStaticProps = createReadAllGetStaticProps(options.pagePath);

pages/about/constitution/[section].tsx

@@ -3,20 +3,10 @@ import {
   createSectionGetStaticPaths,
   createSectionGetStaticProps,
 } from "@/components/OrganizedContent/static";
-import {
-  mobileShapesConfig,
-  aboutShapesConfig,
-} from "@/components/ShapesBackground";
 
-import { CONSTITUTION_PAGE } from "../constitution";
+import { options } from "../constitution";
 
-export default createSectionPage({
-  title: "Constitution",
-  image: "images/constitution.svg",
-  pagePath: CONSTITUTION_PAGE,
-  getShapesConfig: () =>
-    window.innerWidth <= 768 ? mobileShapesConfig : aboutShapesConfig,
-});
+export default createSectionPage(options);
 
-export const getStaticProps = createSectionGetStaticProps(CONSTITUTION_PAGE);
-export const getStaticPaths = createSectionGetStaticPaths(CONSTITUTION_PAGE);
+export const getStaticProps = createSectionGetStaticProps(options.pagePath);
+export const getStaticPaths = createSectionGetStaticPaths(options.pagePath);

pages/index.tsx

@@ -52,10 +52,7 @@ export default function Home(props: Props) {
           <section className={styles.events}>
             <h1 className={styles.cardsHeading}>Upcoming Events</h1>
             <p className={styles.cardsDescription}>
-              See past events{" "}
-              <Link href="/events/archive">
-                <a title="Events Archive">here</a>
-              </Link>
+              See past events <Link href="/events/archive">here</Link>
             </p>
             <hr className={styles.cardsDividingLine} />
             {props.events.length === 0 ? (
@@ -76,10 +73,7 @@ export default function Home(props: Props) {
             </div>
             {props.moreEvents ? (
               <p>
-                See more upcoming events{" "}
-                <Link href="/events">
-                  <a title="Events">here</a>
-                </Link>
+                See more upcoming events <Link href="/events">here</Link>
               </p>
             ) : null}
           </section>
@@ -87,10 +81,7 @@ export default function Home(props: Props) {
             <h1 className={styles.cardsHeading}>News</h1>
             <p className={styles.cardsDescription}>
               Updates from our execs! <br />
-              See past news{" "}
-              <Link href="/news/archive">
-                <a title="News Archive">here</a>
-              </Link>
+              See past news <Link href="/news/archive">here</Link>
             </p>
             <hr className={styles.cardsDividingLine} />
             {

pages/resources/machine-usage-agreement.tsx

@@ -0,0 +1,18 @@
+import path from "path";
+
+import {
+  createReadAllPage,
+  Options,
+} from "@/components/OrganizedContent/ReadAll";
+import { createReadAllGetStaticProps } from "@/components/OrganizedContent/static";
+
+export const options: Options = {
+  title: "Machine Usage Agreement",
+  // TODO: Different image for this?
+  image: "images/services.svg",
+  pagePath: path.join("resources", "machine-usage-agreement"),
+};
+
+export default createReadAllPage(options);
+
+export const getStaticProps = createReadAllGetStaticProps(options.pagePath);

pages/resources/machine-usage-agreement/[section].tsx

@@ -0,0 +1,12 @@
+import { createSectionPage } from "@/components/OrganizedContent/Section";
+import {
+  createSectionGetStaticPaths,
+  createSectionGetStaticProps,
+} from "@/components/OrganizedContent/static";
+
+import { options } from "../machine-usage-agreement";
+
+export default createSectionPage(options);
+
+export const getStaticProps = createSectionGetStaticProps(options.pagePath);
+export const getStaticPaths = createSectionGetStaticPaths(options.pagePath);

pages/resources/services.mdx

@@ -1 +0,0 @@
-# Services Page

pages/resources/services.tsx

@@ -0,0 +1,20 @@
+import path from "path";
+
+import {
+  createReadAllPage,
+  Options,
+} from "@/components/OrganizedContent/ReadAll";
+import { createReadAllGetStaticProps } from "@/components/OrganizedContent/static";
+
+export const options: Options = {
+  title: "Services",
+  image: "images/services.svg",
+  pagePath: path.join("resources", "services"),
+  description:
+    "Here you can find all the links and instructions to the different resources available to all CSC members!",
+  imagePosition: "right",
+};
+
+export default createReadAllPage(options);
+
+export const getStaticProps = createReadAllGetStaticProps(options.pagePath);

pages/resources/services/[section].tsx

@@ -0,0 +1,12 @@
+import { createSectionPage } from "@/components/OrganizedContent/Section";
+import {
+  createSectionGetStaticPaths,
+  createSectionGetStaticProps,
+} from "@/components/OrganizedContent/static";
+
+import { options } from "../services";
+
+export default createSectionPage(options);
+
+export const getStaticProps = createSectionGetStaticProps(options.pagePath);
+export const getStaticPaths = createSectionGetStaticPaths(options.pagePath);