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

Author: fResult

src/components/CardLink.astro

@@ -0,0 +1,26 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+
+interface Props {
+	title: string
+	url: string
+	description: string
+	languages?: string[]
+}
+const { title, url, description, languages = [] } = Astro.props
+---
+
+<div class="project-card group relative">
+	<div class="grid gap-2">
+		<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>
+		<!-- TODO: Languages display as tags -->
+		{languages.length > 0 && <p>{languages.join(', ')}</p>}
+	</div>
+</div>

src/pages/index.astro

@@ -4,18 +4,19 @@ 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)
 	}
 }
 
-const shuffle = (array: string[]) => {
+function shuffle<T>(array: T[]): T[] {
   for (let i = array.length - 1; i > 0; i--) {
     const j = Math.floor(Math.random() * (i + 1));
     [array[i], array[j]] = [array[j], array[i]];
@@ -40,12 +41,7 @@ const shuffle = (array: string[]) => {
 				{
 					shuffle(projects).slice(0, 6).map((x) => {
 						return (
-							<a class="project-card group" href={x.repo}>
-								<div class="grid gap-2">
-									<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,15 +20,9 @@ for (const project of generatedRing.projects) {
 		<!-- TODO: languages should display as tags -->
 		<div class="main-grid">
 			{
-				projects.map((project) => {
+				projects.map(({ name, repo, description, languages }) => {
 					return (
-						<a class="project-card group" href={project.repo}>
-							<div class="grid gap-1">
-								<h3 class="text-2xl font-medium transition-all">{project.name}</h3>
-								<p class="text-base">{project.description}</p>
-                {project.languages && <p>{project.languages?.join(', ')}</p>}
-							</div>
-						</a>
+						<CardLink title={name} url={repo} description={description} languages={languages} />
 					)
 				})
 			}

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;
 }