Render dccs somewhat

u8sand · u8sand · commit 48617ef48fe0 · 2025-01-23T18:46:20.000-05:00
diff --git a/src/layouts/DCC.astro b/src/layouts/DCC.astro
@@ -2,11 +2,32 @@
 const { frontmatter } = Astro.props
 ---
 
-<html>
-  <head>
-    <title>{frontmatter.label}</title>
-  </head>
-  <body>
-    <slot />
-  </body>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width" />
+		<meta name="generator" content={Astro.generator} />
+		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+		<style>
+			html,
+			body {
+				font-family: system-ui;
+				margin: 0;
+			}
+			body {
+				padding: 2rem;
+			}
+		</style>
+	</head>
+	<body>
+		<main class="flex flex-col gap-2">
+      <div class="flex w-48 h-48 justify-center items-center"><img src={frontmatter.icon} class="max-w-96 max-h-96" /></div>
+			<h1 class="text-4xl font-bold">{frontmatter.label}</h1>
+      <slot />
+			<div class="flex flex-row gap-4">
+				<a class="font-bold" href={frontmatter.homepage} target="_blank">{frontmatter.short_label} DCC Portal</a>
+				<a class="font-bold" href={frontmatter.cf_site} target="_blank">{frontmatter.short_label} Program on the NIH Common Fund Website</a>
+			</div>
+		</main>
+	</body>
 </html>
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -21,13 +21,22 @@ const dccs = Object.values(import.meta.glob('./dccs/*.md', { eager: true }))
 	</head>
 	<body>
 		<main>
-			<h1>Common Fund programs partnered with the CFDE</h1>
-			<p>The NIH Common Fund is a funding entity within the NIH that supports bold scientific programs that catalyze discovery across all biomedical and behavioral research.</p>
-			{dccs.map(dcc =>
-				<a href={`dccs/${dcc.frontmatter.short_label}`}>
-					<img src={dcc.frontmatter.icon} />
-				</a>
-			)}
+			<h1 class="text-4xl font-bold">Common Fund Programs Partnered with the CFDE</h1>
+			<div class="grid grid-cols-3 gap-8">
+				{dccs.map(dcc =>
+					<div class="flex flex-col justify-start items-stretch">
+						<div class="flex flex-row justify-around items-center">
+							<div class="flex w-24 h-24 justify-center items-center"><img src={dcc.frontmatter.icon} class="max-w-24 max-h-24" /></div>
+							<span class="font-bold text-lg">{dcc.frontmatter.short_label}</span>
+						</div>
+						<p style="overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical;">{dcc.rawContent()}</p>
+						<div class="flex flex-row justify-around">
+							<a class="font-bold" href={dcc.url}>Expand</a>
+							<a class="font-bold" href={dcc.frontmatter.homepage} target="_blank">Go to DCC portal</a>
+						</div>
+					</div>
+				)}
+			</div>
 		</main>
 	</body>
 </html>
