fix: Sort mods alphabetically by title rather than slug, potential fix for time being rendered serverside.

Author: MerchantCalico

package.json

@@ -1,7 +1,7 @@
 {
   "name": "mod-garden-website",
   "type": "module",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "scripts": {
     "dev": "astro dev --api real",
     "dev_local": "astro dev --api local",

src/components/ProjectCard.astro

@@ -6,16 +6,21 @@ import { getModrinthModData } from "../ts/ModGardenAPI";
 
 interface Props {
   submission: Project;
+  mod?: Mod;
   awards?: Award[];
   events?: ModGardenEvent[];
   showUserInfo?: boolean;
 }
 
-const { submission, events, awards, showUserInfo } = Astro.props;
+const { submission, mod, events, awards, showUserInfo } = Astro.props;
 
-const mod: Mod | undefined = await getModrinthModData(submission.modrinth_id);
-if (!mod) {
-  throw new Error("Modrinth data not found: " + submission.modrinth_id);
+var obtainedMod = mod;
+if (!obtainedMod) {
+  const lookup: Mod | undefined = await getModrinthModData(submission.modrinth_id);
+  if (!lookup) {
+    throw new Error("Modrinth data not found: " + submission.modrinth_id);
+  }
+  obtainedMod = lookup;
 }
 
 let eventNames = "";
@@ -29,8 +34,8 @@ if (awards != undefined && awards.length > 0) {
   awardNames = awards.map((award) => award.display_name).join(", ");
 }
 
-const galleryPicture = mod.gallery?.length ? mod.gallery[0] : undefined;
-const iconPicture = mod.icon_url ? mod.icon_url : undefined;
+const galleryPicture = obtainedMod.gallery?.length ? obtainedMod.gallery[0] : undefined;
+const iconPicture = obtainedMod.icon_url ? obtainedMod.icon_url : undefined;
 const projectAuthors: UserData[] = [];
 if (showUserInfo) {
   const users = submission.authors;
@@ -61,7 +66,7 @@ if (showUserInfo) {
     </span>
     <div>
       <h1 class="pb-1 text-lg font-bold text-black dark:text-white">
-        {mod.title}
+        {obtainedMod.title}
       </h1>
       {showUserInfo && (<div> By:
         {projectAuthors.length > 0 
@@ -73,7 +78,7 @@ if (showUserInfo) {
         }
       </div>)}
       <span>
-        {mod.description}
+        {obtainedMod.description}
       </span>
     </div>
   </div>

src/pages/events/mod-garden/nature.astro

@@ -1,27 +1,41 @@
 ---
 import Layout from "../../../layouts/Layout.astro";
-import Moment from "moment";
 import { Image } from "astro:assets";
 import ProjectCard from "../../../components/ProjectCard.astro";
 
 import natureLogo from "../../../icons/events/nature/logo-full.png";
 import type { Project } from "../../../ts/ModGardenAPI";
 import { getEventProjects } from "../../../ts/ModGardenAPI";
+import { formatTime, isoTime } from "../../../ts/TimeHelper";
+import { getModrinthProject, type Mod } from "../../../ts/ModrinthHelper";
 
+type ProjectAndMod = {
+    project: Project;
+    mod: Mod;
+}
 
-const projects: Project[] = await getEventProjects("mod-garden-nature");
-projects.sort((a, b) => {
-    return a.slug.localeCompare(b.slug)
-});
+async function getProjects() : Promise<ProjectAndMod[]> {
+  const unsortedProjects = await getEventProjects("mod-garden-nature");
+  const projects = new Array<ProjectAndMod>(unsortedProjects.length);
+  for (let i = 0; i < unsortedProjects.length; ++i) {
+    const project = unsortedProjects[i];
+    const mod = await getModrinthProject(project.modrinth_id);
+    projects[i] = { project: project, mod: mod } as ProjectAndMod;
+  }
+  projects.sort((a, b) => a.mod.title.localeCompare(b.mod.title))
+  return projects;
+}
+
+const projects: ProjectAndMod[] = await getProjects();
 
-const planningStart = Moment("2025-05-18T00:00:00Z");
-const planningEnd = Moment("2025-05-25T00:00:00Z");
-const developmentStart = Moment("2025-05-25T00:00:00Z");
-const tweakStart = Moment("2025-08-22T00:00:00Z");
-const buildStart = Moment("2025-09-05T00:00:00Z");
-const buildEnd = Moment("2025-10-01T00:00:00Z");
-const showcaseStart = Moment("2025-10-03T00:00:00Z");
-const showcaseEnd = Moment("2025-10-10T00:00:00Z");
+const planningStart = "2025-05-18T00:00:00Z";
+const planningEnd = "2025-05-25T00:00:00Z";
+const developmentStart = "2025-05-25T00:00:00Z";
+const tweakStart = "2025-08-22T00:00:00Z";
+const buildStart = "2025-09-05T00:00:00Z";
+const buildEnd = "2025-10-01T00:00:00Z";
+const showcaseStart = "2025-10-03T00:00:00Z";
+const showcaseEnd = "2025-10-10T00:00:00Z";
 ---
 
 <Layout title="Mod Garden: Nature" favicon="/images/icon/nature.png" image="/images/icon/nature.png" color="#68ae26">
@@ -119,39 +133,39 @@ const showcaseEnd = Moment("2025-10-10T00:00:00Z");
           <ol class="relative border-s border-leaf-600 dark:border-leaf-200">
             <li class="mb-[19.5%] ms-4">
               <div class="absolute w-3 h-3 bg-pine-500 rounded-full mt-1.5 -start-1.5 dark:bg-pine-700"></div>
-              <time datetime={planningStart.toISOString()} data-start-time={planningStart} class="mb-1 text-sm font-normal leading-none italic">{planningStart.format("MM/D/YYYY h:mm A")} - {planningEnd.format("MM/D/YYYY h:mm A")}</time>
+              <time datetime={isoTime(planningStart)} data-start-time={planningStart} class="mb-1 text-sm font-normal leading-none italic">{formatTime(planningStart)} - {formatTime(planningEnd)}time>
               <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Planning Stage</h3>
               <p class="text-base font-normal">
                 Here you can sign up, and start planning your project. This is the time to start forming teams, planning ideas and general brainstorming.
               </p>
             </li>
             <li class="mb-[19.5%] ms-4">
               <div class="absolute w-3 h-3 bg-pine-500 rounded-full mt-1.5 -start-1.5 dark:bg-pine-700"></div>
-              <time datetime={developmentStart.toISOString()} data-start-time={developmentStart} class="mb-1 text-sm font-normal leading-none italic">{developmentStart.format("MM/D/YYYY h:mm A")} - {tweakStart.format("MM/D/YYYY h:mm A")}</time>
+              <time datetime={isoTime(developmentStart)} data-start-time={developmentStart} class="mb-1 text-sm font-normal leading-none italic">{formatTime(developmentStart)} - {formatTime(tweakStart)}</time>
               <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Development Stage</h3>
               <p class="text-base font-normal">
                 This is when you start working on your project(s). You should be submitted to Modrinth at the end of this stage.
               </p>
             </li>
             <li class="mb-[19.5%] ms-4">
               <div class="absolute w-3 h-3 bg-pine-500 rounded-full mt-1.5 -start-1.5 dark:bg-pine-700"></div>
-              <time datetime={tweakStart.toISOString()} data-start-time={tweakStart} class="mb-1 text-sm font-normal leading-none italic">{tweakStart.format("MM/D/YYYY h:mm A")} - {buildStart.format("MM/D/YYYY h:mm A")}</time>
+              <time datetime={isoTime(tweakStart)} data-start-time={tweakStart} class="mb-1 text-sm font-normal leading-none italic">{formatTime(tweakStart)} - {formatTime(buildStart)}</time>
               <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Tweak Stage</h3>
               <p class="text-base font-normal">
                 This period is all about fixing bugs, and integrating with other mods to have cross compatibility. Extensions will last until the end of the first week of this phase.
               </p>
             </li>
             <li class="mb-[19.5%] ms-4">
               <div class="absolute w-3 h-3 bg-pine-500 rounded-full mt-1.5 -start-1.5 dark:bg-pine-700"></div>
-              <time datetime={buildStart.toISOString()} data-start-time={buildStart} class="mb-1 text-sm font-normal leading-none italic">{buildStart.format("MM/D/YYYY h:mm A")} - {buildEnd.format("MM/D/YYYY h:mm A")}</time>
+              <time datetime={isoTime(buildStart)} data-start-time={buildStart} class="mb-1 text-sm font-normal leading-none italic">{formatTime(buildStart)} - {formatTime(buildEnd)}</time>
               <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Building Stage</h3>
               <p class="text-base font-normal">
                 This stage is optional, but if you want to build a booth for your project, this is the time to do it.
               </p>
             </li>
             <li class="ms-4">
               <div class="absolute w-3 h-3 bg-pine-500 rounded-full mt-1.5 -start-1.5 dark:bg-pine-700"></div>
-              <time datetime={showcaseStart.toISOString()} data-start-time={showcaseStart} class="mb-1 text-sm font-normal leading-none italic">{showcaseStart.format("MM/D/YYYY h:mm A")} - {showcaseEnd.format("MM/D/YYYY h:mm A")}</time>
+              <time datetime={isoTime(showcaseStart)} data-start-time={showcaseStart} class="mb-1 text-sm font-normal leading-none italic">{formatTime(showcaseStart)} - {formatTime(showcaseEnd)}</time>
               <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Showcase Stage</h3>
               <p class="text-base font-normal">
                 This is when the event server is up and running, where you and players can visit booths for all the projects. Players may vote for mods and awards are given in this stage. The server will still be up for some time after this phase ends.
@@ -169,7 +183,8 @@ const showcaseEnd = Moment("2025-10-10T00:00:00Z");
       <div class="grid grid-cols-1 gap-2 md:grid-cols-2 lg:grid-cols-3">
         {projects.map((project) => (
           <ProjectCard
-            submission={project}
+            submission={project.project}
+            mod={project.mod}
             showUserInfo={true}
           />
         ))}

src/ts/TimeHelper.ts

@@ -0,0 +1,11 @@
+import Moment from "moment";
+
+export const prerender = false;
+
+export async function formatTime(time: string) : Promise<string> {
+    return Moment(time).format("MM/D/YYYY h:mm A")
+}
+
+export function isoTime(time: string) : string {
+    return Moment(time).toISOString()
+}