Skip to content

Commit df11f52

Browse files
rocktimsaikiarocktimsaikia
authored
feat: refresh card UI and surface location/company/website meta (#16)
* feat: refresh card UI and surface location/company/website meta * feat: shorten Repositories label to Repos * fix: constrain h1 font-size to remove phantom gap around the name * style: tighten avatar margin and card bottom padding * docs(examples): demo custom --gh-accent accent override * docs(examples): label each demo card with the attributes it uses * docs: point demo links to the GitHub Pages demo instead of CodePen * docs: show the GitHub Pages link directly in the header
1 parent 39d358f commit df11f52

5 files changed

Lines changed: 350 additions & 171 deletions

File tree

‎README.md‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
<div>
22
<h1 align="center">github-card 🌈</h1>
33
<p align="center">Beautiful embeddable GitHub profile card for your portfolio. <br/>
4-
Here is a live <a href="https://codepen.io/RocktimSaikia/full/jObbBmR">codepen Demo</a></p>
4+
<a href="https://rocktimsaikia.github.io/github-card/">https://rocktimsaikia.github.io/github-card/</a></p>
55
<p align="center">
66
<a href="https://github.com/rocktimsaikia/github-card/actions/workflows/main.yml"><img alt="CI" src="https://github.com/rocktimsaikia/github-card/actions/workflows/main.yml/badge.svg"/></a>
77
<a href="https://www.npmjs.com/package/@rocktimsaikia/github-card"><img src="https://badge.fury.io/js/%40rocktimsaikia%2Fgithub-card.svg" alt="npm version"></a>
88
</p>
9-
<p align="center"><a href="https://codepen.io/RocktimSaikia/full/jObbBmR"><img src="https://i.ibb.co/LdZZMdr/github-card.png"/></a></p>
9+
<p align="center"><a href="https://rocktimsaikia.github.io/github-card/"><img src="https://i.ibb.co/LdZZMdr/github-card.png"/></a></p>
1010
</div>
1111

1212

@@ -61,6 +61,18 @@ Or skip the install and load it straight from a CDN in an HTML file:
6161
<github-card data-user="rocktimsaikia" data-theme="dark"></github-card>
6262
```
6363

64+
## Customization
65+
66+
Override the accent color with the `--gh-accent` CSS custom property on the element:
67+
68+
```css
69+
github-card {
70+
--gh-accent: #6366f1;
71+
}
72+
```
73+
74+
The card also surfaces `location`, `company`, and `website` from the GitHub profile when present.
75+
6476
## License
6577

6678
2026 © MIT [Rocktim Saikia](https://rocktimcodes.site)

‎examples/index.html‎

Lines changed: 98 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -2,31 +2,108 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8" />
5-
<title>Github-card</title>
6-
</head>
7-
<style>
8-
.profile {
9-
display: flex;
10-
justify-content: center;
11-
margin-top: 50px;
12-
}
13-
.profile div {
14-
margin: 20px;
15-
}
16-
17-
@media screen and (max-width: 992px) {
18-
.profile {
5+
<title>github-card — demo</title>
6+
<style>
7+
body {
8+
font-family:
9+
-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
10+
margin: 0;
11+
padding: 48px 16px;
12+
background: #fafbfc;
13+
color: #1f2328;
14+
}
15+
h1 {
16+
margin: 0 0 4px;
17+
text-align: center;
18+
font-size: 22px;
19+
}
20+
.subtitle {
21+
margin: 0 0 44px;
22+
text-align: center;
23+
font-size: 14px;
24+
color: #57606a;
25+
}
26+
.grid {
27+
display: flex;
28+
flex-wrap: wrap;
29+
justify-content: center;
30+
gap: 44px 32px;
31+
}
32+
figure {
33+
display: flex;
1934
flex-direction: column;
35+
align-items: center;
36+
gap: 14px;
37+
margin: 0;
38+
max-width: 320px;
39+
}
40+
figcaption {
41+
text-align: center;
42+
}
43+
figcaption strong {
44+
display: block;
45+
margin-bottom: 8px;
46+
font-size: 14px;
2047
}
21-
}
22-
</style>
48+
figcaption code {
49+
display: inline-block;
50+
margin: 2px;
51+
padding: 3px 8px;
52+
border-radius: 6px;
53+
background: #eaeef2;
54+
font-size: 12px;
55+
color: #1f2328;
56+
}
57+
</style>
58+
</head>
2359
<body>
24-
<div class="profile">
25-
<github-card data-user="benawad" data-theme="dark"></github-card>
26-
<github-card data-user="rocktimsaikia"></github-card>
27-
<github-card data-user="sindresorhus" data-theme="dark"></github-card>
60+
<h1>github-card</h1>
61+
<p class="subtitle">
62+
Each example below shows the exact attributes the card is using.
63+
</p>
64+
65+
<div class="grid">
66+
<figure>
67+
<github-card data-user="rocktimsaikia"></github-card>
68+
<figcaption>
69+
<strong>Default · light theme</strong>
70+
<code>data-user="rocktimsaikia"</code>
71+
</figcaption>
72+
</figure>
73+
74+
<figure>
75+
<github-card data-user="benawad" data-theme="dark"></github-card>
76+
<figcaption>
77+
<strong>Dark theme</strong>
78+
<code>data-theme="dark"</code>
79+
</figcaption>
80+
</figure>
81+
82+
<figure>
83+
<github-card
84+
data-user="sindresorhus"
85+
style="--gh-accent: #6366f1"
86+
></github-card>
87+
<figcaption>
88+
<strong>Custom accent</strong>
89+
<code>style="--gh-accent: #6366f1"</code>
90+
</figcaption>
91+
</figure>
92+
93+
<figure>
94+
<github-card
95+
data-user="gaearon"
96+
data-theme="dark"
97+
style="--gh-accent: #22c55e"
98+
></github-card>
99+
<figcaption>
100+
<strong>Dark + custom accent</strong>
101+
<code>data-theme="dark"</code>
102+
<code>--gh-accent: #22c55e</code>
103+
</figcaption>
104+
</figure>
28105
</div>
106+
29107
<script type="module" src="../dist/index.js"></script>
30-
<!-- <script type="module" src="https://unpkg.com/@rocktimsaikia/github-card@latest?module"></script> -->
31108
</body>
32109
</html>

‎src/index.js‎

Lines changed: 63 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,15 @@
11
import escapeHtml from './escape.js';
22
import nFormatter from './format.js';
33
import widgetStyle from './style.js';
4+
import safeUrl from './url.js';
5+
6+
// Inline monochrome icons (Material Symbols) for the profile meta row.
7+
const ICON_LOCATION =
8+
'<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z"/></svg>';
9+
const ICON_COMPANY =
10+
'<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 7V3H2v18h20V7H12zM6 19H4v-2h2v2zm0-4H4v-2h2v2zm0-4H4V9h2v2zm0-4H4V5h2v2zm4 12H8v-2h2v2zm0-4H8v-2h2v2zm0-4H8V9h2v2zm0-4H8V5h2v2zm10 12h-8v-2h2v-2h-2v-2h2v-2h-2V9h8v10zm-2-8h-2v2h2v-2zm0 4h-2v2h2v-2z"/></svg>';
11+
const ICON_LINK =
12+
'<svg viewBox="0 0 24 24" fill="currentColor"><path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"/></svg>';
413

514
const template = document.createElement('template');
615

@@ -60,35 +69,61 @@ class myCard extends HTMLElement {
6069
const login = escapeHtml(user.login);
6170
const htmlUrl = escapeHtml(user.html_url);
6271
const name = escapeHtml(user.name);
63-
const bio = escapeHtml(user.bio ?? '');
72+
const bioHtml = user.bio
73+
? `<p class="card-desc">${escapeHtml(user.bio)}</p>`
74+
: '';
75+
76+
const meta = [];
77+
if (user.location) {
78+
meta.push(
79+
`<span class="meta-item">${ICON_LOCATION}${escapeHtml(user.location)}</span>`,
80+
);
81+
}
82+
if (user.company) {
83+
meta.push(
84+
`<span class="meta-item">${ICON_COMPANY}${escapeHtml(user.company)}</span>`,
85+
);
86+
}
87+
const blog = safeUrl(user.blog);
88+
if (blog) {
89+
const label = escapeHtml(String(user.blog).replace(/^https?:\/\//i, ''));
90+
meta.push(
91+
`<a class="meta-item meta-link" href="${escapeHtml(blog)}" target="_blank" rel="noopener">${ICON_LINK}${label}</a>`,
92+
);
93+
}
94+
const metaHtml = meta.length
95+
? `<div class="card-meta">${meta.join('')}</div>`
96+
: '';
97+
6498
return `
65-
<div class="cover"></div>
66-
<div class="card-wrapper">
67-
<a href="https://github.com/${login}" target="_blank" rel="noopener"><img id="github-logo" src="https://i.ibb.co/frv5pB3/github-logo.png" alt="github-logo" border="0"></a>
68-
<div class="card-header">
69-
<div class="card-img-wrapper"><img src="https://avatars.githubusercontent.com/${login}" alt="${name}"/></div>
70-
<h1><a class="card-title" href="${htmlUrl}" target="_blank" rel="noopener">${name}</a></h1>
71-
<div class="card-responsename"><a href="${htmlUrl}" target="_blank" rel="noopener">@${login}</a></div>
72-
<p class="card-desc">${bio}</p>
73-
<div class="card-footer">
74-
<div class="footer-box">
75-
<div class="box-wrapper">
76-
<div class="count">${nFormatter(user.followers)}</div>
77-
<div class="box-text">Followers</div>
78-
</div>
79-
<div class="box-wrapper">
80-
<div class="count">${nFormatter(user.following)}</div>
81-
<div class="box-text">Following</div>
82-
</div>
83-
<div class="box-wrapper">
84-
<div class="count">${nFormatter(user.public_repos)}</div>
85-
<div class="box-text">Repositories</div>
86-
</div>
87-
</div>
88-
</div>
89-
</div>
90-
</div>
91-
`;
99+
<div class="cover"></div>
100+
<div class="card-wrapper">
101+
<a href="https://github.com/${login}" target="_blank" rel="noopener"><img id="github-logo" src="https://i.ibb.co/frv5pB3/github-logo.png" alt="github-logo" border="0"></a>
102+
<div class="card-header">
103+
<div class="card-img-wrapper"><img src="https://avatars.githubusercontent.com/${login}" alt="${name}"/></div>
104+
<h1><a class="card-title" href="${htmlUrl}" target="_blank" rel="noopener">${name}</a></h1>
105+
<div class="card-responsename"><a href="${htmlUrl}" target="_blank" rel="noopener">@${login}</a></div>
106+
${bioHtml}
107+
${metaHtml}
108+
<div class="card-footer">
109+
<div class="footer-box">
110+
<div class="box-wrapper">
111+
<div class="count">${nFormatter(user.followers)}</div>
112+
<div class="box-text">Followers</div>
113+
</div>
114+
<div class="box-wrapper">
115+
<div class="count">${nFormatter(user.following)}</div>
116+
<div class="box-text">Following</div>
117+
</div>
118+
<div class="box-wrapper">
119+
<div class="count">${nFormatter(user.public_repos)}</div>
120+
<div class="box-text">Repos</div>
121+
</div>
122+
</div>
123+
</div>
124+
</div>
125+
</div>
126+
`;
92127
}
93128
}
94129

0 commit comments

Comments
 (0)