feat(releases): bring back the Latest and Maintenance badges, correctly sort releases

Author: WarningImHack3r

src/routes/package/[...package]/+page.server.ts

@@ -1,5 +1,5 @@
-import semver from "semver";
 import { error } from "@sveltejs/kit";
+import semver from "semver";
 import { gitHubCache, type GitHubRelease } from "$lib/server/github-cache";
 import { discoverer } from "$lib/server/package-discoverer";
 import type { Repository } from "$lib/repositories";
@@ -13,7 +13,7 @@ export async function load({ params }) {
 				Pick<(typeof categorizedPackages)[number]["packages"][number], "pkg">)
 		| undefined = undefined;
 	const foundVersions = new Set<string>();
-	const releases: (GitHubRelease & { cleanVersion: string })[] = [];
+	const releases: ({ cleanName: string; cleanVersion: string } & GitHubRelease)[] = [];
 
 	// Discover releases
 	console.log("Starting loading releases...");
@@ -48,15 +48,15 @@ export async function load({ params }) {
 				// 3. For each release, check if it is already found, searching by versions
 				const { dataFilter, metadataFromTag, changelogContentsReplacer, ...rest } = repo;
 				for (const release of validReleases) {
-					const [, cleanVersion] = repo.metadataFromTag(release.tag_name);
+					const [cleanName, cleanVersion] = repo.metadataFromTag(release.tag_name);
 					console.log(`Release ${release.tag_name}, extracted version: ${cleanVersion}`);
 					if (foundVersions.has(cleanVersion)) continue;
 
 					// If not, add its version to the set and itself to the final version
 					const currentNewestVersion = [...foundVersions].sort(semver.rcompare)[0];
 					console.log("Current newest version", currentNewestVersion);
 					foundVersions.add(cleanVersion);
-					releases.push({ ...release, cleanVersion });
+					releases.push({ cleanName, cleanVersion, ...release });
 
 					// If it is newer than the newest we got, set this repo as the "final repo"
 					if (!currentNewestVersion || semver.gt(cleanVersion, currentNewestVersion)) {
@@ -79,9 +79,11 @@ export async function load({ params }) {
 		// Return the final sorted results and filter back out the clean version
 		return {
 			currentPackage,
-			releases: releases
-				.toSorted((a, b) => semver.rcompare(a.cleanVersion, b.cleanVersion))
-				.filter(({ cleanVersion, ...release }) => release)
+			releases: releases.toSorted(
+				(a, b) =>
+					new Date(b.published_at ?? b.created_at).getTime() -
+					new Date(a.published_at ?? a.created_at).getTime()
+			)
 		};
 	}
 

src/routes/package/[...package]/+page.svelte

@@ -1,12 +1,26 @@
 <script lang="ts">
 	import { navigating } from "$app/state";
 	import { LoaderCircle } from "@lucide/svelte";
+	import semver from "semver";
 	import ReleaseCard from "./ReleaseCard.svelte";
 	import SidePanel from "./SidePanel.svelte";
 	import * as Accordion from "$lib/components/ui/accordion";
 	import { Skeleton } from "$lib/components/ui/skeleton";
 
 	let { data } = $props();
+	let latestRelease = $derived(
+		data.releases.toSorted((a, b) => semver.rcompare(a.cleanVersion, b.cleanVersion))[0]
+	);
+	let earliestOfLatestMajor = $derived(
+		data.releases
+			.filter(
+				({ prerelease, cleanVersion }) =>
+					(latestRelease
+						? semver.major(cleanVersion) === semver.major(latestRelease.cleanVersion)
+						: false) && !prerelease
+			)
+			.sort((a, b) => semver.compare(a.cleanVersion, b.cleanVersion))[0]
+	);
 </script>
 
 {#snippet loading()}
@@ -58,11 +72,29 @@
 					.map(({ id }) => id.toString())}
 				class="w-full"
 			>
-				{#each data.releases as release (release.id)}
+				{#each data.releases as release, index (release.id)}
+					{@const semVersion = semver.coerce(release.cleanVersion)}
+					{@const isMajorRelease =
+						!release.prerelease &&
+						semVersion?.minor === 0 &&
+						semVersion?.patch === 0 &&
+						!semVersion?.prerelease.length}
+					{@const releaseDate = new Date(release.published_at ?? release.created_at)}
+					{@const isLatest = release.id === latestRelease?.id}
+					{@const isMaintenance = earliestOfLatestMajor
+						? !isMajorRelease &&
+							/* `semVersion` and `latestRelease` can't be undefined here */
+							semVersion!.major < semver.major(latestRelease!.cleanVersion) &&
+							releaseDate >
+								new Date(earliestOfLatestMajor.published_at ?? earliestOfLatestMajor.created_at)
+						: false}
 					<ReleaseCard
+						{index}
 						packageName={data.currentPackage.pkg.name}
 						repo={{ owner: data.currentPackage.owner, name: data.currentPackage.repoName }}
 						{release}
+						{isLatest}
+						{isMaintenance}
 					/>
 				{/each}
 			</Accordion.Root>

src/routes/package/[...package]/ReleaseCard.svelte

@@ -11,20 +11,27 @@
 	import ListElementRenderer from "$lib/components/renderers/ListElementRenderer.svelte";
 
 	type Props = {
+		index?: number;
 		packageName: string;
 		repo: {
 			owner: string;
 			name: string;
 		};
-		release: GitHubRelease;
+		release: { cleanName: string; cleanVersion: string } & GitHubRelease;
+		isLatest?: boolean;
+		isMaintenance?: boolean;
 	};
-	let { packageName, repo, release }: Props = $props();
+	let {
+		index = 0,
+		packageName,
+		repo,
+		release,
+		isLatest: isLatestRelease = false,
+		isMaintenance: isMaintenanceRelease = false
+	}: Props = $props();
 
-	let releaseVersion = $derived.by(() => {
-		let tag = release.tag_name;
-		if (tag.includes("@")) tag = tag.substring(tag.lastIndexOf("@"));
-		return semver.coerce(tag.replace(/^v/, ""));
-	});
+	let releaseVersion = $derived(release.cleanVersion);
+	let semVersion = $derived(semver.coerce(releaseVersion));
 	let releaseDate = $derived(new Date(release.published_at ?? release.created_at));
 	let releaseBody = $derived.by(() => {
 		if (!release.body) return "_No release body_";
@@ -40,16 +47,16 @@
 			}
 		);
 	});
-	let isMajorRelease = $derived(release.tag_name.includes(".0.0") && !release.prerelease);
+	let isMajorRelease = $derived(
+		!release.prerelease &&
+			semVersion?.minor === 0 &&
+			semVersion?.patch === 0 &&
+			!semVersion?.prerelease.length
+	);
 	let isOlderThanAWeek = $derived(
 		releaseDate.getTime() < new Date().getTime() - 1000 * 60 * 60 * 24 * 7
 	);
 
-	// TODO: figure this out
-	let index = 0;
-	let isLatestRelease = false;
-	let isMaintenanceRelease = false;
-
 	/**
 	 * Converts a date to a relative date string.
 	 * e.g., "2 days ago", "3 hours ago", "1 minute ago"
@@ -152,7 +159,7 @@
 							</Tooltip.Trigger>
 							<Tooltip.Content>
 								{packageName}
-								{releaseVersion?.major} is available!
+								{semVersion?.major} is available!
 							</Tooltip.Content>
 						</Tooltip.Root>
 					</Tooltip.Provider>