Skip to content

Commit 2cce067

Browse files
authored
Merge pull request #585 from projectbluefin/feat/github-profile-cards-in-reports
feat(reports): add GitHub profile cards with gold foil effect for new contributors
2 parents 661edee + ff1a0db commit 2cce067

File tree

5 files changed

+114
-29
lines changed

5 files changed

+114
-29
lines changed

reports/2025-12-31-report.mdx

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ date: 2025-12-31
44
tags: [monthly-report, project-activity]
55
---
66

7-
7+
import GitHubProfileCard from '@site/src/components/GitHubProfileCard';
88

99

1010
# Summary
@@ -96,7 +96,17 @@ tags: [monthly-report, project-activity]
9696

9797
## 👥 Contributors
9898

99-
Thank you to all contributors this period: @​castrojo, @​renner0e, @​bronson
99+
Thank you to everyone who contributed this period!
100+
101+
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '1.5rem', marginBottom: '2rem' }}>
102+
103+
<GitHubProfileCard username="castrojo" />
104+
105+
<GitHubProfileCard username="renner0e" />
106+
107+
<GitHubProfileCard username="bronson" />
108+
109+
</div>
100110

101111
---
102112

reports/2026-01-31-report.mdx

Lines changed: 33 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,7 @@ date: 2026-01-31
44
tags: [monthly-report, project-activity]
55
---
66

7-
8-
7+
import GitHubProfileCard from "@site/src/components/GitHubProfileCard";
98

109
# Summary
1110

@@ -14,7 +13,6 @@ tags: [monthly-report, project-activity]
1413
- **Contributors:** 6
1514
- **New contributors:** 0
1615

17-
1816
# Focus Area
1917

2018
### ️ Desktop
@@ -123,17 +121,45 @@ tags: [monthly-report, project-activity]
123121
- [#138 Apply new labels to projectbluefin/common](https://github.com/projectbluefin/common/issues/138) by @​castrojo
124122
- [#139 Apply new labels to projectbluefin/distroless](https://github.com/projectbluefin/common/issues/139) by @​castrojo
125123

124+
## 🌟 New Contributors
125+
126+
Welcome to our new contributors!
127+
128+
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '1.5rem', marginBottom: '2rem' }}>
129+
130+
<GitHubProfileCard username="rwaltr" highlight={true} />
131+
132+
<GitHubProfileCard username="istvan-derda" highlight={true} />
133+
134+
</div>
135+
126136
## 👥 Contributors
127137

128-
Thank you to all contributors this period: @​castrojo, @​hanthor, @​istvan-derda, @​ledif, @​rwaltr, @​tulilirockz
138+
Thank you to everyone who contributed this period!
139+
140+
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '1.5rem', marginBottom: '2rem' }}>
141+
142+
<GitHubProfileCard username="castrojo" />
143+
144+
<GitHubProfileCard username="hanthor" />
145+
146+
<GitHubProfileCard username="istvan-derda" />
147+
148+
<GitHubProfileCard username="ledif" />
149+
150+
<GitHubProfileCard username="rwaltr" />
151+
152+
<GitHubProfileCard username="tulilirockz" />
153+
154+
</div>
129155

130156
---
131157

132-
*Want to see the latest OS releases? Check out the [Changelogs](/changelogs) page. For announcements and deep dives, read our [Blog](/blog).*
158+
_Want to see the latest OS releases? Check out the [Changelogs](/changelogs) page. For announcements and deep dives, read our [Blog](/blog)._
133159

134-
*This report was automatically generated from [todo.projectbluefin.io](https://todo.projectbluefin.io).*
160+
_This report was automatically generated from [todo.projectbluefin.io](https://todo.projectbluefin.io)._
135161

136162
---
137163

138-
*Generated on 2026-01-26*
164+
_Generated on 2026-01-26_
139165
[View Project Board](https://todo.projectbluefin.io) | [Report an Issue](https://github.com/projectbluefin/common/issues/new)

scripts/lib/markdown-generator.js

Lines changed: 23 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -52,14 +52,14 @@ export function generateReportMarkdown(
5252
const monthYear = `${monthNames[month]} ${year}`;
5353
const dateStr = format(endDate, "yyyy-MM-dd");
5454

55-
// Generate frontmatter with MDX import for new contributors
55+
// Generate frontmatter with MDX import for GitHubProfileCard component
5656
const frontmatter = `---
5757
title: "Monthly Report: ${monthYear}"
5858
date: ${dateStr}
5959
tags: [monthly-report, project-activity]
6060
---
6161
62-
${newContributors.length > 0 ? "import GitHubProfileCard from '@site/src/components/GitHubProfileCard';\n" : ""}
62+
import GitHubProfileCard from '@site/src/components/GitHubProfileCard';
6363
`;
6464

6565
// Generate summary section
@@ -337,38 +337,42 @@ ${itemsList}
337337
}
338338

339339
/**
340-
* Generate contributors section with thank you list and new contributor highlights
340+
* Generate contributors section with GitHubProfileCard components
341341
*
342342
* @param {Array<string>} contributors - All contributor usernames
343343
* @param {Array<string>} newContributors - First-time contributor usernames
344344
* @returns {string} Markdown section
345345
*/
346346
function generateContributorsSection(contributors, newContributors) {
347-
// Use zero-width space after @ to prevent GitHub notifications
348-
const contributorList = contributors
349-
.map((username) => `@\u200B${username}`)
350-
.join(", ");
351-
352-
let section = `## 👥 Contributors
353-
354-
Thank you to all contributors this period: ${contributorList}`;
347+
let section = "";
355348

349+
// Section 1: New Contributors (highlighted, shown first)
356350
if (newContributors.length > 0) {
357-
section += `\n\n### 🎉 New Contributors\n\nWelcome to our new contributors!\n\n`;
351+
section += `## 🌟 New Contributors\n\nWelcome to our new contributors!\n\n`;
352+
section += `<div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '1.5rem', marginBottom: '2rem' }}>\n\n`;
358353

359-
// Use GitHubProfileCard component for each new contributor in grid (matching donations page style)
360-
section += `<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(400px, 1fr))', gap: '1.5rem', marginBottom: '2rem' }}>\n\n`;
361-
362-
const profileCards = newContributors
354+
const newContributorCards = newContributors
363355
.map(
364356
(username) =>
365-
`<GitHubProfileCard username="${username}" title="New Contributor" />`,
357+
`<GitHubProfileCard username="${username}" highlight={true} />`,
366358
)
367359
.join("\n\n");
368360

369-
section += profileCards;
370-
section += `\n\n</div>`;
361+
section += newContributorCards;
362+
section += `\n\n</div>\n\n`;
371363
}
372364

365+
// Section 2: All Contributors (without highlight)
366+
section += `## 👥 Contributors\n\n`;
367+
section += `Thank you to everyone who contributed this period!\n\n`;
368+
section += `<div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '1.5rem', marginBottom: '2rem' }}>\n\n`;
369+
370+
const allContributorCards = contributors
371+
.map((username) => `<GitHubProfileCard username="${username}" />`)
372+
.join("\n\n");
373+
374+
section += allContributorCards;
375+
section += `\n\n</div>`;
376+
373377
return section;
374378
}

src/components/GitHubProfileCard.module.css

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,48 @@
1515
transform: translateY(-2px);
1616
}
1717

18+
/* Gold foil effect for highlighted contributors */
19+
.highlight {
20+
position: relative;
21+
background: linear-gradient(
22+
135deg,
23+
rgba(255, 215, 0, 0.1) 0%,
24+
rgba(255, 237, 78, 0.15) 50%,
25+
rgba(255, 215, 0, 0.1) 100%
26+
);
27+
border: 2px solid;
28+
border-image: linear-gradient(135deg, #ffd700, #ffed4e, #ffd700) 1;
29+
box-shadow:
30+
0 4px 12px rgba(255, 215, 0, 0.3),
31+
inset 0 1px 0 rgba(255, 255, 255, 0.3);
32+
}
33+
34+
.highlight:hover {
35+
box-shadow:
36+
0 6px 20px rgba(255, 215, 0, 0.4),
37+
inset 0 1px 0 rgba(255, 255, 255, 0.3);
38+
transform: translateY(-3px);
39+
}
40+
41+
.highlight .avatar {
42+
border-color: #ffd700;
43+
box-shadow: 0 0 12px rgba(255, 215, 0, 0.5);
44+
}
45+
46+
.badge {
47+
position: absolute;
48+
bottom: 12px;
49+
left: 12px;
50+
background: linear-gradient(135deg, #ffd700, #ffed4e);
51+
color: #8b7500;
52+
padding: 0.35rem 0.75rem;
53+
border-radius: 20px;
54+
font-size: 0.75rem;
55+
font-weight: 600;
56+
box-shadow: 0 2px 8px rgba(255, 215, 0, 0.4);
57+
letter-spacing: 0.5px;
58+
}
59+
1860
.avatar {
1961
width: 96px;
2062
height: 96px;

src/components/GitHubProfileCard.tsx

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ interface GitHubProfileCardProps {
2020
username: string;
2121
title?: string;
2222
sponsorUrl?: string;
23+
highlight?: boolean; // Gold foil effect for new contributors
2324
}
2425

2526
const CACHE_KEY_PREFIX = "github_profile_";
@@ -136,6 +137,7 @@ const GitHubProfileCard: React.FC<GitHubProfileCardProps> = ({
136137
username,
137138
title,
138139
sponsorUrl,
140+
highlight = false,
139141
}) => {
140142
const [user, setUser] = useState<GitHubUser | null>(null);
141143
const [loading, setLoading] = useState(true);
@@ -220,7 +222,7 @@ const GitHubProfileCard: React.FC<GitHubProfileCardProps> = ({
220222
}
221223

222224
return (
223-
<div className={styles.card}>
225+
<div className={`${styles.card} ${highlight ? styles.highlight : ""}`}>
224226
<a href={user.html_url} target="_blank" rel="noopener noreferrer">
225227
<img
226228
src={user.avatar_url}
@@ -229,6 +231,7 @@ const GitHubProfileCard: React.FC<GitHubProfileCardProps> = ({
229231
/>
230232
</a>
231233
<div className={styles.content}>
234+
{highlight && <div className={styles.badge}>⭐ New Contributor</div>}
232235
<h3 className={styles.name}>
233236
<a href={user.html_url} target="_blank" rel="noopener noreferrer">
234237
{user.name || user.login}

0 commit comments

Comments
 (0)