Merge remote-tracking branch 'origin/main' into feat/organized-content

.gitlab-ci.yml

@@ -10,6 +10,9 @@ stages:
   - build
   - staging
 
+variables:
+  NEXT_PUBLIC_BASE_PATH: '/~a3thakra/csc'
+
 install_deps:
   stage: .pre
   script:
@@ -25,14 +28,22 @@ build:
   script:
     - npm run build
 
-pages:
+staging:
   stage: staging
   script:
     - npm run export
-    - mv public src-public
-    - mv out public
   artifacts:
     paths:
-      - public
+      - out
   only:
-    - main
+    refs:
+      - main
+
+deploy_staging:
+  stage: .post
+  needs: ["staging"]
+  script:
+    - 'curl -XPOST -H "Authorization: Basic $STAGING_SECRET" "https://csclub.uwaterloo.ca/~a3thakra/csc/"'
+  only:
+    refs:
+      - main

components/Button.module.css

@@ -0,0 +1,32 @@
+.button,
+.link {
+  font-family: "Poppins", "sans-serif";
+  border-radius: calc(20rem / 16);
+  background-color: var(--blue-2);
+  color: white;
+  border: none;
+  outline: none;
+  transition-duration: 0.3s;
+  font-weight: normal;
+  text-align: center;
+}
+
+.button:hover,
+.link:hover {
+  background-color: var(--teal-2);
+  cursor: pointer;
+}
+
+.link {
+  text-decoration: none;
+}
+
+.small {
+  padding: calc(5rem / 16) calc(30rem / 16);
+  font-size: calc(14rem / 16);
+}
+
+.normal {
+  padding: calc(10rem / 16) calc(50rem / 16);
+  font-size: calc(18rem / 16);
+}

components/Button.tsx

@@ -0,0 +1,40 @@
+import React, { AnchorHTMLAttributes, ButtonHTMLAttributes } from "react";
+import styles from "./Button.module.css";
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  isLink?: false;
+}
+
+interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+  isLink: true;
+}
+
+type Props = (ButtonProps | LinkProps) & { size?: "small" | "normal" };
+
+export function Button(props: Props) {
+  const btnSize = props.size ? props.size : "normal";
+  if (props.isLink) {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { size, isLink, ...otherProps } = props;
+    return (
+      <a
+        {...otherProps}
+        target="_blank"
+        className={`${styles.link} ${styles[btnSize]} ${
+          otherProps.className ?? ""
+        }`}
+      />
+    );
+  } else {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { size, isLink, ...otherProps } = props;
+    return (
+      <button
+        {...otherProps}
+        className={`${styles.button} ${styles[btnSize]} ${
+          otherProps.className ?? ""
+        }`}
+      />
+    );
+  }
+}

components/EventCard.module.css

@@ -21,7 +21,8 @@
 }
 
 .registerButton {
-  width: 100%;
+  display: block;
+  font-weight: bold;
 }
 
 .content > h1 {

components/EventCard.tsx

@@ -1,4 +1,5 @@
 import React, { ReactNode } from "react";
+import { Button } from "./Button";
 import styles from "./EventCard.module.css";
 
 import { EventSetting } from "./EventSetting";
@@ -29,11 +30,15 @@ export function EventCard({
       <aside>
         {poster && <Image alt={name} src={poster} />}
         {!poster && <div className={styles.spacer}></div>}
-        {/* TODO: use the <Button /> component */}
         {registerLink && (
-          <button className={styles.registerButton}>
+          <Button
-            <a href={registerLink}>Register</a>
+            isLink={true}
-          </button>
+            href={registerLink}
+            size="small"
+            className={styles.registerButton}
+          >
+            Register
+          </Button>
         )}
       </aside>
       <section className={styles.content}>

components/EventDescriptionCard.module.css

@@ -3,7 +3,7 @@
   box-sizing: border-box;
   max-width: calc(540rem / 16);
   padding: calc(24rem / 16);
-  border-radius: calc(4rem / 16);
+  border-radius: calc(20rem / 16);
   background-color: white;
 }
 
@@ -22,7 +22,7 @@
   color: var(--purple-2);
   font-weight: bolder;
   font-size: calc(18rem / 16);
-  line-height: calc(27rem / 16);
+  line-height: calc(27 / 18);
   margin: 0;
 }
 
@@ -42,7 +42,7 @@
 }
 
 .logo {
-  width: calc(30rem / 16);
+  width: calc(32rem / 16);
   position: absolute;
   bottom: 0;
   right: 0;
@@ -50,7 +50,7 @@
 
 .setting {
   margin: 0;
-  color: var(--blue-1);
+  color: var(--blue-2);
   font-weight: bolder;
   font-size: calc(14rem / 16);
 }
@@ -58,6 +58,34 @@
 @media only screen and (max-width: calc(768rem / 16)) {
   .card {
     padding: 0;
-    background-color: #e1eefa;
+    background-color: transparent;
+  }
+
+  .details {
+    min-width: calc(150rem / 16);
+  }
+
+  .name,
+  .setting {
+    font-size: calc(14rem / 16);
+    line-height: calc(21 / 14);
+  }
+
+  .poster {
+    width: calc(95rem / 16);
+    height: calc(95rem / 16);
+    border: 1px solid var(--purple-2);
+    box-sizing: border-box;
+    margin-right: calc(14rem / 16);
+  }
+
+  .desc {
+    font-size: calc(12rem / 16);
+    line-height: calc(18 / 12);
+  }
+
+  .logo,
+  .button {
+    display: none;
   }
 }

components/EventDescriptionCard.tsx

@@ -1,5 +1,5 @@
 import React, { ReactNode } from "react";
-// import { Button } from "./Button";
+import { Button } from "./Button";
 import { Image } from "./Image";
 import { EventSetting } from "./EventSetting";
 import styles from "./EventDescriptionCard.module.css";
@@ -65,9 +65,9 @@ export function EventDescriptionCard({
         <footer>
           {registerLink && (
             <div className={styles.button}>
-              <button>
+              <Button isLink={true} href={registerLink} size="small">
-                <a href={registerLink}>Register</a>
+                Register
-              </button>
+              </Button>
             </div>
           )}
           {online && platformURL && (

components/EventSetting.module.css

@@ -0,0 +1,9 @@
+@media only screen and (max-width: calc(768rem / 16)) {
+  .separator {
+    display: none;
+  }
+  
+  .setting {
+    display: block;
+  }
+}

components/EventSetting.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import styles from "./EventSetting.module.css";
 
 interface Props {
   date: Date;
@@ -15,13 +16,20 @@ export function EventSetting(props: Props) {
   const time = props.date.toLocaleTimeString("en-US", {
     hour: "numeric",
     minute: "numeric",
+    timeZoneName: "short",
   });
   const location = props.online ? `Online - ${props.location}` : props.location;
+  const separator = <span className={styles.separator}> | </span>;
 
   return (
     <div>
-      <time dateTime={props.date.toISOString()}>{`${date} | ${time}`}</time>
+      <time className={styles.setting} dateTime={props.date.toISOString()}>
-      {` | ${location}`}
+        {date}
+      </time>
+      {separator}
+      <span className={styles.setting}>{time}</span>
+      {separator}
+      {location}
     </div>
   );
 }

components/Image.tsx

@@ -3,7 +3,7 @@ import React, { ImgHTMLAttributes } from "react";
 export function Image(props: ImgHTMLAttributes<HTMLImageElement>) {
   const { src: relativeSrc = "" } = props;
 
-  let absoluteSrc = process.env.BASE_PATH ?? "/";
+  let absoluteSrc = process.env.NEXT_PUBLIC_BASE_PATH ?? "/";
   if (absoluteSrc.endsWith("/") && relativeSrc.startsWith("/")) {
     absoluteSrc += relativeSrc.slice(1);
   } else if (absoluteSrc.endsWith("/") || relativeSrc.startsWith("/")) {

components/NewsCard.module.css

@@ -8,19 +8,19 @@
   color: var(--purple-2);
   font-size: calc(18rem / 16);
   font-weight: bold;
-  line-height: calc(27rem / 16);
+  line-height: calc(27 / 18);
 }
 
 .author {
   color: var(--purple-1);
   font-style: normal;
-  line-height: calc(21rem / 16);
+  line-height: calc(21 / 16);
   font-size: calc(14rem / 16);
   margin: calc(5rem / 16) 0 calc(7rem / 16) 0;
 }
 
 .content {
-  line-height: calc(21rem / 16);
+  line-height: calc(21 / 16);
   color: var(--purple-2);
 }
 

components/playground.module.css

@@ -13,7 +13,7 @@
   font-weight: bold;
   color: var(--purple-2);
   font-size: calc(24rem / 16);
-  line-height: calc(36rem / 16);
+  line-height: calc(36 / 24);
   margin-bottom: calc(14rem / 16);
 }
 
@@ -21,7 +21,7 @@
   font-style: normal;
   font-weight: normal;
   font-size: calc(14rem / 16);
-  line-height: calc(21rem / 16);
+  line-height: calc(21 / 14);
   white-space: pre-line;
   color: var(--purple-2);
   vertical-align: baseline;
@@ -62,7 +62,7 @@
   color: var(--purple-2);
   font-weight: 600;
   font-size: calc(24rem / 16);
-  line-height: calc(36rem / 16);
+  line-height: calc(36 / 24);
 }
 
 .teamMemberDemo > hr {
@@ -84,7 +84,7 @@
 @media only screen and (max-width: calc(768rem / 16)) {
   .newsDemo,
   .eventDescriptionCardDemo {
-    background-color: #e1eefa;
+    background-color: var(--off-white);
   }
 
   .eventDescriptionCardDemo > * {

components/playground.tsx

@@ -45,6 +45,7 @@ import { EventDescriptionCard } from "./EventDescriptionCard";
 import { TeamMember } from "./TeamMember";
 import { TeamMemberCard } from "./TeamMemberCard";
 import { OrganizedContent, LinkProps } from "./OrganizedContent";
+import { Button } from "./Button";
 
 const events = [
   { Content: OOTBReact, metadata: OOTBReactEventMetadata },
@@ -95,6 +96,31 @@ export function NewsCardDemo() {
   );
 }
 
+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}>

content/playground/after-hours.event.mdx

@@ -1,7 +1,7 @@
 export const metadata = {
   name: "Afterhours: Personal Relationships",
   short: "Learn how React works and make your own version!",
-  date: new Date("2021-03-02 2:00 PM"),
+  date: new Date("2021-03-02 2:00 PM GMT-4"),
   online: false,
   location: "MC",
   registerLink: "http://csclub.uwaterloo.ca/",

content/playground/alt-tab.event.mdx

@@ -1,7 +1,7 @@
 export const metadata = {
   name: "Alt-Tab",
   short: "CSC is proud to present to you Alt-Tab!",
-  date: new Date("March 25, 2021 19:00:00"),
+  date: new Date("March 25, 2021 19:00:00 GMT-4"),
   online: true,
   location: "Twitch",
   poster: "/images/playground/alt-tab.jpg",

content/playground/ootb-react.event.mdx

@@ -1,7 +1,7 @@
 export const metadata = {
   name: "Out of the Box: React",
   short: "Out of the Box is a series of code-along projects that explore what's under the hood of modern web frameworks.",
-  date: new Date("March 23, 2021 19:00:00"),
+  date: new Date("March 23, 2021 19:00:00 GMT-4"),
   online: true,
   location: "Twitch",
   poster: "/images/playground/intro-ootb.jpg",

next.config.js

@@ -5,5 +5,5 @@ const withMDX = require("@next/mdx")({
 module.exports = withMDX({
   pageExtensions: ["ts", "tsx", "mdx"],
   trailingSlash: true,
-  basePath: process.env.BASE_PATH,
+  basePath: process.env.NEXT_PUBLIC_BASE_PATH,
 });

pages/_app.tsx

@@ -1,15 +1,26 @@
-import React from "react";
+import React, { AnchorHTMLAttributes } from "react";
 import { AppProps } from "next/app";
 import { MDXProvider } from "@mdx-js/react";
 import { ThemeProvider } from "../components/theme";
 import { Navbar } from "../components/Navbar";
+import NextLink from "next/link";
 import "./_app.css";
 import "./font.css";
 
+function Link(props: AnchorHTMLAttributes<HTMLAnchorElement>) {
+  const { href, ...other } = props;
+
+  return (
+    <NextLink href={href ?? "#"}>
+      <a {...other}></a>
+    </NextLink>
+  );
+}
+
 export default function App({ Component, pageProps }: AppProps): JSX.Element {
   return (
     <ThemeProvider theme="light">
-      <MDXProvider components={{}}>
+      <MDXProvider components={{ a: Link }}>
         <Navbar />
         <Component {...pageProps} />
       </MDXProvider>

pages/playground.mdx

@@ -6,6 +6,7 @@ import {
   TeamMemberDemo,
   TeamMemberCardDemo,
   OrganizedContentDemo,
+  ButtonDemo,
 } from "../components/playground";
 
 import { TeamMemberCard } from "../components/TeamMemberCard";
@@ -37,6 +38,14 @@ unavailable
 
 ---
 
+## `<Button />`
+
+The `<Button />` is customizable in size and in whether it is an anchor tag or a button tag.
+
+<ButtonDemo />
+
+---
+
 ## `<EventDescriptionCard />`
 
 The `<EventDescriptionCard />` component is used on the home page, and uses the
@@ -57,7 +66,7 @@ The `<EventCard />` component is used on the events page, and uses the
 
 ## `<TeamMember />`
 
-The `<TeamMember />` component has an image of the team member along with their name and role. 
+The `<TeamMember />` component has an image of the team member along with their name and role.
 It is used on the Meet the Team page for non executive members.
 
 <TeamMemberDemo />