Update About Page Leadership Section (#691)

* use spreadsheet data instead of hardcoded

* filter by officer name

* modified about page to use parser script

* modify import path

* modify data import path

* modify import path

* better variable name

* fix: changed attribute names on about page to fit <Officers> props

* feat: about page generates officers using officer-parser script

* fix: resolved merging issues

* fix: linting issues

* update: changed default images on about page to show ACM logo

* fix: resolved photo distortion on about page

* fix: linting issues

* fix: removed redundant code

---------

Co-authored-by: Kevin-D23 <[email protected]>

Author: puranamp

next.config.js

@@ -15,6 +15,10 @@ module.exports = {
       'jcfp.site',
       'photos.google.com',
       'photos.app.goo.gl',
+      't4.ftcdn.net',
+      'www.acmcyber.com',
+      'media.licdn.com',
+      'github.com',
       'www.uclaacm.com',
       'raw.githubusercontent.com',
     ],

pages/about.js

@@ -7,16 +7,30 @@ import Banner from '../components/Banner';
 import Layout from '../components/Layout';
 import Officers from '../components/OfficerCard';
 import SocialMedia from '../components/SocialMedia';
-import data from '../data';
+import data from '../offoutput.json';
 
 import acmCommittees from '../public/images/acm_committees.png';
 import boardcollage from '../public/images/boardcollage.png';
 import acmHowToJoin from '../public/images/how-to-join.png';
 import initiative from '../public/images/initiative.png';
 import styles from '../styles/pages/About.module.scss';
 
+
+function extractContent(officerContent) {
+  const convertedData = officerContent.map(officer => ({
+    name: officer.name,
+    pronouns: officer.pronouns,
+    role: (officer.committee.includes('Board') ? officer.role : officer.role + ', ' + officer.committee),
+    committee: officer.committee,
+    major: officer.major,
+    year: officer.year,
+    photo: (officer.photo != 'https://t4.ftcdn.net/jpg/02/15/84/43/360_F_215844325_ttX9YiIIyeaR7Ne6EaLLjMAmy4GvPC69.jpg' ? officer.photo : '/images/officers/acmlogocopy.jpg'), // if photo is default, display ACM logo
+  })).filter(officer => officer.role.includes('President'));
+  return convertedData;
+}
+
 function About() {
-  const { leadership } = data;
+  const filteredOfficers = extractContent(data);
   return (
     <Layout>
       <NextSeo
@@ -199,7 +213,7 @@ function About() {
             growth of their committee.
           </p>
           <div className="grid-desktop-3">
-            <Officers officers={leadership} size="compact" />
+            <Officers officers={filteredOfficers} size="compact" />
           </div>
         </div>
       </div>

styles/components/OfficerCard.module.scss

@@ -83,6 +83,7 @@
   display: inline-block;
   height: 70px;
   margin: 25px 10px 0;
+  object-fit: cover;
   width: 70px;
 }