Merge branch 'main' into issue-12-Create_Contact_Form

Author: KKatariah

.gitignore

@@ -291,4 +291,5 @@ dist
 # misc
 .DS_Store
 
-opt/
+opt/
+server/media/

client/declarations.d.ts

@@ -2,3 +2,13 @@ declare module "*.module.css" {
   const classes: { [key: string]: string };
   export default classes;
 }
+
+declare module "*.png" {
+  const content: {
+    src: string;
+    height: number;
+    width: number;
+    blurDataURL?: string;
+  };
+  export default content;
+}

client/next.config.mjs

@@ -8,6 +8,18 @@ const isWindowsDevContainer = () =>
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
+  images: {
+    remotePatterns: [
+      // Local development only. Replace this with the production media/CDN
+      // hostname before deployment.
+      {
+        protocol: "http",
+        hostname: "localhost",
+        port: "8000",
+        pathname: "/media/**",
+      },
+    ],
+  },
   // dumb fix for windows docker
   webpack: isWindowsDevContainer()
     ? (config) => {

client/public/default-resource-img.jpg

@@ -14,6 +14,7 @@ export interface ContentCardProps {
   buttonLabel?: string;
   author?: string;
   dateTime?: string;
+  layout?: "vertical" | "horizontal";
 }
 
 export function ContentCard({
@@ -26,19 +27,39 @@ export function ContentCard({
   buttonLabel = "View more",
   author,
   dateTime,
+  layout = "vertical",
 }: ContentCardProps) {
   const hasAuthor = Boolean(author);
   const hasDateTime = Boolean(dateTime);
+  const isVerticalLayout = layout === "vertical";
+  let layoutClass: string;
+
+  if (isVerticalLayout) {
+    if (hasDateTime) {
+      layoutClass = "aspect-[10/13] max-w-[clamp(18rem,30vw,24rem)]";
+    } else {
+      layoutClass = "aspect-[10/11] max-w-[clamp(18rem,30vw,24rem)]";
+    }
+  } else {
+    layoutClass = "flex-row aspect-[9/2] max-w-none";
+  }
 
   return (
     <article
       className={cn(
-        "group flex aspect-[10/13] h-full w-full max-w-[clamp(18rem,30vw,24rem)] flex-col overflow-hidden rounded-[var(--radius)] border border-border/60 bg-[linear-gradient(0deg,rgba(255,255,255,0.05)_0%,rgba(255,255,255,0.05)_100%),linear-gradient(0deg,rgba(255,255,255,1)_0%,rgba(255,255,255,1)_100%)] text-card-foreground shadow-sm transition-all duration-300 hover:-translate-y-1 hover:shadow-lg",
-        hasDateTime ? "aspect-[10/13]" : "aspect-[10/11]",
+        "group flex h-full w-full flex-col overflow-hidden rounded-[var(--radius)] border border-border/60 bg-[linear-gradient(0deg,rgba(255,255,255,0.05)_0%,rgba(255,255,255,0.05)_100%),linear-gradient(0deg,rgba(255,255,255,1)_0%,rgba(255,255,255,1)_100%)] text-card-foreground shadow-sm transition-all duration-300 hover:-translate-y-1 hover:shadow-lg",
+        layoutClass,
         className,
       )}
     >
-      <div className="relative w-full flex-[0_0_55%] overflow-hidden bg-muted">
+      <div
+        className={cn(
+          "relative overflow-hidden bg-muted",
+          layout === "vertical"
+            ? "w-full flex-[0_0_50%]"
+            : "h-full w-[45%] shrink-0",
+        )}
+      >
         <div className="absolute inset-0" />
         {imageSrc ? (
           <Image
@@ -59,7 +80,7 @@ export function ContentCard({
         <div className="absolute inset-0 bg-background/5" />
       </div>
 
-      <div className="flex flex-1 flex-col gap-[clamp(0.5rem,1.2vw,0.75rem)] p-[clamp(0.5rem,1.2vw,0.75rem)]">
+      <div className="flex flex-1 flex-col gap-[clamp(0.5rem,1.2vw,0.75rem)] px-[clamp(0.8rem,1.5vw,1.6rem)] py-[clamp(0.4rem,1.0vw,1.2rem)]">
         {hasDateTime ? (
           <div className="items-row flex items-center gap-2">
             <Calendar size={16} className="text-muted-foreground" />
@@ -71,7 +92,14 @@ export function ContentCard({
 
         <div className="flex min-h-0 flex-1 flex-col justify-between overflow-hidden">
           <div className="max-h-[80%] space-y-2 overflow-hidden">
-            <h3 className="overflow-hidden text-[clamp(1rem,2.3vw,1.25rem)] font-semibold leading-[clamp(1.35,2.1vw,1.75)] tracking-tight text-foreground [-webkit-box-orient:vertical] [-webkit-line-clamp:2] [display:-webkit-box]">
+            <h3
+              className={cn(
+                "overflow-hidden font-semibold leading-[clamp(1.35,2.1vw,1.75)] tracking-tight text-foreground [-webkit-box-orient:vertical] [-webkit-line-clamp:2] [display:-webkit-box]",
+                isVerticalLayout
+                  ? "text-[clamp(1rem,2.3vw,1.25rem)]"
+                  : "text-[clamp(1.25rem,2.0vw,2.125rem)]",
+              )}
+            >
               {title}
             </h3>
             <p className="overflow-hidden text-[clamp(0.75rem,1.7vw,0.875rem)] leading-[clamp(1.25rem,2.2vw,1.5rem)] text-muted-foreground [-webkit-box-orient:vertical] [-webkit-line-clamp:3] [display:-webkit-box]">

client/src/components/content-card.tsx

@@ -0,0 +1,32 @@
+import Image, { StaticImageData } from "next/image";
+
+import styles from "@/styles/components/card.module.css";
+
+/**
+ * Interface that contains fields for a card.
+ */
+export interface CardProp {
+  image: StaticImageData;
+  alt: string;
+  title: string;
+  body: string;
+}
+
+/** A Placeholder Card component for the front page.
+ *
+ * @param param0 CardProp which contain fields for the card
+ * @returns
+ */
+export default function Card({ image, alt, title, body }: CardProp) {
+  return (
+    <div className={styles["card"]}>
+      <div className={styles["card-img"]}>
+        <Image src={image} alt={alt} />
+      </div>
+      <div className={styles["card-body"]}>
+        <h1 className="text-4xl font-bold text-gray-900">{title}</h1>
+        <p>{body}</p>
+      </div>
+    </div>
+  );
+}

client/src/components/ui/card.tsx

@@ -0,0 +1,48 @@
+import { useRef } from "react";
+
+import styles from "@/styles/components/card_container.module.css";
+
+import { ContentCard, ContentCardProps } from "../content-card";
+
+/** Horizontally scrolling container for cards, On widescreen resolutions, scrolls with side buttons
+ * mobile scrolling is done with pointer.
+ *
+ * @param param0 An Array of ContentCardProps which represents the cards to be displayed
+ * @returns
+ */
+export default function CardContainer({
+  cards,
+}: {
+  cards: Array<ContentCardProps>;
+}) {
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const scroll = (direction: "left" | "right") => {
+    if (containerRef.current) {
+      containerRef.current.scrollBy({
+        left: direction === "right" ? 400 : -400,
+        behavior: "smooth",
+      });
+    }
+  };
+
+  return (
+    <div className={styles["wrapper"]}>
+      <button className={styles["arrow"]} onClick={() => scroll("left")}>
+        &#8592;
+      </button>
+      <div className={styles["card-container"]} ref={containerRef}>
+        {cards.map((card_prop) => (
+          <ContentCard
+            key={card_prop.href}
+            {...card_prop}
+            className="w-[clamp(18rem,30vw,24rem)] shrink-0 snap-start"
+          />
+        ))}
+      </div>
+      <button className={styles["arrow"]} onClick={() => scroll("right")}>
+        &#8594;
+      </button>
+    </div>
+  );
+}

client/src/components/ui/card_container.tsx

@@ -0,0 +1,56 @@
+import { useQuery, UseQueryOptions } from "@tanstack/react-query";
+
+import api from "@/lib/api";
+
+export interface Resource {
+  id: string;
+  image: string | null;
+  name: string;
+  date_made: string;
+  author: string;
+  slug: string;
+  summary: string;
+  type: "page" | "file";
+  body: string;
+  file_url: string | null;
+  file_name: string | null;
+}
+
+export const getResources = (
+  args?: Omit<UseQueryOptions<Resource[]>, "queryKey" | "queryFn">,
+) => {
+  return useQuery<Resource[], Error>({
+    ...args,
+    queryKey: ["resources"],
+    queryFn: async () => {
+      const res = await api.get("resources/collection/");
+      return res.data as Resource[];
+    },
+  });
+  // TODO: Error handling
+};
+
+export async function fetchResourceFromSlug(slug: string): Promise<Resource[]> {
+  const res = await api.get("resources/collection/", {
+    params: {
+      slug,
+    },
+  });
+
+  return res.data as Resource[];
+} //had to create to use in GetServerSideProps since it needs to be async since it runs outside react
+
+export function getResourceFromSlug(slug: string) {
+  return useQuery<Resource[], Error>({
+    queryKey: ["resources", slug],
+    queryFn: async () => {
+      try {
+        const res = await fetchResourceFromSlug(slug);
+        return res as Resource[];
+      } catch (error) {
+        throw new Error("Failed to load"); //create instance of error
+      }
+    },
+    enabled: !!slug,
+  });
+}

client/src/hooks/apiService.ts

@@ -9,7 +9,7 @@ import Navbar from "@/components/ui/Navbar";
 
 const montserrat = Montserrat({
   subsets: ["latin"],
-  variable: "--font-sans",
+  variable: "--font-montserrat",
   weight: ["400", "500", "600", "700", "800"],
 });