make the entire card a link

Author: Rich-Harris

apps/svelte.dev/src/routes/packages/PackageCard.svelte

@@ -20,58 +20,65 @@
 </script>
 
 <article data-pubdate={pkg.updated}>
-	<header>
-		{#snippet title()}
+	{#snippet contents()}
+		<header>
 			<h3>
 				{#if pkg.official}
 					<span data-icon="svelte"></span>
 				{/if}
 
 				<span>{pkg.name}</span>
 			</h3>
-		{/snippet}
-
-		{#if pkg.homepage}
-			<a
-				href={pkg.homepage}
-				target="_blank"
-				rel="noreferrer"
-				aria-label="View project homepage"
-				onclick={(e) => e.stopPropagation()}
-			>
-				{@render title()}
-			</a>
-		{:else}
-			{@render title()}
-		{/if}
-		<span class="updated">
-			{pkg.version}
-
-			<strong title={formatter.format(new Date(pkg.updated))}>
-				{ago(new Date(pkg.updated), true)}
-			</strong>
-		</span>
-	</header>
 
-	<p class="description">{pkg.description}</p>
+			<span class="updated">
+				{pkg.version}
 
-	<p class="stats">
-		{#if pkg.downloads}
-			<span title="{pkg.downloads} downloads">
-				<span data-icon="download"></span>
-				{format_number(+pkg.downloads)}
+				<strong title={formatter.format(new Date(pkg.updated))}>
+					{ago(new Date(pkg.updated), true)}
+				</strong>
 			</span>
-		{/if}
+		</header>
 
-		{#if pkg.github_stars}
-			<span title="{pkg.github_stars} Github Stars">
-				<span data-icon="star"></span>
-				{format_number(pkg.github_stars)}
-			</span>
-		{/if}
+		<p class="description">{pkg.description}</p>
 
-		<span style="flex: 1 1 auto"></span>
+		<p class="stats">
+			{#if pkg.downloads}
+				<span title="{pkg.downloads} downloads">
+					<span data-icon="download"></span>
+					{format_number(+pkg.downloads)}
+				</span>
+			{/if}
+
+			{#if pkg.github_stars}
+				<span title="{pkg.github_stars} Github Stars">
+					<span data-icon="star"></span>
+					{format_number(pkg.github_stars)}
+				</span>
+			{/if}
 
+			<span style="flex: 1 1 auto"></span>
+		</p>
+	{/snippet}
+
+	{#if pkg.homepage}
+		<a
+			class="contents"
+			href={pkg.homepage}
+			target={pkg.homepage.startsWith('/') ? null : '_blank'}
+			rel="noreferrer"
+			aria-label="View project homepage"
+			onclick={(e) => e.stopPropagation()}
+		>
+			{@render contents()}
+		</a>
+	{:else}
+		<div class="contents">
+			{@render contents()}
+		</div>
+	{/if}
+
+	<!-- this is a sibling element so that we don't have links inside links -->
+	<div class="links">
 		<span style="display: flex; gap: 0.75rem">
 			{#if !pkg.svAlias}
 				<a
@@ -94,19 +101,8 @@
 					onclick={(e) => e.stopPropagation()}
 				></a>
 			{/if}
-
-			{#if pkg.homepage}
-				<a
-					href={pkg.homepage}
-					target="_blank"
-					rel="noreferrer"
-					data-icon="external-link"
-					aria-label="View project homepage"
-					onclick={(e) => e.stopPropagation()}
-				></a>
-			{/if}
 		</span>
-	</p>
+	</div>
 </article>
 
 <style>
@@ -136,17 +132,10 @@
 
 	article {
 		display: grid;
-		grid-template-rows: auto 1fr auto;
-		box-sizing: border-box;
-
-		height: 100%;
-		min-height: 0;
-
 		background-color: var(--sk-bg-1);
 
 		border-radius: var(--sk-border-radius);
 		filter: drop-shadow(0.2rem 0.4rem 0.6rem rgb(0 0 0 / 0.07));
-		padding: 1rem;
 
 		min-height: 16em;
 
@@ -158,6 +147,22 @@
 			filter: drop-shadow(0.3rem 0.5rem 0.7rem rgb(0 0 0 / 0.1));
 		}
 
+		.contents {
+			display: grid;
+			grid-template-rows: auto 1fr auto;
+			box-sizing: border-box;
+			padding: 1rem;
+
+			height: 100%;
+			min-height: 0;
+		}
+
+		.links {
+			position: absolute;
+			right: 1rem;
+			bottom: 1rem;
+		}
+
 		a {
 			display: block;
 			text-decoration: none;