camelcased coverImage and workshopLink, minor css frontend tweaks

Author: laurenpudz

client/src/components/ui/EventDateDisplay.tsx

@@ -32,20 +32,31 @@ export function getEventDateParts(dateString: string): EventDateParts | null {
   }
 }
 
+const getOrdinal = (d: number) => {
+  if (d > 3 && d < 21) return `${d}th`;
+  switch (d % 10) {
+    case 1:
+      return `${d}st`;
+    case 2:
+      return `${d}nd`;
+    case 3:
+      return `${d}rd`;
+    default:
+      return `${d}th`;
+  }
+};
+
 type EventDateDisplayProps = { date: string };
 
 /** Renders event date as: weekday・ day month・ time.  */
 export function EventDateDisplay({ date }: EventDateDisplayProps) {
   const parts = getEventDateParts(date);
   if (!parts) return null;
   return (
-    <div className="flex flex-wrap items-baseline gap-x-1">
-      <span className="whitespace-nowrap text-primary">
-        {parts.weekday}
-        {"・"}
-      </span>
-      <span className="whitespace-nowrap text-primary">
-        {parts.day} {parts.month}
+    <div className="flex flex-wrap items-baseline gap-x-1 font-firaCode">
+      <span className="whitespace-nowrap text-primary">{parts.weekday},</span>
+      <span className="whitespace-nowrap font-medium text-primary">
+        {getOrdinal(parseInt(parts.day))} {parts.month}
         {"・"}
       </span>
       <span className="text-secondary">{parts.time}</span>

client/src/hooks/useEvent.ts

@@ -11,13 +11,12 @@ type ApiEvent = {
   date: string;
   startTime: string | null;
   location: string;
-  cover_image: string | null;
-  workshop_link: string;
+  coverImage: string | null;
+  workshopLink: string;
 };
 
-type UiEvent = Omit<ApiEvent, "cover_image" | "workshop_link"> & {
+type UiEvent = Omit<ApiEvent, "coverImage"> & {
   coverImage: string;
-  workshopLink: string;
 };
 
 /**
@@ -34,8 +33,7 @@ function normalizeEventId(
 function transformApiEventToUiEvent(data: ApiEvent): UiEvent {
   return {
     ...data,
-    coverImage: data.cover_image ?? "/game_dev_club_logo.svg",
-    workshopLink: data.workshop_link,
+    coverImage: data.coverImage ?? "/game_dev_club_logo.svg",
   };
 }
 

client/src/hooks/useEvents.ts

@@ -10,20 +10,19 @@ type ApiEvent = {
   publicationDate: string;
   date: string;
   location: string;
-  cover_image: string | null;
-  workshop_link: string;
+  coverImage: string | null;
+  workshopLink: string;
 };
 
-export type UiEvent = Omit<ApiEvent, "cover_image" | "workshop_link"> & {
+export type UiEvent = Omit<ApiEvent, "coverImage"> & {
   coverImage: string;
   workshopLink: string;
 };
 
 function transformApiEventToUiEvent(data: ApiEvent): UiEvent {
   return {
     ...data,
-    coverImage: data.cover_image ?? "/game_dev_club_logo.svg",
-    workshopLink: data.workshop_link,
+    coverImage: data.coverImage ?? "/game_dev_club_logo.svg",
   };
 }
 

client/src/pages/events/[id].tsx

@@ -58,13 +58,15 @@ export default function EventPage() {
           <p className="mt-6 text-lg">
             <EventDateDisplay date={event.date} />
           </p>
-          <div className="text-primary">{event.location} </div>
+          <div className="font-firaCode text-sm text-primary">
+            {event.location}{" "}
+          </div>
           <p className="mt-4 max-w-lg text-base leading-relaxed">
             {event.description}
           </p>
           {event.workshopLink && (
-            <p className="mt-4 text-base">
-              Workshop link:
+            <p className="mt-4 font-firaCode">
+              <span className="font-medium text-primary">Workshop link:</span>{" "}
               <a
                 href={event.workshopLink}
                 target="_blank"

server/game_dev/migrations/0015_event_workshop_link.py

@@ -0,0 +1,23 @@
+# Generated by Django 5.1.15 on 2026-03-01 05:30
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('game_dev', '0028_alter_game_hosturl'),
+    ]
+
+    operations = [
+        migrations.RenameField(
+            model_name='event',
+            old_name='cover_image',
+            new_name='coverImage',
+        ),
+        migrations.AddField(
+            model_name='event',
+            name='workshopLink',
+            field=models.URLField(blank=True, max_length=2083),
+        ),
+    ]

server/game_dev/migrations/0029_rename_cover_image_event_coverimage_and_more.py

@@ -17,9 +17,9 @@ class Event(models.Model):
     date = models.DateTimeField()
     description = models.CharField(max_length=256, blank=True)
     publicationDate = models.DateField()
-    cover_image = models.ImageField(upload_to="events/", null=True)
+    coverImage = models.ImageField(upload_to="events/", null=True)
     location = models.CharField(max_length=256)
-    workshop_link = models.URLField(max_length=2083, blank=True)
+    workshopLink = models.URLField(max_length=2083, blank=True)
 
     def __str__(self):
         return self.name

server/game_dev/models.py

@@ -11,9 +11,9 @@ class Meta:
             "date",
             "description",
             "publicationDate",
-            "cover_image",
+            "coverImage",
             "location",
-            "workshop_link",
+            "workshopLink",
         ]
 
 

server/game_dev/serializers.py

@@ -44,9 +44,9 @@ def setUp(self):
             date=self.event_datetime,
             description="Yayayyayayay!",
             publicationDate=self.pub_date,
-            cover_image=image_file,
+            coverImage=image_file,
             location="Ezone",
-            workshop_link="https://example.com/workshop",
+            workshopLink="https://example.com/workshop",
         )
 
     def test_publication_date_is_date(self):
@@ -58,10 +58,10 @@ def test_publication_date_matches(self):
         self.assertEqual(event.publicationDate, self.pub_date)
 
     def test_cover_image_not_empty(self):
-        self.assertIsNotNone(self.event.cover_image)
+        self.assertIsNotNone(self.event.coverImage)
 
     def test_cover_image_is_saved_in_correct_folder(self):
-        self.assertTrue(self.event.cover_image.name.startswith("events/"))
+        self.assertTrue(self.event.coverImage.name.startswith("events/"))
 
     def test_publication_date_not_empty(self):
         self.assertTrue(bool(self.event.publicationDate))
@@ -76,7 +76,7 @@ def test_event_datetime_matches(self):
 
     def test_workshop_link_matches(self):
         event = Event.objects.get(pk=self.event.pk)
-        self.assertEqual(event.workshop_link, "https://example.com/workshop")
+        self.assertEqual(event.workshopLink, "https://example.com/workshop")
 
 
 class CommitteeModelTest(TestCase):