feat(website): support wally dependencies

website/src/lib/registry-api.ts

@@ -36,6 +36,10 @@ export type DependencyInfo = {
 	name: string
 	target?: string
 	version: string
+} | {
+	index: string,
+	wally: string,
+	version: string,
 }
 
 export type DependencyKind = "standard" | "peer" | "dev"

website/src/routes/packages/[scope]/[name]/[[version]]/[[target]]/dependencies/+page.svelte

@@ -16,7 +16,7 @@
 	<p class="py-24 text-center">This package doesn't have any dependencies.</p>
 {:else}
 	<div class="space-y-8 py-8">
-		{#each Object.entries(groupedDeps).sort( (a, b) => a[0].localeCompare(b[0]), ) as [dependencyKind, group]}
+		{#each Object.entries(groupedDeps).sort( (a, b) => b[0].localeCompare(a[0]), ) as [dependencyKind, group]}
 			<section>
 				<h2 class="text-heading mb-4 text-xl font-medium">
 					{DEPENDENCY_KIND_DISPLAY_NAMES[dependencyKind as DependencyKind]}
@@ -24,25 +24,46 @@
 
 				<div class="space-y-4">
 					{#each group as { dependency: [dependencyInfo] }}
-						{@const [scope, name] = dependencyInfo.name.split("/")}
+						{@const isWally = "wally" in dependencyInfo}
-						{@const target =
+						{@const [scope, name] = (isWally ? dependencyInfo.wally : dependencyInfo.name).split(
-							dependencyInfo.target ?? $page.params.target ?? data.pkg.targets[0].kind}
+							"/",
+						)}
+						{@const target = isWally
+							? undefined
+							: (dependencyInfo.target ?? $page.params.target ?? data.pkg.targets[0].kind)}
+						{@const isOfficialRegistry = isWally
+							? dependencyInfo.index === "https://github.com/UpliftGames/wally-index"
+							: dependencyInfo.index === "https://github.com/daimond113/pesde-index"}
 
 						<article
-							class="bg-card hover:bg-card-hover relative overflow-hidden rounded px-5 py-4 transition"
+							class={`bg-card relative overflow-hidden rounded px-5 py-4 transition ${
+								isOfficialRegistry ? "hover:bg-card-hover" : ""
+							}`}
 						>
 							<h3 class="font-semibold">
-								<a
+								<svelte:element
-									href={`/packages/${dependencyInfo.name}/latest/${target}`}
+									this={isOfficialRegistry ? "a" : "svelte:fragment"}
+									{...isOfficialRegistry
+										? {
+												href: isWally
+													? `https://wally.run/package/${dependencyInfo.wally}`
+													: `/packages/${dependencyInfo.name}/latest/${target}`,
+											}
+										: {}}
 									class="after:absolute after:inset-0 after:content-['']"
 								>
 									<span class="text-heading">{scope}/</span><span class="text-light">{name}</span>
-								</a>
+									{#if isWally}
+										<span class="text-red-400">(wally)</span>
+									{/if}
+								</svelte:element>
 							</h3>
 							<div class="text-primary text-sm font-semibold">
 								{dependencyInfo.version}
+								{#if !isWally}
 									·
 									{target}
+								{/if}
 							</div>
 						</article>
 					{/each}