.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": {

components/MiniEventCard.module.css

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

components/MiniEventCard.tsx

@@ -38,8 +38,11 @@ export const MiniEventCard: React.FC<Props> = ({
     <details className={styles.miniEventCard}>
       <summary>
         <div onClick={(event) => event.preventDefault()}>
-          <h2 className={styles.eventTitle}>{name}</h2>
-          <p className={styles.eventInfo}>
+          <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>
@@ -48,7 +51,7 @@ export const MiniEventCard: React.FC<Props> = ({
         <p className={styles.details}>View details {dropDownIcon}</p>
       </summary>
 
-      <div className={styles.longDescription}>{description}</div>
+      <div>{description}</div>
     </details>
   );
 };

components/playground.module.css

@@ -1,12 +1,3 @@
-.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;
 }

components/playground.tsx

@@ -1,12 +1,52 @@
 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 { MiniEventCard } from "./MiniEventCard";
+
+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>
   );
 }

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!

next-env.d.ts

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

pages/_app.css

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

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/playground.mdx

@@ -1,11 +1,10 @@
-import {Playground} from '../components/playground'
+import {MiniEventCardDemo} 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!
 
-<Playground />
+<MiniEventCardDemo />