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

bonnie-team-member-card
b38peng 1 year ago
commit 238ec01ffa
  1. 41
      .drone.yml
  2. 3
      .gitignore
  3. 7
      README.md
  4. 5
      components/Blockquote.module.css
  5. 13
      components/Blockquote.tsx
  6. 10
      components/Button.module.css
  7. 14
      components/EventCard.tsx
  8. 3
      components/EventDescriptionCard.module.css
  9. 4
      components/EventDescriptionCard.tsx
  10. 17
      components/EventSetting.module.css
  11. 8
      components/EventSetting.tsx
  12. 7
      components/Footer.module.css
  13. 8
      components/MiniEventCard.module.css
  14. 10
      components/Navbar.module.css
  15. 14
      components/OrganizedContent.module.css
  16. 128
      components/SocialLinks.tsx
  17. 36
      components/Table.module.css
  18. 9
      components/Table.tsx
  19. 104
      components/playground.module.css
  20. 296
      components/playground.tsx
  21. 16
      content/about/index.mdx
  22. 16
      content/advice/academic-advice.mdx
  23. 98
      content/advice/co-op-advice.mdx
  24. 42
      content/advice/misc-advice.mdx
  25. 2
      content/events/1994/fall/ACM-Style-Programming-Contest.md
  26. 2
      content/events/1994/fall/CSC-Elections.md
  27. 2
      content/events/1994/fall/Exploring-the-Internet.md
  28. 2
      content/events/1994/fall/Game-Theory.md
  29. 2
      content/events/1994/fall/Movie-Outing-Brainstorm.md
  30. 2
      content/events/1994/fall/Prograph-Picture-the-Future.md
  31. 2
      content/events/1994/fall/SIGGRAPH-Video-Night.md
  32. 2
      content/events/1994/fall/UNIX-I-Tutorial.md
  33. 2
      content/events/1994/fall/UNIX-II-Tutorial.md
  34. 2
      content/events/1999/fall/Calculational-Mathematics.md
  35. 2
      content/events/1999/fall/Ctrl-D.md
  36. 2
      content/events/1999/fall/GDB,-Purify-Tutorial.md
  37. 2
      content/events/1999/fall/Homebrew-Processors-and-Integrated-Systems-in-FPGAs.md
  38. 2
      content/events/1999/fall/Living-Laboratories-The-Future-Computing-Environments-at-Georgia-Tech.md
  39. 2
      content/events/1999/fall/Open-Q&A-session.md
  40. 2
      content/events/1999/fall/Proofs-and-Programs.md
  41. 2
      content/events/2000/fall/CSC-Elections.md
  42. 2
      content/events/2000/fall/Realising-the-Next-Generation-Internet.md
  43. 2
      content/events/2000/fall/SIGGraph-Video-Night.md
  44. 2
      content/events/2000/spring/Ctrl-D.md
  45. 2
      content/events/2000/winter/Enterprise-Java-APIs-and-Implementing-a-Web-Portal-(1).md
  46. 2
      content/events/2000/winter/Enterprise-Java-APIs-and-Implementing-a-Web-Portal.md
  47. 2
      content/events/2001/spring/ACM-Style-programming-contest.md
  48. 2
      content/events/2001/winter/ACM-Style-programming-contest.md
  49. 2
      content/events/2001/winter/Executive-elections.md
  50. 2
      content/events/2001/winter/Meeting-#2.md
  51. 2
      content/events/2001/winter/Meeting-#3.md
  52. 2
      content/events/2001/winter/Meeting-#4.md
  53. 2
      content/events/2001/winter/Meeting-#5.md
  54. 2
      content/events/2002/fall/A-GNU-Approach-to-Virtual-Memory-Management-in-a-Multiserver-Operating-System.md
  55. 2
      content/events/2002/fall/Automatic-Memory-Management-and-Garbage-Collection.md
  56. 2
      content/events/2002/fall/Business-Meeting.md
  57. 2
      content/events/2002/fall/Debian-in-the-Enterprise.md
  58. 2
      content/events/2002/fall/F02-elections.md
  59. 2
      content/events/2002/fall/GNULinux-InstallFest-with-KW-LUG-and-UW-DIG.md
  60. 2
      content/events/2002/fall/GNULinux-on-HPPA.md
  61. 2
      content/events/2002/fall/Metaprogramming-GPUs.md
  62. 2
      content/events/2002/fall/Perl-6.md
  63. 2
      content/events/2002/fall/Pints-with-the-Profs.md
  64. 2
      content/events/2002/fall/Samba-and-You.md
  65. 2
      content/events/2002/fall/The-Evil-Side-of-C++.md
  66. 2
      content/events/2002/fall/The-GNU-General-Public-License.md
  67. 2
      content/events/2002/fall/The-Hurd-Interfaces.md
  68. 2
      content/events/2002/fall/Trip-to-York-University.md
  69. 2
      content/events/2002/fall/UNIX-101.md
  70. 2
      content/events/2002/fall/UNIX-102.md
  71. 2
      content/events/2002/fall/UNIX-103.md
  72. 2
      content/events/2002/fall/Video-cards,-Linux-display-drivers-and-the-Kernel-Graphics-Interface-(KGI).md
  73. 2
      content/events/2002/spring/S02-elections.md
  74. 2
      content/events/2002/winter/An-Introduction-to-GNU-Hurd.md
  75. 2
      content/events/2002/winter/Computer-Go,-The-Ultimate.md
  76. 2
      content/events/2002/winter/DVD-Video-Under-Linux.md
  77. 2
      content/events/2002/winter/GnuPGPGP-Keysigning-Party.md
  78. 2
      content/events/2002/winter/UNIX-101-First-Steps-With-UNIX.md
  79. 2
      content/events/2002/winter/Unix-102-Fun-With-UNIX.md
  80. 2
      content/events/2003/fall/.NET-&-Linux-When-Worlds-Collide.md
  81. 2
      content/events/2003/fall/CS-Pints-With-Profs.md
  82. 2
      content/events/2003/fall/CSC-Elections.md
  83. 2
      content/events/2003/fall/Jon-'maddog'-Hall-Free-and-Open-Source-Its-uses-in-Business-and-Education.md
  84. 2
      content/events/2003/fall/Poster-Team-Meeting.md
  85. 2
      content/events/2003/fall/Real-Time-Graphics-Compilers.md
  86. 2
      content/events/2003/fall/UNIX-101-Text-Editors.md
  87. 2
      content/events/2003/fall/UNIX-103-Development-Tools.md
  88. 2
      content/events/2003/spring/A-Brief-History-of-Computer-Science.md
  89. 2
      content/events/2003/spring/Friday-Flicks.md
  90. 2
      content/events/2003/spring/Guelph-Trip.md
  91. 2
      content/events/2003/spring/July-Exec-Meeting.md
  92. 2
      content/events/2003/spring/June-12-Exec-Meeting.md
  93. 2
      content/events/2003/spring/LaTeX-and-Work-Reports.md
  94. 2
      content/events/2003/spring/Mainframes-and-Linux.md
  95. 2
      content/events/2003/spring/May-22-Exec-Meeting.md
  96. 2
      content/events/2003/spring/Pints-with-Profs!.md
  97. 2
      content/events/2003/spring/Sh.md
  98. 2
      content/events/2003/spring/Spring-2003-Elections.md
  99. 2
      content/events/2003/spring/Unix-101-First-Steps-With-Unix.md
  100. 2
      content/events/2003/spring/Unix-102-Fun-With-Unix.md
  101. Some files were not shown because too many files have changed in this diff Show More

@ -4,17 +4,17 @@ type: docker
name: node16
steps:
- name: check-lockfile
- name: install-deps
image: node:16
commands:
- node ./check-lockfile.js
- npm install
- name: install-deps
- name: check-lockfile
image: node:16
depends_on:
- check-lockfile
- install-deps
commands:
- npm install
- npm run check-lockfile
- name: lint
image: node:16
@ -28,12 +28,20 @@ steps:
depends_on:
- install-deps
commands:
- npm run build
- npm run build:web
- name: generate-calendar
image: node:16
depends_on:
- install-deps
commands:
- npm run generate:calendar
- name: export
image: node:16
depends_on:
- build
- generate-calendar
commands:
- npm run export
@ -46,8 +54,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

3
.gitignore vendored

@ -23,3 +23,6 @@
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Calendar is automatically generated
/public/events.ics

@ -18,4 +18,9 @@ How to upgrade npm: `npm i -g npm`
- `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)
- 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`)

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

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

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

@ -7,7 +7,7 @@ import { Link } from "./Link";
import styles from "./EventCard.module.css";
interface BaseProps {
interface EventCardProps {
name: string;
short: string;
date: Date;
@ -15,15 +15,13 @@ interface BaseProps {
location: string;
poster?: string;
registerLink?: string;
permaLink: string;
showDescription?: boolean;
children: ReactNode;
}
type EventCardProps =
| (BaseProps & { showDescription?: false; link: string })
| (BaseProps & { showDescription: true; link?: string });
export function EventCard({
link,
permaLink,
name,
date,
online,
@ -60,8 +58,8 @@ export function EventCard({
<h2>
<EventSetting date={date} online={online} location={location} />
</h2>
{!showDescription && link && (
<Link href={link}>
{!showDescription && (
<Link href={permaLink}>
<span className={styles.mobileLearnMore}>Learn more</span>
</Link>
)}

@ -29,6 +29,9 @@
}
.logo {
display: flex;
justify-content: center;
align-items: center;
width: calc(32rem / 16);
margin-left: auto;
}

@ -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";
@ -15,6 +16,7 @@ interface Props {
date: Date;
poster?: string;
registerLink?: string;
permaLink: string;
}
/**
@ -35,6 +37,7 @@ export function EventDescriptionCard({
date,
online,
registerLink,
permaLink,
}: Props) {
const Icon = getIcon(location);
@ -48,6 +51,7 @@ export function EventDescriptionCard({
<EventSetting date={date} online={online} location={location} />
</h2>
<p className={styles.desc}>{short}</p>
<Link href={permaLink}>Learn more</Link>
<footer>
{registerLink && (

@ -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)) {
.separator {
display: none;
.container {
flex-direction: column;
}
.setting {
display: block;
.separator {
display: none;
}
}

@ -23,12 +23,10 @@ export function EventSetting(props: Props) {
const separator = <span className={styles.separator}> | </span>;
return (
<div>
<time className={styles.setting} dateTime={props.date.toISOString()}>
{date}
</time>
<div className={styles.container}>
<time dateTime={props.date.toISOString()}>{date}</time>
{separator}
<span className={styles.setting}>{time}</span>
<span>{time}</span>
{separator}
{location}
</div>

@ -1,8 +1,7 @@
.footer {
box-sizing: border-box;
background: var(--primary-heading);
height: calc(66rem / 16);
padding: calc(14rem / 16) 0;
padding: 1rem 0;
width: 100%;
}
@ -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);
}
}

@ -45,6 +45,14 @@
list-style: none;
}
.card > summary::marker {
display: none;
}
.card > summary::-webkit-details-marker {
display: none;
}
.dropDownIcon {
fill: var(--primary-accent);
}

@ -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
*/
@ -237,7 +242,7 @@
box-sizing: border-box;
height: 100%;
top: 0;
right: 0;
left: 100%;
overflow: auto;
z-index: 30;
@ -246,7 +251,6 @@
background-color: var(--secondary-background);
transform: translateX(100vw);
transition: 0.5s;
}
@ -364,7 +368,7 @@
}
.show.navMobileBackground + .navMenuWrapper {
transform: translateX(0);
transform: translateX(-100%);
}
.rotate {

@ -6,6 +6,7 @@
display: flex;
flex-direction: column;
width: 100%;
overflow-x: auto;
}
.content h1 {
@ -21,10 +22,14 @@
}
.nav {
top: calc(20rem / 16);
position: sticky;
height: 100%;
margin: calc(8rem / 16) calc(32rem / 16) 0 0;
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(--primary-heading);
font-weight: 500;
}
@ -106,6 +111,7 @@
.arrow {
fill: var(--primary-accent);
margin-top: calc(27rem / 16);
flex-shrink: 0;
}
.prevArrow {
@ -187,9 +193,9 @@
top: 0;
left: 0;
overflow-y: auto;
z-index: 30;
height: 100%;
margin: 0;
background: var(--primary-accent-lighter);
width: calc(288rem / 16);

@ -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 (
@ -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="#1481E3" />
<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>
);
}
@ -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="#1481E3" />
<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>
);
}

@ -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(--secondary-accent-light);
}
.table tbody tr {
text-align: center;
vertical-align: top;
}
.table tbody tr:nth-child(odd) {
background: var(--primary-accent-lightest);
}
.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);
}

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

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

@ -1,296 +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 }) => (
<>
<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 numberedSections = false;
const readAllSection = createReadAllSection(
constitution.map(({ id, title, Content }) => ({
Content,
section: { id, title },
})),
true,
numberedSections
);
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"
numberedSections={numberedSections}
>
<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>
);
}

@ -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>
@ -73,11 +73,11 @@ 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).

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

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

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

@ -1,7 +1,7 @@
---
name: 'ACM-Style Programming Contest'
short: 'No description available'
date: 'Sat Oct 15 1994 11:00:00 GMT-0400 (Eastern Daylight Time)'
date: 'Sat Oct 15 1994 10:00:00 GMT-0400 (Eastern Daylight Time)'
online: false
location: 'MC 3022'
---

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

@ -1,7 +1,7 @@
---
name: 'Exploring the Internet'
short: 'No description available'
date: 'Thu Oct 20 1994 17:30:00 GMT-0400 (Eastern Daylight Time)'
date: 'Thu Oct 20 1994 16:30:00 GMT-0400 (Eastern Daylight Time)'
online: false
location: 'MC 3009'
---

@ -1,7 +1,7 @@
---
name: 'Game Theory'
short: 'No description available'
date: 'Wed Nov 02 1994 17:30:00 GMT-0500 (Eastern Standard Time)'
date: 'Wed Nov 02 1994 16:30:00 GMT-0500 (Eastern Standard Time)'
online: false
location: 'MC 2038'
---

@ -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)'
date: 'Tue Sep 13 1994 21:00:00 GMT-0400 (Eastern Daylight Time)'
online: false
location: 'Princess Cinema'
---

@ -1,7 +1,7 @@
---
name: 'Prograph: Picture the Future'
short: 'No description available'
date: 'Thu Oct 13 1994 18:00:00 GMT-0400 (Eastern Daylight Time)'
date: 'Thu Oct 13 1994 17:00:00 GMT-0400 (Eastern Daylight Time)'
online: false
location: 'DC 1302'
---

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