Develop

.github/workflows/build-site.yml

@@ -13,8 +13,14 @@ jobs:
         uses: actions/checkout@v4
       - name: setup nodeJS
         uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: npm
       - name: install packages
         run: npm ci
+      - name: typecheck
+        run: npm run typecheck
+      - name: lint
+        run: npm run lint
       - name: build site
         run: npm run build
-

app/Navbar.tsx

@@ -2,7 +2,7 @@
 import React, { useRef, useState, useEffect } from "react";
 import { motion, AnimatePresence } from "framer-motion";
 import Image from 'next/image';
 import Logo from '../public/images/logo.svg'
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import { Menu, X, ChevronDown } from 'lucide-react';
@@ -240,8 +240,20 @@
 
 export default Navbar;
 
-const Tab = ({ children, setPosition, onClick = () => { } }) => {
-  const ref = useRef(null);
+interface Position {
+  left: number;
+  width: number;
+  opacity: number;
+}
+
+interface TabProps {
+  children: React.ReactNode;
+  setPosition: React.Dispatch<React.SetStateAction<Position>>;
+  onClick?: () => void;
+}
+
+const Tab = ({ children, setPosition, onClick = () => { } }: TabProps) => {
+  const ref = useRef<HTMLLIElement>(null);
 
   return (
     <li
@@ -265,7 +277,7 @@
   );
 };
 
-const Cursor = ({ position }) => {
+const Cursor = ({ position }: { position: Position }) => {
   return (
     <motion.li
       animate={{

app/api/contentful/route.ts

@@ -0,0 +1,37 @@
+import { NextRequest, NextResponse } from "next/server";
+import { contentfulDirect, CONTENTFUL_REVALIDATE_SECONDS } from "@/lib/contentful-client";
+import { LogError } from "@/lib/logger";
+
+interface ContentfulProxyBody {
+    query: string;
+    variables?: Record<string, unknown>;
+}
+
+export async function POST(request: NextRequest) {
+    let body: ContentfulProxyBody;
+
+    try {
+        body = await request.json();
+    } catch {
+        return NextResponse.json({ message: "Invalid JSON body" }, { status: 400 });
+    }
+
+    if (!body?.query || typeof body.query !== "string") {
+        return NextResponse.json({ message: "Missing GraphQL query" }, { status: 400 });
+    }
+
+    try {
+        const data = await contentfulDirect.request(body.query, body.variables);
+        return NextResponse.json(data, {
+            headers: {
+                "Cache-Control": `public, s-maxage=${CONTENTFUL_REVALIDATE_SECONDS}, stale-while-revalidate`,
+            },
+        });
+    } catch (error) {
+        LogError("[/api/contentful] request failed", error);
+        return NextResponse.json(
+            { message: "Failed to fetch content" },
+            { status: 502 }
+        );
+    }
+}

app/blog-2/BlogContent.tsx

@@ -2,7 +2,7 @@
 import { useSearchParams, useRouter } from 'next/navigation';
 import MainContent from '../../components/blog-2/MainContent';
 import PopularPosts from '../../components/blog-2/PopularPosts';
-import useBlogCollection from '../../hooks/useBlogCollection';
+import useBlogCollection, { type Blog } from '../../hooks/useBlogCollection';
 import { useBlog } from '../../hooks/useBlog';
 
 export default function BlogContent() {
@@ -15,15 +15,15 @@ export default function BlogContent() {
 
   const { data: detailedPost } = useBlog(activeSlug || '');
 
-  const handlePostSelect = (post) => {
+  const handlePostSelect = (post: Blog) => {
     router.push(`?slug=${post.slug}`, { scroll: false });
   };
 
   return (
     <main className="flex min-h-screen flex-col items-center bg-white font-poppins">
       <div className="w-full max-w-7xl mx-auto px-4 sm:px-6 md:px-2 lg:px-8 pb-16">
         <div className="flex flex-col xl:flex-row gap-16">
-          <MainContent selectedPost={detailedPost} />
+          <MainContent selectedPost={detailedPost ?? null} />
           <PopularPosts allPosts={allPosts} onPostSelect={handlePostSelect} />
         </div>
       </div>

app/blog-2/page.tsx

@@ -1,9 +1,10 @@
 import { Suspense } from 'react';
 import BlogContent from './BlogContent';
-import { Metadata, ResolvingMetadata } from 'next';
+import { Metadata } from 'next';
 import { gql } from "graphql-request";
 import { contentfulClient } from "@/lib/contentful-client";
 import StarSpinner from '@/components/ui/StarSpinner';
+import { LogError } from '@/lib/logger';
 
 type Props = {
   searchParams: Promise<{ [key: string]: string | string[] | undefined }>
@@ -23,10 +24,7 @@ const GET_BLOG_BY_SLUG = gql`
     }
 `;
 
-export async function generateMetadata(
-  props: Props,
-  parent: ResolvingMetadata
-): Promise<Metadata> {
+export async function generateMetadata(props: Props): Promise<Metadata> {
   const searchParams = await props.searchParams;
   const slug = searchParams.slug;
 
@@ -56,7 +54,7 @@ export async function generateMetadata(
       },
     }
   } catch (error) {
-    console.error(error);
+    LogError('Error generating blog metadata:', error);
     return {
       title: 'Blog & News',
     };

app/blog/page.tsx

@@ -1,12 +1,11 @@
-import React from 'react'
 import BigStory from '../../components/blog/BigStory'
 import RecentBlog from '../../components/blog/RecentBlogs'
 import img1 from "public/images/img1.png";
 import img2 from "public/images/img2.png";
 import HeroSection from '@/components/home/HeroSection';
 import BlogContribute from '@/components/blog/BlogContribute';
 
-const page = () => {
+const BlogPage = () => {
   return (
     <div className='font-poppins min-h-screen'>
       <HeroSection
@@ -23,4 +22,4 @@
   )
 }
 
-export default page;
+export default BlogPage;

app/clubs/[id]/page.tsx

@@ -2,6 +2,8 @@ import ClubDetail from '@/components/clubs/ClubDetail';
 import { contentfulClient } from "@/lib/contentful-client";
 import { gql } from "graphql-request";
 import { ClubItems } from '@/hooks/useClubs';
+import NotFoundCard from '@/components/common/NotFoundCard';
+import { LogError } from '@/lib/logger';
 
 interface ClubCollection {
     clubCollection: {
@@ -62,25 +64,17 @@ const ClubDetailPage = async (props: Props) => {
         const data = await contentfulClient.request<ClubCollection>(GET_CLUB_BY_ID, { id });
         club = data.clubCollection.items[0];
     } catch (error) {
-        console.error("Failed to fetch club detail", error);
+        LogError("Failed to fetch club detail", error);
     }
 
     if (!club) {
         return (
-            <div className="min-h-screen bg-gray-50 flex items-center justify-center p-4">
-                <div className="text-center bg-white p-12 rounded-[2.5rem] shadow-xl border border-gray-100 max-w-md">
-                    <div className="w-20 h-20 bg-red-50 text-red-500 rounded-full flex items-center justify-center mx-auto mb-6">
-                        <svg className="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
-                        </svg>
-                    </div>
-                    <h1 className="text-3xl font-bold text-gray-900 mb-4 font-header">Club Not Found</h1>
-                    <p className="text-gray-600 mb-8 leading-relaxed">The club you are looking for might have been moved or deleted. Experience something else!</p>
-                    <a href="/clubs" className="inline-block bg-black text-white px-10 py-4 rounded-2xl font-bold hover:shadow-lg transition-all hover:scale-[1.02]">
-                        Back to Clubs and Societies
-                    </a>
-                </div>
-            </div>
+            <NotFoundCard
+                title="Club Not Found"
+                message="The club you are looking for might have been moved or deleted. Experience something else!"
+                backHref="/clubs"
+                backText="Back to Clubs and Societies"
+            />
         );
     }
 

app/clubs/page.tsx

@@ -4,6 +4,7 @@ import { contentfulClient } from '@/lib/contentful-client';
 import { gql } from 'graphql-request';
 import ClubsList from '@/components/clubs/ClubsList';
 import { ClubItems } from '@/hooks/useClubs';
+import { LogError } from '@/lib/logger';
 
 interface ClubCollection {
   clubCollection: {
@@ -41,7 +42,7 @@ const ClubsPage = async () => {
     const data = await contentfulClient.request<ClubCollection>(GET_CLUBS);
     clubs = data.clubCollection.items;
   } catch (error) {
-    console.error("Failed to fetch clubs", error);
+    LogError("Failed to fetch clubs", error);
   }
 
   return (

app/department/page.tsx

@@ -99,7 +99,7 @@ const DepartmentListPage = () => {
                                     </p>
                                     <div className='w-full pt-4 mt-auto'>
                                         <Link
-                                            href={`/department-detail?id=${dept.sys.id}`}
+                                            href={`/departments/${dept.sys.id}`}
                                             className='bg-black text-white px-6 py-4 rounded-2xl w-full font-bold hover:bg-primary transition-all duration-300 flex items-center justify-center gap-2 group/btn shadow-lg shadow-black/5 hover:shadow-primary/20'
                                         >
                                             View Department