combined board internal and external

.env.example

@@ -0,0 +1,4 @@
+EVENTS_SPREADSHEET_ID=your_spreadsheet_url_here
+DIRECTORY_SPREADSHEET_ID=your_spreadsheet_url_here
+LANDING_SPREADSHEET_ID=your_spreadsheet_url_here
+SERVICE_ACCOUNT=your_service_account_key_here

.github/workflows/build.yml

@@ -30,4 +30,8 @@ jobs:
 
       - run: yarn build
         env:
+          EVENTS_SPREADSHEET_ID: ${{ secrets.EVENTS_SPREADSHEET_ID }}
+          SERVICE_ACCOUNT: ${{ secrets.SERVICE_ACCOUNT }}
           CI: true
+          DIRECTORY_SPREADSHEET_ID: ${{secrets.DIRECTORY_SPREADSHEET_ID }}
+          LANDING_SPREADSHEET_ID: ${{secrets.LANDING_SPREADSHEET_ID }}

.gitignore

@@ -28,6 +28,7 @@ yarn-error.log*
 # local env files
 .env*.local
 .env
+.env
 
 # vercel
 .vercel

.stylelintignore

@@ -1 +1,2 @@
-**/*.min.css
+**/*.min.css
+global_variables.module.scss

.stylelintrc.json

@@ -1,3 +1,24 @@
 {
-  "extends": "stylelint-config-standard-scss"
+  "extends": "stylelint-config-standard-scss",
+  "rules": {
+    "selector-pseudo-class-no-unknown": [
+      true,
+      {
+        "ignorePseudoClasses": [
+          "export",
+          "import",
+          "global",
+          "local",
+          "external"
+        ]
+      }
+    ],
+    "property-no-unknown": [
+      true,
+      {
+        "ignoreProperties": ["composes", "compose-with"],
+        "ignoreSelectors": [":export"]
+      }
+    ]
+  }
 }

README.md

@@ -22,7 +22,7 @@ Here's what it does:
 
 ## Overview
 
-... explain what your project is here! What technology you used, who made it, and what it was for!
+Hello! This website is built by the ACM dev team with Next.js on top of React and deployed on Netlify. Under the hood, we use both ESLint and Stylelint to lint our JS and CSS code respectively.
 
 ## Things You Should Do (and then delete this section)
 
@@ -31,17 +31,36 @@ Thanks for using our template! We hope this makes your life developing significa
 Things you should do **after using this as a template**:
 
 - [ ] find-and-replace `YOUR_PROJECT_URL_HERE` with your GitHub repo's project name in this README (it's in a few places, so use an editor!)
-- [ ] set up [Netlify](https://www.netlify.com/) for this app - talk to the current dev team director: matt (`@matthewcn56`) if you need access to the ACM UCLA Netlify team.
+- [ ] add to the Overview section above with any desired information about what your website is for.
+- [ ] set up [Netlify](https://www.netlify.com/) for this app - talk to the current dev team director: arsh (`@ArshMalik02`) if you need access to the ACM UCLA Netlify team.
 - [ ] turn on "Automatically delete head branches" in GitHub `Settings > Options`
 - [ ] in `Settings > Branches`, create a branch protection rule for `main` that requires PR reviews. Also require status checks, like passing `build`.
 - [ ] _only_ enable squash merging in Github `Settings > Options > Merge Button` (and disable merge commits and rebase merging).
 - [ ] this is a reminder to periodically run accessibility checks & Search Engine Optimization on your project by running `inspect element / developer tools > Lighthouse`
 - [ ] 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)
+
+Thanks for using our template for your committee's website!
+
+To build the site with your committee-specific information, you will fill out two fields in the global_variables.module.scss file, which can be found in the styles folder. (full path: ./styles/global_variables.module.scss)
+
+Next to $committee-color, please replace the sample color with the hex code of your committee's color, which will be the accent color for the overall site.
+Next to $committee, please replace the sample text with your committee's name, spelled and capitalized properly, exactly how it appears on the Committee Info spreadsheet. (example: TeachLA, ICPC, W are all valid. teach la, Icpc, w are invalid.) We will be using this to properly scrape your committee's information, so it is super important that this variable is correctly set! Please contact Elizabeth Kim (`@elizabethkim11`) if you would like your committee's name to be reflected differently than how it appears on the spreadsheet.
+
+You will also fill out another field for your committee name in the global-variables.js file, which is located in the scripts folder. (full path: ./scripts/global-variables.js) Replace the sample committee name in the string on line 1 with your committee's name. Please follow the same guidelines as above for the committee name input.
+
+## Spreadsheet Image Guidelines
+
+- All image links should be sharable google drive links, with access permissions set to "Anyone with the link."
+- All images should be .png or .jpg files.
+- All headshots must be square cropped.
+- Contact Elizabeth Kim (`@elizabethkim11`) to properly modify your design assets to suit the template's home page.
+
 ## Development Setup
 
 We'll use a really common Node.js project workflow + Yarn!

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/EventCard.tsx

@@ -6,17 +6,19 @@ interface CardInterface {
   header: string;
   body: string;
   time: string;
+  img: string;
 }
-function EventCard({ header, body, time }: CardInterface) {
+function EventCard({ header, body, time, img }: CardInterface) {
   return (
     <div className={styles.container}>
       <div className={styles.text}>
         <div className={styles.header}>{header}</div>
-        <div className={styles.body}>{body}</div>
+        <div className={styles.body}>
+          <div style={{ flex: '1' }}>{body}</div>
+          <Image src={img} width={300} height={300} />
+        </div>
         <div className={styles.time}>
-          <div>
-            <Image src="/icons8-calendar-24.png" width={20} height={20} />
-          </div>
+          <Image src="/icons8-calendar-24.png" width={20} height={20} />
           <div>&nbsp;{time}</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={180} height={70} 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={30}
-              height={30}
-              alt="Instagram Icon"
-            />
-          </a>
-        </section>
-        <section className={styles.footerlogo}>
-          <a
-            href="https://discord.com/invite/eWmzKsY"
-            target="_blank"
-            rel="noreferrer"
-          >
-            <Image src={discord} width={35} height={30} 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={35} height={30} 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

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