Implement suggestions from review

withastro · Jan 11, 2025 · e2ba466 · e2ba466
1 parent 47ed320
commit e2ba466
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 31 deletions.
diff --git a/src/components/Profile.astro b/src/components/Profile.astro
@@ -15,40 +15,34 @@ const { author } = Astro.props;
 		src={author.avatar ?? ''}
 		height={48}
 		width={48}
-		class="rounded-full size-12 lg:w-full h-fit border"
+		class="size-12 lg:w-full h-fit"
 		alt="Your avatar"
 	/>
 	<h1 class="border-astro-gray-500 lg:hidden heading-3">{author.name}</h1>
 	<div class="flex flex-col gap-4 pt-2 lg:pt-8 w-full">
 		<div class="flex items-center justify-between">
 			<small class="code text-astro-gray-200">Joined</small>
-			<small class="text-astro-gray-200">
 			{
 				new Date(author.createdAt).toLocaleDateString('en-US', {
 					year: 'numeric',
 					month: 'long',
 					day: 'numeric',
 				})
 			}
-			</small>
 		</div>
 		<hr class="border-astro-gray-500" />
 		<div class="flex items-center justify-between">
 			<small class="code text-astro-gray-200">GitHub</small>
-			<small class="text-astro-gray-200">
-				<a class="link" href={`https://github.com/${author.username}`}>@{author.username}</a>
-			</small>
+			<a class="link" href={`https://github.com/${author.username}`}>@{author.username}</a>
 		</div>
 		{
 			author.url && (
 				<hr class="border-astro-gray-500" />
 				<div class="flex items-center justify-between">
 					<small class="code text-astro-gray-200">Website</small>
-					<small class="text-astro-gray-200">
 						<a class="link" href={author.url}>
-							{author.url}
+							{new URL(author.url).hostname}
 						</a>
-					</small>
 				</div>
 			)
 		}

diff --git a/src/pages/themes/_components/Avatar.astro b/src/pages/themes/_components/Avatar.astro
@@ -8,7 +8,7 @@ export type Props = {
 const { theme } = Astro.props;
 ---
 
-<a class="flex items-center gap-2" href={`/themes/author/${theme.Author.username}`}>
+<div class="flex items-center gap-2">
 	<img
 		class="h-6 w-6 rounded-full"
 		src={theme.Author.avatar}
@@ -21,4 +21,4 @@ const { theme } = Astro.props;
 	<span class="overflow-hidden text-ellipsis">
 		{theme.Author.name}
 	</span>
-</a>
+</div>
diff --git a/src/pages/themes/_components/ThemeCard.astro b/src/pages/themes/_components/ThemeCard.astro
@@ -18,7 +18,7 @@ const image = theme.Theme.image;
 
 <Card isLink>
 	<!-- {!!theme.data.badge && <CardBadge>{theme.data.badge}</CardBadge>} -->
-	<a href={`/themes/details/${theme.Theme.slug}/`} data-astro-prefetch>
+	<a class="flex h-full flex-col" href={`/themes/details/${theme.Theme.slug}/`} data-astro-prefetch>
 		<Image
 			src={image}
 			width={600}
@@ -28,27 +28,24 @@ const image = theme.Theme.image;
 			loading="lazy"
 			decoding="async"
 		/>
-	</a>
-	<CardBody>
-		<div>
-			<!-- <h3 class:list={["heading-5 mb-2 text-white", { official: theme.data.official }]}> -->
-			<a href={`/themes/details/${theme.Theme.slug}/`} data-astro-prefetch>
+		<CardBody>
+			<div>
 				<h3 class:list={['heading-5 mb-2 text-white']}>
 					{theme.Theme.title}
 				</h3>
 				<p class="line-clamp-3">{theme.Theme.description}</p>
-			</a>
-		</div>
-		<CardFooter
-			class="grid grid-cols-[1fr,auto] items-center justify-between gap-2 overflow-hidden border-t border-astro-gray-400 pt-6"
-		>
-			<Avatar theme={theme} />
+			</div>
+			<CardFooter
+				class="grid grid-cols-[1fr,auto] items-center justify-between gap-2 overflow-hidden border-t border-astro-gray-400 pt-6"
+			>
+				<Avatar theme={theme} />
 
-			<Badge theme={theme.Theme.paid ? 'primary' : 'secondary'} class="z-10">
-				{theme.Theme.paid ? 'Paid' : 'Free'}
-			</Badge>
-		</CardFooter>
-	</CardBody>
+				<Badge theme={theme.Theme.paid ? 'primary' : 'secondary'} class="z-10">
+					{theme.Theme.paid ? 'Paid' : 'Free'}
+				</Badge>
+			</CardFooter>
+		</CardBody>
+	</a>
 </Card>
 
 <style>

diff --git a/src/pages/themes/_components/ThemeStats.astro b/src/pages/themes/_components/ThemeStats.astro
@@ -38,7 +38,7 @@ if (theme.Theme.repoUrl && typeof theme.Theme.stars !== 'undefined') {
 	<hr class="border-astro-gray-500" />
 	<div class="flex items-center justify-between">
 		<small class="code text-astro-gray-200">Created by</small>
-		<a href={theme.Author.url} target="_blank" class="link">
+		<a href={`/themes/author/${theme.Author.id}`} class="link">
 			<Avatar theme={theme} />
 		</a>
 	</div>

diff --git a/.../themes/author/[username]/[...page].astro → src/pages/themes/author/[id]/[...page].astro b/.../themes/author/[username]/[...page].astro → src/pages/themes/author/[id]/[...page].astro
@@ -25,15 +25,15 @@ if (!currentPage || Number.isNaN(currentPage)) {
 }
 
 const allThemes: ThemeAndAuthor[] = await fetch(
-	`${THEMES_API_URL}/api/themes/author?username=${Astro.params.username}`,
+	`${THEMES_API_URL}/api/themes/author?id=${Astro.params.id}`,
 ).then((res) => res.json());
 
 // take all matching themes and create a paginated list of results
 const paginatedResults = paginate({
 	data: allThemes,
 	pageSize: 12,
 	currentPage,
-	route: `/themes/author/${Astro.params.username}/[...page]`,
+	route: `/themes/author/${Astro.params.id}/[...page]`,
 });
 
 const { page, allPages } = paginatedResults;