feat: Create CardLink as reusable component and improve accessibility for this card

Author: fResult

src/components/CardLink.astro

@@ -0,0 +1,23 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+
+interface Props {
+	title: string
+	url: string
+	description: string
+}
+const { title, url, description } = Astro.props
+---
+
+<div class="project-card group relative">
+	<div class="grid gap-1">
+		<a href={url} class="after:absolute after:inset-0 after:content-['']">
+			<h3 class="text-2xl font-medium transition-all">
+				{title}
+			</h3>
+		</a>
+		<p class="text-base">
+			{description}
+		</p>
+	</div>
+</div>

src/pages/index.astro

@@ -4,17 +4,17 @@ import ring from '../content/ring.json'
 import generatedRing from '../content/ring.generated.json'
 import events from '../content/events.json'
 import sponsors from '../content/sponsors.json'
+import CardLink from '../components/CardLink.astro'
 
 // TODO: refactor dedupe logic to separate file?
 // TODO: limit projects in index page
 const projects = [...ring.projects]
-for (const project of generatedRing.projects) {
+for (const project of generatedRing.projects as typeof ring.projects) {
 	const index = projects.findIndex((x) => x.name === project.name)
 	if (index === -1) {
 		projects.push(project)
 	}
 }
-
 ---
 
 <BaseLayout>
@@ -32,12 +32,7 @@ for (const project of generatedRing.projects) {
 				{
 					projects.map((x) => {
 						return (
-							<a class="project-card group" href={x.repo}>
-								<div class="grid gap-1">
-									<h3 class="text-2xl font-medium transition-all">{x.name}</h3>
-									<p class="text-base">{x.description}</p>
-								</div>
-							</a>
+							<CardLink title={x.name} url={x.repo} description={x.description} />
 						)
 					})
 				}

src/pages/ring.astro

@@ -2,16 +2,16 @@
 import BaseLayout from '../layouts/BaseLayout.astro'
 import ring from '../content/ring.json'
 import generatedRing from '../content/ring.generated.json'
+import CardLink from '../components/CardLink.astro'
 
 // TODO: refactor dedupe logic to separate file?
 const projects = [...ring.projects]
-for (const project of generatedRing.projects) {
+for (const project of generatedRing.projects as typeof ring.projects) {
 	const index = projects.findIndex((x) => x.name === project.name)
 	if (index === -1) {
 		projects.push(project)
 	}
 }
-
 ---
 
 <BaseLayout>
@@ -20,14 +20,7 @@ for (const project of generatedRing.projects) {
 		<div class="main-grid">
 			{
 				projects.map((x) => {
-					return (
-						<a class="project-card group" href={x.repo}>
-							<div class="grid gap-1">
-								<h3 class="text-2xl font-medium transition-all">{x.name}</h3>
-								<p class="text-base">{x.description}</p>
-							</div>
-						</a>
-					)
+					return <CardLink title={x.name} url={x.repo} description={x.description} />
 				})
 			}
 		</div>

src/styles/global.css

@@ -29,6 +29,6 @@ a {
 	@apply rounded-full bg-gradient-to-br from-neutral-800 to-neutral-900 px-6 py-3 text-xl text-neutral-50 shadow-sm transition-all hover:scale-[1.02] hover:text-neutral-50 hover:shadow-md;
 }
 
-.project-card {
+.card-card {
 	@apply flex flex-col gap-4 rounded-sm border border-bosf/30 bg-white p-6 shadow-sm transition-all hover:scale-[1.01] hover:border-bosf/50 hover:bg-gradient-to-br;
 }