From 5ea86e632e064e33eec89779c9ecfb6c5b1aba7e Mon Sep 17 00:00:00 2001
From: daimond113 <contact@daimond113.com>
Date: Fri, 14 Feb 2025 23:28:15 +0100
Subject: [PATCH] feat(website): add archive download button

---
 website/src/lib/registry-api.ts                     |  4 +++-
 .../[name]/[[version]]/[[target]]/+layout.svelte    | 13 +++++++++++--
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/website/src/lib/registry-api.ts b/website/src/lib/registry-api.ts
index abb92a6..6ce029d 100644
--- a/website/src/lib/registry-api.ts
+++ b/website/src/lib/registry-api.ts
@@ -121,8 +121,10 @@ export async function fetchRegistryJson<T>(
 	return response.json()
 }
 
+export const makeRegistryUrl = (path: string) => new URL(path, PUBLIC_REGISTRY_URL)
+
 export async function fetchRegistry(path: string, fetcher: typeof fetch, options?: RequestInit) {
-	const response = await fetcher(new URL(path, PUBLIC_REGISTRY_URL), options)
+	const response = await fetcher(makeRegistryUrl(path), options)
 	if (!response.ok) {
 		throw new RegistryHttpError(`Failed to fetch ${response.url}: ${response.statusText}`, response)
 	}
diff --git a/website/src/routes/(app)/packages/[scope]/[name]/[[version]]/[[target]]/+layout.svelte b/website/src/routes/(app)/packages/[scope]/[name]/[[version]]/[[target]]/+layout.svelte
index 4ebfaea..767be49 100644
--- a/website/src/routes/(app)/packages/[scope]/[name]/[[version]]/[[target]]/+layout.svelte
+++ b/website/src/routes/(app)/packages/[scope]/[name]/[[version]]/[[target]]/+layout.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { page } from "$app/stores"
 	import GitHub from "$lib/components/GitHub.svelte"
-	import type { TargetInfo } from "$lib/registry-api"
+	import { makeRegistryUrl, type TargetInfo } from "$lib/registry-api"
 	import { BinaryIcon, Globe, Icon, LibraryIcon, Mail, ScrollIcon } from "lucide-svelte"
 	import type { ComponentType } from "svelte"
 	import TargetSelector from "../../TargetSelector.svelte"
@@ -48,6 +48,12 @@
 	const exportEntries = $derived(
 		Object.entries(exportNames).filter(([key]) => !!currentTarget?.[key as keyof TargetInfo]),
 	)
+
+	const downloadUrl = $derived(
+		makeRegistryUrl(
+			`packages/${encodeURIComponent(data.pkg.name)}/${encodeURIComponent(data.pkg.version)}/${encodeURIComponent(currentTarget?.kind ?? defaultTarget)}/archive`,
+		).toString(),
+	)
 </script>
 
 <div class="flex flex-col lg:flex-row">
@@ -58,7 +64,10 @@
 		class="w-full flex-shrink-0 border-t pt-16 lg:ml-auto lg:max-w-[22rem] lg:border-l lg:border-t-0 lg:pl-4 lg:pt-6"
 	>
 		<h2 class="text-heading mb-1 text-lg font-semibold">Install</h2>
-		<Command command={installCommand} class="mb-4" />
+		<Command command={installCommand} class="mb-2" />
+		<p class="mb-4 text-sm">
+			Or, download the archive <a class="text-primary underline" href={downloadUrl}> here </a>.
+		</p>
 
 		<div class="hidden lg:block">
 			<TargetSelector />