Merge branch 'main' into feat/navbar

.gitlab-ci.yml

@@ -0,0 +1,38 @@
+default:
+  image: node:14
+  
+  cache:
+    paths:
+      - node_modules/
+      - .next
+
+stages:
+  - build
+  - staging
+
+install_deps:
+  stage: .pre
+  script:
+    - npm install
+
+lint:
+  stage: build
+  script:
+    - npm run lint
+
+build:
+  stage: build
+  script:
+    - npm run build
+
+pages:
+  stage: staging
+  script:
+    - npm run export
+    - mv public src-public
+    - mv out public
+  artifacts:
+    paths:
+      - public
+  only:
+    - main

.vscode/settings.json

@@ -2,6 +2,13 @@
   "typescript.tsdk": "node_modules/typescript/lib",
   "eslint.format.enable": true,
   "eslint.codeActionsOnSave.mode": "all",
+  "[css]": {
+    "editor.suggest.insertMode": "replace",
+    "gitlens.codeLens.scopes": [
+      "document"
+    ],
+    "editor.formatOnSave": true
+  },
   "[javascript]": {
     "editor.formatOnSave": false,
     "editor.codeActionsOnSave": {
@@ -31,4 +38,5 @@
   "files.exclude": {
     "node_modules": true
   },
+  "editor.tabSize": 2
 }

components/MiniEventCard.module.css

@@ -0,0 +1,43 @@
+.miniEventCard {
+  max-width: 936px;
+  box-sizing: border-box;
+  position: relative;
+  color: var(--purple-2);
+  padding: 1.25rem;
+  font-size: 0.875rem;
+}
+
+.name {
+  display: flex;
+  font-size: 1.125rem;
+  margin: 0;
+}
+
+.nameSpacer {
+  width: 140px;
+}
+
+.info {
+  margin-top: 0;
+}
+
+.details {
+  position: absolute;
+  top: 0;
+  right: 0;
+  cursor: pointer;
+  color: var(--blue-2);
+  margin: 1.25rem;
+}
+
+.miniEventCard[open] .shortDescription {
+  display: none;
+}
+
+.miniEventCard[open] .dropDownIcon {
+  transform: rotate(180deg);
+}
+
+.miniEventCard > summary {
+  list-style: none;
+}

components/MiniEventCard.tsx

@@ -0,0 +1,57 @@
+import React, { ReactNode } from "react";
+import styles from "./MiniEventCard.module.css";
+
+interface Props {
+  name: string;
+  descriptionShort: string;
+  description: ReactNode;
+  location: string;
+  date: string;
+  time: string;
+}
+
+const dropDownIcon = (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="14"
+    height="9"
+    viewBox="0 0 14 9"
+    fill="none"
+    className={styles.dropDownIcon}
+  >
+    <path
+      d="M6.24407 8.12713C6.64284 8.58759 7.35716 8.58759 7.75593 8.12713L13.3613 1.65465C13.9221 1.00701 13.4621 0 12.6053 0H1.39467C0.537918 0 0.0778675 1.00701 0.638743 1.65465L6.24407 8.12713Z"
+      fill="#1482E3"
+    />
+  </svg>
+);
+
+export const MiniEventCard: React.FC<Props> = ({
+  name,
+  descriptionShort,
+  description,
+  location,
+  date,
+  time,
+}) => {
+  return (
+    <details className={styles.miniEventCard}>
+      <summary>
+        <div onClick={(event) => event.preventDefault()}>
+          <h2 className={styles.name}>
+            <div>{name}</div>
+            <div className={styles.nameSpacer}></div>
+          </h2>
+          <p className={styles.info}>
+            {location} | {date} | {time}
+          </p>
+          <p className={styles.shortDescription}>{descriptionShort}</p>
+        </div>
+
+        <p className={styles.details}>View details {dropDownIcon}</p>
+      </summary>
+
+      <div>{description}</div>
+    </details>
+  );
+};

components/NewsCard.module.css

@@ -0,0 +1,33 @@
+.card {
+  padding: 1.6875rem 2.4375rem;
+  max-width: 524px;
+  background-color: white;
+}
+
+.date {
+  color: var(--purple-2);
+  font-size: 1.125rem;
+  font-weight: bold;
+  line-height: 1.6875rem;
+}
+
+.author {
+  color: var(--purple-1);
+  font-style: normal;
+  line-height: 1.3125rem;
+  font-size: 0.875rem;
+  margin: 0.3125rem 0rem 0.4375rem 0rem;
+}
+
+.content {
+  line-height: 1.3125rem;
+  color: var(--purple-2);
+  font-size: 0.875rem;
+}
+
+@media only screen and (max-width: 768px) {
+  .card {
+    padding: 0;
+    background-color: transparent;
+  }
+}

components/NewsCard.tsx

@@ -0,0 +1,30 @@
+import React, { ReactNode } from "react";
+import styles from "./NewsCard.module.css";
+
+interface NewsCardProps {
+  date: Date;
+  author: string;
+  children: ReactNode;
+}
+
+export const NewsCard: React.FC<NewsCardProps> = ({
+  date,
+  author,
+  children,
+}) => {
+  return (
+    <article className={styles.card}>
+      <h3>
+        <time className={styles.date} dateTime={date.toISOString()}>
+          {date.toLocaleDateString("en-US", {
+            year: "numeric",
+            month: "long",
+            day: "numeric",
+          })}
+        </time>
+      </h3>
+      <address className={styles.author}>{author}</address>
+      <div className={styles.content}>{children}</div>
+    </article>
+  );
+};

components/playground.module.css

@@ -1,12 +1,41 @@
-.playground {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-  padding: 0;
-  width: 250px;
-  height: 250px;
-  border-radius: 50%;
-  border: 4px solid var(--blue-2);
-  background-color: var(--off-white);
+.miniEventCardDemo > *:nth-child(odd) {
+  background: #e1eefa;
+}
+
+.news {
+  padding: 50px;
+  background-color: var(--off-white);
+  display: inline-block;
+}
+
+@media only screen and (max-width: 768px) {
+  .news {
+    background-color: #e1eefa;
+  }
+}
+
+.newsTitle {
+  font-style: normal;
+  font-weight: bold;
+  color: var(--purple-2);
+  font-size: 24px;
+  line-height: 36px;
+  margin-bottom: 14px;
+}
+
+.newsDesc {
+  font-style: normal;
+  font-weight: normal;
+  font-size: 14px;
+  line-height: 21px;
+  white-space: pre-line;
+  color: var(--purple-2);
+  vertical-align: baseline;
+}
+
+.news > hr {
+  border: none;
+  height: 1px;
+  background-color: var(--purple-2);
+  margin: 0 0 13px 0;
 }

components/playground.tsx

@@ -1,12 +1,73 @@
 import React from "react";
+
 import styles from "./playground.module.css";
 
-export function Playground() {
+import AfterHoursContent, {
+  metadata as afterHoursMetadata,
+} from "../content/playground/after-hours.event.mdx";
+import UnavailableContent, {
+  metadata as unavailableMetadata,
+} from "../content/playground/unavailable.news.mdx";
+
+import { MiniEventCard } from "./MiniEventCard";
+import { NewsCard } from "./NewsCard";
+
+export function MiniEventCardDemo() {
+  const { name, location, short, date } = afterHoursMetadata;
+
+  const dateString = date.toLocaleDateString("en-US", {
+    day: "numeric",
+    month: "long",
+    year: "numeric",
+  });
+  const timeString = date.toLocaleTimeString("en-US", {
+    hour: "numeric",
+    minute: "numeric",
+  });
+
   return (
-    <ul className={styles.playground}>
-      <li>Some</li>
-      <li>React</li>
-      <li>Content</li>
-    </ul>
+    <div className={styles.miniEventCardDemo}>
+      <MiniEventCard
+        name={name}
+        date={dateString}
+        time={timeString}
+        descriptionShort={short}
+        location={location}
+        description={<AfterHoursContent />}
+      />
+      <MiniEventCard
+        name={name}
+        date={dateString}
+        time={timeString}
+        descriptionShort={short}
+        location={location}
+        description={<AfterHoursContent />}
+      />
+      <MiniEventCard
+        name={name}
+        date={dateString}
+        time={timeString}
+        descriptionShort={short}
+        location={location}
+        description={<AfterHoursContent />}
+      />
+    </div>
+  );
+}
+
+export function NewsCardDemo() {
+  return (
+    <div className={styles.news}>
+      <div className={styles.newsTitle}>News</div>
+      <div className={styles.newsDesc}>
+        Updates from our execs
+        <br />
+        <br />
+      </div>
+      <hr className={styles.newsHr} />
+      <NewsCard {...unavailableMetadata}>
+        <UnavailableContent />
+      </NewsCard>
+    </div>
   );
 }

content/playground/after-hours.event.mdx

@@ -0,0 +1,19 @@
+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"),
+  location: "Online - Twitch",
+};
+
+The past year has been tough for all of us, having to deal with the pandemic
+while studying or working remotely. If you've felt that meeting new people and
+sustaining relationships with others has never been more challenging, we feel
+that too, and we want to talk about it.
+
+CSC brings you the third chapter of Afterhours, and this time we're discussing
+Personal Relationships. Join us for a chat about how our relationships
+(platonic and romantic) have been affected, whether that be due to co-op,
+sequence changes, or COVID. We'll be sharing our own personal stories and we'd
+love for you all to join in on the discussion.
+
+Registration is required for attendance, so don't miss out!

content/playground/unavailable.news.mdx

@@ -0,0 +1,14 @@
+export const metadata = {
+  author: "merenber",
+  date: new Date("2021-03-19"),
+}
+
+Computer Science Club systems and services will be unavailable on Saturday, Mar. 20
+due to a planned power outage in the Mathematics and Computer Building (MC) from 7am to 5pm.
+
+The CSC will begin shutting down machines at 6am in preparation of the outage.
+Please prepare for the outage by:
+
+- Ensuring all running processes have their state saved (configuration, data, etc.)
+- Any important files are backed up off-site from the CSC
+- If you have any questions/concerns, please email the Systems Committee.

next-env.d.ts

@@ -1,2 +1,32 @@
 /// <reference types="next" />
 /// <reference types="next/types/global" />
+
+declare module "*.event.mdx" {
+  import { ComponentType } from "react";
+
+  interface EventMetadata {
+    name: string;
+    short: string;
+    date: Date;
+    location: string;
+  }
+
+  const ReactComponent: ComponentType;
+
+  export const metadata: EventMetadata;
+  export default ReactComponent;
+}
+
+declare module "*.news.mdx" {
+  import { ComponentType } from "react";
+
+  interface NewsMetadata {
+    author: string;
+    date: Date;
+  }
+
+  const ReactComponent: ComponentType;
+
+  export const metadata: NewsMetadata;
+  export default ReactComponent;
+}

package-lock.json

@@ -13,6 +13,7 @@
         "date-fns": "^2.11.1",
         "gray-matter": "^4.0.2",
         "next": "^10.0.0",
+        "prettier": "^2.3.0",
         "react": "17.0.1",
         "react-dom": "17.0.1",
         "remark": "^12.0.0",
@@ -4252,6 +4253,17 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/prettier": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.3.0.tgz",
+      "integrity": "sha512-kXtO4s0Lz/DW/IJ9QdWhAf7/NmPWQXkFr/r/WkR3vyI+0v8amTDxiaQSLzs8NBlytfLWX/7uQUMIW677yLKl4w==",
+      "bin": {
+        "prettier": "bin-prettier.js"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
     "node_modules/prettier-linter-helpers": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz",
@@ -9197,6 +9209,14 @@
       "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
       "dev": true
     },
+<<<<<<< HEAD
+=======
+    "prettier": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.3.0.tgz",
+      "integrity": "sha512-kXtO4s0Lz/DW/IJ9QdWhAf7/NmPWQXkFr/r/WkR3vyI+0v8amTDxiaQSLzs8NBlytfLWX/7uQUMIW677yLKl4w=="
+    },
+>>>>>>> main
     "prettier-linter-helpers": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz",

package.json

@@ -4,7 +4,10 @@
   "scripts": {
     "dev": "next dev",
     "build": "next build",
-    "start": "next start"
+    "start": "next start",
+    "export": "next export",
+    "lint": "eslint '{pages,components}/**/*.{js,ts,tsx,jsx}' --quiet",
+    "lint:fix": "eslint '{pages,components}/**/*.{js,ts,tsx,jsx}' --quiet --fix"
   },
   "dependencies": {
     "@mdx-js/loader": "^1.6.22",
@@ -13,6 +16,7 @@
     "date-fns": "^2.11.1",
     "gray-matter": "^4.0.2",
     "next": "^10.0.0",
+    "prettier": "^2.3.0",
     "react": "17.0.1",
     "react-dom": "17.0.1",
     "remark": "^12.0.0",

pages/_app.css

@@ -2,6 +2,10 @@
   font-family: "Poppins", "sans-serif";
 }
 
+code, pre {
+  font-family: monospace;
+}
+
 /* Default is light theme */
 body {
   --white: #ffffff;

pages/font.css

@@ -1,145 +1,162 @@
-/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on May 8, 2021 */
-
+/* poppins-100 - latin */
 @font-face {
-  font-family: "Poppins";
-  src: url("/fonts/poppins-thin-webfont.woff2") format("woff2"),
-    url("/fonts/poppins-thin-webfont.woff") format("woff");
+  font-family: 'Poppins';
+  font-style: normal;
   font-weight: 100;
-  font-style: normal;
+  src: local(''),
+       url('../public/fonts/poppins-v15-latin-100.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('../public/fonts/poppins-v15-latin-100.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }
-
+/* poppins-100italic - latin */
 @font-face {
-  font-family: "Poppins";
-  src: url("/fonts/poppins-thinitalic-webfont.woff2") format("woff2"),
-    url("/fonts/poppins-thinitalic-webfont.woff") format("woff");
+  font-family: 'Poppins';
+  font-style: italic;
   font-weight: 100;
-  font-style: italic;
+  src: local(''),
+       url('../public/fonts/poppins-v15-latin-100italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('../public/fonts/poppins-v15-latin-100italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }
-
+/* poppins-200 - latin */
 @font-face {
-  font-family: "Poppins";
-  src: url("/fonts/poppins-extralight-webfont.woff2") format("woff2"),
-    url("/fonts/poppins-extralight-webfont.woff") format("woff");
+  font-family: 'Poppins';
+  font-style: normal;
   font-weight: 200;
-  font-style: normal;
+  src: local(''),
+       url('../public/fonts/poppins-v15-latin-200.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('../public/fonts/poppins-v15-latin-200.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }
-
+/* poppins-200italic - latin */
 @font-face {
-  font-family: "Poppins";
-  src: url("/fonts/poppins-extralightitalic-webfont.woff2") format("woff2"),
-    url("/fonts/poppins-extralightitalic-webfont.woff") format("woff");
+  font-family: 'Poppins';
+  font-style: italic;
   font-weight: 200;
-  font-style: italic;
+  src: local(''),
+       url('../public/fonts/poppins-v15-latin-200italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('../public/fonts/poppins-v15-latin-200italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }
-
+/* poppins-300italic - latin */
 @font-face {
-  font-family: "Poppins";
-  src: url("/fonts/poppins-light-webfont.woff2") format("woff2"),
-    url("/fonts/poppins-light-webfont.woff") format("woff");
+  font-family: 'Poppins';
+  font-style: italic;
   font-weight: 300;
-  font-style: normal;
+  src: local(''),
+       url('../public/fonts/poppins-v15-latin-300italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('../public/fonts/poppins-v15-latin-300italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }
-
+/* poppins-300 - latin */
 @font-face {
-  font-family: "Poppins";
-  src: url("/fonts/poppins-lightitalic-webfont.woff2") format("woff2"),
-    url("/fonts/poppins-lightitalic-webfont.woff") format("woff");
+  font-family: 'Poppins';
+  font-style: normal;
   font-weight: 300;
-  font-style: italic;
+  src: local(''),
+       url('../public/fonts/poppins-v15-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('../public/fonts/poppins-v15-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }
-
+/* poppins-regular - latin */
 @font-face {
-  font-family: "Poppins";
-  src: url("/fonts/poppins-regular-webfont.woff2") format("woff2"),
-    url("/fonts/poppins-regular-webfont.woff") format("woff");
+  font-family: 'Poppins';
+  font-style: normal;
   font-weight: 400;
-  font-style: normal;
+  src: local(''),
+       url('../public/fonts/poppins-v15-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('../public/fonts/poppins-v15-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }
-
+/* poppins-500 - latin */
 @font-face {
-  font-family: "Poppins";
-  src: url("/fonts/poppins-italic-webfont.woff2") format("woff2"),
-    url("/fonts/poppins-italic-webfont.woff") format("woff");
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 500;
+  src: local(''),
+       url('../public/fonts/poppins-v15-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('../public/fonts/poppins-v15-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+/* poppins-italic - latin */
+@font-face {
+  font-family: 'Poppins';
+  font-style: italic;
   font-weight: 400;
-  font-style: italic;
+  src: local(''),
+       url('../public/fonts/poppins-v15-latin-italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('../public/fonts/poppins-v15-latin-italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }
-
+/* poppins-500italic - latin */
 @font-face {
-  font-family: "Poppins";
-  src: url("/fonts/poppins-medium-webfont.woff2") format("woff2"),
-    url("/fonts/poppins-medium-webfont.woff") format("woff");
+  font-family: 'Poppins';
+  font-style: italic;
   font-weight: 500;
-  font-style: normal;
+  src: local(''),
+       url('../public/fonts/poppins-v15-latin-500italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('../public/fonts/poppins-v15-latin-500italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }
-
+/* poppins-600italic - latin */
 @font-face {
-  font-family: "Poppins";
-  src: url("/fonts/poppins-mediumitalic-webfont.woff2") format("woff2"),
-    url("/fonts/poppins-mediumitalic-webfont.woff") format("woff");
-  font-weight: 500;
+  font-family: 'Poppins';
   font-style: italic;
-}
-
-@font-face {
-  font-family: "Poppins";
-  src: url("/fonts/poppins-semibold-webfont.woff2") format("woff2"),
-    url("/fonts/poppins-semibold-webfont.woff") format("woff");
   font-weight: 600;
-  font-style: normal;
+  src: local(''),
+       url('../public/fonts/poppins-v15-latin-600italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('../public/fonts/poppins-v15-latin-600italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }
-
+/* poppins-700 - latin */
 @font-face {
-  font-family: "Poppins";
-  src: url("/fonts/poppins-semibolditalic-webfont.woff2") format("woff2"),
-    url("/fonts/poppins-semibolditalic-webfont.woff") format("woff");
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 700;
+  src: local(''),
+       url('../public/fonts/poppins-v15-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('../public/fonts/poppins-v15-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+/* poppins-600 - latin */
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
   font-weight: 600;
-  font-style: italic;
+  src: local(''),
+       url('../public/fonts/poppins-v15-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('../public/fonts/poppins-v15-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }
-
+/* poppins-700italic - latin */
 @font-face {
-  font-family: "Poppins";
-  src: url("/fonts/poppins-bold-webfont.woff2") format("woff2"),
-    url("/fonts/poppins-bold-webfont.woff") format("woff");
+  font-family: 'Poppins';
+  font-style: italic;
   font-weight: 700;
+  src: local(''),
+       url('../public/fonts/poppins-v15-latin-700italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('../public/fonts/poppins-v15-latin-700italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+/* poppins-800 - latin */
+@font-face {
+  font-family: 'Poppins';
   font-style: normal;
-}
-
-@font-face {
-  font-family: "Poppins";
-  src: url("/fonts/poppins-bolditalic-webfont.woff2") format("woff2"),
-    url("/fonts/poppins-bolditalic-webfont.woff") format("woff");
-  font-weight: 700;
-  font-style: italic;
-}
-
-@font-face {
-  font-family: "Poppins";
-  src: url("/fonts/poppins-extrabold-webfont.woff2") format("woff2"),
-    url("/fonts/poppins-extrabold-webfont.woff") format("woff");
   font-weight: 800;
-  font-style: normal;
+  src: local(''),
+       url('../public/fonts/poppins-v15-latin-800.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('../public/fonts/poppins-v15-latin-800.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }
-
+/* poppins-900 - latin */
 @font-face {
-  font-family: "Poppins";
-  src: url("/fonts/poppins-extrabolditalic-webfont.woff2") format("woff2"),
-    url("/fonts/poppins-extrabolditalic-webfont.woff") format("woff");
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 900;
+  src: local(''),
+       url('../public/fonts/poppins-v15-latin-900.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('../public/fonts/poppins-v15-latin-900.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+/* poppins-800italic - latin */
+@font-face {
+  font-family: 'Poppins';
+  font-style: italic;
   font-weight: 800;
-  font-style: italic;
+  src: local(''),
+       url('../public/fonts/poppins-v15-latin-800italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('../public/fonts/poppins-v15-latin-800italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }
-
+/* poppins-900italic - latin */
 @font-face {
-  font-family: "Poppins";
-  src: url("/fonts/poppins-black-webfont.woff2") format("woff2"),
-    url("/fonts/poppins-black-webfont.woff") format("woff");
-  font-weight: 900;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: "Poppins";
-  src: url("/fonts/poppins-blackitalic-webfont.woff2") format("woff2"),
-    url("/fonts/poppins-blackitalic-webfont.woff") format("woff");
-  font-weight: 900;
+  font-family: 'Poppins';
   font-style: italic;
-}
+  font-weight: 900;
+  src: local(''),
+       url('../public/fonts/poppins-v15-latin-900italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('../public/fonts/poppins-v15-latin-900italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}

pages/index.mdx

@@ -1,14 +1 @@
-# Home page
-
-Let's write some markdown.
-
-- foo
-- bar
-- baz
-
-## Subtopic
-
-More stuff
-
-1. hello
-1. world
+Visit the [playground](/playground)

pages/index.module.css

@@ -1,3 +0,0 @@
-.Foo {
-  background-color: red;
-}

pages/playground.mdx

@@ -1,11 +1,18 @@
-import {Playground} from '../components/playground'
+import {MiniEventCardDemo, NewsCardDemo} from '../components/playground'
 
 # Playground
 
-- _Some_
-- **Markdown**
-- [Content](https://csclub.uwaterloo.ca)
+## `<MiniEventCard />`
+
+The `<MiniEventCard />` component has a collapsible description, and it used on
+the events page. It uses the `<details>` tag and works without JS!
+
+<MiniEventCardDemo />
 
 ---
 
-<Playground />
+## `<NewsCard />`
+
+unavailable
+
+<NewsCardDemo />