Merge remote-tracking branch 'origin/main' into issue-46-Add_custom_404_page

Author: saltyypringle

client/next.config.mjs

@@ -13,7 +13,10 @@ const config = {
   },
   outputFileTracingRoot: import.meta.dirname,
   images: {
-    domains: ["localhost"],
+    remotePatterns: [
+      { protocol: 'http', hostname: '127.0.0.1' },
+      { protocol: 'http', hostname: 'localhost' },
+    ],
   },
   // Turns on file change polling for the Windows Dev Container
   // Doesn't work currently for turbopack, so file changes will not automatically update the client.

client/public/Constitution-V1.pdf

@@ -164,8 +164,9 @@ export default function Footer() {
                 <span>All rights reserved</span>
               </div>
               <Link
-                href="/constitution"
+                href=""
                 className="group flex -translate-x-[52px] items-center gap-2.5 rounded-full border border-purple-500/20 bg-gradient-to-r from-purple-500/10 to-pink-500/10 px-4 py-2 transition-all duration-300 hover:border-purple-500/40 hover:shadow-lg hover:shadow-purple-500/20"
+                onClick={() => window.open("/Constitution-V1.pdf")}
               >
                 <span className="font-jersey10 text-xl text-gray-300 transition-colors group-hover:text-white">
                   Constitution

client/public/frame.svg

@@ -0,0 +1,94 @@
+"use client";
+
+import Image from "next/image";
+
+// unused atm, as the member isnt linked a project on the backend
+/* export type MemberProfileProject = {
+  id: string;
+  name: string;
+  description?: string;
+  href?: string;
+}; */
+
+export type MemberProfileData = {
+  name: string;
+  about: string;
+  pronouns?: string;
+  profile_picture?: string;
+};
+
+type MemberProfileProps = {
+  member: MemberProfileData;
+  //projects?: MemberProfileProject[];
+};
+
+function initialsFromName(name: string) {
+  return name
+    .trim()
+    .split(/\s+/)
+    .slice(0, 2)
+    .map((part) => part[0]?.toUpperCase())
+    .join("");
+}
+
+export function MemberProfile({ member }: MemberProfileProps) {
+  const initials = initialsFromName(member.name);
+
+  return (
+    <>
+      <div className="m-auto h-fit bg-card text-light_2">
+        <div className="mx-2 flex flex-wrap items-center justify-center gap-y-5 py-7 lg:mx-10">
+          <div className="grid grid-cols-1 grid-rows-1 items-center justify-items-center lg:mr-6">
+            <div className="absolute size-32 overflow-clip bg-accent text-center">
+              {member.profile_picture ? (
+                <Image
+                  src={member.profile_picture}
+                  alt={`${member.name} profile picture`}
+                  fill
+                  className="object-cover"
+                />
+              ) : (
+                <div className="flex h-full w-full items-center justify-center font-jersey10 text-5xl text-muted-foreground">
+                  {initials}
+                </div>
+              )}
+            </div>
+            <Image
+              src="/frame.svg"
+              alt="golden pixel art frame around profile picture"
+              width={176}
+              height={192}
+              className="z-0 h-48 w-44"
+            />
+          </div>
+          <div className="flex w-4/5 flex-col gap-2 rounded-md p-2.5 font-firaCode">
+            <div className="flex">
+              <p className="min-w-fit font-jersey10 text-4xl">{member.name}</p>
+              <hr className="ml-5 hidden w-full self-center border-light_2 lg:flex" />
+            </div>
+            <p className="text-lg">{member.pronouns}</p>
+            <p>{member.about}</p>
+          </div>
+        </div>
+      </div>
+      {/* Template for Projects section */}
+      <div className="m-auto min-h-80 w-11/12">
+        <h2 className="mt-7 text-center font-jersey10 text-5xl">Projects</h2>
+        <div className="m-auto my-5 flex flex-wrap justify-center gap-8">
+          {/* Div below is a single project card */}
+          <div className="w-fit rounded-md p-5">
+            <div className="mb-2 h-44 w-96 overflow-clip rounded-md p-5 text-neutral_1">
+              {/* Image and/or Link to Project */}
+            </div>
+            <p className="max-w-96 font-firaCode text-xl font-semibold">
+              {/* Project Title */}
+            </p>
+            <p className="line-clamp-1 max-w-96 font-firaCode text-[--light-3]">
+              {/* Project description */}
+            </p>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}

client/public/heart.png

@@ -0,0 +1,17 @@
+type ItchEmbedProps = {
+  embedID: string;
+  name: string;
+};
+
+export function ItchEmbed({ embedID, name }: ItchEmbedProps) {
+  return (
+    <div className="mb-6 w-full max-w-[552px] px-4 shadow-[0_12px_40px_-16px_hsl(var(--secondary)_/_0.45)] sm:aspect-[552/167] sm:px-0">
+      <iframe
+        className="h-full w-full border-0"
+        src={`https://itch.io/embed/${embedID}?dark=1`}
+        title={name}
+        allowFullScreen
+      />
+    </div>
+  );
+}

client/src/components/main/Footer.tsx

@@ -0,0 +1,125 @@
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import Image from "next/image";
+import Link from "next/link";
+import { useEffect, useRef, useState } from "react";
+
+import { UiEvent as EventType } from "@/hooks/useEvents";
+
+type EventCarouselProps = {
+  items: EventType[];
+};
+
+const GAP = 40;
+
+export default function EventCarousel({ items }: EventCarouselProps) {
+  const viewportRef = useRef<HTMLDivElement>(null);
+  const firstItemRef = useRef<HTMLDivElement>(null);
+
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [visibleCount, setVisibleCount] = useState(3);
+  const [itemWidth, setItemWidth] = useState(0);
+
+  const maxIndex = Math.max(items.length - visibleCount, 0);
+  const slideLeft = () => {
+    setCurrentIndex((prev) => Math.max(prev - 1, 0));
+  };
+  const slideRight = () => {
+    setCurrentIndex((prev) => Math.min(prev + 1, maxIndex));
+  };
+  const translateX = -(currentIndex * (itemWidth + GAP));
+
+  /* Observe item width */
+  useEffect(() => {
+    if (!firstItemRef.current) return;
+    const observer = new ResizeObserver(() => {
+      const width = firstItemRef.current?.clientWidth ?? 0;
+      setItemWidth(width);
+    });
+    observer.observe(firstItemRef.current);
+    return () => observer.disconnect();
+  }, []);
+
+  useEffect(() => {
+    const updateVisibleCount = () => {
+      if (window.innerWidth < 768) {
+        setVisibleCount(1);
+      } else {
+        setVisibleCount(3);
+      }
+    };
+    updateVisibleCount();
+    window.addEventListener("resize", updateVisibleCount);
+    return () => window.removeEventListener("resize", updateVisibleCount);
+  }, []);
+
+  return (
+    <div className="container mx-auto rounded-lg bg-primary-foreground px-4 py-8 lg:px-12">
+      <div className="flex items-center justify-between px-10">
+        <div className="flex items-center">
+          <h2 className="font-jersey10 text-4xl tracking-wide text-white">
+            Upcoming Events
+          </h2>
+
+          <div className="ml-5 flex gap-3 text-lg text-white/60">
+            <ChevronLeft
+              className={`hover:text-white ${
+                currentIndex === 0 ? "opacity-40" : "cursor-pointer"
+              }`}
+              onClick={slideLeft}
+            />
+            <ChevronRight
+              className={`hover:text-white ${
+                currentIndex === maxIndex ? "opacity-40" : "cursor-pointer"
+              }`}
+              onClick={slideRight}
+            />
+          </div>
+        </div>
+
+        <Link href="/events" className="font-jersey10">
+          See More
+        </Link>
+      </div>
+
+      <div className="mt-10 px-10">
+        <div ref={viewportRef} className="overflow-hidden">
+          <div
+            className="flex transition-transform duration-300 ease-out"
+            style={{
+              gap: GAP,
+              transform: `translateX(${translateX}px)`,
+            }}
+          >
+            {items.map((event, index) => (
+              <div
+                key={event.id}
+                ref={index === 0 ? firstItemRef : undefined}
+                className="w-full flex-shrink-0 md:w-[calc((100%-80px)/3)]"
+              >
+                <div className="relative aspect-[16/9] w-full overflow-hidden rounded-lg">
+                  <Image
+                    src={event.coverImage}
+                    alt={event.name}
+                    fill
+                    className="object-cover"
+                  />
+                </div>
+
+                <h3 className="mt-6 font-firaCode text-lg font-semibold tracking-wide text-white">
+                  {event.name}
+                </h3>
+
+                {/* Needs proper processing and laying out */}
+                <p className="text-sm tracking-wide text-white/70">
+                  {event.startTime}
+                </p>
+
+                <div className="mt-3 w-full border-b border-white/20" />
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

client/src/components/main/MemberProfile.tsx

@@ -0,0 +1,80 @@
+import Image from "next/image";
+
+export type eventHighlightCardImage = {
+  url: string;
+  width: number;
+  height: number;
+  alt: string;
+};
+
+export type eventHighlightCardType = {
+  id: number;
+  title: string;
+  description: string;
+  type: string;
+  image: eventHighlightCardImage | null;
+  row: number;
+};
+
+// Purple card header section.
+const renderCardHeader = (card: eventHighlightCardType) => {
+  // Renders differently if we want the techno border.
+  if (card.type === "special-border") {
+    return (
+      <div
+        style={{
+          clipPath:
+            "polygon(0% 0%, 71% 0%, 78% 7px, 100% 7px, 100% calc(100% - 8px), 0% calc(100% - 8px))",
+        }}
+        className="relative bg-accent"
+      >
+        <div
+          style={{
+            clipPath:
+              "polygon(1px 1px, calc(71% - 1px) 1px, calc(78% - 1px) 8px, calc(100% - 1px) 8px, calc(100% - 1px) calc(100% - 8px - 1px), 1px calc(100% - 8px - 1px))",
+          }}
+          className="bg-dark_alt p-4 pt-3 font-jersey10 text-2xl font-semibold"
+        >
+          {card.title}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="rounded-md border border-accent bg-dark_alt px-4 py-2 font-jersey10 text-2xl font-semibold">
+      {card.title}
+    </div>
+  );
+};
+
+export function EventHighlightCard({
+  id,
+  title,
+  description,
+  type,
+  image,
+  row,
+}: eventHighlightCardType) {
+  return (
+    <div key={id} className="flex flex-col">
+      {renderCardHeader({ id, title, description, type, image, row })}
+
+      <div className="mt-4 rounded-md border border-muted bg-landingCard p-4 text-gray-200">
+        <div className="flex gap-2">
+          <span>▶</span>
+          <p>{description}</p>
+          {image && (
+            <Image
+              src={image.url}
+              width={image.width}
+              height={image.height}
+              alt={image.alt}
+              className="m-3 size-20 [image-rendering:pixelated]"
+            />
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}