Remove playground (#288)

Closes #278

Reviewed-on: www/www-new#288
Reviewed-by: Amy <a258wang@csclub.uwaterloo.ca>
Co-authored-by: Aditya Thakral <a3thakra@csclub.uwaterloo.ca>
Co-committed-by: Aditya Thakral <a3thakra@csclub.uwaterloo.ca>
fix-md-font
Aditya Thakral 1 year ago
parent 964b112481
commit f1ec9dbae1
  1. 104
      components/playground.module.css
  2. 296
      components/playground.tsx
  3. 21
      content/playground/after-hours.event.mdx
  4. 14
      content/playground/alt-tab.event.mdx
  5. 9
      content/playground/codey.team-member.mdx
  6. 27
      content/playground/constitution/duties-of-officers.section.mdx
  7. 10
      content/playground/constitution/executive-council.section.mdx
  8. 10
      content/playground/constitution/membership.section.mdx
  9. 6
      content/playground/constitution/name.section.mdx
  10. 30
      content/playground/constitution/officers.section.mdx
  11. 10
      content/playground/constitution/purpose.section.mdx
  12. 5
      content/playground/doge.team-member.mdx
  13. 17
      content/playground/ootb-react.event.mdx
  14. 67
      content/playground/temp.talk.mdx
  15. 14
      content/playground/unavailable.news.mdx
  16. 130
      pages/playground.mdx
  17. BIN
      public/images/playground/alt-tab.jpg
  18. BIN
      public/images/playground/codeyHi.png
  19. BIN
      public/images/playground/doge.jpg
  20. BIN
      public/images/playground/intro-ootb.jpg

@ -1,104 +0,0 @@
.newsDemo {
padding: calc(50rem / 16);
background-color: var(--secondary-background);
display: inline-block;
}
.newsTitle {
font-style: normal;
font-weight: bold;
color: var(--primary-heading);
font-size: calc(24rem / 16);
line-height: calc(36 / 24);
margin-bottom: calc(14rem / 16);
}
.newsDesc {
font-style: normal;
font-weight: normal;
font-size: calc(14rem / 16);
line-height: calc(21 / 14);
white-space: pre-line;
color: var(--primary-heading);
vertical-align: baseline;
}
.news > hr {
border: none;
height: calc(1rem / 16);
background-color: var(--primary-heading);
margin: 0 0 calc(13rem / 16) 0;
}
.eventDescriptionCardDemo {
padding: calc(50rem / 16) 0;
background-color: var(--secondary-background);
display: inline-block;
}
.eventDescriptionCardDemo > * {
margin: calc(12rem / 16) calc(50rem / 16);
}
.eventDescriptionCardDemo > *:first-child {
margin-top: 0;
}
.eventDescriptionCardDemo > *:last-child {
margin-bottom: 0;
}
.teamMemberDemo {
max-width: calc(847rem / 16);
}
.committee {
margin: 0;
color: var(--primary-heading);
font-weight: 600;
font-size: calc(24rem / 16);
line-height: calc(36 / 24);
}
.teamMemberDemo > hr {
border: none;
height: calc(1rem / 16);
background-color: var(--primary-accent);
width: 100%;
margin-top: calc(24rem / 16);
margin-bottom: calc(46rem / 16);
}
.teamMembers {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(calc(100rem / 16), 1fr));
row-gap: calc(43rem / 16);
column-gap: calc(53rem / 16);
}
.linkDemo {
padding: calc(50rem / 16);
background-color: var(--secondary-background);
}
.linkTitle {
font-weight: bold;
color: var(--primary-heading);
font-size: calc(24rem / 16);
}
.miniTechTalkDemo > *:nth-child(odd) {
background: var(--secondary-accent-light);
}
@media only screen and (max-width: calc(768rem / 16)) {
.newsDemo,
.eventDescriptionCardDemo {
padding: calc(20rem / 16);
background-color: var(--secondary-background);
}
.eventDescriptionCardDemo > * {
margin: 0;
}
}

@ -1,296 +0,0 @@
import React, { useState } from "react";
import AfterHoursContent, {
metadata as afterHoursMetadata,
} from "../content/playground/after-hours.event.mdx";
import AltTab, {
metadata as altTabEventMetadata,
} from "../content/playground/alt-tab.event.mdx";
import CodeyInfo, {
metadata as codeyMetadata,
} from "../content/playground/codey.team-member.mdx";
import Duties, {
metadata as dutiesOrganizedContentMetadata,
} from "../content/playground/constitution/duties-of-officers.section.mdx";
import ExecutiveCouncil, {
metadata as executiveCouncilOrganizedContentMetadata,
} from "../content/playground/constitution/executive-council.section.mdx";
import Membership, {
metadata as membershipOrganizedContentMetadata,
} from "../content/playground/constitution/membership.section.mdx";
import Name, {
metadata as nameOrganizedContentMetadata,
} from "../content/playground/constitution/name.section.mdx";
import Officers, {
metadata as officersOrganizedContentMetadata,
} from "../content/playground/constitution/officers.section.mdx";
import Purpose, {
metadata as purposeOrganizedContentMetadata,
} from "../content/playground/constitution/purpose.section.mdx";
import { metadata as dogeMetadata } from "../content/playground/doge.team-member.mdx";
import OOTBReact, {
metadata as OOTBReactEventMetadata,
} from "../content/playground/ootb-react.event.mdx";
import TempTechTalk, {
metadata as tempTechTalkMetadata,
} from "../content/playground/temp.talk.mdx";
import UnavailableContent, {
metadata as unavailableMetadata,
} from "../content/playground/unavailable.news.mdx";
import { Button } from "./Button";
import { EventCard } from "./EventCard";
import { EventDescriptionCard } from "./EventDescriptionCard";
import { Link } from "./Link";
import { MiniEventCard } from "./MiniEventCard";
import { MiniTechTalkCard } from "./MiniTechTalkCard";
import { NewsCard } from "./NewsCard";
import {
OrganizedContent,
LinkProps,
createReadAllSection,
} from "./OrganizedContent";
import { TeamMember } from "./TeamMember";
import { TeamMemberCard } from "./TeamMemberCard";
import { TechTalkCard } from "./TechTalkCard";
import styles from "./playground.module.css";
const events = [
{ Content: OOTBReact, metadata: OOTBReactEventMetadata },
{ Content: AfterHoursContent, metadata: afterHoursMetadata },
{ Content: AltTab, metadata: altTabEventMetadata },
];
const constitution = [
{ Content: Name, ...nameOrganizedContentMetadata },
{ Content: Purpose, ...purposeOrganizedContentMetadata },
{ Content: Membership, ...membershipOrganizedContentMetadata },
{ Content: Officers, ...officersOrganizedContentMetadata },
{ Content: Duties, ...dutiesOrganizedContentMetadata },
{
Content: ExecutiveCouncil,
...executiveCouncilOrganizedContentMetadata,
},
];
export function MiniEventCardDemo() {
return (
<div className={styles.miniEventCardDemo}>
{events.map(({ Content, metadata }) => (
<MiniEventCard
{...metadata}
description={<Content />}
key={metadata.name + metadata.date.toString()}
/>
))}
</div>
);
}
export function NewsCardDemo() {
return (
<div className={styles.newsDemo}>
<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>
);
}
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}>
{events.map(({ metadata }) => (
<EventDescriptionCard
{...metadata}
key={metadata.name + metadata.date.toString()}
/>
))}
</div>
);
}
export function EventCardDemo() {
return (
<>
{events.map(({ Content, metadata }) => (
<>
<EventCard
{...metadata}
key={metadata.name + metadata.date.toDateString() + "1"}
showDescription
>
<Content />
</EventCard>
<EventCard
{...metadata}
key={metadata.name + metadata.date.toDateString() + "2"}
link="#"
>
<Content />
</EventCard>
</>
))}
</>
);
}
export function TeamMemberDemo() {
return (
<div className={styles.teamMemberDemo}>
<div className={styles.teamMemberHeader}>
<h1 className={styles.committee}>Programme Committee</h1>
</div>
<hr />
<div className={styles.teamMembers}>
<TeamMember {...dogeMetadata} image="/images/playground/doge.jpg" />
<TeamMember {...dogeMetadata} image="/images/playground/doge.jpg" />
<TeamMember {...dogeMetadata} image="/images/playground/doge.jpg" />
<TeamMember {...dogeMetadata} image="/images/playground/doge.jpg" />
<TeamMember {...dogeMetadata} image="/images/playground/doge.jpg" />
<TeamMember {...dogeMetadata} image="/images/playground/doge.jpg" />
<TeamMember {...dogeMetadata} image="/images/playground/doge.jpg" />
<TeamMember {...dogeMetadata} image="/images/playground/doge.jpg" />
<TeamMember {...dogeMetadata} image="/images/playground/doge.jpg" />
<TeamMember {...dogeMetadata} image="/images/playground/doge.jpg" />
</div>
</div>
);
}
export function TeamMemberCardDemo() {
return (
<div className={styles.teamMemberCardDemo}>
<TeamMemberCard {...codeyMetadata} image="/images/playground/doge.jpg">
<CodeyInfo />
</TeamMemberCard>
</div>
);
}
export function LinkDemo() {
return (
<div className={styles.linkDemo}>
<div className={styles.linkTitle}>Elections</div>
<p>
To find out when and where the next elections will be held, keep an eye
on the <Link href="https://csclub.uwaterloo.ca/news/">News</Link>. For
details on the elections, read our{" "}
<Link href="https://csclub.uwaterloo.ca/about/constitution">
Constitution
</Link>
.
</p>
</div>
);
}
export function OrganizedContentDemo() {
const sections = [...constitution];
const numberedSections = false;
const readAllSection = createReadAllSection(
constitution.map(({ id, title, Content }) => ({
Content,
section: { id, title },
})),
true,
numberedSections
);
sections.unshift({
...readAllSection.section,
Content: readAllSection.Content,
});
const [id, setId] = useState(sections[0].id);
function FakeLink({ className, id, children }: LinkProps) {
return (
<div className={className} onClick={() => setId(id)}>
{children}
</div>
);
}
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
const Content = sections.find(
({ id: sectionId }) => sectionId === id
)!.Content;
return (
<OrganizedContent
sections={sections}
id={id}
link={FakeLink}
pageTitle="Playground"
numberedSections={numberedSections}
>
<Content />
</OrganizedContent>
);
}
export function TechTalkDemo() {
const poster =
tempTechTalkMetadata.thumbnails.large ??
tempTechTalkMetadata.thumbnails.small;
return (
<div>
<TechTalkCard {...tempTechTalkMetadata} poster={poster}>
<TempTechTalk />
</TechTalkCard>
</div>
);
}
export function MiniTechTalkDemo() {
return (
<div className={styles.miniTechTalkDemo}>
<MiniTechTalkCard
{...tempTechTalkMetadata}
poster={tempTechTalkMetadata.thumbnails.small}
/>
<MiniTechTalkCard
{...tempTechTalkMetadata}
poster={tempTechTalkMetadata.thumbnails.small}
/>
<MiniTechTalkCard
{...tempTechTalkMetadata}
poster={tempTechTalkMetadata.thumbnails.small}
/>
</div>
);
}

@ -1,21 +0,0 @@
export const metadata = {
name: "Afterhours: Personal Relationships",
short: "Learn how React works and make your own version!",
date: new Date("March 25, 2021 19:00:00 GMT-4"),
online: false,
location: "MC",
registerLink: "http://csclub.uwaterloo.ca/",
};
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!

@ -1,14 +0,0 @@
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 GMT-4"),
online: true,
location: "Twitch",
poster: "/images/playground/alt-tab.jpg",
};
CSC is proud to present to you Alt-Tab! Join us in a lightning tech talk series presented to you by our very own students. Alt-Tab consists of 10 to 15-minute talks about anything related to tech. Learn more about exciting topics that range from competitive programming to cryptography!
We will have four incredible presenters that are eager to share their insights with you. Stay tuned as we'll be introducing them and the topics that they will be discussing soon!.
Registration is not required to attend! We'll just be sending you an email reminder, as well as inviting you to our calendar even

@ -1,9 +0,0 @@
export const metadata = {
name: "Codey",
role: "Mascot",
image: "/images/playground/codeyHi.png"
}
The one, the only, Codey! Codey is ecstatic to be your mascot for this term.
Codey loves programming and playing on their laptop. You can often find Codey
posing for event promo graphics, or chilling in the CSC discord.

@ -1,27 +0,0 @@
export const metadata = {
title: "5. Duties of Officers",
id: "duties-of-officers"
};
The duties of the President shall be:
to call and preside at all general, special, and executive meetings of the Club, except during the election of officers;
to appoint special committees of the Club and the membership and chairs of such committees, with the approval of the Executive Council; and
to audit, or to appoint a representative to audit, the financial records of the club at the end of each academic term.
with the approval of the Faculty Advisor, rule on any point of procedure under the constitution that arises outside of a meeting.
The duties of the Vice-President shall be:
to assume the duties of the President in the event of the President's absence;
to chair the Programme Committee;
to appoint members to and remove members from the Programme Committee;
to ensure that Club events are held regularly; and
to assume those duties of the President that are delegated to them by the President.
The duties of the Secretary shall be:
to keep minutes of all Club meetings;
to care for all Club correspondence; and
manage any persons appointed to internal positions by the Executive.
The duties of the Treasurer shall be:
to collect dues and maintain all financial and membership records;
to produce a financial or membership statement when requested.
The duties of the System Administrator shall be:
to chair the Systems Committee;
to appoint members to and remove members from the Systems Committee.
to ensure that the duties of the Systems Committee are performed.

@ -1,10 +0,0 @@
export const metadata = {
title: "6. Executive Council",
id: "executive-council"
};
The Executive Council shall consist of the present officers of the Club and the Faculty Advisor (as a non-voting member) and has the power to run the affairs of this club within the limits of this constitution. This includes the power to overrule or issue directions to any officer.
The Executive Council may appoint people to various positions to help manage the Club.
The Executive Council must obey any instructions given to it by the members at a meeting and can be overruled by them.
The Executive Council can act by consensus achieved on their mailing list.
Minutes of the Executive Council meetings shall be available for inspection by any member of the Club and shall be filed with the Club records. On request, a member shall be shown the archive of any thread on the Executive Council mailing list which resulted in a decision being made.

@ -1,10 +0,0 @@
export const metadata = {
title: "3. Membership",
id: "membership"
};
In compliance with MathSoc regulations and in recognition of the club being primarily targeted at undergraduate students, full membership is open to all Social Members of the Mathematics Society and restricted to the same.
Affiliate membership in this Club shall be open to all members of the University community, including alumni. Affiliate members shall have all the rights of full members except for the rights of voting and holding executive office.
Membership shall be accounted for on a termly basis, where a term begins at the start of lectures in Winter or Spring, and at the start of Orientation Week in Fall.
A person is not a member until he or she has paid the current membership fee and has been enrolled in the member database. The termly membership fee is set from time to time by the Executive. Under conditions approved by the Executive, a member who purchases a membership at the end of the current term may be given membership for both the current term and the next term. If the membership fee changes, then this does not affect the validity of any membership terms already paid for.
The Club may grant access to its systems, either free of charge or for a fee, to members of the University community in order to offer them services. This does not constitute membership.

@ -1,6 +0,0 @@
export const metadata = {
title: "1. Name",
id: "name"
};
The name of this organization shall be the "Computer Science Club of the University of Waterloo".

@ -1,30 +0,0 @@
export const metadata = {
title: "4. Officers",
id: "officers"
};
The officers of the Club shall be:
President
Vice-President
Secretary
Treasurer
System Administrator
There shall additionally be a Faculty Advisor, selected by the Executive from time to time from among the faculty of the School of Computer Science. The Faculty Advisor shall be an ex-officio affiliate member of the Club.
The choice of officers shall be limited to full members of the Club.
All officers, other than the System Administrator, shall be elected at a meeting to be held no later than two weeks after the start of lectures in each term.
The election of officers shall be accomplished by the following procedure:
Before the end of the prior term, the then-Executive shall choose a willing Chief Returning Officer, who is responsible for carrying out elections according to this procedure.
The CRO shall set the date and time of the election meeting, and set the nomination period. The nomination shall be at least one week long and shall end at least 24 hours before the start of the election meeting.
Announcements of the election and the nomination procedure must be distributed to all members by the members' mailing list, and should also be advertised by posters in the MC building.
During the nomination period, the Chief Returning Officer (CRO) shall be available to receive nominations for the posts of officers of the club, either in person, by email, by depositing nomination forms in the CSC's mailbox in the MathSoc office, or by writing the nomination in a place in the CSC office to be specified by the CRO.
A nomination shall consist of the nominee's userid, and post(s) nominated for. Nominees must be full members of the Computer Science Club. A member may decline a nomination at any point prior to the taking of the vote.
The election shall commence with the offering of memberships for sale. After a reasonable time, control of the meeting is given to the CRO who will preside over the election of the President, Vice-President, Treasurer, and Secretary, in that order.
During each election, if the position has no nominees, the CRO will take nominations from the floor. Any present, eligible member can be nominated.
Each election shall be carried out by secret vote, in a manner to be decided on by the CRO, with the approval of the members at the meeting. A simple heads-down-hands-up method is considered acceptable.
The CRO shall not vote except to break a tie.
The CRO may, if feasible, accept absentee ballots from full members. No absentee vote from a member shall be counted if the member is present at the time the vote is taken. The CRO shall make a best effort to ensure that absentee ballots are compatible with the method of voting chosen; if this is not possible (for instance, if the CRO is overruled by the membership), then the absentee votes shall not be counted.
Immediately after the vote is taken, the CRO will announce the results of the election and the winner will be removed from subsequent contests. If, due to lack of candidates (because there were no nominations, or candidates withdrew or were eliminated), there is no one elected to an office, then the members at the meeting will decide whether or not to hold extra elections in accordance with the procedure for vacancies. If they choose not to, this does not prevent the Executive or a group of members from calling extra elections later in the term in accordance with the usual vacancy provisions.
Following the elections, it is the responsibility of the new executive to select a System Administrator. The selection of System Administrator must then be ratified by the members at the meeting. If a suitable System Administrator is not available, then the executive may delay their selection until one becomes available. In this case the selection of System Administrator must be ratified at the next meeting of the Club.
Any two offices may be held by a single person with the approval of the President (if any), and the explicit approval of the members.
In the case of a resignation of an officer or officers, including the President, or if a vacancy occurs for any other reason, the Executive, members at a meeting, or any ten (10) members may call extra elections to replace such officer(s). If extra elections are held, they are held for all vacant offices.
Whenever extra elections are held, they shall follow the usual election procedure. If they are held after elections failed to elect an officer, then the nomination period may be shortened to less than a week in order to allow the extra elections to take place at the same date and time in the following week. The Executive (or the ten (10) members who called the election) may appoint a replacement CRO if the previous CRO is unwilling or unable to fulfill their duties.

@ -1,10 +0,0 @@
export const metadata = {
title: "2. Purpose",
id: "purpose"
};
The Club is organized and will be operated exclusively for educational and scientific purposes in furtherance of:
promoting an increased knowledge of computer science and its applications;
promoting a greater interest in computer science and its applications; and
providing a means of communication between persons having interest in computer science.
The above purposes will be fulfilled by the organization of discussions and lectures with professionals and academics in the field of computer science and related fields, the maintenance of a library of materials related to computer science, the maintenance of an office containing the library as an aid to aim (1.3) above, and such other means as decided by the club membership.

@ -1,5 +0,0 @@
export const metadata = {
name: "Woof Woof",
role: "Doge",
image: "/images/playground/doge.jpg"
}

@ -1,17 +0,0 @@
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 GMT-4"),
online: true,
location: "Twitch",
poster: "/images/playground/intro-ootb.jpg",
registerLink: "http://google.com/",
};
Modern web frameworks are a black-box. They're easy to use, but they have numerous minute details to master in order to apply them to truly scalable websites. Over the last few years, front-end frameworks have absorbed the responsibilities of the back-end, meaning it's become ever more important to dig their details out of the box.
Out of the Box is a series of code-along projects that explore what's under the hood of modern web frameworks. Nearly 5 million websites use React, including many of the internet's most popular websites. While its simple syntax attracts developers from all over, underneath lies a complex infrastructure of code to manage all elements from caching to hooks. Rishi will bring these ideas to light in our inaugural episode of Out of the Box. Come join him and code your own version of React!
Only basic web experience is needed. All JavaScript code will be written within a single HTML document for simplicity. Node.js will also be required to participate in the event!
Registration is not required to attend! We'll just be sending you an email reminder, as well as inviting you to our calendar event.

@ -1,67 +0,0 @@
export const metadata = {
slug: "not-a-valid-slug",
title: "1989 Bill Gates Talk on Microsoft",
presentors: ["Bill Gates"],
thumbnails: {
small: "/images/playground/alt-tab.jpg",
large: "/images/playground/alt-tab.jpg",
},
links: [
{
file: "http://mirror.csclub.uwaterloo.ca/csclub/bill-gates-1989.mp3",
type: "mp3",
size: "85M",
},
{
file: "http://mirror.csclub.uwaterloo.ca/csclub/bill-gates-1989.flac",
type: "flac",
size: "540M",
},
{
file: "http://mirror.csclub.uwaterloo.ca/csclub/bill-gates-1989.ogg",
type: "ogg",
size: "56M",
},
{
file: "http://mirror.csclub.uwaterloo.ca/csclub/bill-gates-1989.wav",
type: "wav",
size: "945M",
},
]
};
Bill Gates discusses the software and computer industry, and how Microsoft has contributed. Gates also discusses his views on the future of the computing industry. The talk was recorded in 1989 but was only recently digitized.
Topics include:
- The start and history of the microcomputer industry
- Microsoft BASIC and the Altair 880 computer
- The transition from 8-bit to 16-bit computers
- Microsoft's history with IBM
- 640k memory barrier and 16-bit architectures
- 32-bit 386 and 486 architectures
- RISC and multi-processor machines
- EGA graphics and WYSIWYG editors
- Decreasing cost of memory, harddisks and hardware in general
- The importance and future of the mouse
- Object-oriented programming
- MS-DOS and OS/2
- Multi-threaded and multi-application systems
- Synchronization in multi-threaded applications
- Diskette-based software
- UNIX standardization and POSIX
- History of the Macintosh and Microsoft' involvement
- Involvement of Xerox in graphical user interfaces
- Apple vs. Microsoft lawsuit regarding user interfaces
- OS/2 future as a replacement for MS-DOS
- Microsoft Office on Macintosh
- Thin/dumb clients
- Compact discs
- Multimedia applications
- Gates' current role at Microsoft
<!-- -->
The following picture was taken after the talk (click for higher-res).
[![null](<http://mirror.csclub.uwaterloo.ca/csclub/bill-gates-1989.jpg>)](<http://mirror.csclub.uwaterloo.ca/csclub/bill-gates-1989-big.jpg>)

@ -1,14 +0,0 @@
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.

@ -1,130 +0,0 @@
import {
MiniEventCardDemo,
NewsCardDemo,
EventDescriptionCardDemo,
LinkDemo,
EventCardDemo,
TeamMemberDemo,
TeamMemberCardDemo,
OrganizedContentDemo,
ButtonDemo,
TechTalkDemo,
MiniTechTalkDemo,
} from "@/components/playground";
import { ConnectWithUs } from "@/components/ConnectWithUs";
import { EmailSignup } from "@/components/EmailSignup";
import { TeamMemberCard } from "@/components/TeamMemberCard";
# Playground
## `<OrganizedContent />`
Codey is supposed to say something here...
<OrganizedContentDemo />
---
## `<MiniEventCard />`
The `<MiniEventCard />` component has a collapsible description, and it is used
on the events page. It uses the `<details>` tag and works without JS!
<MiniEventCardDemo />
---
## `<NewsCard />`
unavailable
<NewsCardDemo />
---
## `<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
`<Button />` and `<EventSetting />` components.
<EventDescriptionCardDemo />
---
## `<EventCard />`
The `<EventCard />` component is used on the events page, and uses the
`<Button />` and `<EventSetting />` components.
<EventCardDemo />
---
## `<TeamMember />`
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 />
---
## `<TeamMemberCard />`
The `<TeamMemberCard />` component is used on the "Meet the Team!" page to
display information about the execs: prez, VP, trez, AVP, and syscom overlord.
<TeamMemberCardDemo />
---
## `<Link />`
The `<Link />` component is used on various pages such as Meet the Team! and Our Supporters
<LinkDemo />
---
## `<TechTalkCard />`
The `<TechTalkCard />` component is used on the Resources page to display information
about Tech Talks.
<TechTalkDemo />
---
## `<MiniTechTalkCard />`
The `<MiniTechTalkCard />` component is used on the Resources page to display condensed
information about Tech Talks.
<MiniTechTalkDemo />
---
## `<ConnectWithUs />`
The `<ConnectWithUs />` component is used on various pages such as the About page and the Get Involved Page!
<ConnectWithUs />
---
## `<EmailSignup />`
The `<EmailSignup />` component is used on various pages such as the About page and the Get Involved Page!
<EmailSignup />
---

Binary file not shown.

Before

Width:  |  Height:  |  Size: 268 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 51 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 63 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 321 KiB

Loading…
Cancel
Save