From bc5715e58b8019dc5066c690c9ab2473a2a625cc Mon Sep 17 00:00:00 2001
From: LukaDev <47296785+lukadev-0@users.noreply.github.com>
Date: Sun, 18 Aug 2024 17:16:34 +0200
Subject: [PATCH] feat(website): versions page

---
 .../[name]/[[version]]/[[target]]/Tab.svelte  | 15 +++++----
 .../[[target]]/versions/+page.server.ts       | 29 +++++++++++++++++
 .../[[target]]/versions/+page.svelte          | 32 ++++++++++++++++++-
 3 files changed, 68 insertions(+), 8 deletions(-)
 create mode 100644 website/src/routes/packages/[scope]/[name]/[[version]]/[[target]]/versions/+page.server.ts

diff --git a/website/src/routes/packages/[scope]/[name]/[[version]]/[[target]]/Tab.svelte b/website/src/routes/packages/[scope]/[name]/[[version]]/[[target]]/Tab.svelte
index 6b84998..9fda622 100644
--- a/website/src/routes/packages/[scope]/[name]/[[version]]/[[target]]/Tab.svelte
+++ b/website/src/routes/packages/[scope]/[name]/[[version]]/[[target]]/Tab.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
 	import { page } from "$app/stores"
 	import type { Snippet } from "svelte"
-	import type { PageData } from "./$types"
 
 	type Props = {
 		tab: string
@@ -9,13 +8,15 @@
 	}
 
 	const { tab, children }: Props = $props()
-	const pkg = $derived(($page.data as PageData).pkg)
 
-	const shortBasePath = $derived(`/packages/${pkg.name}`)
-	const fullBasePath = $derived(`${shortBasePath}/${pkg.version}/${pkg.targets[0].kind}`)
-
-	const isFullPath = $derived($page.url.pathname.startsWith(fullBasePath))
-	const basePath = $derived(isFullPath ? fullBasePath : shortBasePath)
+	const basePath = $derived.by(() => {
+		const { scope, name } = $page.params
+		if ("target" in $page.params) {
+			const { version, target } = $page.params
+			return `/packages/${scope}/${name}/${version}/${target}`
+		}
+		return `/packages/${scope}/${name}`
+	})
 
 	const activeTab = $derived(
 		$page.url.pathname.slice(basePath.length).replace(/^\//, "").replace(/\/$/, ""),
diff --git a/website/src/routes/packages/[scope]/[name]/[[version]]/[[target]]/versions/+page.server.ts b/website/src/routes/packages/[scope]/[name]/[[version]]/[[target]]/versions/+page.server.ts
new file mode 100644
index 0000000..781ed33
--- /dev/null
+++ b/website/src/routes/packages/[scope]/[name]/[[version]]/[[target]]/versions/+page.server.ts
@@ -0,0 +1,29 @@
+import {
+	fetchRegistryJson,
+	RegistryHttpError,
+	type PackageVersionsResponse,
+} from "$lib/registry-api"
+import { error } from "@sveltejs/kit"
+import type { PageServerLoad } from "./$types"
+
+export const load: PageServerLoad = async ({ params, fetch }) => {
+	const { scope, name } = params
+
+	try {
+		const versions = await fetchRegistryJson<PackageVersionsResponse>(
+			`packages/${encodeURIComponent(`${scope}/${name}`)}`,
+			fetch,
+		)
+
+		versions.reverse()
+
+		return {
+			versions,
+		}
+	} catch (e) {
+		if (e instanceof RegistryHttpError && e.response.status === 404) {
+			error(404, "Package not found")
+		}
+		throw e
+	}
+}
diff --git a/website/src/routes/packages/[scope]/[name]/[[version]]/[[target]]/versions/+page.svelte b/website/src/routes/packages/[scope]/[name]/[[version]]/[[target]]/versions/+page.svelte
index f56097c..9cdf852 100644
--- a/website/src/routes/packages/[scope]/[name]/[[version]]/[[target]]/versions/+page.svelte
+++ b/website/src/routes/packages/[scope]/[name]/[[version]]/[[target]]/versions/+page.svelte
@@ -1 +1,31 @@
-versions btw
+<script lang="ts">
+	import { formatDistanceToNow } from "date-fns"
+
+	const { data } = $props()
+</script>
+
+<div class="space-y-4 py-4">
+	{#each data.versions as pkg}
+		<article
+			class="relative overflow-hidden rounded bg-card px-5 py-4 transition hover:bg-card-hover"
+		>
+			<h2 class="font-semibold text-heading">
+				<a
+					href={`/packages/${pkg.name}/${pkg.version}/any`}
+					class="after:absolute after:inset-0 after:content-['']"
+				>
+					{pkg.version}
+				</a>
+			</h2>
+			<div class="text-sm font-semibold">
+				<time>{formatDistanceToNow(new Date(pkg.published_at), { addSuffix: true })}</time>
+				·
+				{pkg.targets
+					.map((target) => {
+						return target.kind[0].toUpperCase() + target.kind.slice(1)
+					})
+					.join(", ")}
+			</div>
+		</article>
+	{/each}
+</div>