CMS integration for alumni, store products, and board members

.github/workflows/development.yaml

@@ -28,6 +28,8 @@ jobs:
 
       - name: Build Next.js app
         run: npm run build
+        env:
+          NEXT_PUBLIC_CMS_BASE_URL: ${{ vars.CMS_BASE_URL }}
 
       - name: Success
         run: echo "!! Build ran successfully !!"

.github/workflows/staging.yaml

@@ -32,6 +32,8 @@ jobs:
           -n ${{ vars.VERCEL_PROJECT }}
           --yes
           --prod
+          --env CMS_BASE_URL=${{ vars.CMS_BASE_URL }}
+          --build-env CMS_BASE_URL=${{ vars.CMS_BASE_URL }}
 
       - name: Success
         run: echo "!! Deployment successful !!"

app/(pages)/_components/AlumniPageCard/AlumniPageCard.jsx

@@ -91,8 +91,11 @@ export default function AlumniPageCard(info) {
                     <h2 className={styles.role2}>{role2}</h2>
                     <h2 className={styles.role3}>{role3}</h2>
 
-
-                    <p className={styles.description}>{description}</p>
+                    {/* Below is LONG_TEXT */}
+                    <div
+                        className={styles.description}
+                        dangerouslySetInnerHTML={{ __html: description }}
+                    />
                     <button className={styles.button} onClick={handleExpand}>Read More</button>
                 </div>
             </div>

app/(pages)/_components/AlumniPageContent/AlumniPageContent.jsx

@@ -0,0 +1,71 @@
+/* eslint-disable react/prop-types */
+"use client"
+import styles from "./AlumniPageContent.module.scss";
+import AlumniPageCard from "../AlumniPageCard/AlumniPageCard.jsx";
+import Image from "next/image";
+import React, {useState} from "react";
+
+export default function AlumniPageContent({cards}) {
+  const [searchTerm, setSearchTerm] = useState("");
+
+  return (
+    <div className={styles.pagewrapper}>
+
+
+    <div className={styles.alumniPage}>
+
+      <div className={styles.header}>
+        <div className={styles.headerText}>
+          <h1 className={styles.title}>Meet our Alumni</h1>
+          <div className={styles.searchbar}>
+            <Image
+              src="/AlumniPage/mag.svg"
+              alt="Magnifying glass icon"
+              width={30}
+              height={31}
+            />
+
+            <input
+              type="text"
+              placeholder="Search for alumni"
+              className={styles.searchInput}
+              value = {searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+            />
+
+          </div>
+        </div>
+        <div className={styles.jackieStickerContainer}>
+          <Image
+            src="/AlumniPage/Jackie-4.png"
+            alt="Jackie sticker"
+            fill
+            className={styles.jackieSticker}
+          />
+        </div>
+      </div>
+
+      <div className={styles.cardsContainer}>
+        {cards.map((alum, index) => (
+          <AlumniPageCard
+            key={index}
+            first_name={alum.first_name}
+            last_name={alum.last_name}
+            role1={alum.role1}
+            role2={alum.role2}
+            role3={alum.role3}
+            years={alum.years}
+            description={alum.description}
+            imageUrl={alum.imageUrl}
+            instaHandle={alum.instaHandle}
+            instaLink={alum.instaLink}
+            linkedinLink={alum.linkedinLink}
+            linkedinHandle={alum.linkedinHandle}
+          />
+        ))}
+      </div>
+    </div>
+     </div>
+  );
+
+}

app/(pages)/alumni/page.module.scss → app/(pages)/_components/AlumniPageContent/AlumniPageContent.module.scss

@@ -1,5 +1,5 @@
 
-@use "../_globals/mixins.scss";
+@use "../../_globals/mixins.scss";
 
 
 .pagewrapper{

app/(pages)/_components/BoardMembers/BoardMembers.jsx

@@ -0,0 +1,35 @@
+/* eslint-disable react/prop-types */
+import styles from "./BoardMembers.module.scss"
+import Image from "next/image";
+import React from "react";
+
+export default function BoardMembers({ board }) {
+    console.log(board);
+    return (
+        <div className={styles.board}>
+          <h1>Our board</h1>
+          <div className={styles.boardContent}>
+            <div className={styles.boardGrid}>
+              {board.map((member, i) => (
+                <div className={styles.member} key={i}>
+                  <div className={styles.memberImageContainer}>
+                    <Image
+                      src={member.imageUrl}
+                      fill
+                      alt={member.imageAlt}
+                    />
+                  </div>
+                  <div className={styles.memberText}>
+                    <h2>{member.name}</h2>
+                    <p className={styles.position}>{member.role}</p>
+                    <p>{member.majors.length > 1 ? "Majors: " + member.majors.join(" & ") : "Major: " + member.majors[0]}</p>
+                    {member.minors.length > 0 && <p>{member.minors.length > 1 ? "Minors: " + member.minors.join(" & ") : "Minor: " + member.minors[0]}</p>}
+                    <p>{member.year}</p>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+    );
+}

app/(pages)/_components/BoardMembers/BoardMembers.module.scss

@@ -0,0 +1,67 @@
+@use "app/(pages)/_globals/mixins.scss";
+
+.board {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 82px;
+
+    h1 {
+        color: var(--gold);
+    }
+
+    @include mixins.phone {
+        gap: 33px;
+    }
+}
+
+.boardGrid {
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    gap: 129px;
+
+    @include mixins.phone {
+        gap: 33px;
+    }
+}
+
+.member {
+    width: 370px; 
+    gap: 15px;        
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    p {
+        font-size: 1.25rem;
+        text-align: center;
+    }
+
+    @include mixins.phone {
+        width: 100%;
+        max-width: 300px;
+
+        p {
+            font-size: 0.75rem;
+        }
+    }
+}
+
+.memberImageContainer {
+    width: 225px;
+    height: 225px;
+    position: relative;
+    border-radius: 50%;
+    overflow: hidden;
+
+    @include mixins.phone {
+        width: 100px;
+        height: 100px;
+    }
+}
+
+.position {
+    font-weight: 500;
+}

app/(pages)/_components/ExpandedAlumniCard/ExpandedAlumniCard.jsx

@@ -76,7 +76,11 @@ export default function ExpandedAlumniCard({
                     </div>
                     </div>
 
-                <p className={styles.longDescription}>{description}</p>
+                {/* Below is LONG_TEXT */}
+                    <p
+                        className={styles.longDescription}
+                        dangerouslySetInnerHTML={{ __html: description }}
+                    />
                 </div>
 
 

app/(pages)/_components/ProductDetailContent/ProductDetailContent.jsx

@@ -0,0 +1,72 @@
+/* eslint-disable react/prop-types */
+'use client';
+import styles from "./ProductDetailContent.module.scss";
+import React from 'react';
+import Image from 'next/image';
+import Link from 'next/link'
+
+export default function ProductDetailContent({ products, id }) {
+    const product = products.find(p => p.id == id);
+    const similarItems = product?.similar_item_ids?.map(id => products.find(p => p.id == id)).filter(Boolean);
+    const description = product?.description || "No description available.";
+
+    if (!product) return <p>Product not found.</p>;
+    return (
+      <main>
+        <section className={styles.top}>
+          <Link href="..\store" className={styles.backbtn}> &lt; </Link>
+          <p className={styles.merch}>Merch Store</p>
+        </section>
+
+        <section className={styles.product}>
+          <Image
+            className={styles.productimage}
+            src={product.imageUrl}
+            alt={product.imageAlt}
+            width={424}
+            height={424}
+          />
+
+          <div className={styles.productinfo}>
+            <h2 className={styles.title}>{product.name}</h2>
+            <div className={styles.costdesc}>
+              <p className={styles.cost}>{product.price}</p>
+              <p className={styles.detail}
+                dangerouslySetInnerHTML={{ __html: description }}
+              >
+              </p>
+            </div>
+          </div>
+        </section>
+
+        <section className={styles.moreitems}>
+
+          <h1 className={styles.similaritems}> Similar Items </h1>
+
+          <div className={styles.moreproduct}>
+            {similarItems?.map((item) => (
+            <Link href={`/products/${item.id}`} key={item.id} className={styles.extra}>
+              <div className={styles.fixedImage}>
+                <Image
+                  className={styles.fillImage}
+                  src={item.imageUrl}
+                  alt={item.imageAlt}
+                  fill
+                  style={{ objectFit: "cover", borderRadius: "10px" }}
+                />
+              </div>
+
+              <div className={styles.productdetail}>
+                <p className={styles.productname}>{item.name}</p>
+                <p className={styles.productcost}>{item.price}</p>
+              </div>
+            </Link>
+            ))} 
+          </div>
+        </section>
+
+      </main>
+      );
+    }
+
+