From 8bbe4d5bec8c5a34091856df7ee15c01ca36a287 Mon Sep 17 00:00:00 2001
From: William Tran <william.tran1@uwaterloo.ca>
Date: Mon, 31 May 2021 02:26:27 -0400
Subject: [PATCH] Add .mdx functionality to OrganizedContent

---
 components/OrganizedContent.tsx               |  27 ++--
 components/playground.tsx                     | 118 ++++++------------
 .../duties-of-officers.organized-content.mdx  |  27 ++++
 .../executive-council.organized-content.mdx   |  10 ++
 .../membership.organized-content.mdx          |  10 ++
 .../constitution/name.organized-content.mdx   |   6 +
 .../officers.organized-content.mdx            |  30 +++++
 .../purpose.organized-content.mdx             |  10 ++
 .../read-all.organized-content.mdx            |   6 +
 next-env.d.ts                                 |  14 +++
 10 files changed, 166 insertions(+), 92 deletions(-)
 create mode 100644 content/playground/constitution/duties-of-officers.organized-content.mdx
 create mode 100644 content/playground/constitution/executive-council.organized-content.mdx
 create mode 100644 content/playground/constitution/membership.organized-content.mdx
 create mode 100644 content/playground/constitution/name.organized-content.mdx
 create mode 100644 content/playground/constitution/officers.organized-content.mdx
 create mode 100644 content/playground/constitution/purpose.organized-content.mdx
 create mode 100644 content/playground/constitution/read-all.organized-content.mdx

diff --git a/components/OrganizedContent.tsx b/components/OrganizedContent.tsx
index f98bf3ab..f263aebc 100644
--- a/components/OrganizedContent.tsx
+++ b/components/OrganizedContent.tsx
@@ -2,7 +2,7 @@ import React, { ReactNode, ComponentType } from "react";
 import styles from "./OrganizedContent.module.css";
 
 export interface LinkProps {
-  className: string;
+  className?: string;
   url: string;
   children: string | ReactNode | (string | ReactNode)[];
 }
@@ -10,7 +10,7 @@ export interface LinkProps {
 type Link = ComponentType<LinkProps>;
 
 interface Heading {
-  name: string;
+  title: string;
   url: string;
   content: ReactNode;
 }
@@ -34,13 +34,13 @@ export const OrganizedContent = ({
   link: Link,
   children,
 }: Props) => {
-  const isReadAll = headings[currentIndex].name === "Read All";
+  const isReadAll = headings[currentIndex].title === "Read All";
 
   const readAllContent = headings
-    .filter((heading: { name: string }) => heading.name !== "Read All")
+    .filter((heading: { title: string }) => heading.title !== "Read All")
     .map((heading) => (
       <div key={heading.url}>
-        <h1>{heading.name}</h1>
+        <h1>{heading.title}</h1>
         {heading.content}
       </div>
     ));
@@ -59,7 +59,7 @@ export const OrganizedContent = ({
           <>{readAllContent}</>
         ) : (
           <>
-            <h1>{headings[currentIndex].name}</h1>
+            <h1>{headings[currentIndex].title}</h1>
             {children}
             <Footer {...childProps} />
           </>
@@ -81,14 +81,14 @@ const Nav = ({ headings, currentIndex, link: Link }: ChildProps) => {
             className={
               styles.navOption +
               " " +
-              (heading.name === "Read All" ? styles.readAll : "")
+              (heading.title === "Read All" ? styles.readAll : "")
             }
           >
             {index === currentIndex && (
               <span className={styles.selectedMarker} />
             )}
             <Link className={styles.navLink} url={heading.url}>
-              {heading.name}
+              {heading.title}
             </Link>
           </div>
           <div className={styles.divider}></div>
@@ -100,12 +100,12 @@ const Nav = ({ headings, currentIndex, link: Link }: ChildProps) => {
 
 const Footer = ({ headings, currentIndex, link: Link }: ChildProps) => {
   const prevHeading =
-    currentIndex > 0 && headings[currentIndex - 1].name !== "Read All"
+    currentIndex > 0 && headings[currentIndex - 1].title !== "Read All"
       ? headings[currentIndex - 1]
       : undefined;
   const nextHeading =
     currentIndex < headings.length - 1 &&
-    headings[currentIndex + 1].name !== "Read All"
+    headings[currentIndex + 1].title !== "Read All"
       ? headings[currentIndex + 1]
       : undefined;
 
@@ -125,13 +125,12 @@ const Footer = ({ headings, currentIndex, link: Link }: ChildProps) => {
             </svg>
             <div>
               <div className={styles.prevNext}>Previous</div>
-              <div className={styles.arrowHeading}>{prevHeading.name}</div>
+              <div className={styles.arrowHeading}>{prevHeading.title}</div>
             </div>
           </div>
         </Link>
       )}
-      {/* used to always push options to the edges with space-between */}
-      <div></div>
+      <div className={styles.footerDivider}></div>
       {nextHeading && (
         <Link url={nextHeading.url}>
           <div className={styles.footerSection}>
@@ -139,7 +138,7 @@ const Footer = ({ headings, currentIndex, link: Link }: ChildProps) => {
               <div className={styles.prevNext + " " + styles.nextText}>
                 Next
               </div>
-              <div className={styles.arrowHeading}>{nextHeading.name}</div>
+              <div className={styles.arrowHeading}>{nextHeading.title}</div>
             </div>
             <svg
               xmlns="http://www.w3.org/2000/svg"
diff --git a/components/playground.tsx b/components/playground.tsx
index e6fa1241..96d2c910 100644
--- a/components/playground.tsx
+++ b/components/playground.tsx
@@ -11,6 +11,28 @@ import AltTab, {
   metadata as altTabEventMetadata,
 } from "../content/playground/alt-tab.event.mdx";
 
+import ReadAll, {
+  metadata as readAllOrganizedContentMetadata,
+} from "../content/playground/constitution/read-all.organized-content.mdx";
+import Name, {
+  metadata as nameOrganizedContentMetadata,
+} from "../content/playground/constitution/name.organized-content.mdx";
+import Purpose, {
+  metadata as purposeOrganizedContentMetadata,
+} from "../content/playground/constitution/purpose.organized-content.mdx";
+import Membership, {
+  metadata as membershipOrganizedContentMetadata,
+} from "../content/playground/constitution/membership.organized-content.mdx";
+import Officers, {
+  metadata as officersOrganizedContentMetadata,
+} from "../content/playground/constitution/officers.organized-content.mdx";
+import Duties, {
+  metadata as dutiesOrganizedContentMetadata,
+} from "../content/playground/constitution/duties-of-officers.organized-content.mdx";
+import ExecutiveCouncil, {
+  metadata as executiveCouncilOrganizedContentMetadata,
+} from "../content/playground/constitution/executive-council.organized-content.mdx";
+
 import UnavailableContent, {
   metadata as unavailableMetadata,
 } from "../content/playground/unavailable.news.mdx";
@@ -33,6 +55,19 @@ const events = [
   { Content: AltTab, metadata: altTabEventMetadata },
 ];
 
+const constitution = [
+  { Content: ReadAll, metadata: readAllOrganizedContentMetadata },
+  { Content: Name, metadata: nameOrganizedContentMetadata },
+  { Content: Purpose, metadata: purposeOrganizedContentMetadata },
+  { Content: Membership, metadata: membershipOrganizedContentMetadata },
+  { Content: Officers, metadata: officersOrganizedContentMetadata },
+  { Content: Duties, metadata: dutiesOrganizedContentMetadata },
+  {
+    Content: ExecutiveCouncil,
+    metadata: executiveCouncilOrganizedContentMetadata,
+  },
+];
+
 export function MiniEventCardDemo() {
   return (
     <div className={styles.miniEventCardDemo}>
@@ -128,81 +163,10 @@ export function TeamMemberCardDemo() {
 }
 
 export function OrganizedContentDemo() {
-  let sections = [
-    {
-      name: "1. Name",
-      url: "a",
-      content: (
-        <div>
-          {" "}
-          1. The name of this organization shall be the &quot;Computer Science
-          Club of the University of Waterloo&quot;.
-        </div>
-      ),
-    },
-    {
-      name: "2. Purpose",
-      url: "b",
-      content: (
-        <div>
-          {" "}
-          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.
-        </div>
-      ),
-    },
-    {
-      name: "3. Membership",
-      url: "c",
-      content: (
-        <div>
-          {" "}
-          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.
-        </div>
-      ),
-    },
-    {
-      name: "Consequences of Unacceptable Behavior",
-      url: "d",
-      content: <div> CODEY </div>,
-    },
-  ];
-
-  const readAllSection = {
-    name: "Read All",
-    url: "readall",
-    content: <div> </div>,
-  };
-
-  sections = [readAllSection, ...sections];
+  const sections = constitution.map(({ Content, metadata }) => ({
+    ...metadata,
+    content: <Content />,
+  }));
 
   const [index, setIndex] = useState(0);
 
@@ -223,11 +187,9 @@ export function OrganizedContentDemo() {
     );
   }
 
-  const { content } = sections[index];
-
   return (
     <OrganizedContent headings={sections} currentIndex={index} link={FakeLink}>
-      {content}
+      {sections[index].content}
     </OrganizedContent>
   );
 }
diff --git a/content/playground/constitution/duties-of-officers.organized-content.mdx b/content/playground/constitution/duties-of-officers.organized-content.mdx
new file mode 100644
index 00000000..230517c2
--- /dev/null
+++ b/content/playground/constitution/duties-of-officers.organized-content.mdx
@@ -0,0 +1,27 @@
+export const metadata = {
+  title: "5. Duties of Officers",
+  url: "5"
+};
+
+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.
\ No newline at end of file
diff --git a/content/playground/constitution/executive-council.organized-content.mdx b/content/playground/constitution/executive-council.organized-content.mdx
new file mode 100644
index 00000000..e33ae598
--- /dev/null
+++ b/content/playground/constitution/executive-council.organized-content.mdx
@@ -0,0 +1,10 @@
+export const metadata = {
+  title: "6. Executive Council",
+  url: "6"
+};
+
+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.
\ No newline at end of file
diff --git a/content/playground/constitution/membership.organized-content.mdx b/content/playground/constitution/membership.organized-content.mdx
new file mode 100644
index 00000000..4d1dee0c
--- /dev/null
+++ b/content/playground/constitution/membership.organized-content.mdx
@@ -0,0 +1,10 @@
+export const metadata = {
+  title: "3. Membership",
+  url: "3"
+};
+
+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.
\ No newline at end of file
diff --git a/content/playground/constitution/name.organized-content.mdx b/content/playground/constitution/name.organized-content.mdx
new file mode 100644
index 00000000..f5b03854
--- /dev/null
+++ b/content/playground/constitution/name.organized-content.mdx
@@ -0,0 +1,6 @@
+export const metadata = {
+  title: "1. Name",
+  url: "1"
+};
+
+The name of this organization shall be the "Computer Science Club of the University of Waterloo".
diff --git a/content/playground/constitution/officers.organized-content.mdx b/content/playground/constitution/officers.organized-content.mdx
new file mode 100644
index 00000000..945afd57
--- /dev/null
+++ b/content/playground/constitution/officers.organized-content.mdx
@@ -0,0 +1,30 @@
+export const metadata = {
+  title: "4. Officers",
+  url: "4"
+};
+
+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.
\ No newline at end of file
diff --git a/content/playground/constitution/purpose.organized-content.mdx b/content/playground/constitution/purpose.organized-content.mdx
new file mode 100644
index 00000000..5b5082cc
--- /dev/null
+++ b/content/playground/constitution/purpose.organized-content.mdx
@@ -0,0 +1,10 @@
+export const metadata = {
+  title: "2. Purpose",
+  url: "2"
+};
+
+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.
\ No newline at end of file
diff --git a/content/playground/constitution/read-all.organized-content.mdx b/content/playground/constitution/read-all.organized-content.mdx
new file mode 100644
index 00000000..934388b8
--- /dev/null
+++ b/content/playground/constitution/read-all.organized-content.mdx
@@ -0,0 +1,6 @@
+export const metadata = {
+  title: "Read All",
+  url: "0"
+};
+
+You can leave readall blank, it is auto generated.
\ No newline at end of file
diff --git a/next-env.d.ts b/next-env.d.ts
index 458d2ae0..662b0751 100644
--- a/next-env.d.ts
+++ b/next-env.d.ts
@@ -48,3 +48,17 @@ declare module "*.team-member.mdx" {
   export const metadata: TeamMemberMetadata;
   export default ReactComponent;
 }
+
+declare module "*.organized-content.mdx" {
+  import { ComponentType } from "react";
+
+  interface OrganizedContentMetadata {
+    title: string;
+    url: string;
+  }
+
+  const ReactComponent: ComponentType;
+
+  export const metadata: OrganizedContentMetadata;
+  export default ReactComponent;
+}