feat(packages-list): add sidebar badges to the packages list

Adding a bunch of copy-pasted code but yeaaah it's fine

Author: WarningImHack3r

src/routes/all-package-releases.ts

@@ -0,0 +1,30 @@
+import type { PostHog } from "posthog-node";
+import { discoverer } from "$lib/server/package-discoverer";
+import { getPackageReleases } from "./package/releases";
+
+/**
+ * Get all the repositories and releases for all the
+ * known packages.
+ *
+ * @param allPackages all the known packages
+ * @param posthog the optional PostHog instance
+ * @returns a map of package names to their awaitable result
+ */
+export function getAllPackagesReleases(
+	allPackages: Awaited<ReturnType<typeof discoverer.getOrDiscoverCategorized>>,
+	posthog?: PostHog
+) {
+	const packages = allPackages.flatMap(({ packages }) => packages);
+
+	return packages.reduce<Record<string, ReturnType<typeof getPackageReleases>>>(
+		(acc, { pkg: { name } }) => {
+			if (acc[name])
+				console.warn(
+					`Duplicate package "${name}" while aggregating packages releases; this should not happen!`
+				);
+			acc[name] = getPackageReleases(name, allPackages, posthog);
+			return acc;
+		},
+		{}
+	);
+}

src/routes/package/+layout.server.ts

@@ -1,33 +1,5 @@
-import type { PostHog } from "posthog-node";
 import { discoverer } from "$lib/server/package-discoverer";
-import { getPackageReleases } from "./releases";
-
-/**
- * Get all the repositories and releases for all the
- * known packages.
- *
- * @param allPackages all the known packages
- * @param posthog the optional PostHog instance
- * @returns a map of package names to their awaitable result
- */
-function getAllPackagesReleases(
-	allPackages: Awaited<ReturnType<typeof discoverer.getOrDiscoverCategorized>>,
-	posthog?: PostHog
-) {
-	const packages = allPackages.flatMap(({ packages }) => packages);
-
-	return packages.reduce<Record<string, ReturnType<typeof getPackageReleases>>>(
-		(acc, { pkg: { name } }) => {
-			if (acc[name])
-				console.warn(
-					`Duplicate package "${name}" while aggregating packages releases; this should not happen!`
-				);
-			acc[name] = getPackageReleases(name, allPackages, posthog);
-			return acc;
-		},
-		{}
-	);
-}
+import { getAllPackagesReleases } from "../all-package-releases";
 
 /**
  * The goal of this load function is to serve any `[...package]`

src/routes/packages/+page.server.ts

@@ -0,0 +1,13 @@
+import { discoverer } from "$lib/server/package-discoverer";
+import { getAllPackagesReleases } from "../all-package-releases";
+
+export async function load({ locals }) {
+	// 1. Get all the packages
+	const categorizedPackages = await discoverer.getOrDiscoverCategorized();
+
+	// 2. Use them to get a map of packages to promises of releases
+	const allReleases = getAllPackagesReleases(categorizedPackages, locals.posthog);
+
+	// 3. Send all that down to the page's load function
+	return { allReleases };
+}

src/routes/packages/+page.svelte

@@ -1,23 +1,73 @@
 <script lang="ts">
+	import { browser } from "$app/environment";
 	import { ChevronRight } from "@lucide/svelte";
+	import type { GitHubRelease } from "$lib/server/github-cache";
+	import { Badge } from "$lib/components/ui/badge";
 	import { Separator } from "$lib/components/ui/separator";
 
 	let { data } = $props();
+
+	/**
+	 * Extract the data from the {@link import('./$types').data.otherReleases|otherReleases}
+	 * props.
+	 *
+	 * @param pkgName the package name to extract releases fo
+	 * @returns the {@link Promise} of releases, or `undefined`
+	 */
+	function getBadgeDataFromOther(pkgName: string) {
+		const releases = Object.entries(data.allReleases).find(
+			([k]) => k.localeCompare(pkgName, undefined, { sensitivity: "base" }) === 0
+		);
+		if (!releases) return undefined;
+		const [, v] = releases;
+		return v;
+	}
+
+	/**
+	 * Filter the releases to exclude those that have already been seen
+	 *
+	 * @param pkgName the package name for the releases
+	 * @param releases the releases to filter
+	 * @returns the filtered releases
+	 */
+	function getUnvisitedReleases(pkgName: string, releases: GitHubRelease[] | undefined) {
+		if (!releases || !browser) return [];
+
+		const lastVisitedItem = localStorage.getItem(`last-visited-${pkgName}`);
+		if (!lastVisitedItem) {
+			return releases.filter(
+				({ created_at, published_at }) =>
+					new Date(published_at ?? created_at).getTime() > Date.now() - 1000 * 60 * 60 * 24 * 7
+			);
+		}
+		const lastVisitedDate = new Date(lastVisitedItem);
+
+		return releases.filter(
+			({ created_at, published_at }) => new Date(published_at ?? created_at) > lastVisitedDate
+		);
+	}
 </script>
 
+{#snippet newBadge(count: number)}
+	{#if count > 0}
+		<Badge>{count} new</Badge>
+	{/if}
+{/snippet}
+
 <ul class="space-y-8">
 	{#each data.displayablePackages as { category, packages } (category)}
 		<li>
 			<h3 class="font-display text-3xl text-primary text-shadow-sm">{category.name}</h3>
 			<ul class="mt-2">
 				{#each packages as { repoOwner, repoName, pkg }, index (pkg.name)}
+					{@const linkedBadgeData = getBadgeDataFromOther(pkg.name)}
 					{#if index > 0}
 						<Separator class="mx-auto my-1 w-[95%]" />
 					{/if}
 					<li>
 						<a
 							href="/package/{pkg.name}"
-							class="group flex items-center rounded-xl px-4 py-3 transition-colors hover:bg-neutral-100 dark:hover:bg-neutral-800"
+							class="group flex items-center gap-4 rounded-xl px-4 py-3 transition-colors hover:bg-neutral-100 dark:hover:bg-neutral-800"
 						>
 							<div class="flex flex-col">
 								<h4 class="font-medium">{pkg.name}</h4>
@@ -31,7 +81,14 @@
 									</span>
 								</span>
 							</div>
-							<ChevronRight class="mr-1 ml-auto transition-transform group-hover:translate-x-1" />
+							<span class="ml-auto mr-1 shrink-0 flex items-center gap-1">
+								{#if linkedBadgeData}
+									{#await linkedBadgeData then d}
+										{@render newBadge(getUnvisitedReleases(pkg.name, d?.releases).length)}
+									{/await}
+								{/if}
+								<ChevronRight class="transition-transform group-hover:translate-x-1" />
+							</span>
 						</a>
 					</li>
 				{/each}

src/routes/packages/+page.ts

@@ -1,7 +1,8 @@
 import type { MetaTagsProps } from "svelte-meta-tags";
 
-export function load() {
+export function load({ data }) {
 	return {
+		...data,
 		pageMetaTags: Object.freeze({
 			title: "All Packages"
 		}) satisfies MetaTagsProps