feat(website): package page

website/package.json

@@ -17,6 +17,8 @@
 		"@sveltejs/vite-plugin-svelte": "^3.0.0",
 		"@tailwindcss/typography": "^0.5.14",
 		"@types/eslint": "^9.6.0",
+		"@types/gunzip-maybe": "^1.4.2",
+		"@types/tar-stream": "^3.1.3",
 		"autoprefixer": "^10.4.20",
 		"eslint": "^9.0.0",
 		"eslint-config-prettier": "^9.1.0",
@@ -36,6 +38,9 @@
 	"type": "module",
 	"dependencies": {
 		"@fontsource-variable/nunito-sans": "^5.0.14",
-		"date-fns": "^3.6.0"
+		"date-fns": "^3.6.0",
+		"gunzip-maybe": "^1.4.2",
+		"lucide-svelte": "^0.427.0",
+		"tar-stream": "^3.1.7"
 	}
 }

website/src/lib/registry-api.ts

@@ -5,6 +5,10 @@ export type SearchResponse = {
 	data: PackageResponse[]
 }
 
+export type PackageVersionsResponse = PackageResponse[]
+
+export type PackageVersionResponse = PackageResponse
+
 export type PackageResponse = {
 	name: string
 	version: string

website/src/routes/Header.svelte

@@ -1,5 +1,6 @@
 <script>
 	import Logo from "$lib/components/Logo.svelte"
+	import { Search } from "lucide-svelte"
 </script>
 
 <header class="fixed inset-x-0 top-0 z-50 bg-background/80 backdrop-blur">
@@ -10,22 +11,9 @@
 		<div class="hidden w-full max-w-80 md:flex">
 			<form action="/search" class="w-full">
 				<label
-					class="ring-primary-bg/20 relative flex h-9 w-full items-center overflow-hidden rounded border border-input-border bg-input-bg px-2 outline-none ring-0 transition focus-within:border-primary focus-within:ring-4"
+					class="relative flex h-9 w-full items-center overflow-hidden rounded border border-input-border bg-input-bg px-2 outline-none ring-0 ring-primary-bg/20 transition focus-within:border-primary focus-within:ring-4"
 				>
-					<svg
+					<Search class="size-5" aria-label="search" />
-						xmlns="http://www.w3.org/2000/svg"
-						class=" h-5 w-5"
-						viewBox="0 0 24 24"
-						fill="none"
-						stroke="currentColor"
-						stroke-width="2"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						aria-label="search"
-					>
-						<circle cx="11" cy="11" r="8" />
-						<path d="m21 21-4.3-4.3" />
-					</svg>
 					<input
 						name="q"
 						placeholder="search packages..."
@@ -41,7 +29,7 @@
 			</nav>
 
 			<a href="https://github.com/daimond113/pesde" target="_blank" rel="noreferrer noopener">
-				<svg class="h-6 w-6" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+				<svg class="size-6" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
 					<title>GitHub</title>
 					<path
 						d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"

website/src/routes/packages/[scope]/[name]/[[version]]/[[target]]/+layout.server.ts

@@ -0,0 +1,52 @@
+import {
+	fetchRegistry,
+	type PackageVersionsResponse,
+	type PackageVersionResponse,
+} from "$lib/registry-api"
+import type { LayoutServerLoad } from "./$types"
+
+type FetchPackageOptions =
+	| {
+			scope: string
+			name: string
+	  }
+	| {
+			scope: string
+			name: string
+			version: string
+			target: string
+	  }
+
+const fetchPackage = async (fetcher: typeof fetch, options: FetchPackageOptions) => {
+	const { scope, name } = options
+
+	if ("version" in options) {
+		const { version, target } = options
+		return fetchRegistry<PackageVersionResponse>(
+			`packages/${encodeURIComponent(`${scope}/${name}`)}/${version}/${target}`,
+			fetcher,
+		)
+	}
+
+	const versions = await fetchRegistry<PackageVersionsResponse>(
+		`packages/${encodeURIComponent(`${scope}/${name}`)}`,
+		fetcher,
+	)
+
+	const latestVersion = versions.at(-1)
+	if (latestVersion === undefined) throw new Error("package has no versions *blows up*")
+
+	return latestVersion
+}
+
+export const load: LayoutServerLoad = async ({ params }) => {
+	const { scope, name, version, target } = params
+
+	const options = version ? { scope, name, version, target } : { scope, name }
+
+	const pkg = await fetchPackage(fetch, options)
+
+	return {
+		pkg,
+	}
+}

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

@@ -0,0 +1,59 @@
+<script lang="ts">
+	import { formatDistanceToNow } from "date-fns"
+	import { Check, Clipboard } from "lucide-svelte"
+	import Tab from "./Tab.svelte"
+
+	let { children, data } = $props()
+
+	let didCopy = $state(false)
+
+	const [scope, name] = data.pkg.name.split("/")
+
+	const installCommand = `pesde add ${data.pkg.name}`
+</script>
+
+<div class="mx-auto flex max-w-screen-xl px-4 py-16">
+	<div class="flex-grow pr-4">
+		<h1 class="text-3xl font-bold">
+			<span class="text-heading">{scope}/</span><span class="text-light">{name}</span>
+		</h1>
+		<div class="mb-2 font-semibold text-primary">
+			v{data.pkg.version} · published {formatDistanceToNow(new Date(data.pkg.published_at), {
+				addSuffix: true,
+			})}
+		</div>
+		<p class="mb-6 max-w-prose">{data.pkg.description}</p>
+
+		<nav class="flex w-full border-b-2">
+			<Tab tab="">Readme</Tab>
+			<Tab tab="versions">Versions</Tab>
+		</nav>
+
+		{@render children()}
+	</div>
+	<aside class="ml-auto w-full max-w-[22rem] flex-shrink-0 border-l pl-4">
+		<h2 class="mb-1 text-lg font-semibold text-heading">Install</h2>
+		<div class="flex h-11 items-center overflow-hidden rounded border text-sm">
+			<code class="truncate px-4">{installCommand}</code>
+			<button
+				class="ml-auto flex size-11 items-center justify-center border-l bg-card/40 hover:bg-card/60"
+				onclick={() => {
+					navigator.clipboard.writeText(installCommand)
+
+					if (didCopy) return
+
+					didCopy = true
+					setTimeout(() => {
+						didCopy = false
+					}, 1000)
+				}}
+			>
+				{#if didCopy}
+					<Check class="size-5" />
+				{:else}
+					<Clipboard class="size-5" />
+				{/if}
+			</button>
+		</div>
+	</aside>
+</div>

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

@@ -0,0 +1 @@
+README

website/src/routes/packages/[scope]/[name]/[[version]]/[[target]]/Tab.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { page } from "$app/stores"
+	import type { Snippet } from "svelte"
+	import type { PageData } from "./$types"
+
+	type Props = {
+		tab: string
+		children: Snippet
+	}
+
+	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 activeTab = $derived(
+		$page.url.pathname.slice(basePath.length).replace(/^\//, "").replace(/\/$/, ""),
+	)
+
+	const href = $derived(`${basePath}/${tab}`)
+	const active = $derived(activeTab === tab)
+
+	const linkClass = $derived(
+		`font-semibold px-5 h-10 inline-flex -mb-0.5 items-center rounded-t border-b-2 transition ${active ? "text-primary border-b-primary bg-primary-bg/20" : "hover:bg-border/30"}`,
+	)
+</script>
+
+<a {href} class={linkClass}>
+	{@render children()}
+</a>

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

@@ -0,0 +1 @@
+versions btw