Merge branch 'main' into 104_convert_chairperson-image-to-text

.github/workflows/deploy-prod.yaml

@@ -22,7 +22,7 @@ jobs:
       - uses: superfly/flyctl-actions/setup-flyctl@master
       - name: Fly Deploy
         working-directory: ./next
-        run: flyctl deploy --remote-only --config fly.production.toml --dockerfile Dockerfile
+        run: flyctl deploy --remote-only --config fly.production.toml --dockerfile Dockerfile --build-arg STRAPI_KEY=${{ secrets.PRODUCTION_STRAPI_KEY }} --build-arg STRAPI_URL=https://younite-strapi.fly.dev
         env:
           FLY_API_TOKEN: ${{ secrets.FLY_API_TOKEN_FRONTEND }}
   deploy-storage:

.github/workflows/deploy-staging.yaml

@@ -26,7 +26,7 @@ jobs:
       - uses: superfly/flyctl-actions/setup-flyctl@master
       - name: Fly Deploy
         working-directory: ./next
-        run: flyctl deploy --remote-only --config fly.staging.toml --dockerfile Dockerfile
+        run: flyctl deploy --remote-only --config fly.staging.toml --dockerfile Dockerfile --build-arg STRAPI_KEY=${{ secrets.STAGING_STRAPI_KEY }} --build-arg STRAPI_URL=https://younite-strapi-staging.fly.dev
         env:
           FLY_API_TOKEN: ${{ secrets.FLY_API_TOKEN_FRONTEND_STAGING }}
   deploy-storage:

.gitignore

@@ -110,7 +110,7 @@
 # Logs and databases
 ############################
 
-# /strapi/.tmp # Dev only: allow shared database
+/strapi/.tmp
 /strapi/*.log
 /strapi/*.sql
 /strapi/*.sqlite
@@ -125,7 +125,7 @@
 /strapi/ssl
 /strapi/.idea
 /strapi/nbproject
-# /strapi/public/uploads/* # Dev only: allow shared images
+/strapi/public/uploads/*
 !/strapi/public/uploads/.gitkeep
 
 ############################

.vscode/settings.json

@@ -21,7 +21,7 @@
     "**/node_modules": true,
     "**/.next": true,
     "**/.cache": true,
-    "**/.tmp": true,
+    // "**/.tmp": true,
     "**/build": true
   },
 

next/.dockerignore

@@ -2,3 +2,4 @@
 dist
 node_modules
 .env
+.next

next/Dockerfile

@@ -9,9 +9,6 @@ LABEL fly_launch_runtime="Next.js"
 # Next.js app lives here
 WORKDIR /app
 
-# Set production environment
-ENV NODE_ENV="production"
-
 # Install pnpm
 # ARG PNPM_VERSION=8.3.1
 # RUN npm install -g pnpm@$PNPM_VERSION
@@ -32,6 +29,12 @@ RUN npm install
 COPY --link . .
 
 # Build application
+ARG STRAPI_KEY
+ARG STRAPI_URL
+ENV STRAPI_KEY=${STRAPI_KEY}
+ENV STRAPI_URL=${STRAPI_URL}
+ENV NODE_ENV="production"
+
 RUN npm run build
 
 # Remove development dependencies

next/app/about/page.tsx

@@ -1,6 +1,7 @@
 import flair from "@/assets/about/flair.png";
 import valueFlair1 from "@/assets/about/value1.png";
 import valueFlair2 from "@/assets/about/value2.png";
+import History from "@/components/history/History";
 import { aboutPageSchema, TimelineElement } from "@/schemas/single/AboutPage";
 import fetchStrapi from "@/util/strapi";
 import Image from "next/image";
@@ -21,15 +22,15 @@ export default async function AboutPage() {
     <>
       <Image src={flair} alt="" className="absolute -z-10 top-[70%]" />
       <section className="max-w-4xl mx-auto mt-header pt-24 flex flex-col items-center text-center">
-        <h1 className="text-8xl font-bold leading-[0.95] uppercase mb-6">
+        <h1 className="md:text-8xl sm:text-7xl text-5xl font-bold leading-[0.95] uppercase mb-6">
           Our Values
         </h1>
         <p className="mb-2 mx-6">{data.Subtitle}</p>
         <p className="mb-16 mx-6">Click Below!</p>
-        <div className="grid grid-cols-3 grid-rows-2 text-black text-left mx-6">
+        <div className="sm:grid sm:grid-cols-3 sm:grid-rows-2 text-black text-left mx-6">
           {data.Values.map((value, i) => (
             <div key={value.Name} className={styles.valueCard}>
-              <h2 className="mb-1 text-2xl font-black uppercase">
+              <h2 className="mb-1 text-sm text-center md:text-left sm:text-lg md:text-2xl font-black uppercase">
                 {value.Name}
               </h2>
               <p>{value.ValueDescription}</p>
@@ -45,41 +46,10 @@ export default async function AboutPage() {
         </div>
       </section>
       <section className="py-40 text-center px-4">
-        <h2 className="text-8xl font-bold leading-[0.95] uppercase mb-12">
+        <h2 className="md:text-8xl sm:text-7xl text-6xl font-bold leading-[0.95] uppercase mb-12">
           Our History
         </h2>
-        <div className="text-left max-w-xl mx-auto">
-          <ol className="relative border-s border-gray-100 text-b-dark-blue">
-            {timeline.map((e, i) => {
-              const isImage = "Image" in e;
-
-              return (
-                <li key={i} className="mb-10 ms-4">
-                  <div className="absolute w-3 h-3 bg-gray-100 rounded-full mt-1.5 -start-1.5 border border-white"></div>
-                  <time className="mb-1 text-sm font-normal leading-none italic">
-                    {e.Date.toLocaleDateString()}
-                  </time>
-                  {isImage ? (
-                    <Image
-                      src={e.Image}
-                      alt=""
-                      className="w-full rounded-lg mb-4 shadow-xl"
-                      width={200}
-                      height={200}
-                    />
-                  ) : (
-                    <div>
-                      <h3 className="text-lg font-semibold">{e.Title}</h3>
-                      <p className="mb-4 text-base font-normal ">
-                        {e.Description}
-                      </p>
-                    </div>
-                  )}
-                </li>
-              );
-            })}
-          </ol>
-        </div>
+        <History timelineElements={timeline} />
       </section>
     </>
   );

next/app/about/styles.module.css

@@ -1,3 +1,43 @@
+@media (width >= 500px) {
+  .valueCard {
+    position: relative;
+    border-radius: 0.8125rem;
+    border: 2px solid #000;
+    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+    padding: 2rem;
+    aspect-ratio: 1;
+  }
+
+  .valueCard:nth-of-type(1) {
+    background: linear-gradient(180deg, #faab36 45.83%, #ffc9c9 100%);
+    transform: rotate(-3.259deg);
+    z-index: 2;
+  }
+
+  .valueCard:nth-of-type(2) {
+    background: linear-gradient(
+      180deg,
+      #6cc3e5 0%,
+      #75c5e2 59.9%,
+      #ffdead 100%
+    );
+    transform: rotate(3.414deg) translateY(1.5rem);
+    z-index: 1;
+  }
+
+  .valueCard:nth-of-type(3) {
+    background: linear-gradient(180deg, #c8f2ff 0%, #ffc062 68.75%);
+    transform: rotate(-1.517deg) translateY(6rem) translateX(-1.5rem);
+  }
+
+  .valueCard:nth-of-type(4) {
+    background: linear-gradient(0deg, #ace8ff 0%, #ace8ff 100%);
+    transform: rotate(-9.745deg) translateY(-1rem) translateX(-2rem);
+    grid-column-start: 2;
+    z-index: 2;
+  }
+}
+
 .valueCard {
   position: relative;
   border-radius: 0.8125rem;
@@ -15,18 +55,18 @@
 
 .valueCard:nth-of-type(2) {
   background: linear-gradient(180deg, #6cc3e5 0%, #75c5e2 59.9%, #ffdead 100%);
-  transform: rotate(3.414deg) translateY(1.5rem);
+  transform: rotate(3.414deg);
   z-index: 1;
 }
 
 .valueCard:nth-of-type(3) {
   background: linear-gradient(180deg, #c8f2ff 0%, #ffc062 68.75%);
-  transform: rotate(-1.517deg) translateY(6rem) translateX(-1.5rem);
+  transform: rotate(-1.517deg);
 }
 
 .valueCard:nth-of-type(4) {
   background: linear-gradient(0deg, #ace8ff 0%, #ace8ff 100%);
-  transform: rotate(-9.745deg) translateY(-2rem) translateX(-2rem);
+  transform: rotate(-6deg);
   grid-column-start: 2;
   z-index: 2;
 }

next/app/layout.tsx

@@ -1,5 +1,7 @@
 import Footer from "@/components/footer/footer";
 import Header from "@/components/header/header";
+import Modal from "@/components/modal/Modal";
+import ModalContextProvider from "@/components/modal/ModalContextProvider";
 import "./globals.css";
 
 export const metadata = {
@@ -10,17 +12,23 @@ export const metadata = {
   },
 };
 
-export default function RootLayout({
+export default async function RootLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
   return (
-    <html lang="en" className="h-full">
-      <body className="bg-gradient-1 isolate flex flex-col min-h-svh">
-        <Header />
-        <main className="grow overflow-y-auto overflow-x-hidden">{children}</main>
-        <Footer />
+    <html lang="en" className="h-full overflow-hidden">
+      <body className="h-full">
+        <ModalContextProvider>
+          <div className="bg-gradient-1 isolate flex flex-col min-h-svh overflow-y-auto">
+            {/* @ts-ignore */}
+            <Header />
+            <main className="grow overflow-x-hidden">{children}</main>
+            <Footer />
+          </div>
+          <Modal />
+        </ModalContextProvider>
       </body>
     </html>
   );

next/app/members/[year]/page.tsx

@@ -25,8 +25,8 @@ export default async function MemberPage({
     <>
       <div className="flex flex-col items-center justify-center gap-6 mt-header pt-24">
         <h1 className="uppercase flex flex-col items-center mx-auto mb-24">
-          <span className="text-6xl leading-[0.95]">Meet the</span>
-          <span className="text-8xl font-bold leading-[0.95]">
+          <span className="md:text-6xl text-5xl leading-[0.95]">Meet the</span>
+          <span className="md:text-8xl text-6xl text-center font-bold leading-[0.95]">
             {team.CommitteeYear} Team
           </span>
         </h1>
@@ -36,12 +36,8 @@ export default async function MemberPage({
             src={getLargestImageUrl(team.teamPhoto)}
             alt=""
           />
-          <div className="absolute bottom-8 right-12 p-8 pr-16 max-w-lg bg-white shadow-lg rounded-3xl text-b-dark-blue __markdown">
-            <RichText
-              props={{
-                text: team.description,
-              }}
-            />
+          <div className="md:absolute md:bottom-8 md:right-12 m-3 p-8 pr-16 max-w-lg bg-white shadow-lg rounded-3xl text-b-dark-blue __markdown">
+            <RichText text={team.description} />
             <a
               className="block mr-auto w-fit bg-b-blue px-5 py-3 rounded-full font-bold mt-8"
               href="#chairs"
@@ -50,12 +46,12 @@ export default async function MemberPage({
             </a>
           </div>
           <Image
-            className="absolute bottom-0 left-0"
+            className="absolute bottom-0 left-0 hidden md:visible"
             src={ScribbleLeft}
             alt=""
           />
           <Image
-            className="absolute top-0 right-0 -translate-y-12 -z-10"
+            className="absolute top-0 right-0 -translate-y-12 -z-10 hidden md:visible"
             src={ScribbleRight}
             alt=""
           />

next/app/page.module.css

@@ -1,7 +1,7 @@
 .description {
-  display: inherit;
-  justify-content: inherit;
-  align-items: inherit;
+  display: flex;
+  justify-content: center;
+  align-items: center;
   font-size: 0.85rem;
   max-width: var(--max-width);
   width: 100%;

next/app/page.tsx

@@ -17,19 +17,19 @@ export default async function Home() {
     <>
       <BGWaves className="w-full absolute -z-50 top-[85vh]" />
       <div className="min-h-[55vh] flex flex-col items-center gap-6 mt-header pt-24">
-        <h1 className="uppercase flex flex-col items-center">
-          <span className="text-6xl leading-[0.95]">A Youth Board</span>
-          <span className="text-8xl font-bold leading-[0.95]">
+        <h1 className="uppercase flex flex-col items-center mx-auto justify-center">
+          <span className="text-2xl xs:text-3xl sm:text-4xl lg:text-6xl xl:text-8xl leading-[0.95] text-center">A Youth Board</span>
+          <span className="text-3xl xs:text-4xl sm:text-5xl lg:text-7xl xl:text-9xl font-bold leading-[0.95] text-center">
             For The Future
           </span>
         </h1>
-        <p className="text-lg max-w-[50ch] text-center mb-16 leading-relaxed">
+        <p className="text-sm xs:text-md sm:text-lg md:text-xl lg:text-2xl xl:text-3xl max-w-[50ch] text-center mb-16 leading-relaxed">
           {data.heroParagraph}
         </p>
       </div>
       <HomePageBlobs blob1={data.blob1} blob2={data.blob2} blob3={data.blob3} />
 
-      <ImageWithText props={data.textWithImage} />
+      <ImageWithText props={data.textWithImage}/>
       <div>
         <div className="bg-white bg-opacity-50">
           <div className="overflow-hidden ml-20 mr-20 ">

next/app/projects/active/page.tsx

@@ -0,0 +1,18 @@
+import Project from "@/components/projects/Project";
+import { projectSchema } from "@/schemas/collection/Project";
+import fetchStrapi from "@/util/strapi";
+import { notFound } from "next/navigation";
+import { z } from "zod";
+
+export default async function CurrentProjectPage() {
+  const firstDay = new Date(new Date().getFullYear(), 0, 1);
+  const lastDay = new Date(new Date().getFullYear(), 11, 31);
+
+  const projects = await fetchStrapi("project-pages", z.array(projectSchema), {
+    "filters[Date][$gte]": firstDay.toISOString().split("T")[0],
+    "[$lte]": lastDay.toISOString().split("T")[0],
+  });
+
+  if (projects.length === 0) notFound();
+  return <Project type={"current"} projects={projects} />;
+}