Gm updates

.gitignore

@@ -40,6 +40,7 @@ offoutput.json
 townhall.json
 past-townhall.json
 gmData.json
+past-gm.json
 
 # Local Netlify folder
 .netlify

components/Footer.js

@@ -114,8 +114,8 @@ function Footer() {
                       <FooterLinkElement
                         path={path}
                         /* TODO: resolve 404 with <Image /> component */
-                        /* eslint-disable-next-line @next/next/no-img-element */
                         title={
+                          /* eslint-disable-next-line @next/next/no-img-element */
                           <img
                             className="committee-sidebar-image"
                             src={wordmark_dark}

package.json

@@ -10,6 +10,7 @@
     "@fortawesome/react-fontawesome": "^0.2.1",
     "@netlify/plugin-nextjs": "^5.9.4",
     "@testing-library/dom": "^10.4.0",
+    "a": "^3.0.1",
     "dotenv": "^16.4.5",
     "googleapis": "^144.0.0",
     "moment": "^2.29.4",

pages/gm.js

@@ -1,3 +1,6 @@
+import { faFileAlt, faVideo } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
 import Image from 'next/legacy/image';
 import Link from 'next/link';
 import { NextSeo } from 'next-seo';
@@ -7,6 +10,7 @@ import Countdown from 'react-countdown';
 import Banner from '../components/Banner';
 import Layout from '../components/Layout';
 import gmData from '../gmData.json';
+import pastData from '../past-gm.json';
 
 import aiLogo from '../public/images/committees/ai_wordmark.svg';
 import boardLogo from '../public/images/committees/board_wordmark.svg';
@@ -21,6 +25,11 @@ import wLogo from '../public/images/committees/w_wordmark.svg';
 import googleSlideLogo from '../public/images/slides.png';
 import winterGMgraphic from '../public/images/Winter_GM_2025_graphic.png';
 
+const inlineButtonListStyle = {
+  display: 'inline-block',
+  marginBottom: '1em',
+};
+
 const dayToName = (day) => {
   switch (day) {
     case 0:
@@ -156,6 +165,8 @@ const GMCountdown = (props) => {
 };
 
 function gm() {
+
+  const pastGMs = [...pastData].reverse();
   const data = parseGMData(gmData);
   function countdownRenderer({ days, hours, minutes, seconds, completed }) {
     const { dayString, hourString, minuteString, secondString } =
@@ -335,6 +346,7 @@ function gm() {
             </div>
             {data.initiatives.map((item) => (
               <p key={item.id} className="gm-program-row">
+                {/* eslint-disable-next-line @next/next/no-img-element */}
                 {item}
               </p>
             ))}
@@ -347,10 +359,67 @@ function gm() {
                 friends!
               </p>
             </div>
-            <p className="gm-program-row">All ACM officers</p>
+            <div className="gm-program-row">All ACM officers</div>
           </div>
         </div>
       </div>
+      {/* Past GMs */}
+      <div className="content-container-medium">
+        <hr></hr>
+        <h2 className="text-center">Past General Meetings</h2>
+        {pastGMs.map((pastGM, index) => (
+          <div className="grid-tablet-2" key={index}>
+            <div>
+              <h3>{pastGM.title + ' // ' + pastGM.date}</h3>
+              <p>{pastGM.description}</p>
+              <ul className="list-unstyled">
+                <li style={inlineButtonListStyle}>
+                  <Link href={pastGM.slides}>
+                    <a
+                      className="button"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      <FontAwesomeIcon
+                        icon={faFileAlt}
+                        fixedWidth
+                        aria-hidden={true}
+                      />{' '}
+                      Event Slides
+                    </a>
+                  </Link>
+                </li>{' '}
+                <li style={inlineButtonListStyle}>
+                  {pastGM.notes && pastGM.notes.trim() !== '' && (
+                    <Link href={pastGM.notes}>
+                      <a
+                        className="button"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                      >
+                        <FontAwesomeIcon
+                          icon={faVideo}
+                          fixedWidth
+                          aria-hidden={true}
+                        />{' '}
+                        Event Recording
+                      </a>
+                    </Link>
+                  )}
+                </li>
+              </ul>
+            </div>
+            <div>
+              {/* eslint-disable-next-line @next/next/no-img-element */}
+              <img
+                src={pastGM.banner}
+                alt={pastGM.alt_text}
+                style={{ maxWidth: '100%' }}
+              />
+            </div>
+          </div>
+        ))}
+      </div>
     </Layout>
   );
 }

pages/gm/f21.js

@@ -213,55 +213,55 @@ function F21() {
                 Fall quarter
               </p>
             </div>
-            {/* eslint-disable-next-line @next/next/no-img-element */}
             <p className="gm-program-row">
+              {/* eslint-disable-next-line @next/next/no-img-element */}
               <img
                 src="/images/committees/studio_wordmark.svg"
                 alt="ACM studio"
               />{' '}
               Christian Loanzon, Peter Sutarjo
             </p>
-            {/* eslint-disable-next-line @next/next/no-img-element */}
             <p className="gm-program-row">
+              {/* eslint-disable-next-line @next/next/no-img-element */}
               <img src="/images/committees/icpc_wordmark.svg" alt="ACM icpc" />{' '}
               Jacob Zhang
             </p>
-            {/* eslint-disable-next-line @next/next/no-img-element */}
             <p className="gm-program-row">
+              {/* eslint-disable-next-line @next/next/no-img-element */}
               <img
                 src="/images/committees/design_wordmark.svg"
                 alt="ACM design"
               />{' '}
               Crystal Huynh, Muthu Palaniappan
             </p>
-            {/* eslint-disable-next-line @next/next/no-img-element */}
             <p className="gm-program-row">
+              {/* eslint-disable-next-line @next/next/no-img-element */}
               <img
                 src="/images/committees/cyber_wordmark.svg"
                 alt="ACM cyber"
               />{' '}
               Josh Lee, Henry Chang
             </p>
-            {/* eslint-disable-next-line @next/next/no-img-element */}
             <p className="gm-program-row">
+              {/* eslint-disable-next-line @next/next/no-img-element */}
               <img
                 src="/images/committees/teachLA_wordmark.svg"
                 alt="ACM teachLA"
               />{' '}
               Sophie Schoenmeyer, Chloe Uy
             </p>
-            {/* eslint-disable-next-line @next/next/no-img-element */}
             <p className="gm-program-row">
+              {/* eslint-disable-next-line @next/next/no-img-element */}
               <img src="/images/committees/w_wordmark.svg" alt="ACM w" /> Cindy
               Zhang, Lena O&apos;Grady
             </p>
-            {/* eslint-disable-next-line @next/next/no-img-element */}
             <p className="gm-program-row">
+              {/* eslint-disable-next-line @next/next/no-img-element */}
               <img src="/images/committees/ai_wordmark.svg" alt="ACM ai" />{' '}
               Justin Yi
             </p>
-            {/* eslint-disable-next-line @next/next/no-img-element */}
             <p className="gm-program-row">
+              {/* eslint-disable-next-line @next/next/no-img-element */}
               <img src="/images/committees/hack_wordmark.svg" alt="ACM hack" />{' '}
               Asha Kar, Eugene Lo
             </p>
@@ -274,16 +274,16 @@ function F21() {
                 events
               </p>
             </div>
-            {/* eslint-disable-next-line @next/next/no-img-element */}
             <p className="gm-program-row">
+              {/* eslint-disable-next-line @next/next/no-img-element */}
               <img
                 src="/images/committees/board_wordmark.svg"
                 alt="ACM board"
               />
               &nbsp;&nbsp;External: Tina Huang
             </p>
-            {/* eslint-disable-next-line @next/next/no-img-element */}
             <p className="gm-program-row">
+              {/* eslint-disable-next-line @next/next/no-img-element */}
               <img
                 src="/images/committees/board_wordmark.svg"
                 alt="ACM board"

pages/gm/w22.js

@@ -213,55 +213,55 @@ function W22() {
                 Winter quarter
               </p>
             </div>
-            {/* eslint-disable-next-line @next/next/no-img-element */}
             <p className="gm-program-row">
+              {/* eslint-disable-next-line @next/next/no-img-element */}
               <img
                 src="/images/committees/studio_wordmark.svg"
                 alt="ACM studio"
               />{' '}
               Christian Loanzon, Peter Sutarjo
             </p>
-            {/* eslint-disable-next-line @next/next/no-img-element */}
             <p className="gm-program-row">
+              {/* eslint-disable-next-line @next/next/no-img-element */}
               <img src="/images/committees/icpc_wordmark.svg" alt="ACM icpc" />{' '}
               Jacob Zhang
             </p>
-            {/* eslint-disable-next-line @next/next/no-img-element */}
             <p className="gm-program-row">
+              {/* eslint-disable-next-line @next/next/no-img-element */}
               <img
                 src="/images/committees/design_wordmark.svg"
                 alt="ACM design"
               />{' '}
               Crystal Huynh, Muthu Palaniappan
             </p>
-            {/* eslint-disable-next-line @next/next/no-img-element */}
             <p className="gm-program-row">
+              {/* eslint-disable-next-line @next/next/no-img-element */}
               <img
                 src="/images/committees/cyber_wordmark.svg"
                 alt="ACM cyber"
               />{' '}
               Josh Lee, Henry Chang
             </p>
-            {/* eslint-disable-next-line @next/next/no-img-element */}
             <p className="gm-program-row">
+              {/* eslint-disable-next-line @next/next/no-img-element */}
               <img
                 src="/images/committees/teachLA_wordmark.svg"
                 alt="ACM teachLA"
               />{' '}
               Sophie Schoenmeyer, Chloe Uy
             </p>
-            {/* eslint-disable-next-line @next/next/no-img-element */}
             <p className="gm-program-row">
+              {/* eslint-disable-next-line @next/next/no-img-element */}
               <img src="/images/committees/w_wordmark.svg" alt="ACM w" /> Cindy
               Zhang, Lena O&apos;Grady
             </p>
-            {/* eslint-disable-next-line @next/next/no-img-element */}
             <p className="gm-program-row">
+              {/* eslint-disable-next-line @next/next/no-img-element */}
               <img src="/images/committees/ai_wordmark.svg" alt="ACM ai" />{' '}
               Justin Yi
             </p>
-            {/* eslint-disable-next-line @next/next/no-img-element */}
             <p className="gm-program-row">
+              {/* eslint-disable-next-line @next/next/no-img-element */}
               <img src="/images/committees/hack_wordmark.svg" alt="ACM hack" />{' '}
               Asha Kar, Eugene Lo
             </p>
@@ -274,16 +274,16 @@ function W22() {
                 events
               </p>
             </div>
-            {/* eslint-disable-next-line @next/next/no-img-element */}
             <p className="gm-program-row">
+              {/* eslint-disable-next-line @next/next/no-img-element */}
               <img
                 src="/images/committees/board_wordmark.svg"
                 alt="ACM board"
               />
               &nbsp;&nbsp;External: Tina Huang
             </p>
-            {/* eslint-disable-next-line @next/next/no-img-element */}
             <p className="gm-program-row">
+              {/* eslint-disable-next-line @next/next/no-img-element */}
               <img
                 src="/images/committees/board_wordmark.svg"
                 alt="ACM board"

pages/town-hall.js

@@ -361,12 +361,11 @@ function TownHall() {
               </ul>
             </div>
             <div>
-              <Image
+              {/* eslint-disable-next-line @next/next/no-img-element */}
+              <img
                 src={pastTownHall.banner}
                 alt={pastTownHall.alt_text}
-                width={800}
-                height={450}
-                quality={70}
+                style={{ maxWidth: '100%' }}
               />
             </div>
           </div>

scripts/gm-generator.mjs

@@ -55,6 +55,23 @@ async function fetchGMData() {
   return formattedData;
 }
 
+async function fetchPastGMData() {
+  const data = await getGoogleSheetData('PastGMs!A2:G');
+
+  // Format the rows into an array of objects
+  const formattedData = data.map((row) => ({
+    title: row[0],
+    date: row[1],
+    description: row[2],
+    slides: row[3],
+    notes: row[4],
+    banner: row[5],
+    alt_text: row[6],
+  }));
+
+  return formattedData;
+}
+
 // Write data from sheets to a json file
 async function writeToOutput(name, formattedData) {
   const output = JSON.stringify(formattedData);
@@ -68,4 +85,5 @@ async function writeToOutput(name, formattedData) {
 // Outputs all necessary json files
 async function writeAllOutputs() {
   writeToOutput('gmData.json', await fetchGMData());
+  writeToOutput('past-gm.json', await fetchPastGMData());
 }

styles/components/GM.scss

@@ -135,6 +135,7 @@
 }
 
 .map-frame {
+  border-width: 0;
   height: 100%;
   width: 100%;
 }