Develop

.github/workflows/ci-prod.yaml

@@ -92,15 +92,6 @@ jobs:
         with:
           commit_message: 'chore(release): prepare for ${{ github.event.inputs.target }}'
 
-      - name: Save Release Tag as Artifact
-        run: echo "${{ github.event.inputs.target }}" > release_tag.txt
-
-      - name: Upload Release Tag Artifact
-        uses: actions/upload-artifact@v4
-        with:
-          name: release-tag
-          path: release_tag.txt
-
   release_github:
     name: Create GitHub Release
     runs-on: ubuntu-latest

src/app/(app)/page.tsx

@@ -7,9 +7,6 @@ const Home: React.FC = () => {
     <div className="flex w-full flex-col items-center gap-10 pb-24 pt-12">
       <h1 className="hidden">ESC Technology Department Website</h1>
       <Hero />
-      <div className="flex w-full text-left text-2xl font-semibold lg:text-4xl lg:font-bold">
-        Tools & Services
-      </div>
       <section
         className="grid w-full gap-5 md:grid-cols-2 lg:grid-cols-3"
         id="tools-list"

src/app/(app)/tools/qr-code-generator/page.tsx

@@ -2,10 +2,10 @@ import type { Metadata } from 'next';
 import { Suspense } from 'react';
 
 import BackButton from '~/components/common/button/back-button';
-import QRCodeCreateDialog from '~/components/tools/qr-code-generator/qr-code-create-dialog';
-import QRCodeCreateDialogTrigger from '~/components/tools/qr-code-generator/qr-code-create-dialog-trigger';
-import QRCodeLoading from '~/components/tools/qr-code-generator/qr-code-loading';
-import QRCodesContainer from '~/components/tools/qr-code-generator/qr-codes-container';
+import QrCodeCreateDialog from '~/components/tools/qr-code-generator/qr-code-create-dialog';
+import QrCodeCreateDialogTrigger from '~/components/tools/qr-code-generator/qr-code-create-dialog-trigger';
+import QrCodeLoading from '~/components/tools/qr-code-generator/qr-code-loading';
+import QrCodesContainer from '~/components/tools/qr-code-generator/qr-codes-container';
 
 export const metadata: Metadata = {
   title: 'Intania Tech - QR Code Generator',
@@ -16,18 +16,18 @@ const Page: React.FC = () => {
     <>
       <BackButton href="/" />
       <div className="flex w-full flex-col items-center gap-5 pb-10 pt-20 lg:gap-8">
-        <QRCodeCreateDialog>
+        <QrCodeCreateDialog>
           <div className="flex w-full items-center justify-between">
             <h2 className="text-2xl font-medium">Your QR Codes</h2>
-            <QRCodeCreateDialogTrigger variant="button" />
+            <QrCodeCreateDialogTrigger variant="button" />
           </div>
           <div className="grid w-full grid-cols-1 gap-5 md:grid-cols-2 lg:grid-cols-3 lg:gap-8">
-            <QRCodeCreateDialogTrigger variant="card" />
-            <Suspense fallback={<QRCodeLoading />}>
-              <QRCodesContainer />
+            <QrCodeCreateDialogTrigger variant="card" />
+            <Suspense fallback={<QrCodeLoading />}>
+              <QrCodesContainer />
             </Suspense>
           </div>
-        </QRCodeCreateDialog>
+        </QrCodeCreateDialog>
       </div>
     </>
   );

src/app/(events)/hackathon/_components/common/footer.tsx

@@ -18,7 +18,7 @@ const Footer: React.FC = () => {
     <>
       <footer
         ref={footerRef}
-        className="w-full border-t-2 h-72 sm:h-64 px-3 sm:px-8 border-white/10 bg-hackathon-background z-40 absolute bottom-0"
+        className="w-full border-y-2 h-72 sm:h-64 px-3 sm:px-8 border-white/10 bg-hackathon-background z-40 absolute bottom-0"
       >
         <div className="max-w-screen-xl mx-auto h-full flex flex-col text-center sm:text-left gap-5 sm:flex-row sm:items-center justify-center sm:justify-between">
           <HackathonTitle className="text-3xl sm:text-4xl md:text-5xl sm:pb-14" />

src/app/(events)/hackathon/_components/landing/objectives-section.tsx

@@ -85,7 +85,7 @@ const ObjectivesSection: React.FC = () => {
         </>
       }
     >
-      <div className="flex flex-col pt-6 sm:pt-0 md:pt-5 px-0 md:px-5">
+      <div className="flex flex-col pt-6 sm:pt-0 md:pt-5 px-0 md:px-5 gap-6 md:gap-8">
         <span className="font-ndot47 text-2xl md:text-4xl text-white/50 select-none">
           what the HACK?!
         </span>
@@ -132,7 +132,7 @@ const ObjectiveCard: React.FC<ObjectiveCardProps> = ({
         type="button"
         onClick={() => setIsCollapsed((prev) => !prev)}
       >
-        <h3 className="font-ndot47 text-4xl md:text-6xl lowercase select-none duration-75 group-hover:text-hackathon-primary">
+        <h3 className="font-ndot47 text-4xl md:text-6xl uppercase select-none duration-75 group-hover:text-hackathon-primary">
           {title}
         </h3>
         <span

src/app/(events)/hackathon/_components/landing/ticket-section.tsx

@@ -106,7 +106,7 @@ const TicketSection: React.FC = () => {
               key={content.title}
               className="flex flex-col gap-4 sm:gap-6"
             >
-              <h3 className="font-ndot47 text-2xl md:text-4xl lowercase text-white/50 select-none">
+              <h3 className="font-ndot47 text-2xl md:text-4xl uppercase text-white/50 select-none">
                 {content.title}
               </h3>
               {content.children}

src/app/(events)/hackathon/_components/landing/timeline-section.tsx

@@ -59,7 +59,7 @@ const contents = [
         </p>
       </div>
     ),
-    date: '17 February 2025',
+    date: '17 February 2025—Super Early Bird',
   },
   {
     title: 'HACK Day',

src/components/about/members-container.tsx

@@ -1,17 +1,22 @@
-import { api } from '~/trpc/server';
+import { getMembers } from '~/server/actions/about';
 
 import MemberButton from './member-button';
 
 const MemberContainer: React.FC = async () => {
-  const response = await api.about.getMembers();
+  const res = await getMembers();
 
-  if (!response.success) {
-    return null;
+  if (!res.success) {
+    console.error('MemberContainer, failed to load members: ', res.errors);
+    return (
+      <span className="aspect-[4/2] grid place-content-center text-white/20 select-none">
+        Failed to load members. Please try again later.
+      </span>
+    );
   }
 
   return (
     <div className="flex flex-wrap items-center justify-center gap-2">
-      {response.data.map((member) => {
+      {res.data.map((member) => {
         const avatarUrl = new URL(member.avatar_url);
 
         return (

src/components/about/projects-container.tsx

@@ -8,8 +8,14 @@ import ProjectCard from './project-card';
 const ProjectsContainer: React.FC = async () => {
   const res = await getProjects();
   if (!res.success) {
-    return <div>Something went wrong ...</div>;
+    console.error('ProjectsContainer, failed to load projects: ', res.errors);
+    return (
+      <span className="aspect-[4/2] grid place-content-center text-white/20 select-none">
+        Failed to load projects. Please try again later.
+      </span>
+    );
   }
+
   const projects = res.data;
   const years = [...new Set(projects.map((project) => project.year))];
 

src/components/common/animation/scroll-revealer.tsx

@@ -26,7 +26,14 @@ const ScrollRevealer: React.FC<ScrollRevealerProps> = ({
 
   useEffect(() => {
     if (isInview) {
-      controls.start('visible').catch((err: unknown) => console.error(err));
+      controls
+        .start('visible')
+        .catch((err: unknown) =>
+          console.error(
+            'ScrollRevealer, animation controls failed to start: ',
+            err,
+          ),
+        );
     }
   }, [isInview, controls]);
 

src/components/common/button/copy-button.tsx

@@ -21,7 +21,7 @@ const CopyButton: React.FC<CopyButtonProps> = ({ value, className }) => {
       await navigator.clipboard.writeText(value);
       setSuccess(true);
     } catch (error) {
-      console.error('Failed to copy: ', error);
+      console.error('CopyButton, failed to copy: ', error);
     }
   };
 

src/components/home/carousel-container.tsx

@@ -0,0 +1,30 @@
+import { env } from '~/env';
+import { getCarousel } from '~/server/actions/hero';
+
+import Carousel from './carousel';
+
+const CarouselContainer: React.FC = async () => {
+  const res = await getCarousel();
+  if (!res.success) {
+    console.error(
+      'CarouselContainer, failed to load carousel slides: ',
+      res.errors,
+    );
+    return (
+      <span className="col-span-5 aspect-video lg:aspect-[4/2] select-none grid place-content-center text-white/20">
+        Failed to load carousel slides. Please try again later
+      </span>
+    );
+  }
+
+  const slides = res.data;
+
+  slides.map((slide) => {
+    slide.image = `${env.DIRECTUS_URL}/assets/${slide.image}`;
+    return slide;
+  });
+
+  return <Carousel slides={slides} />;
+};
+
+export default CarouselContainer;

src/components/home/carousel-loading.tsx

@@ -0,0 +1,7 @@
+import { Skeleton } from '../ui/skeleton';
+
+const CarouselLoading: React.FC = () => {
+  return <Skeleton className="col-span-5 aspect-video lg:aspect-[4/2]" />;
+};
+
+export default CarouselLoading;

src/components/home/carousel.tsx

@@ -3,19 +3,19 @@
 import Image from 'next/image';
 import Link from 'next/link';
 import React from 'react';
-import { Carousel } from 'react-responsive-carousel';
+import { Carousel as ReactResponsiveCarousel } from 'react-responsive-carousel';
+import 'react-responsive-carousel/lib/styles/carousel.min.css';
 
-import 'react-responsive-carousel/lib/styles/carousel.min.css'; // requires a loader
 import { cn } from '~/lib/utils';
 import { type Slide } from '~/types/hero';
 
 interface CarouselProps {
   slides: Slide[];
 }
 
-const HeroCarousel: React.FC<CarouselProps> = ({ slides }) => {
+const Carousel: React.FC<CarouselProps> = ({ slides }) => {
   return (
-    <Carousel
+    <ReactResponsiveCarousel
       autoPlay
       infiniteLoop
       className="col-span-5"
@@ -87,8 +87,8 @@ const HeroCarousel: React.FC<CarouselProps> = ({ slides }) => {
             </div>
           ),
         )}
-    </Carousel>
+    </ReactResponsiveCarousel>
   );
 };
 
-export default HeroCarousel;
+export default Carousel;

src/components/home/hero.tsx

@@ -1,30 +1,20 @@
-import React, { Suspense } from 'react';
-
-import { env } from '~/env';
-import { getCarousel } from '~/server/actions/hero';
+import { Suspense } from 'react';
 
 import NavItems from '../common/navigation/nav-items';
 import UserBox from '../common/user-box/user-box';
 import UserBoxLoading from '../common/user-box/user-box-loading';
 import { Card } from '../ui/card';
 
-import HeroCarousel from './carousel';
-
-const Hero: React.FC = async () => {
-  const res = await getCarousel();
-  if (!res.success) {
-    return <div>Something went wrong ...</div>;
-  }
-  const slides = res.data;
-  slides.map((slide) => {
-    slide.image = `${env.DIRECTUS_URL}/assets/${slide.image}`;
-    return slide;
-  });
+import CarouselContainer from './carousel-container';
+import CarouselLoading from './carousel-loading';
 
+const Hero: React.FC = () => {
   return (
     <Card className="grid w-full overflow-hidden p-0 lg:grid-cols-7">
       {/* banner */}
-      <HeroCarousel slides={slides} />
+      <Suspense fallback={<CarouselLoading />}>
+        <CarouselContainer />
+      </Suspense>
 
       {/* menu */}
       <div className="col-span-2 hidden flex-col justify-between lg:flex">

src/components/login/login-form.tsx

@@ -43,7 +43,7 @@ const LoginForm: React.FC = () => {
     const res = await login(values.studentId, values.password);
 
     if (!res.success) {
-      console.error(res.errors);
+      console.error('LoginForm, failed to login: ', res.errors);
 
       toast({
         title: 'Failed to login',

src/components/tools/link-shortener/link-create-dialog-content.tsx

@@ -81,7 +81,10 @@ const LinkCreateDialogContent: React.FC = () => {
         variant: 'destructive',
       });
 
-      console.error(resCheck.errors);
+      console.error(
+        'LinkCreateDialogContent, failed to check role: ',
+        resCheck.errors,
+      );
 
       return;
     }
@@ -117,7 +120,10 @@ const LinkCreateDialogContent: React.FC = () => {
         variant: 'destructive',
       });
 
-      console.error(resCreate.errors);
+      console.error(
+        'LinkCreateDialogContent, failed to create shortened link: ',
+        resCreate.errors,
+      );
 
       return;
     }

src/components/tools/link-shortener/link-delete-button.tsx

@@ -42,7 +42,7 @@ const DeleteButton: React.FC<DeleteButtonProps> = ({ slug }) => {
         variant: 'destructive',
       });
 
-      console.error(res.errors);
+      console.error('DeleteButton, failed to delete link: ', res.errors);
 
       return;
     }

src/components/tools/link-shortener/link-edit-card.tsx

@@ -93,7 +93,7 @@ const LinkEditCard: React.FC<LinkEditCardProps> = ({
         variant: 'destructive',
       });
 
-      console.error(resCheck.errors);
+      console.error('LinkEditCard, failed to check role: ', resCheck.errors);
 
       return;
     }
@@ -133,7 +133,10 @@ const LinkEditCard: React.FC<LinkEditCardProps> = ({
         variant: 'destructive',
       });
 
-      console.error(resUpdate.errors);
+      console.error(
+        'LinkEditCard, failed to update shortened link: ',
+        resUpdate.errors,
+      );
 
       return;
     }

src/components/tools/link-shortener/links-container.tsx

@@ -7,7 +7,12 @@ const LinksContainer: React.FC = async () => {
   const res = await api.linkShortener.get();
 
   if (!res.success) {
-    return <p>Failed to load links.</p>;
+    console.error('LinksContainer, failed to fetch links: ', res.errors);
+    return (
+      <span className="text-white/20 select-none">
+        Failed to fetch links. Please try again later.
+      </span>
+    );
   }
 
   if (!res.data.length) {

src/components/tools/oauth2/client-create-dialog-content.tsx

@@ -121,7 +121,10 @@ const ClientCreateDialogContent: React.FC = () => {
     } catch (error) {
       setLoading(false);
 
-      console.error(error);
+      console.error(
+        'ClientCreateDialogContent, failed to create OAuth 2.0 client: ',
+        error,
+      );
       toast({
         title: 'Failed to create OAuth 2.0 client',
         description:

src/components/tools/oauth2/client-delete-dialog-trigger.tsx

@@ -39,10 +39,13 @@ const ClientDeleteDialogTrigger: React.FC<ClientDeleteDialogTriggerProps> = ({
     const res = await deleteOAuth2Client(id);
 
     if (!res.success) {
-      console.error(res.errors);
+      console.error(
+        'ClientDeleteDialogTrigger, failed to delete QR code: ',
+        res.errors,
+      );
 
       toast({
-        title: 'Failed to delete qr code',
+        title: 'Failed to delete QR code',
         description: res.message ?? 'Something went wrong',
         variant: 'destructive',
       });