add_BOT (#580)

Co-authored-by: Tejas Srikanth <tcsrikan@high-fructose-corn-syrup.csclub.uwaterloo.ca>
Reviewed-on: www/www-new#580
Reviewed-by: Amy Wang <a258wang@csclub.uwaterloo.ca>

.drone.yml

@@ -23,25 +23,40 @@ steps:
   commands:
   - npm run lint
 
-- name: build
+- name: optimize-images
   image: node:16
   depends_on:
   - install-deps
   commands:
-  - npm run build:web
+  - npm run build:images
 
 - name: generate-calendar
   image: node:16
   depends_on:
   - install-deps
   commands:
-  - npm run generate:calendar
+  - npm run build:calendar
+
+- name: generate-api
+  image: node:16
+  depends_on:
+  - install-deps
+  commands:
+  - npm run build:api
+
+- name: build
+  image: node:16
+  depends_on:
+  - optimize-images
+  commands:
+  - USE_LDAP=true npm run build:web
 
 - name: export
   image: node:16
   depends_on:
-  - build
+  - generate-api
   - generate-calendar
+  - build
   commands:
   - npm run export
 

.eslintrc.js

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

.gitignore

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

.vscode/settings.json

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

README.md

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

components/ArchivePage.module.css

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

components/ArchivePage.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { capitalize } from "@/utils";
+import { capitalize, Term } from "@/utils";
 
 import { Link } from "./Link";
 import {
@@ -16,7 +16,7 @@ export interface Props {
   type: "news" | "events";
   items: {
     year: string;
-    terms: string[];
+    terms: Term[];
   }[];
 }
 

components/Bubble.module.css

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

components/Button.module.css

@@ -2,8 +2,8 @@
 .link {
   font-family: "Poppins", "sans-serif";
   border-radius: calc(20rem / 16);
-  background-color: var(--primary-accent);
-  color: var(--primary-background);
+  background-color: var(--button-background);
+  color: var(--text-light);
   border: none;
   outline: none;
   transition-duration: 0.3s;

components/EventCard.module.css

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

components/EventCard.tsx

@@ -10,7 +10,8 @@ import styles from "./EventCard.module.css";
 interface EventCardProps {
   name: string;
   short: string;
-  date: Date;
+  startDate: Date;
+  endDate?: Date;
   online: boolean;
   location: string;
   poster?: string;
@@ -18,18 +19,27 @@ interface EventCardProps {
   permaLink: string;
   showDescription?: boolean;
   children: ReactNode;
+  year: number;
+  term: string;
+  slug: string;
+  titleLinked: boolean;
 }
 
 export function EventCard({
   permaLink,
   name,
-  date,
+  startDate,
+  endDate,
   online,
   location,
   poster,
   registerLink,
   children,
   showDescription = false,
+  year,
+  term,
+  slug,
+  titleLinked,
 }: EventCardProps) {
   return (
     <article className={styles.card}>
@@ -54,9 +64,20 @@ export function EventCard({
           showDescription ? styles.mobileShowDescriptionContent : "",
         ].join(" ")}
       >
-        <h1>{name}</h1>
+        <h1>
+          {titleLinked ? (
+            <Link href={`/events/${year}/${term}/${slug}`}>{name}</Link>
+          ) : (
+            name
+          )}
+        </h1>
         <h2>
-          <EventSetting date={date} online={online} location={location} />
+          <EventSetting
+            startDate={startDate}
+            endDate={endDate}
+            online={online}
+            location={location}
+          />
         </h2>
         {!showDescription && (
           <Link href={permaLink}>

components/EventDescriptionCard.module.css

@@ -4,7 +4,7 @@
   max-width: calc(540rem / 16);
   padding: calc(24rem / 16);
   border-radius: calc(20rem / 16);
-  background-color: var(--primary-background);
+  background-color: var(--card-background);
 }
 
 .poster {
@@ -38,7 +38,7 @@
 
 .setting {
   margin: 0;
-  color: var(--primary-accent);
+  color: var(--link);
   font-size: calc(14rem / 16);
   font-weight: 600;
 }

components/EventDescriptionCard.tsx

@@ -13,7 +13,8 @@ interface Props {
   short: string;
   online: boolean;
   location: string;
-  date: Date;
+  startDate: Date;
+  endDate?: Date;
   poster?: string;
   registerLink?: string;
   permaLink: string;
@@ -34,7 +35,8 @@ export function EventDescriptionCard({
   poster,
   name,
   short,
-  date,
+  startDate,
+  endDate,
   online,
   registerLink,
   permaLink,
@@ -48,7 +50,12 @@ export function EventDescriptionCard({
       <div className={styles.details}>
         <h1 className={styles.name}>{name}</h1>
         <h2 className={styles.setting}>
-          <EventSetting date={date} online={online} location={location} />
+          <EventSetting
+            startDate={startDate}
+            endDate={endDate}
+            online={online}
+            location={location}
+          />
         </h2>
         <p className={styles.desc}>{short}</p>
         <Link href={permaLink}>Learn more</Link>

components/EventSetting.tsx

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

components/Footer.module.css

@@ -1,6 +1,6 @@
 .footer {
   box-sizing: border-box;
-  background: var(--primary-heading);
+  background: var(--footer-background);
   padding: 1rem 0;
   width: 100%;
 }
@@ -17,7 +17,7 @@
 }
 
 .text {
-  color: var(--primary-background);
+  color: var(--text-light);
   font-style: normal;
   text-align: center;
 }

components/Footer.tsx

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

components/Link.module.css

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

components/MiniEventCard.module.css

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

components/MiniEventCard.tsx

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