From ecd68411219988966cc501366d62d17bb776f74f Mon Sep 17 00:00:00 2001
From: LukaDev <47296785+lukadev-0@users.noreply.github.com>
Date: Sat, 24 Aug 2024 17:02:13 +0200
Subject: [PATCH] feat(website): display authors on package page

---
 .../[[version]]/[[target]]/+layout.svelte     | 29 ++++++++++++++++++-
 1 file changed, 28 insertions(+), 1 deletion(-)

diff --git a/website/src/routes/packages/[scope]/[name]/[[version]]/[[target]]/+layout.svelte b/website/src/routes/packages/[scope]/[name]/[[version]]/[[target]]/+layout.svelte
index e6b8a22..57c2559 100644
--- a/website/src/routes/packages/[scope]/[name]/[[version]]/[[target]]/+layout.svelte
+++ b/website/src/routes/packages/[scope]/[name]/[[version]]/[[target]]/+layout.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { BinaryIcon, Icon, LibraryIcon } from "lucide-svelte"
+	import { BinaryIcon, Globe, Icon, LibraryIcon, Mail } from "lucide-svelte"
 	import { page } from "$app/stores"
 	import type { TargetInfo } from "$lib/registry-api"
 	import type { ComponentType } from "svelte"
@@ -103,5 +103,32 @@
 			</p>
 			<Command command={xCommand} class="mb-6" />
 		{/if}
+
+		{#if data.pkg.authors && data.pkg.authors.length > 0}
+			<h2 class="mb-2 text-lg font-semibold text-heading">Authors</h2>
+			<ul>
+				{#each data.pkg.authors as author}
+					{@const [, name] = author.match(/^(.*?)(<|\()/) ?? []}
+					{@const [, email] = author.match(/<(.*)>/) ?? []}
+					{@const [, website] = author.match(/\((.*)\)/) ?? []}
+
+					<li class="mb-2 flex items-center">
+						{name}
+						<div class="ml-auto flex items-center space-x-2">
+							{#if email}
+								<a href={`mailto:${email}`} class="ml-1 text-primary" title={`Email: ${email}`}>
+									<Mail class="size-5 text-primary" aria-hidden="true" />
+								</a>
+							{/if}
+							{#if website}
+								<a href={website} class="ml-1 text-primary" title={`Website: ${website}`}>
+									<Globe class="size-5 text-primary" aria-hidden="true" />
+								</a>
+							{/if}
+						</div>
+					</li>
+				{/each}
+			</ul>
+		{/if}
 	</aside>
 </div>