Final edits

.github/workflows/build.yml

@@ -34,3 +34,4 @@ jobs:
           SERVICE_ACCOUNT: ${{ secrets.SERVICE_ACCOUNT }}
           CI: true
           DIRECTORY_SPREADSHEET_ID: ${{secrets.DIRECTORY_SPREADSHEET_ID }}
+          LANDING_SPREADSHEET_ID: ${{secrets.LANDING_SPREADSHEET_ID }}

README.md

@@ -40,7 +40,7 @@ Things you should do **after using this as a template**:
 - [ ] update the README badges for the GitHub Actions and Netlify with the correct links!
 - [ ] update and delete this documentation!
 - [ ] update `public/index.html` to have a description and title
-- [ ] update `public/favicon.svg` and `public/favaicon512.png` as needed
+- [ ] update `public/favicon.svg` as needed
 - [ ] contact Regina Wang (`@reginawang99`), Matthew Nieva (`@matthewcn56`), Matthew Wang (`@mattxwang`)or Jiin Kim (`@doubleiis02`) with any questions about our quickstarter template set-up.
 
 ## Loading in Committee Info (can also delete this section when done)

components/BoardCard.tsx

@@ -1,5 +1,5 @@
 import Image from 'next/image';
-import React from 'react';
+import React, { useState } from 'react';
 import styles from '../styles/BoardCard.module.scss';
 
 interface CardInterface {
@@ -19,37 +19,50 @@ function BoardCard({
   github,
   email,
 }: CardInterface) {
+  const [src, setSrc] = useState(imageURL);
   return (
     <div className={styles.container}>
       <div className={styles.profilepic}>
-        <Image src={imageURL} alt="PFP" width={100} height={100} />
+        <Image
+          src={src}
+          alt="Profile Picture"
+          width={90}
+          height={90}
+          onError={() => {
+            setSrc('/profile.png');
+          }}
+        />
       </div>
       <div className={styles.text}>
-        <div>
+        <div style={{ marginBottom: '-.8em' }}>
           <span className={styles.name}>{name} | </span>
           <span className={styles.pronouns}>{pronouns}</span>
         </div>
         <div>
           <span className={styles.position}>{position}</span>
         </div>
-        <div className={styles.contact}>
-          <Image
-            src="/github-mark.png"
-            alt="Github Icon"
-            width={21}
-            height={21}
-          />
-          <a href={github}>{github}</a>
-        </div>
-        <div className={styles.contact}>
-          <Image
-            src="/icons8-mail-24.png"
-            alt="Mail Icon"
-            width={21}
-            height={21}
-          />
-          {email}
-        </div>
+        {github && (
+          <div className={styles.contact}>
+            <Image
+              src="/github-mark.png"
+              alt="Github Icon"
+              width={21}
+              height={21}
+            />
+            {github}
+          </div>
+        )}
+        {email && (
+          <div className={styles.contact}>
+            <Image
+              src="/icons8-mail-24.png"
+              alt="Mail Icon"
+              width={20}
+              height={20}
+            />
+            {email}
+          </div>
+        )}
       </div>
     </div>
   );

components/Footer.tsx

@@ -1,57 +1,94 @@
 import Image from 'next/image';
 import Link from 'next/link';
-import React from 'react';
-import WordmarkLogo from '../public/acm-logo-wordmark-extended.png';
+import React, { useEffect, useState } from 'react';
 import discord from '../public/discord.png';
 import email from '../public/email.png';
 import instagram from '../public/instagram.png';
 import styles from '../styles/Footer.module.scss';
 
-export default function Footer() {
+interface CommitteeData {
+  committee: string;
+  name: string;
+  subtitle: string;
+  description: string;
+  logoLink: string;
+  dcLink: string;
+  igLink: string;
+  email: string;
+  favicon: string;
+  backgroundImg: string;
+}
+
+const Footer = () => {
+  const [committeeData, setCommitteeData] = useState<CommitteeData[] | null>(
+    null,
+  );
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const response = await fetch('/output.json');
+        const jsonData = await response.json();
+        setCommitteeData(jsonData);
+      } catch (error) {
+        console.error('error');
+      }
+    };
+    //eslint-disable-next-line
+    fetchData();
+  }, []);
+
   return (
     <footer>
-      <section className={styles.socials}>
-        <section className={styles.footerlogo}>
-          <Link href="/">
-            <a>
-              <Image src={WordmarkLogo} width={100} height={40} alt="Logo" />
+      {committeeData && (
+        <section className={styles.socials}>
+          <section className={styles.footerlogo}>
+            <Link href="/">
+              <a>
+                <Image
+                  src={committeeData[0].logoLink}
+                  width={100}
+                  height={40}
+                  alt="Logo"
+                />
+              </a>
+            </Link>
+          </section>
+          <section className={styles.footerlogo}>
+            <a
+              href={`https://${committeeData[0].igLink}`}
+              target="_blank"
+              rel="noreferrer"
+            >
+              <Image
+                src={instagram}
+                width={25}
+                height={25}
+                alt="Instagram Icon"
+              />
             </a>
-          </Link>
-        </section>
-        <section className={styles.footerlogo}>
-          <a
-            href="https://www.instagram.com/acm.ucla"
-            target="_blank"
-            rel="noreferrer"
-          >
-            <Image
-              src={instagram}
-              width={25}
-              height={25}
-              alt="Instagram Icon"
-            />
-          </a>
-        </section>
-        <section className={styles.footerlogo}>
-          <a
-            href="https://discord.com/invite/eWmzKsY"
-            target="_blank"
-            rel="noreferrer"
-          >
-            <Image src={discord} width={30} height={25} alt="Discord Icon" />
-          </a>
-        </section>
-        <section className={styles.footerlogo}>
-          <a
-            href="mailto: [email protected]"
-            target="_blank"
-            rel="noreferrer"
-            className={styles.mailanchor}
-          >
-            <Image src={email} width={25} height={20} alt="Email Icon" />
-          </a>
+          </section>
+          <section className={styles.footerlogo}>
+            <a
+              href={`https://${committeeData[0].dcLink}`}
+              target="_blank"
+              rel="noreferrer"
+            >
+              <Image src={discord} width={30} height={25} alt="Discord Icon" />
+            </a>
+          </section>
+          <section className={styles.footerlogo}>
+            <a
+              href={`mailto:${committeeData[0].email}`}
+              target="_blank"
+              rel="noreferrer"
+              className={styles.mailanchor}
+            >
+              <Image src={email} width={25} height={20} alt="Email Icon" />
+            </a>
+          </section>
         </section>
-      </section>
+      )}
       <section className={styles.credit}>
         <span>
           Made by{' '}
@@ -74,4 +111,6 @@ export default function Footer() {
       </section>
     </footer>
   );
-}
+};
+
+export default Footer;

components/MainLayout.tsx

@@ -1,8 +1,8 @@
 import Head from 'next/head';
 import React from 'react';
-import vars from '../styles/global_variables.module.scss';
 import Footer from './Footer';
 import Navbar from './Navbar';
+import vars from '../styles/global_variables.module.scss';
 
 interface LayoutProps {
   children: JSX.Element;
@@ -19,7 +19,7 @@ export default function MainLayout(props: LayoutProps) {
           content="width=device-width, initial-scale=1, minimum-scale=1"
         />
         <title>ACM {vars.committee}</title>
-        <link rel="icon" href="/logo.png" />
+        <link rel="icon" href="/favicon.svg" />
       </Head>
       <Navbar />
       <main>{props.children}</main>

components/Navbar.tsx

@@ -1,55 +1,89 @@
 import Image from 'next/image';
 import Link from 'next/link';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { FaTimes, FaBars } from 'react-icons/fa';
-import WordmarkLogo from '../public/acm-logo-wordmark-extended.png';
 import styles from '../styles/Navbar.module.scss';
 
-export default function Navbar() {
+interface CommitteeData {
+  committee: string;
+  name: string;
+  subtitle: string;
+  description: string;
+  logoLink: string;
+  dcLink: string;
+  igLink: string;
+  email: string;
+  favicon: string;
+  backgroundImg: string;
+}
+
+const Navbar = () => {
+  const [committeeData, setCommitteeData] = useState<CommitteeData[] | null>(
+    null,
+  );
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const response = await fetch('/output.json');
+        const jsonData = await response.json();
+        setCommitteeData(jsonData);
+      } catch (error) {
+        console.error('error');
+      }
+    };
+    //eslint-disable-next-line
+    fetchData();
+  }, []);
+
   const [clicked, setClicked] = useState(false);
   return (
     <div>
-      <nav className={styles.navbar}>
-        <div className="navbar-brand">
-          <Link href="/">
-            <a className="force-child-display-block">
-              <Image
-                src={WordmarkLogo}
-                width={106}
-                height={40}
-                alt="Open Source at ACM Home"
-              />
-            </a>
-          </Link>
-        </div>
-        <div>
-          <ul
-            className={styles['nav-item-list']}
-            id={clicked ? styles.active : ''}
-          >
-            <li>
-              <Link href="/teamPage">
-                <a>Team</a>
-              </Link>
-            </li>
-            <li>
-              <Link href="/eventsPage">
-                <a>Events</a>
-              </Link>
-            </li>
-            <li>
-              <Link href="/">
-                <button>Join Us</button>
-              </Link>
-            </li>
-          </ul>
-        </div>
-        <div id={styles['small-screen']}>
-          <i onClick={() => setClicked(!clicked)}>
-            {clicked ? <FaTimes /> : <FaBars />}
-          </i>
-        </div>
-      </nav>
+      {committeeData && (
+        <nav className={styles.navbar}>
+          <div className="navbar-brand">
+            <Link href="/">
+              <a className="force-child-display-block">
+                <Image
+                  src={committeeData[0].logoLink}
+                  width={106}
+                  height={40}
+                  alt="Open Source at ACM Home"
+                />
+              </a>
+            </Link>
+          </div>
+          <div>
+            <ul
+              className={styles['nav-item-list']}
+              id={clicked ? styles.active : ''}
+            >
+              <li>
+                <Link href="/teamPage">
+                  <a>Team</a>
+                </Link>
+              </li>
+              <li>
+                <Link href="/eventsPage">
+                  <a>Events</a>
+                </Link>
+              </li>
+              <li>
+                <Link href="/">
+                  <button>Join Us</button>
+                </Link>
+              </li>
+            </ul>
+          </div>
+          <div id={styles['small-screen']}>
+            <i onClick={() => setClicked(!clicked)}>
+              {clicked ? <FaTimes /> : <FaBars />}
+            </i>
+          </div>
+        </nav>
+      )}
     </div>
   );
-}
+};
+
+export default Navbar;