Skip to content

Commit c7df869

Browse files
u8sandu8sand
committed
Common layout & styling, more layouts
1 parent 5198bf2 commit c7df869

35 files changed

+222
-301
lines changed

‎package-lock.json‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/components/Layout.astro‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
---
2+
import '@/styles/base.css'
3+
import Prose from '@/components/Prose.astro'
4+
---
5+
6+
<html lang="en">
7+
<head>
8+
<meta charset="utf-8" />
9+
<meta name="viewport" content="width=device-width" />
10+
<meta name="generator" content={Astro.generator} />
11+
<link rel="icon" type="image/svg+xml" href={`${import.meta.env.BASE_URL}/favicon.png`} />
12+
</head>
13+
<body>
14+
<main class="container mx-auto flex flex-col gap-2">
15+
<div class="flex flex-row gap-4">
16+
<a class="text-primary hover:bg-gray-100 transition p-4" href={`${import.meta.env.BASE_URL}/`}>Home</a>
17+
<a class="text-primary hover:bg-gray-100 transition p-4" href={`${import.meta.env.BASE_URL}/dccs/`}>CF Programs</a>
18+
<a class="text-primary hover:bg-gray-100 transition p-4" href={`${import.meta.env.BASE_URL}/centers/`}>CFDE Centers</a>
19+
<a class="text-primary hover:bg-gray-100 transition p-4" href={`${import.meta.env.BASE_URL}/partnerships/`}>Partnerships</a>
20+
</div>
21+
<Prose>
22+
<slot />
23+
</Prose>
24+
</main>
25+
</body>
26+
</html>

‎src/components/PartnershipCard.astro‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
---
2+
import Prose from '@/components/Prose.astro'
3+
const { partnership, dccs } = Astro.props
4+
---
5+
<div class="flex flex-col justify-start gap-2 p-8 shadow-md rounded-md">
6+
<div class="flex flex-row gap-8 items-center">
7+
<div class="flex w-24 h-24 justify-center items-center"><img src={partnership.frontmatter.icon} class="max-w-24 max-h-24" /></div>
8+
<span class="hanken-grotesk-500 text-xl text-primary">{partnership.frontmatter.title}</span>
9+
</div>
10+
<div>
11+
{partnership.frontmatter.status === 'completed' && <span class="text-primary bg-secondary rounded-lg px-4 py-2">COMPLETED</span>}
12+
{partnership.frontmatter.status === 'active' && <span class="text-secondary bg-primary rounded-lg px-4 py-2">ACTIVE</span>}
13+
</div>
14+
<Prose>
15+
<p class="overflow-ellipsis text-primary">{partnership.rawContent()}</p>
16+
{partnership.frontmatter.publications && <>
17+
<p><strong>Publication:</strong> {partnership.frontmatter.publications}</p>
18+
</>}
19+
</Prose>
20+
{partnership.frontmatter.dccs && partnership.frontmatter.dccs.length > 0 &&
21+
<>
22+
<span class="font-bold text-primary">Participating DCCs:</span>
23+
<div class="grid grid-cols-4 lg:grid-cols-3 gap-2">{partnership.frontmatter.dccs.map(dcc => dccs[dcc]).map(dcc =>
24+
<a class="flex justify-center items-center p-2 hover:bg-gray-100" href={dcc.url}>
25+
<div class="w-16 h-16 flex justify-center items-center">
26+
<img class="max-w-16 max-h-16" src={dcc.frontmatter.icon} alt={dcc.frontmatter.short_label} />
27+
</div>
28+
</a>
29+
)}</div>
30+
</>
31+
}
32+
<div class="flex flex-row gap-8">
33+
{partnership.frontmatter.grant_num && <a class="hanken-grotesk-500 text-primary hover:bg-gray-100 transition p-4" href={`https://reporter.nih.gov/project-details/${partnership.frontmatter.grant_num}`} target="_blank">Grant: {partnership.frontmatter.grant_num}</a>}
34+
{partnership.frontmatter.website && <a class="hanken-grotesk-500 text-primary hover:bg-gray-100 transition p-4" href={partnership.frontmatter.website} target="_blank">Go to website</a>}
35+
</div>
36+
</div>

‎src/components/Prose.astro‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
---
2+
---
3+
<div class="
4+
prose
5+
max-w-none
6+
prose-headings:hanken-grotesk-500
7+
prose-headings:text-primary
8+
prose-body:text-primary
9+
prose-strong:text-primary
10+
prose-h1:text-4xl
11+
prose-h2:text-3xl
12+
dm-sans-500
13+
text-primary
14+
">
15+
<slot />
16+
</div>

‎src/layouts/Center.astro‎

Lines changed: 6 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,11 @@
11
---
22
import '@/styles/base.css'
3+
import Layout from '@/components/Layout.astro'
34
const { frontmatter } = Astro.props
45
---
56

6-
<html lang="en">
7-
<head>
8-
<meta charset="utf-8" />
9-
<meta name="viewport" content="width=device-width" />
10-
<meta name="generator" content={Astro.generator} />
11-
<link rel="icon" type="image/svg+xml" href={`${import.meta.env.BASE_URL}/favicon.png`} />
12-
<style>
13-
html,
14-
body {
15-
font-family: system-ui;
16-
margin: 0;
17-
}
18-
body {
19-
padding: 2rem;
20-
}
21-
</style>
22-
</head>
23-
<body>
24-
<main class="flex flex-col gap-2">
25-
<div class="flex w-48 h-48 justify-center items-center"><img src={frontmatter.icon} class="max-w-96 max-h-96" /></div>
26-
<h1 class="text-4xl font-bold">{frontmatter.label}</h1>
27-
<slot />
28-
</main>
29-
</body>
30-
</html>
7+
<Layout>
8+
<div class="flex w-48 h-48 justify-center items-center"><img src={frontmatter.icon} class="max-w-48 max-h-48" /></div>
9+
<h1>{frontmatter.label}</h1>
10+
<slot />
11+
</Layout>

‎src/layouts/Centers.astro‎

Lines changed: 18 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,24 @@
11
---
22
import '@/styles/base.css'
3+
import Layout from '@/components/Layout.astro'
34
const centers = Object.values(import.meta.glob('@/pages/centers/*.md', { eager: true })).filter(center => center.frontmatter.layout === '@/layouts/Center.astro')
45
---
56

6-
<html lang="en">
7-
<head>
8-
<meta charset="utf-8" />
9-
<meta name="viewport" content="width=device-width" />
10-
<meta name="generator" content={Astro.generator} />
11-
<link rel="icon" type="image/svg+xml" href={`${import.meta.env.BASE_URL}/favicon.png`} />
12-
</head>
13-
<body>
14-
<main class="dm-sans-500">
15-
<slot/>
16-
<!-- <h1 class="text-4xl hanken-grotesk-500 text-primary">Common Fund Programs Partnered with the CFDE</h1> -->
17-
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
18-
{centers.map(center =>
19-
<div class="flex flex-col justify-start items-stretch gap-2 p-8 shadow-md rounded-md">
20-
<div class="flex flex-row gap-8 items-center">
21-
<div class="flex w-24 h-24 justify-center items-center"><img src={center.frontmatter.icon} class="max-w-24 max-h-24" /></div>
22-
<span class="hanken-grotesk-500 text-xl text-primary">{center.frontmatter.short_label}</span>
23-
</div>
24-
<p class="overflow-ellipsis text-primary">{center.rawContent()}</p>
25-
<div class="flex flex-row gap-8">
26-
<a class="hanken-grotesk-500 text-primary hover:bg-gray-100 transition p-4" href={center.url}>Expand</a>
27-
<a class="hanken-grotesk-500 text-primary hover:bg-gray-100 transition p-4" href={center.frontmatter.homepage} target="_blank">Go to DCC portal</a>
28-
</div>
29-
</div>
30-
)}
7+
<Layout>
8+
<slot/>
9+
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
10+
{centers.map(center =>
11+
<div class="flex flex-col justify-start items-stretch gap-2 p-8 shadow-md rounded-md">
12+
<div class="flex flex-row gap-8 items-center">
13+
<div class="flex w-24 h-24 justify-center items-center"><img src={center.frontmatter.icon} class="max-w-24 max-h-24" /></div>
14+
<span class="hanken-grotesk-500 text-xl text-primary">{center.frontmatter.short_label}</span>
15+
</div>
16+
<p class="overflow-ellipsis text-primary">{center.rawContent()}</p>
17+
<div class="flex flex-row gap-8">
18+
<a class="hanken-grotesk-500 text-primary hover:bg-gray-100 transition p-4" href={center.url}>Expand</a>
19+
<a class="hanken-grotesk-500 text-primary hover:bg-gray-100 transition p-4" href={center.frontmatter.homepage} target="_blank">Go to DCC portal</a>
20+
</div>
3121
</div>
32-
</main>
33-
</body>
34-
</html>
22+
)}
23+
</div>
24+
</Layout>

‎src/layouts/DCC.astro‎

Lines changed: 10 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,15 @@
11
---
22
import '@/styles/base.css'
3+
import Layout from '@/components/Layout.astro'
34
const { frontmatter } = Astro.props
45
---
56

6-
<html lang="en">
7-
<head>
8-
<meta charset="utf-8" />
9-
<meta name="viewport" content="width=device-width" />
10-
<meta name="generator" content={Astro.generator} />
11-
<link rel="icon" type="image/svg+xml" href={`${import.meta.env.BASE_URL}/favicon.png`} />
12-
<style>
13-
html,
14-
body {
15-
font-family: system-ui;
16-
margin: 0;
17-
}
18-
body {
19-
padding: 2rem;
20-
}
21-
</style>
22-
</head>
23-
<body>
24-
<main class="flex flex-col gap-2">
25-
<div class="flex w-48 h-48 justify-center items-center"><img src={frontmatter.icon} class="max-w-96 max-h-96" /></div>
26-
<h1 class="text-4xl font-bold">{frontmatter.label}</h1>
27-
<slot />
28-
<div class="flex flex-row gap-4">
29-
<a class="font-bold" href={frontmatter.homepage} target="_blank">{frontmatter.short_label} DCC Portal</a>
30-
<a class="font-bold" href={frontmatter.cf_site} target="_blank">{frontmatter.short_label} Program on the NIH Common Fund Website</a>
31-
</div>
32-
</main>
33-
</body>
34-
</html>
7+
<Layout>
8+
<div class="flex w-48 h-48 justify-center items-center"><img src={frontmatter.icon} class="max-w-48 max-h-48" /></div>
9+
<h1>{frontmatter.label}</h1>
10+
<slot />
11+
<div class="flex flex-row gap-4">
12+
<a class="font-bold" href={frontmatter.homepage} target="_blank">{frontmatter.short_label} DCC Portal</a>
13+
<a class="font-bold" href={frontmatter.cf_site} target="_blank">{frontmatter.short_label} Program on the NIH Common Fund Website</a>
14+
</div>
15+
</Layout>

‎src/layouts/DCCs.astro‎

Lines changed: 18 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,24 @@
11
---
22
import '@/styles/base.css'
3+
import Layout from '@/components/Layout.astro'
34
const dccs = Object.values(import.meta.glob('@/pages/dccs/*.md', { eager: true })).filter(dcc => dcc.frontmatter.layout === '@/layouts/DCC.astro')
45
---
56

6-
<html lang="en">
7-
<head>
8-
<meta charset="utf-8" />
9-
<meta name="viewport" content="width=device-width" />
10-
<meta name="generator" content={Astro.generator} />
11-
<link rel="icon" type="image/svg+xml" href={`${import.meta.env.BASE_URL}/favicon.png`} />
12-
</head>
13-
<body>
14-
<main class="dm-sans-500">
15-
<slot />
16-
<!-- <h1 class="text-4xl hanken-grotesk-500 text-primary">Common Fund Programs Partnered with the CFDE</h1> -->
17-
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
18-
{dccs.map(dcc =>
19-
<div class="flex flex-col justify-start items-stretch gap-2 p-8 shadow-md rounded-md">
20-
<div class="flex flex-row gap-8 items-center">
21-
<div class="flex w-24 h-24 justify-center items-center"><img src={dcc.frontmatter.icon} class="max-w-24 max-h-24" /></div>
22-
<span class="hanken-grotesk-500 text-xl text-primary">{dcc.frontmatter.short_label}</span>
23-
</div>
24-
<p class="overflow-ellipsis text-primary">{dcc.rawContent()}</p>
25-
<div class="flex flex-row gap-8">
26-
<a class="hanken-grotesk-500 text-primary hover:bg-gray-100 transition p-4" href={dcc.url}>Expand</a>
27-
<a class="hanken-grotesk-500 text-primary hover:bg-gray-100 transition p-4" href={dcc.frontmatter.homepage} target="_blank">Go to DCC portal</a>
28-
</div>
29-
</div>
30-
)}
7+
<Layout>
8+
<slot />
9+
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
10+
{dccs.map(dcc =>
11+
<div class="flex flex-col justify-start items-stretch gap-2 p-8 shadow-md rounded-md">
12+
<div class="flex flex-row gap-8 items-center">
13+
<div class="flex w-24 h-24 justify-center items-center"><img src={dcc.frontmatter.icon} class="max-w-24 max-h-24" /></div>
14+
<span class="hanken-grotesk-500 text-xl text-primary">{dcc.frontmatter.short_label}</span>
15+
</div>
16+
<p class="overflow-ellipsis text-primary">{dcc.rawContent()}</p>
17+
<div class="flex flex-row gap-8">
18+
<a class="hanken-grotesk-500 text-primary hover:bg-gray-100 transition p-4" href={dcc.url}>Expand</a>
19+
<a class="hanken-grotesk-500 text-primary hover:bg-gray-100 transition p-4" href={dcc.frontmatter.homepage} target="_blank">Go to DCC portal</a>
20+
</div>
3121
</div>
32-
</main>
33-
</body>
34-
</html>
22+
)}
23+
</div>
24+
</Layout>

‎src/layouts/Home.astro‎

Lines changed: 4 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,8 @@
11
---
22
import '@/styles/base.css'
3+
import Layout from '@/components/Layout.astro'
34
---
45

5-
<html lang="en">
6-
<head>
7-
<meta charset="utf-8" />
8-
<meta name="viewport" content="width=device-width" />
9-
<meta name="generator" content={Astro.generator} />
10-
<link rel="icon" type="image/svg+xml" href={`${import.meta.env.BASE_URL}/favicon.png`} />
11-
</head>
12-
<body>
13-
<main class="dm-sans-500">
14-
<div class="flex flex-row gap-4">
15-
<a class="hover:bg-gray-100 transition p-4" href="dccs/">CF Programs</a>
16-
<a class="hover:bg-gray-100 transition p-4" href="centers/">Centers</a>
17-
</div>
18-
<slot />
19-
</main>
20-
</body>
21-
</html>
6+
<Layout>
7+
<slot />
8+
</Layout>

‎src/layouts/Outreach.astro‎

Lines changed: 6 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,11 @@
11
---
22
import '@/styles/base.css'
3+
import Layout from '@/components/Layout.astro'
34
const { frontmatter } = Astro.props
45
---
56

6-
<html lang="en">
7-
<head>
8-
<meta charset="utf-8" />
9-
<meta name="viewport" content="width=device-width" />
10-
<meta name="generator" content={Astro.generator} />
11-
<link rel="icon" type="image/svg+xml" href={`${import.meta.env.BASE_URL}/favicon.png`} />
12-
<style>
13-
html,
14-
body {
15-
font-family: system-ui;
16-
margin: 0;
17-
}
18-
body {
19-
padding: 2rem;
20-
}
21-
</style>
22-
</head>
23-
<body>
24-
<main class="flex flex-col gap-2">
25-
<div class="flex w-48 h-48 justify-center items-center"><img src={frontmatter.icon} class="max-w-96 max-h-96" /></div>
26-
<h1 class="text-4xl font-bold">{frontmatter.label}</h1>
27-
<slot />
28-
</main>
29-
</body>
30-
</html>
7+
<Layout>
8+
<div class="flex w-48 h-48 justify-center items-center"><img src={frontmatter.icon} class="max-w-48 max-h-48" /></div>
9+
<h1>{frontmatter.label}</h1>
10+
<slot />
11+
</Layout>

0 commit comments

Comments
 (0)