diff --git a/.drone.yml b/.drone.yml new file mode 100644 index 0000000..9a2840d --- /dev/null +++ b/.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 + + diff --git a/Dockerfile b/Dockerfile new file mode 100644 index 0000000..dfb0893 --- /dev/null +++ b/Dockerfile @@ -0,0 +1,2 @@ +FROM nginx +COPY ./out /usr/share/nginx/html diff --git a/components/ColorPalette.module.css b/components/ColorPalette.module.css new file mode 100644 index 0000000..01bc6a5 --- /dev/null +++ b/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); +} \ No newline at end of file diff --git a/components/ColorPalette.tsx b/components/ColorPalette.tsx new file mode 100644 index 0000000..835faa3 --- /dev/null +++ b/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 ( + <> +

Color Palette

+
+ {Object.entries(Color).map(([colorName, colorCSSName]) => ( +
+
+ {colorName} +
+ ))} +
+ + ); +} diff --git a/docs/CI.md b/docs/CI.md new file mode 100644 index 0000000..bdc8238 --- /dev/null +++ b/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) + diff --git a/pages/_app.css b/pages/_app.css index 4a17bd4..92ef010 100644 --- a/pages/_app.css +++ b/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; } diff --git a/pages/playground.tsx b/pages/playground.tsx index de0f729..e5df03d 100644 --- a/pages/playground.tsx +++ b/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() {
+ ); } diff --git a/utils/Color.ts b/utils/Color.ts new file mode 100644 index 0000000..d3adb28 --- /dev/null +++ b/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)", +};