@rocktimsaikia/github-card 3.0.3 → 3.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/README.md +15 -3
  2. package/dist/index.js +196 -152
  3. package/package.json +1 -1
package/README.md CHANGED
@@ -1,12 +1,12 @@
1
1
  <div>
2
2
  <h1 align="center">github-card 🌈</h1>
3
3
  <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>
5
5
  <p align="center">
6
6
  <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>
7
7
  <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>
8
8
  </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="media/demo.png" width="640" alt="github-card demo"/></a></p>
10
10
  </div>
11
11
 
12
12
 
@@ -45,7 +45,7 @@ Then use the element anywhere in your HTML:
45
45
  Or skip the install and load it straight from a CDN in an HTML file:
46
46
 
47
47
  ```html
48
- <script type="module" src="https://unpkg.com/@rocktimsaikia/github-card@3.0.3"></script>
48
+ <script type="module" src="https://unpkg.com/@rocktimsaikia/github-card"></script>
49
49
  ```
50
50
 
51
51
  ## Attributes
@@ -61,6 +61,18 @@ Or skip the install and load it straight from a CDN in an HTML file:
61
61
  <github-card data-user="rocktimsaikia" data-theme="dark"></github-card>
62
62
  ```
63
63
 
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
+
64
76
  ## License
65
77
 
66
78
  2026 © MIT [Rocktim Saikia](https://rocktimcodes.site)
package/dist/index.js CHANGED
@@ -1,164 +1,208 @@
1
- function l(e){return String(e).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}var a=l;function x(e){if(!(e>=1e3))return e;let t=e,o=["","K","M","B","T"],r=0;for(;t>=1e3;)t/=1e3,r+=1;return t=t.toPrecision(3),t+=o[r],t}var i=x;var g=`
2
- h1, div, p {
3
- margin: 0px;
4
- padding: 0px;
5
- font-family: 'system-ui'
6
- }
7
- a{
8
- text-decoration: none;
9
- color: inherit;
10
- }
11
- #github-logo{
12
- height: 20px;
13
- position: absolute;
14
- top: 10px;
15
- right: 10px;
16
- }
17
- .cover{
18
- height: 120px;
19
- width: 100%;
20
- background: #FF5C5C;
21
- position: absolute;
22
- left: 0px;
23
- top: 0px;
24
- border-top-left-radius: 5px;
25
- border-top-right-radius: 5px;
1
+ function x(a){return String(a).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}var r=x;function f(a){if(!(a>=1e3))return a;let t=a,e=["","K","M","B","T"],o=0;for(;t>=1e3;)t/=1e3,o+=1;return t=t.toPrecision(3),t+=e[o],t}var s=f;var b=`
2
+ *, *::before, *::after {
3
+ box-sizing: border-box;
26
4
  }
27
5
 
28
6
  .card {
29
- position: relative;
30
- display: inline-block;
31
- background: #ffffff;
32
- border-radius: 5px;
33
- box-shadow: 0 12px 13px rgba(0,0,0,0.16), 0 12px 13px rgba(0,0,0,0.16);
34
- text-align: center;
35
- padding: 20px 50px;
36
- margin: 5px;
37
- padding-top: 5px;
38
- transition: all 0.5s;
7
+ --accent: var(--gh-accent, #ff5c5c);
8
+ --bg: #ffffff;
9
+ --surface: #f6f8fa;
10
+ --title: #1f2328;
11
+ --text: #57606a;
12
+ --muted: #8b949e;
13
+ --border: rgba(31, 35, 40, 0.1);
14
+ --shadow: 0 1px 3px rgba(31, 35, 40, 0.08), 0 12px 28px rgba(31, 35, 40, 0.12);
15
+
16
+ position: relative;
17
+ display: inline-block;
18
+ width: 320px;
19
+ padding: 0 28px 20px;
20
+ background: var(--bg);
21
+ border-radius: 16px;
22
+ box-shadow: var(--shadow);
23
+ text-align: center;
24
+ overflow: hidden;
25
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
26
+ -webkit-font-smoothing: antialiased;
27
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
28
+ }
29
+
30
+ .card:hover {
31
+ transform: translateY(-3px);
32
+ box-shadow: 0 2px 6px rgba(31, 35, 40, 0.1), 0 20px 44px rgba(31, 35, 40, 0.18);
33
+ }
34
+
35
+ /* Dark theme just remaps the palette variables \u2014 no !important overrides. */
36
+ .card.dark {
37
+ --bg: #16181d;
38
+ --surface: #1f242c;
39
+ --title: #e6edf3;
40
+ --text: #adbac7;
41
+ --muted: #768390;
42
+ --border: rgba(255, 255, 255, 0.1);
43
+ --shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 16px 36px rgba(0, 0, 0, 0.55);
44
+ }
45
+
46
+ a {
47
+ text-decoration: none;
48
+ color: inherit;
49
+ }
50
+
51
+ .cover {
52
+ position: absolute;
53
+ top: 0;
54
+ left: 0;
55
+ width: 100%;
56
+ height: 96px;
57
+ background: var(--accent);
58
+ }
59
+
60
+ #github-logo {
61
+ position: absolute;
62
+ top: 14px;
63
+ right: 14px;
64
+ height: 22px;
65
+ opacity: 0.85;
66
+ transition: opacity 0.2s ease;
67
+ }
68
+ #github-logo:hover {
69
+ opacity: 1;
70
+ }
71
+
72
+ .card-img-wrapper {
73
+ position: relative;
74
+ width: 104px;
75
+ height: 104px;
76
+ margin: 44px auto 8px;
77
+ }
78
+ .card-img-wrapper img {
79
+ width: 100%;
80
+ height: 100%;
81
+ border-radius: 50%;
82
+ object-fit: cover;
83
+ border: 4px solid var(--bg);
84
+ background: var(--bg);
85
+ }
86
+
87
+ h1 {
88
+ font-size: 21px;
89
+ line-height: 1.2;
39
90
  }
40
91
 
41
- /* Dark Theme */
42
- .card.dark{
43
- background: #1C1D21;
44
- }
45
- .dark .card-title{
46
- color: #E4E4E4 !important;
47
- font-weight: 500 !important;
48
- }
49
- .dark .card-desc{
50
- font-weight: 400 !important;
51
- color: #c6c6c6 !important;
52
- }
53
- .dark .count{
54
- color: #c6c6c6 !important;
55
- font-weight: 600 !important;
56
- }
57
- .dark .box-text{
58
- color: #797979 !important;
59
- font-weight: 500 !important;
60
- }
61
- .dark .footer-box{
62
- background: #1D2025 !important;
63
- box-shadow: 0px 0.2px 5px rgba(255, 255, 255, 0.15), 0px 4px 10px rgba(0, 0, 0, 0.25) !important;
92
+ .card-title {
93
+ display: inline-block;
94
+ color: var(--title);
95
+ font-size: 21px;
96
+ font-weight: 700;
97
+ letter-spacing: -0.01em;
64
98
  }
65
99
 
100
+ .card-responsename {
101
+ margin-top: 2px;
102
+ color: var(--muted);
103
+ font-size: 14px;
104
+ }
66
105
 
106
+ .card-desc {
107
+ margin: 12px auto 0;
108
+ max-width: 250px;
109
+ color: var(--text);
110
+ font-size: 13.5px;
111
+ line-height: 1.5;
112
+ }
113
+
114
+ .card-meta {
115
+ display: flex;
116
+ flex-wrap: wrap;
117
+ justify-content: center;
118
+ align-items: center;
119
+ gap: 4px 14px;
120
+ margin-top: 12px;
121
+ }
122
+ .meta-item {
123
+ display: inline-flex;
124
+ align-items: center;
125
+ gap: 5px;
126
+ max-width: 100%;
127
+ color: var(--muted);
128
+ font-size: 12.5px;
129
+ line-height: 1.4;
130
+ }
131
+ .meta-item svg {
132
+ flex-shrink: 0;
133
+ width: 14px;
134
+ height: 14px;
135
+ opacity: 0.8;
136
+ }
137
+ .meta-link {
138
+ transition: color 0.2s ease;
139
+ }
140
+ .meta-link:hover {
141
+ color: var(--accent);
142
+ }
67
143
 
68
- .card .fa-github {
69
- position: absolute;
70
- color: #646464;
71
- font-size: 20px;
72
- top: 10px;
73
- right: 10px;
74
- }
75
- .card .card-title {
76
- color: #434343;
77
- margin-bottom: -8px;
78
- font-size: 25px;
79
- font-weight: 600;
80
- }
81
- .card .card-responsename {
82
- margin-bottom: 20px;
83
- color: #797979;
84
- }
85
- .card .card-desc {
86
- font-weight: 500;
87
- width: 250px;
88
- margin: auto;
89
- display: block;
90
- color: #3c3c3c;
91
- }
92
- .card .card-img-wrapper {
93
- position: relative;
94
- height: 160px;
95
- width: 160px;
96
- margin: 10px auto;
97
- margin-bottom: 20px;
98
- }
99
- .card .card-img-wrapper img {
100
- height: 100%;
101
- width: 100%;
102
- border-radius: 50%;
103
- }
104
- .card .card-footer {
105
- margin-top: 40px;
106
- }
107
- .card .card-footer .footer-box {
108
- position: relative;
109
- border-top: 2px solid #ff9b9b;
110
- box-shadow: 0 3px 6px -1px rgb(0 0 0 / 26%), 0 2px 4px -1px rgb(0 0 0 / 6%);
111
- border-radius: 5px;
112
- margin: 0 auto;
113
- padding: 10px;
114
- display: flex;
115
- justify-content: space-around;
116
- }
117
- .card .card-footer .footer-box .box-wrapper {
118
- position: relative;
119
- }
120
- .card .card-footer .footer-box .box-wrapper .count {
121
- font-family: 'consolas';
122
- color: #434343;
123
- font-size: 20px;
124
- font-weight: 600;
125
- }
126
- .card .card-footer .footer-box .box-wrapper .box-text {
127
- font-size: 12px;
128
- font-weight: 600;
129
- color: #00000085;
130
- letter-spacing: 0.5px;
131
- }
132
- `,s=g;var p=document.createElement("template");p.innerHTML=`
144
+ .card-footer {
145
+ margin-top: 20px;
146
+ }
147
+ .footer-box {
148
+ display: flex;
149
+ justify-content: space-around;
150
+ align-items: center;
151
+ padding: 13px 6px;
152
+ border: 1px solid var(--border);
153
+ border-top: 2px solid var(--accent);
154
+ border-radius: 12px;
155
+ background: var(--surface);
156
+ }
157
+ .box-wrapper {
158
+ flex: 1;
159
+ }
160
+ .count {
161
+ color: var(--title);
162
+ font-size: 18px;
163
+ font-weight: 700;
164
+ font-variant-numeric: tabular-nums;
165
+ line-height: 1.2;
166
+ }
167
+ .box-text {
168
+ margin-top: 3px;
169
+ color: var(--muted);
170
+ font-size: 10.5px;
171
+ font-weight: 600;
172
+ letter-spacing: 0.4px;
173
+ text-transform: uppercase;
174
+ }
175
+ `,p=b;function u(a){if(!a)return"";let t=String(a).trim();return/^https?:\/\//i.test(t)?t:/^[a-z][a-z\d+.-]*:/i.test(t)?"":`https://${t}`}var d=u;var w='<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>',z='<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>',k='<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>',h=document.createElement("template");h.innerHTML=`
133
176
  <style>
134
- ${s}
177
+ ${p}
135
178
  </style>
136
179
  <div class="card"></div>
137
- `;var c=class extends HTMLElement{constructor(){super(),this._shadowRoot=this.attachShadow({mode:"open"}),this._shadowRoot.append(p.content.cloneNode(!0))}static get observedAttributes(){return["data-theme"]}attributeChangedCallback(t,o,r){t==="data-theme"&&o!==r&&this.setTheme(r)}connectedCallback(){this.fetchData(this.getAttribute("data-user")).then(t=>{let o=this.createCard(t);this._shadowRoot.querySelector(".card").innerHTML=o})}setTheme(t){t==="dark"?this._shadowRoot.querySelector(".card").classList.add("dark"):this._shadowRoot.querySelector(".card").classList.remove("dark")}async fetchData(t){return await(await fetch(`https://api.github.com/users/${t}`,{method:"GET"})).json()}createCard(t){let o=a(t.login),r=a(t.html_url),d=a(t.name),n=a(t.bio??"");return`
138
- <div class="cover"></div>
139
- <div class="card-wrapper">
140
- <a href="https://github.com/${o}" target="_blank" rel="noopener"><img id="github-logo" src="https://i.ibb.co/frv5pB3/github-logo.png" alt="github-logo" border="0"></a>
141
- <div class="card-header">
142
- <div class="card-img-wrapper"><img src="https://avatars.githubusercontent.com/${o}" alt="${d}"/></div>
143
- <h1><a class="card-title" href="${r}" target="_blank" rel="noopener">${d}</a></h1>
144
- <div class="card-responsename"><a href="${r}" target="_blank" rel="noopener">@${o}</a></div>
145
- <p class="card-desc">${n}</p>
146
- <div class="card-footer">
147
- <div class="footer-box">
148
- <div class="box-wrapper">
149
- <div class="count">${i(t.followers)}</div>
150
- <div class="box-text">Followers</div>
151
- </div>
152
- <div class="box-wrapper">
153
- <div class="count">${i(t.following)}</div>
154
- <div class="box-text">Following</div>
155
- </div>
156
- <div class="box-wrapper">
157
- <div class="count">${i(t.public_repos)}</div>
158
- <div class="box-text">Repositories</div>
159
- </div>
160
- </div>
161
- </div>
162
- </div>
163
- </div>
164
- `}};customElements.define("github-card",c);
180
+ `;var n=class extends HTMLElement{constructor(){super(),this._shadowRoot=this.attachShadow({mode:"open"}),this._shadowRoot.append(h.content.cloneNode(!0))}static get observedAttributes(){return["data-theme"]}attributeChangedCallback(t,e,o){t==="data-theme"&&e!==o&&this.setTheme(o)}connectedCallback(){this.fetchData(this.getAttribute("data-user")).then(t=>{let e=this.createCard(t);this._shadowRoot.querySelector(".card").innerHTML=e})}setTheme(t){t==="dark"?this._shadowRoot.querySelector(".card").classList.add("dark"):this._shadowRoot.querySelector(".card").classList.remove("dark")}async fetchData(t){return await(await fetch(`https://api.github.com/users/${t}`,{method:"GET"})).json()}createCard(t){let e=r(t.login),o=r(t.html_url),c=r(t.name),m=t.bio?`<p class="card-desc">${r(t.bio)}</p>`:"",i=[];t.location&&i.push(`<span class="meta-item">${w}${r(t.location)}</span>`),t.company&&i.push(`<span class="meta-item">${z}${r(t.company)}</span>`);let l=d(t.blog);if(l){let v=r(String(t.blog).replace(/^https?:\/\//i,""));i.push(`<a class="meta-item meta-link" href="${r(l)}" target="_blank" rel="noopener">${k}${v}</a>`)}let g=i.length?`<div class="card-meta">${i.join("")}</div>`:"";return`
181
+ <div class="cover"></div>
182
+ <div class="card-wrapper">
183
+ <a href="https://github.com/${e}" target="_blank" rel="noopener"><img id="github-logo" src="https://i.ibb.co/frv5pB3/github-logo.png" alt="github-logo" border="0"></a>
184
+ <div class="card-header">
185
+ <div class="card-img-wrapper"><img src="https://avatars.githubusercontent.com/${e}" alt="${c}"/></div>
186
+ <h1><a class="card-title" href="${o}" target="_blank" rel="noopener">${c}</a></h1>
187
+ <div class="card-responsename"><a href="${o}" target="_blank" rel="noopener">@${e}</a></div>
188
+ ${m}
189
+ ${g}
190
+ <div class="card-footer">
191
+ <div class="footer-box">
192
+ <div class="box-wrapper">
193
+ <div class="count">${s(t.followers)}</div>
194
+ <div class="box-text">Followers</div>
195
+ </div>
196
+ <div class="box-wrapper">
197
+ <div class="count">${s(t.following)}</div>
198
+ <div class="box-text">Following</div>
199
+ </div>
200
+ <div class="box-wrapper">
201
+ <div class="count">${s(t.public_repos)}</div>
202
+ <div class="box-text">Repos</div>
203
+ </div>
204
+ </div>
205
+ </div>
206
+ </div>
207
+ </div>
208
+ `}};customElements.define("github-card",n);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rocktimsaikia/github-card",
3
- "version": "3.0.3",
3
+ "version": "3.0.4",
4
4
  "description": "A minimal github card widget for your portfolio.",
5
5
  "main": "dist/index.js",
6
6
  "type": "module",