feat(frontend): prepare all data loading, add basic pages

Author: WarningImHack3r

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

@@ -0,0 +1,21 @@
+import { error } from "@sveltejs/kit";
+import { discoverer } from "$lib/server/package-discoverer";
+import { svelteGitHubCache } from "$lib/server/github-cache";
+
+export async function load({ params }) {
+	const { package: pkg } = params;
+
+	// Discover packages, if this one doesn't exist, return 404
+	const discovered = await discoverer.getOrDiscover();
+	for (const { repoName, packages } of discovered) {
+		for (const pkgName of packages) {
+			if (pkgName.toLowerCase() === pkg.toLowerCase()) {
+				return {
+					releases: svelteGitHubCache.getReleases(repoName)
+				};
+			}
+		}
+	}
+
+	error(404);
+}

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

@@ -0,0 +1,7 @@
+<script lang="ts">
+	let { data } = $props();
+</script>
+
+{#await data.releases then release}
+	{JSON.stringify(release, null, 2)}
+{/await}

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

@@ -0,0 +1,38 @@
+import { repositories } from "$lib/repositories";
+import { discoverer } from "$lib/server/package-discoverer";
+
+export async function load() {
+	// Get all the packages and map them to their associated repo
+	const packagesMapping = (await discoverer.getOrDiscover())
+		.map(({ repoName, packages }) => {
+			const matchingRepoInfo = repositories.find(([, { repos }]) =>
+				repos.some(({ repoName: name }) => name === repoName)
+			);
+			if (!matchingRepoInfo) return null;
+			const [, { name: category }] = matchingRepoInfo;
+			return {
+				category,
+				packages: packages
+					.map(pkg => ({ name: pkg, repoName }))
+					.toSorted((a, b) => a.name.localeCompare(b.name))
+			};
+		})
+		.filter(Boolean);
+
+	// Unify the result with identical repos by merging their packages
+	const flattened = packagesMapping.reduce<Record<string, (typeof packagesMapping)[number]>>(
+		(acc, { category, packages }) => {
+			if (!acc[category]) {
+				acc[category] = { category, packages: [] };
+			}
+			acc[category].packages.push(...packages);
+			return acc;
+		},
+		{}
+	);
+
+	return {
+		// Return the processed unify array
+		packages: Object.values(flattened)
+	};
+}

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

@@ -1,2 +1,39 @@
 <script lang="ts">
+	import { Separator } from "$lib/components/ui/separator";
+	import { ChevronRight } from "@lucide/svelte";
+
+	let { data } = $props();
 </script>
+
+<div class="container py-8">
+	<ul class="space-y-8">
+		{#each data.packages as { category, packages } (category)}
+			<li>
+				<h3 class="text-2xl font-bold text-primary">{category}</h3>
+				<ul class="mt-2">
+					{#each packages as { name, repoName }, index (name)}
+						{#if index > 0}
+							<Separator class="mx-auto my-1 w-[95%]" />
+						{/if}
+						<li>
+							<a
+								href="/package/{name}"
+								class="group flex items-center rounded-lg px-4 py-3 transition-colors hover:bg-neutral-800"
+							>
+								<div class="flex flex-col">
+									<h4 class="font-medium">{name}</h4>
+									{#if category === "Other"}
+										<span class="text-muted-foreground">
+											sveltejs/{repoName}
+										</span>
+									{/if}
+								</div>
+								<ChevronRight class="mr-1 ml-auto transition-transform group-hover:translate-x-1" />
+							</a>
+						</li>
+					{/each}
+				</ul>
+			</li>
+		{/each}
+	</ul>
+</div>