wip

Author: KianNH

src/components/LinkCard2.astro

@@ -0,0 +1,28 @@
+---
+import { z } from "astro:schema";
+import ReactLinkCard2 from "./LinkCard2.tsx";
+
+const props = z.object({
+	title: z.string(),
+	description: z.string(),
+	href: z.string(),
+	icon: z.string(),
+});
+
+const { title, description, href, icon } = props.parse(Astro.props);
+
+const images = import.meta.glob<string>("/src/icons/*.svg", {
+	query: "?raw",
+	import: "default",
+});
+
+const image = images[`/src/icons/${icon}.svg`];
+
+if (!image) {
+	throw new Error(`[LinkCard2]: Icon ${icon} not found in /src/icons/`);
+}
+
+const svg = await image();
+---
+
+<ReactLinkCard2 title={title} description={description} href={href} svg={svg} />

src/components/LinkCard2.tsx

@@ -0,0 +1,34 @@
+import Markdown from "react-markdown";
+
+type Props = {
+	title: string;
+	description: string;
+	href: string;
+	svg: string;
+};
+
+export default function LinkCard2({ title, description, href, svg }: Props) {
+	return (
+		<a
+			href={href}
+			className="not-content flex flex-col gap-4 rounded border border-cl1-gray-8 bg-cl1-white p-6 no-underline dark:border-cl1-gray-2 dark:bg-cl1-gray-0"
+		>
+			<div>
+				{svg && (
+					<div
+						className="flex h-10 w-10 items-center justify-center rounded bg-cl1-orange-9 fill-cl1-brand-orange dark:bg-cl1-orange-0"
+						dangerouslySetInnerHTML={{ __html: svg }}
+					/>
+				)}
+			</div>
+			<div className="flex flex-col gap-2 text-black">
+				<p className="font-semibold">{title}</p>
+				<div className="text-sm">
+					<Markdown disallowedElements={["a"]} unwrapDisallowed={true}>
+						{description}
+					</Markdown>
+				</div>
+			</div>
+		</a>
+	);
+}

src/components/homepage/TopCards.astro

@@ -1,38 +1,43 @@
 ---
+import LinkCard2 from "../LinkCard2.astro";
+
 const topCards = [
 	{
 		label: "Fundamentals",
 		href: "/fundamentals/",
 		description: "How Cloudflare works and how to get started.",
+		icon: "growth-outline",
 	},
 	{
 		label: "Docs directory",
 		href: "/products/",
 		description: "How to use specific Cloudflare products.",
+		icon: "documentation-outline",
 	},
 	{
 		label: "Learning paths",
 		href: "/learning-paths/",
 		description: "Step-by-step walkthroughs on a variety of concepts.",
+		icon: "cloudflare-ruleset-engine-outline",
 	},
 	{
 		label: "Reference architectures",
 		href: "/reference-architecture/",
 		description: "How our products are designed and architected.",
+		icon: "code-branch-outline",
 	},
 ];
 ---
 
 <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
 	{
 		topCards.map((card) => (
-			<a
+			<LinkCard2
+				title={card.label}
+				description={card.description}
 				href={card.href}
-				class="rounded-md border border-solid border-gray-200 p-6 !text-inherit no-underline hover:bg-gray-50 dark:border-gray-700 dark:hover:bg-gray-800"
-			>
-				<p class="!mt-0 font-semibold">{card.label}</p>
-				<div class="leading-2 !mt-1 text-sm">{card.description}</div>
-			</a>
+				icon={card.icon}
+			/>
 		))
 	}
 </div>