Merge pull request #71 from hack4impact-calpoly/2023-changes

2023 changes
hack4impact-calpoly · Jul 21, 2023 · c6b3961 · c6b3961
2 parents 49d13d3 + 3cb34c3
commit c6b3961
Show file tree

Hide file tree

Showing 15 changed files with 1,729 additions and 2,486 deletions.
diff --git a/.env.default b/.env.default
diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml
@@ -10,7 +10,7 @@ jobs:
     - uses: actions/checkout@v2
     - uses: actions/setup-node@v2
       with:
-        node-version: 12
+        node-version: 18.16.1
 
     - run: yarn install
     - run: yarn run lint
diff --git a/components/ButtonLink.tsx b/components/ButtonLink.tsx
@@ -26,8 +26,11 @@ const ButtonLink = (props: ButtonLinkItem) => {
 
   return (
     <div>
-      <Link href={link.toString()}>
-        <a className={`inline-block mb-6 py-3 px-20 border-2 border-blue rounded-full ${style}`}>{text}</a>
+      <Link
+        href={link.toString()}
+        className={`inline-block mb-6 py-3 px-20 border-2 border-blue rounded-full ${style}`}
+      >
+        {text}
       </Link>
     </div>
   );

diff --git a/components/Footer.tsx b/components/Footer.tsx
@@ -92,18 +92,18 @@ const Footer = () => (
     <div className="hidden md:w-1/2 md:flex my-auto">
       <div className="w-1/3 space-y-3 px-2">
         <h3 className="text-white text-2xl">General</h3>
-        <Link href="/about"><a className="block text-white text-lg">About</a></Link>
-        <Link href="/projects"><a className="block text-white text-lg">Projects</a></Link>
+        <Link href="/about" className="block text-white text-lg">About</Link>
+        <Link href="/projects" className="block text-white text-lg">Projects</Link>
       </div>
       <div className="w-1/3 space-y-3 px-2">
         <h3 className="text-white text-2xl">Apply</h3>
-        <Link href="/students"><a className="block text-white text-lg">Students</a></Link>
-        <Link href="/nonprofits"><a className="block text-white text-lg">Nonprofits</a></Link>
+        <Link href="/students" className="block text-white text-lg">Students</Link>
+        <Link href="/nonprofits" className="block text-white text-lg">Nonprofits</Link>
       </div>
       <div className="w-1/3 space-y-3 px-2">
         <h3 className="text-white text-2xl">Support</h3>
         {/* <Link href="/sponsor"><a className="block text-white text-lg">Sponsor</a></Link> */}
-        <Link href="/donate"><a className="block text-white text-lg">Donate</a></Link>
+        <Link href="/donate" className="block text-white text-lg">Donate</Link>
       </div>
     </div>
   </footer>

diff --git a/components/MemberCard.tsx b/components/MemberCard.tsx
@@ -21,7 +21,7 @@ const MemberCard = (props: MemberCardItem) => {
       </div>
       <p className="text-xl leading-6">{name}</p>
       <p className="text-md text-gray-600 italic leading-6">{title}</p>
-      {linkedin && <p><LinkedinLogo link={linkedin.toString()} fullLogo /></p>}
+      {linkedin && <LinkedinLogo link={linkedin.toString()} fullLogo />}
     </div>
   );
 };

diff --git a/components/Navbar.tsx b/components/Navbar.tsx
@@ -16,7 +16,7 @@ const Navbar = () => {
             src={config.assets.logo_color}
             alt="hack4impact logo, with color"
           />
-          <Link href="/" passHref>
+          <Link href="/" passHref legacyBehavior>
             <span
               className="block cursor-pointer font-bold sm:text-lg text-blue"
               onClick={() => expand(false)}
@@ -43,27 +43,27 @@ const Navbar = () => {
           </div>
           <div className="hidden md:block md:space-x-4 lg:space-x-12 text-blue font-strong">
             <Link href="/about">
-              <a>About</a>
+              About
             </Link>
             <Link href="/projects">
-              <a>Projects</a>
+              Projects
             </Link>
             <Link href="/students">
-              <a>Students</a>
+              Students
             </Link>
             <Link href="/nonprofits">
-              <a>Nonprofits</a>
+              Nonprofits
             </Link>
             <Link href="/donate">
-              <a>Donate</a>
+              Donate
             </Link>
           </div>
         </div>
       </div>
 
       {expanded && (
         <div className="md:hidden absolute w-full bg-gray-50 shadow-md z-10">
-          <Link href="/" passHref>
+          <Link href="/" passHref legacyBehavior>
             <span
               className="block cursor-pointer font-bold sm:text-lg text-blue px-6 py-3 border-blue border-b-2"
               onClick={() => expand(!expanded)}
@@ -74,7 +74,7 @@ const Navbar = () => {
               Home
             </span>
           </Link>
-          <Link href="/about" passHref>
+          <Link href="/about" passHref legacyBehavior>
             <span
               className="block cursor-pointer font-bold sm:text-lg text-blue px-6 py-3 border-blue border-b-2"
               onClick={() => expand(!expanded)}
@@ -85,7 +85,7 @@ const Navbar = () => {
               About us
             </span>
           </Link>
-          <Link href="/projects" passHref>
+          <Link href="/projects" passHref legacyBehavior>
             <span
               className="block cursor-pointer font-bold sm:text-lg text-blue px-6 py-3 border-blue border-b-2"
               onClick={() => expand(!expanded)}
@@ -96,7 +96,7 @@ const Navbar = () => {
               Projects
             </span>
           </Link>
-          <Link href="/students" passHref>
+          <Link href="/students" passHref legacyBehavior>
             <span
               className="block cursor-pointer font-bold sm:text-lg text-blue px-6 py-3 border-blue border-b-2"
               onClick={() => expand(!expanded)}
@@ -107,7 +107,7 @@ const Navbar = () => {
               Students
             </span>
           </Link>
-          <Link href="/nonprofits" passHref>
+          <Link href="/nonprofits" passHref legacyBehavior>
             <span
               className="block cursor-pointer font-bold sm:text-lg text-blue px-6 py-3 border-blue border-b-2"
               onClick={() => expand(!expanded)}
@@ -118,7 +118,7 @@ const Navbar = () => {
               Nonprofits
             </span>
           </Link>
-          <Link href="/donate" passHref>
+          <Link href="/donate" passHref legacyBehavior>
             <span
               className="block cursor-pointer font-bold sm:text-lg text-blue px-6 py-3 border-blue border-b-2"
               onClick={() => expand(!expanded)}

diff --git a/components/ProjectCard.tsx b/components/ProjectCard.tsx
@@ -21,8 +21,11 @@ const ProjectCard = (props: {project: ProjectCardItem}) => {
 
       <p>{project.blurb}</p>
       <p>
-        <Link href={`projects/${project.slug}`}>
-          <a className="font-strong text-blue text-lg">Read more &rarr;</a>
+        <Link
+          href={`projects/${project.slug}`}
+          className="font-strong text-blue text-lg"
+        >
+          Read more &rarr;
         </Link>
       </p>
     </div>

diff --git a/next-env.d.ts b/next-env.d.ts
@@ -1,5 +1,4 @@
 /// <reference types="next" />
-/// <reference types="next/types/global" />
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited

diff --git a/package.json b/package.json
@@ -11,11 +11,11 @@
   },
   "dependencies": {
     "@heroicons/react": "^1.0.4",
-    "contentful": "^9.1.32",
-    "next": "11.1.0",
+    "contentful": "^9.3.5",
+    "next": "^13.4.10",
     "node-fetch": "^2.6.1",
-    "react": "17.0.2",
-    "react-dom": "17.0.2"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "@types/node-fetch": "^2.5.12",
@@ -25,13 +25,13 @@
     "autoprefixer": "^10.3.7",
     "eslint": "^7.32.0",
     "eslint-config-airbnb": "^18.2.1",
-    "eslint-config-next": "11.1.0",
+    "eslint-config-next": "^13.4.10",
     "eslint-plugin-import": "^2.24.0",
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-react": "^7.24.0",
     "eslint-plugin-react-hooks": "^4.2.0",
     "postcss": "^8.3.10",
     "tailwindcss": "^2.2.17",
-    "typescript": "4.3.5"
+    "typescript": "4.5.2"
   }
 }
diff --git a/pages/about.tsx b/pages/about.tsx
@@ -2,28 +2,29 @@ import React from 'react';
 import Head from 'next/head';
 
 import contentful from '../utils/contentful';
-import { MemberCardItem, TestimonalProps } from '../utils/types';
+import { InfoCardItem, MemberCardItem } from '../utils/types';
 
 import ImageCard from '../components/ImageCard';
-import Carousel from '../components/Carousel';
-import Testimonial from '../components/Testimonial';
 import MemberCard from '../components/MemberCard';
+import InfoCard from '../components/InfoCard';
 
 interface AboutProps {
   page: {
     title: String;
     description: String;
   }
-  testimonials: TestimonalProps[];
   people: {
     directors: MemberCardItem[];
     members: MemberCardItem[];
     alumni: MemberCardItem[];
-  }
+  },
+  info: InfoCardItem[];
 }
 
 const About = (props: AboutProps) => {
-  const { page, testimonials, people } = props;
+  const {
+    page, people, info,
+  } = props;
 
   return (
     <>
@@ -38,13 +39,13 @@ const About = (props: AboutProps) => {
 
         <ImageCard img="/photos/showcase-2019.png" alt="Club Showcase 2019" />
 
-        <section className="space-y-8">
-          <h2>Hear from our members</h2>
-          <Carousel>
-            {testimonials.map((t) => (
-              <Testimonial key={t.member.name} member={t.member} quote={t.quote} />
+        <section className="flow-root space-y-6 md:space-y-10">
+          <h2>Our events</h2>
+          <div className="grid md:grid-cols-3 gap-12 md:gap-16">
+            {info.map((card) => (
+              <InfoCard key={card.title} title={card.title} body={card.body} image={card.image} />
             ))}
-          </Carousel>
+          </div>
         </section>
 
         <section className="space-y-6">
@@ -102,21 +103,19 @@ export async function getStaticProps() {
       items {
         title
         description
-      }
-    }
-    testimonials: testimonialCollection (where:{display:true}) {
-      items {
-        member {
-          fullName
-          linkedIn
-          profilePicture {
-            url(transform: {width:400, format:WEBP})
+        info: infoCardCollection(limit:3) {
+          items {
+            title
+            body
+            image {
+              url(transform: {width:400, format:WEBP})
+              description
+            }
           }
         }
-        class
-        quote
       }
     }
+    
     directors: personCollection (where:{role_contains:"Director", isActive:true, isAlumni:false}, order:fullName_ASC) {
       items {
         fullName
@@ -150,23 +149,28 @@ export async function getStaticProps() {
     }
   }`;
 
+  interface InfoCardContent {
+    title: string;
+    body: string;
+    image: {
+      url: string;
+      description: string;
+    }
+  }
+
   const res = await contentful.query(pageQuery);
   const page = res.page.items[0];
-  const testimonialData = res.testimonials.items;
   const directorData = res.directors.items;
   const memberData = res.members.items;
   const alumniData = res.alumni.items;
 
-  const testimonials: TestimonalProps = testimonialData.map((t: any) => ({
-    member: {
-      headshot: {
-        url: t.member.profilePicture?.url,
-      },
-      name: t.member.fullName,
-      linkedin: t.member.linkedIn,
-      title: t.class,
+  const info = page.info.items.map((item: InfoCardContent): InfoCardItem => ({
+    title: item.title,
+    body: item.body,
+    image: {
+      url: item.image.url,
+      alt: item.image.description,
     },
-    quote: t.quote,
   }));
 
   function contentfulToMemberCard(p: any): MemberCardItem {
@@ -184,8 +188,8 @@ export async function getStaticProps() {
     const roles = [
       'Co-Founder',
       'Co-Executive Director',
-      'Director of Product',
       'Director of Engineering',
+      'Director of Product & Outreach',
       'Director of Design',
       'Director of Finance',
       'Director of Operations',
@@ -194,11 +198,11 @@ export async function getStaticProps() {
       'Director of Public Relations',
       'Director of Membership',
       'Director of Community',
-      'Associate Director of Product',
-      'Associate Director of Design & Public Relations',
       'Associate Director of Engineering',
-      'Product Manager',
+      'Associate Director of Product & Outreach',
+      'Associate Director of Design & Public Relations',
       'Tech Lead',
+      'Product Manager',
       'Designer',
       'Designer and Developer',
       'Software Developer',
@@ -225,7 +229,7 @@ export async function getStaticProps() {
   return {
     props: {
       page,
-      testimonials,
+      info,
       people: { directors, members, alumni },
     },
   };

diff --git a/pages/nonprofits.tsx b/pages/nonprofits.tsx
@@ -26,6 +26,17 @@ const Nonprofits = (props: NonprofitsProps) => {
       <main className="mx-6 md:mx-auto md:w-4/5 lg:w-2/3 my-6 lg:my-12 space-y-8 lg:space-y-20">
         <Header title={header.title} description={header.description} button={header.button} illustration="bg-nonprofits" />
 
+        <iframe
+          className="video"
+          style={{ marginLeft: 'auto', marginRight: 'auto' }}
+          width="550"
+          height="313"
+          src="https://www.youtube.com/embed/2XxA6LcSKa8?start=25"
+          title="testimonials"
+          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+          allowFullScreen
+        />
+
         <div className="flow-root space-y-10">
           <h2>Application process</h2>
           <Timeline events={events} />