Merge main

.drone.yml

@@ -0,0 +1,69 @@
+---
+kind: pipeline
+type: docker
+name: node16
+
+steps:
+- name: view-staging-url
+  image: node:16
+  commands:
+  - echo "staging url will be https://${DRONE_BRANCH//\//-}-csc-class-profile-staging-snedadah.k8s.csclub.cloud"
+
+- name: install-deps
+  image: node:16
+  commands:
+  - npm install
+
+- name: lint
+  image: node:16
+  depends_on:
+  - install-deps
+  commands:
+  - npm run lint
+
+- name: build
+  image: node:16
+  depends_on:
+  - install-deps
+  commands:
+  - npm run build
+
+- name: export
+  image: node:16
+  depends_on:
+  - build
+  commands:
+  - npm run export
+
+- name: publish
+  image: plugins/docker:latest
+  depends_on:
+    - export
+  settings:
+    username:
+      from_secret: HARBOUR_USERNAME
+    password:
+      from_secret: HARBOUR_PASSWORD
+    tags: 
+      - ${DRONE_BRANCH//\//-}
+      - latest
+    registry: registry.cloud.csclub.uwaterloo.ca
+    repo: registry.cloud.csclub.uwaterloo.ca/snedadah/csc-class-profile-staging
+
+- name: deploy
+  image: node:16
+  depends_on:
+  - publish
+  environment:
+    STAGING_AUTH_TOKEN:
+      from_secret: STAGING_AUTH_TOKEN
+  commands:
+    -  echo "The docker build tag is ${DRONE_BRANCH//\//-}"
+    - 'curl -H "Authorization: $STAGING_AUTH_TOKEN"  https://csclub.uwaterloo.ca/~snedadah/webhooks/cscclassprofilestaging?ref=${DRONE_BRANCH//\//-}'
+    
+trigger:
+  event:
+    exclude:
+    - pull_request #avoid double build on PRs
+
+

Dockerfile

@@ -0,0 +1,2 @@
+FROM nginx
+COPY ./out /usr/share/nginx/html

components/ColorPalette.module.css

@@ -0,0 +1,21 @@
+.box {
+  width: calc(100rem / 16);
+  height: calc(100rem / 16);
+  margin-bottom: calc(10rem / 16);
+}
+
+.wrapper {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  flex-wrap: wrap;
+}
+
+.item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  margin: calc(10rem / 16);
+  width: calc(150rem / 16);
+}

components/ColorPalette.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { Color } from "utils/Color";
+
+import styles from "./ColorPalette.module.css";
+
+export function ColorPalette() {
+  return (
+    <>
+      <h2>Color Palette</h2>
+      <div className={styles.wrapper}>
+        {Object.entries(Color).map(([colorName, colorCSSName]) => (
+          <div key={colorName} className={styles.item}>
+            <div
+              className={styles.box}
+              style={{ backgroundColor: colorCSSName }}
+              key={colorName}
+            />
+            <span>{colorName}</span>
+          </div>
+        ))}
+      </div>
+    </>
+  );
+}

docs/CI.md

@@ -0,0 +1,8 @@
+## Setting up CI
+
+- Follow instructions on [CSC cloud](https://docs.cloud.csclub.uwaterloo.ca/kubernetes/) to setup csccloud.
+- Setup the repository to store your docker images on [CSC Harbour](https://docs.cloud.csclub.uwaterloo.ca/registry/). 
+- Make sure to add harbour auth tokens to drone. Click the my profile page on harbour, and set HARBOUR_USERNAME and HARBOUR_PASSWORD on drone secrets to the username and cli secret from the harbour profile page.
+- Clone the [server repo](https://git.csclub.uwaterloo.ca/snedadah/csc-webhooks), fill in desired links, update env file with the auth token, update STAGING_AUTH_TOKEN in drone to match. Run `npm start` to start server in the background.
+- Possibly put a crontab to restart the script on [startup](https://stackoverflow.com/questions/12973777/how-to-run-a-shell-script-at-startup)
+

pages/_app.css

@@ -64,7 +64,7 @@ body {
 
   background-color: var(--primary-background);
   color: var(--primary-text);
-  font-family: "Inconsolata", "sans-serif";
+  font-family: "Inconsolata", "monospace";
   margin: 0;
 }
 

pages/playground.tsx

@@ -3,6 +3,8 @@ import React from "react";
 
 import { PieChart } from "@/components/PieChart";
 
+import { ColorPalette } from "../components/ColorPalette";
+
 export default function Home() {
   return (
     <>
@@ -11,6 +13,7 @@ export default function Home() {
       <div style={{ padding: "30px" }}>
         <PieChart data={mockPieData} width={800} labelWidth={200} />
       </div>
+      <ColorPalette />
     </>
   );
 }

utils/Color.ts

@@ -0,0 +1,38 @@
+const colorNames = [
+  "primaryBackground",
+  "secondaryBackground",
+  "tertiaryBackground",
+  "primaryAccent",
+  "primaryAccentLight",
+  "primaryAccentLighter",
+  "secondaryAccent",
+  "secondaryAccentLight",
+  "primaryHeading",
+  "secondaryHeading",
+  "link",
+  "linkHover",
+  "primaryText",
+  "cardBackground",
+  "label",
+] as const;
+
+// This type is needed for smart autocomplete
+type ColorName = typeof colorNames[number];
+
+export const Color: { [key in ColorName]: string } = {
+  primaryBackground: "var(--primary-background)",
+  secondaryBackground: "var(--secondary-background)",
+  tertiaryBackground: "var(--tertiary-background)",
+  primaryAccent: "var(--primary-accent)",
+  primaryAccentLight: "var(--primary-accent-light)",
+  primaryAccentLighter: "var(--primary-accent-lighter)",
+  secondaryAccent: "var(--secondary-accent)",
+  secondaryAccentLight: "var(--secondary-accent-light)",
+  primaryHeading: "var(--primary-heading)",
+  secondaryHeading: "var(--secondary-heading)",
+  link: "var(--link)",
+  linkHover: "var(--link-hover)",
+  primaryText: "var(--primary-text)",
+  cardBackground: "var(--card-background)",
+  label: "var(--label)",
+};