Merge branch 'main' into feat/event-card

.vscode/extensions.json

@@ -2,7 +2,6 @@
   "recommendations": [
     "dbaeumer.vscode-eslint",
     "humao.rest-client",
-    "silvenon.mdx",
-    "xyc.vscode-mdx-preview"
+    "silvenon.mdx"
   ]
 }

components/EventDescriptionCard.tsx

@@ -1,5 +1,6 @@
 import React, { ReactNode } from "react";
 // import { Button } from "./Button";
+import { Image } from "./Image";
 import { EventSetting } from "./EventSetting";
 import styles from "./EventDescriptionCard.module.css";
 
@@ -37,7 +38,7 @@ const links = {
 export function EventDescriptionCard(props: Props) {
   return (
     <article className={styles.card}>
-      <img className={styles.poster} src={props.poster} alt={props.name} />
+      <Image className={styles.poster} src={props.poster} alt={props.name} />
 
       <div className={styles.details}>
         <h3 className={styles.name}>{props.name}</h3>
@@ -61,7 +62,7 @@ export function EventDescriptionCard(props: Props) {
           )}
           {props.online && (
             <a target="_blank" href={links[props.location]} rel="noreferrer">
-              <img
+              <Image
                 className={styles.logo}
                 alt={props.location}
                 src={"logos/" + props.location + ".png"}

components/Image.tsx

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

components/Navbar.module.css

@@ -0,0 +1,151 @@
+.navbar {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  background-color: var(--white);
+}
+
+.navContent {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: none;
+  justify-content: space-between;
+  align-items: center;
+
+  width: stretch;
+  max-width: 1440px;
+  height: auto;
+  padding: 1.75rem 8.5rem;
+}
+
+.logo {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.logo:hover {
+  cursor: pointer;
+}
+
+.logo img {
+  width: 96px;
+}
+
+.navMenu {
+  display: inline-flex;
+  flex-direction: row;
+  flex-wrap: none;
+  justify-content: space-between;
+  align-items: baseline;
+
+  margin: 0;
+  padding: 0;
+
+  width: 32rem;
+}
+
+.navMenu li {
+  list-style: none;
+  text-align: center;
+}
+
+.navMenu a {
+  color: var(--purple-2);
+  text-decoration: none;
+}
+
+.navMenu a.currentPage {
+  color: var(--blue-2);
+}
+
+.navMenu > li:hover > a {
+  color: var(--blue-2);
+  font-weight: 600;
+}
+
+/* Prevents the menu items from shifting when made bold on hover */
+.navMenu > li > a::before {
+  display: block;
+  content: attr(title);
+  font-weight: 600;
+  height: 0;
+  overflow: hidden;
+  visibility: hidden;
+}
+
+.navMenu > li > a {
+  padding: 1rem;
+}
+
+.dropdownWrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+.dropdown {
+  visibility: visible;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: space-evenly;
+  align-items: center;
+
+  position: absolute;
+
+  margin: 0;
+  margin-top: 3rem;
+  padding: 0;
+
+  border-radius: 0.5rem;
+  background-color: var(--white);
+  box-shadow: 0 0.5rem 1rem var(--blue-1-20);
+
+  font-size: 0.875rem;
+}
+
+.dropdown > li {
+  width: 100%;
+}
+
+.dropdown > li > a {
+  padding: 0.5rem;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.dropdown > li:hover > a,
+.dropdown > li > a:focus {
+  background-color: var(--blue-1-20);
+}
+
+.dropdown > li:first-child > a {
+  padding-top: 1rem;
+  border-radius: 0.5rem 0.5rem 0 0;
+}
+
+.dropdown > li:last-child > a {
+  padding-bottom: 1rem;
+  border-radius: 0 0 0.5rem 0.5rem;
+}
+
+.navMenu > li .dropdown {
+  visibility: hidden;
+}
+
+.navMenu > li:hover .dropdown,
+.navMenu > li:focus-within .dropdown {
+  visibility: visible;
+}
+
+/* On a smaller desktop screen, keep the same navbar layout but decrease the
+ * horizontal padding so it still fits
+ */
+@media screen and (max-width: 960px) {
+  .navContent {
+    padding: 1.75rem 4rem;
+  }
+}

components/Navbar.tsx

@@ -0,0 +1,120 @@
+import React from "react";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { Image } from "./Image";
+import styles from "./Navbar.module.css";
+
+interface NavLink {
+  name: string;
+  route: string;
+  submenu?: {
+    name: string;
+    route: string;
+  }[];
+}
+
+const menu: NavLink[] = [
+  {
+    name: "Home",
+    route: "/",
+  },
+  {
+    name: "About",
+    route: "/about",
+    submenu: [
+      {
+        name: "About Us",
+        route: "/about",
+      },
+      {
+        name: "Meet the Team",
+        route: "/about/team",
+      },
+      {
+        name: "Constitution",
+        route: "/about/constitution",
+      },
+      {
+        name: "Code of Conduct",
+        route: "/about/code-of-conduct",
+      },
+    ],
+  },
+  {
+    name: "Get Involved",
+    route: "/get-involved",
+  },
+  {
+    name: "Events",
+    route: "/events",
+  },
+  {
+    name: "Resources",
+    route: "/resources",
+  },
+];
+
+function NavItem(props: NavLink) {
+  const router = useRouter();
+  return (
+    <>
+      <Link href={props.route}>
+        <a
+          title={props.name}
+          className={
+            router.pathname === props.route ||
+            ((props.submenu?.length ?? 0) > 0 &&
+              router.pathname.startsWith(props.route))
+              ? styles.currentPage
+              : ""
+          }
+          onClick={() => {
+            if (document.activeElement instanceof HTMLElement) {
+              document.activeElement.blur();
+            }
+          }}
+        >
+          {props.name}
+        </a>
+      </Link>
+      {(props.submenu?.length ?? 0) > 0 ? (
+        <ul className={styles.dropdown}>
+          {props.submenu?.map((item) => {
+            return (
+              <li className={styles.dropdownWrapper} key={item.name}>
+                <NavItem name={item.name} route={item.route} />
+              </li>
+            );
+          })}
+        </ul>
+      ) : null}
+    </>
+  );
+}
+
+export function Navbar() {
+  return (
+    <nav className={styles.navbar}>
+      <div className={styles.navContent}>
+        <Link href="/">
+          <a className={styles.logo}>
+            <Image src="/images/logo-icon.png" alt="CSC Logo" />
+          </a>
+        </Link>
+        <ul className={styles.navMenu}>
+          {menu.map((item) => {
+            return (
+              <li className={styles.dropdownWrapper} key={item.name}>
+                <NavItem
+                  name={item.name}
+                  route={item.route}
+                  submenu={item.submenu}
+                />
+              </li>
+            );
+          })}
+        </ul>
+      </div>
+    </nav>
+  );
+}

components/playground.tsx

@@ -91,7 +91,7 @@ export function EventDescriptionCardDemo() {
         date={date}
         online={true}
         location="Twitch"
-        poster="images/playground/intro-ootb.jpg"
+        poster="/images/playground/intro-ootb.jpg"
         registerLink="/"
       >
         <p>{short}</p>
@@ -101,7 +101,7 @@ export function EventDescriptionCardDemo() {
         date={date}
         online={true}
         location="Twitch"
-        poster="images/playground/alt-tab.jpg"
+        poster="/images/playground/alt-tab.jpg"
         registerLink="/"
       >
         <p>{short}</p>
@@ -111,7 +111,7 @@ export function EventDescriptionCardDemo() {
         date={date}
         online={true}
         location="Twitch"
-        poster="images/playground/intro-ootb.jpg"
+        poster="/images/playground/intro-ootb.jpg"
         registerLink="/"
       >
         <p>{short}</p>

next.config.js

@@ -1,7 +1,9 @@
-const withMDX = require('@next/mdx')({
-  extension: /\.mdx$/
-})
+const withMDX = require("@next/mdx")({
+  extension: /\.mdx$/,
+});
 
 module.exports = withMDX({
-  pageExtensions: ['ts', 'tsx', 'mdx']
-})
+  pageExtensions: ["ts", "tsx", "mdx"],
+  trailingSlash: true,
+  basePath: process.env.BASE_PATH,
+});

pages/_app.css

@@ -8,11 +8,13 @@ code, pre {
 
 /* Default is light theme */
 body {
+  --white: #ffffff;
   --off-white: #fdf8f5;
   --teal-1: #76ffdc;
   --teal-2: #4ed4b2;
   --blue-1: #5caff9;
-  --blue-2: #5caff9;
+  --blue-1-20: #5caff934;
+  --blue-2: #1482e3;
   --purple-1: #525284;
   --purple-2: #2a2a62;
   --gradient-blue-green: linear-gradient(
@@ -20,14 +22,17 @@ body {
     #1481e3 -17.95%,
     #4ed4b2 172.82%
   );
+
+  margin: 0;
 }
 
 .dark {
+  --white: #ffffff;
   --off-white: #fdf8f5;
   --teal-1: #76ffdc;
   --teal-2: #4ed4b2;
   --blue-1: #5caff9;
-  --blue-2: #5caff9;
+  --blue-2: #1482e3;
   --purple-1: #525284;
   --purple-2: #2a2a62;
   --gradient-blue-green: linear-gradient(

pages/_app.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { AppProps } from "next/app";
 import { MDXProvider } from "@mdx-js/react";
 import { ThemeProvider } from "../components/theme";
+import { Navbar } from "../components/Navbar";
 import "./_app.css";
 import "./font.css";
 
@@ -9,6 +10,7 @@ export default function App({ Component, pageProps }: AppProps): JSX.Element {
   return (
     <ThemeProvider theme="light">
       <MDXProvider components={{}}>
+        <Navbar />
         <Component {...pageProps} />
       </MDXProvider>
     </ThemeProvider>

pages/about/code-of-conduct.mdx

@@ -0,0 +1 @@
+# Code of Conduct page

pages/about/constitution.mdx

@@ -0,0 +1 @@
+# Constitution page

pages/about/index.mdx

@@ -0,0 +1 @@
+# About Us page

pages/about/team.mdx

@@ -0,0 +1 @@
+# Meet the Team page

pages/events.mdx

@@ -0,0 +1 @@
+# Events page

pages/get-involved.mdx

@@ -0,0 +1 @@
+# Get Involved page

pages/resources.mdx

@@ -0,0 +1 @@
+# Resources page