@rocktimsaikia/github-card 3.0.2 → 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 (4) hide show
  1. package/{license → LICENSE} +1 -1
  2. package/README.md +37 -13
  3. package/dist/index.js +196 -152
  4. package/package.json +11 -14
package/{license → LICENSE} RENAMED
@@ -1,6 +1,6 @@
1
1
  MIT License
2
2
 
3
- Copyright (c) 2020 Rocktim Saikia <rocktimthedev@gmail.com> (https://rocktimcodes.site)
3
+ Copyright (c) 2026 Rocktim Saikia <rocktimthedev@gmail.com> (https://rocktimcodes.site)
4
4
 
5
5
  Permission is hereby granted, free of charge, to any person obtaining a copy
6
6
  of this software and associated documentation files (the "Software"), to deal
package/README.md CHANGED
@@ -1,24 +1,22 @@
1
1
  <div>
2
2
  <h1 align="center">github-card 🌈</h1>
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>
3
+ <p align="center">Beautiful embeddable GitHub profile card for your portfolio. <br/>
4
+ <a href="https://rocktimsaikia.github.io/github-card/">https://rocktimsaikia.github.io/github-card/</a></p>
5
5
  <p align="center">
6
- <a href="https://github.com/rocktimsaikia/github-card/actions"><img alt="CI" src="https://github.com/rocktimsaikia/github-card/workflows/CI/badge.svg"/></a>
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
 
13
- ## Highlights
13
+ ## Highlights
14
14
 
15
- - Tiny and Zero dependencies (`~4kb`)
16
- - Simple and easy to use
15
+ - Tiny and zero-dependency (`~4kb`)
17
16
  - Minimal and neat design
18
17
  - Dark theme available
19
18
 
20
19
  ## Installation
21
- Available on [npm](https://www.npmjs.com/) as [**@rocktimsaikia/github-card**](https://www.npmjs.com/package/@rocktimsaikia/github-card).
22
20
 
23
21
  ```sh
24
22
  npm install @rocktimsaikia/github-card
@@ -30,25 +28,51 @@ yarn add @rocktimsaikia/github-card
30
28
 
31
29
  ## Usage
32
30
 
33
- Since this an [ESM](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) web component, you can use it both as a script or through installation.
31
+ Since this is an [ESM](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) web component, you can use it either through installation or directly as a script.
32
+
33
+ Import it in your JavaScript:
34
34
 
35
35
  ```js
36
36
  import '@rocktimsaikia/github-card'
37
+ ```
37
38
 
39
+ Then use the element anywhere in your HTML:
40
+
41
+ ```html
38
42
  <github-card data-user="rocktimsaikia"></github-card>
39
43
  ```
40
44
 
41
- Or use it as a script in a `html` file :
45
+ Or skip the install and load it straight from a CDN in an HTML file:
46
+
42
47
  ```html
43
- <script type="module" src="https://unpkg.com/@rocktimsaikia/github-card@latest?module"></script>
48
+ <script type="module" src="https://unpkg.com/@rocktimsaikia/github-card"></script>
44
49
  ```
45
50
 
51
+ ## Attributes
52
+
53
+ | Attribute | Required | Description |
54
+ | --- | --- | --- |
55
+ | `data-user` | yes | GitHub username to render the card for |
56
+ | `data-theme` | no | Set to `dark` for the dark theme; omit for the default light theme |
57
+
46
58
  ## Theme
47
- You can enable the optional dark theme by setting the `data-theme` attribute to `dark`
48
59
 
49
60
  ```html
50
61
  <github-card data-user="rocktimsaikia" data-theme="dark"></github-card>
51
62
  ```
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
+
52
76
  ## License
53
77
 
54
- 2021 © MIT [Rocktim Saikia](https://rocktimcodes.site)
78
+ 2026 © MIT [Rocktim Saikia](https://rocktimcodes.site)
package/dist/index.js CHANGED
@@ -1,164 +1,208 @@
1
- let widgetStyle=`
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
- `;function nFormatter(t){if(!(1e3<=t))return t;let e=t;let o=0;for(;1e3<=e;)e/=1e3,o+=1;return e=e.toPrecision(3),e+=["","K","M","B","T"][o]}function escapeHtml(t){return String(t).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}let template=document.createElement("template");template.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
- ${widgetStyle}
177
+ ${p}
135
178
  </style>
136
179
  <div class="card"></div>
137
- `;class myCard extends HTMLElement{constructor(){super(),this._shadowRoot=this.attachShadow({mode:"open"}),this._shadowRoot.append(template.content.cloneNode(!0))}static get observedAttributes(){return["data-theme"]}attributeChangedCallback(t,e,o){"data-theme"===t&&e!==o&&this.setTheme(o)}connectedCallback(){this.fetchData(this.getAttribute("data-user")).then(t=>{t=this.createCard(t);this._shadowRoot.querySelector(".card").innerHTML=t})}setTheme(t){"dark"===t?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){var e=escapeHtml(t.login),o=escapeHtml(t.html_url),r=escapeHtml(t.name);return`
138
- <div class="cover"></div>
139
- <div class="card-wrapper">
140
- <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>
141
- <div class="card-header">
142
- <div class="card-img-wrapper"><img src="https://avatars.githubusercontent.com/${e}" alt="${r}"/></div>
143
- <h1><a class="card-title" href="${o}" target="_blank" rel="noopener">${r}</a></h1>
144
- <div class="card-responsename"><a href="${o}" target="_blank" rel="noopener">@${e}</a></div>
145
- <p class="card-desc">${escapeHtml(t.bio??"")}</p>
146
- <div class="card-footer">
147
- <div class="footer-box">
148
- <div class="box-wrapper">
149
- <div class="count">${nFormatter(t.followers)}</div>
150
- <div class="box-text">Followers</div>
151
- </div>
152
- <div class="box-wrapper">
153
- <div class="count">${nFormatter(t.following)}</div>
154
- <div class="box-text">Following</div>
155
- </div>
156
- <div class="box-wrapper">
157
- <div class="count">${nFormatter(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",myCard);
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.2",
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",
@@ -9,16 +9,17 @@
9
9
  "dist"
10
10
  ],
11
11
  "scripts": {
12
- "lint": "eslint .",
13
- "build": "rollup -c",
14
- "build-watch": "npm run build --watch",
15
- "prebuild": "del-cli dist && npm run lint",
12
+ "lint": "biome check .",
13
+ "format": "biome check --write .",
14
+ "build": "esbuild src/index.js --bundle --minify --format=esm --outfile=dist/index.js",
15
+ "build-watch": "npm run build -- --watch",
16
+ "prebuild": "npm run lint",
16
17
  "prepublishOnly": "npm run lint && npm run build",
17
18
  "postversion": "git push && git push --tags"
18
19
  },
19
20
  "repository": {
20
21
  "type": "git",
21
- "url": "git+https://github.com/RocktimSaikia/github-card.git"
22
+ "url": "git+https://github.com/rocktimsaikia/github-card.git"
22
23
  },
23
24
  "keywords": [
24
25
  "github",
@@ -33,15 +34,11 @@
33
34
  },
34
35
  "license": "MIT",
35
36
  "bugs": {
36
- "url": "https://github.com/RocktimSaikia/github-card/issues"
37
+ "url": "https://github.com/rocktimsaikia/github-card/issues"
37
38
  },
38
- "homepage": "https://github.com/RocktimSaikia/github-card#readme",
39
+ "homepage": "https://github.com/rocktimsaikia/github-card#readme",
39
40
  "devDependencies": {
40
- "del-cli": "^3.0.1",
41
- "eslint": "^7.24.0",
42
- "eslint-config-airbnb-base": "14.2.1",
43
- "eslint-plugin-import": "2.22.1",
44
- "rollup": "^2.45.2",
45
- "rollup-plugin-uglify": "^6.0.4"
41
+ "@biomejs/biome": "2.4.15",
42
+ "esbuild": "0.28.0"
46
43
  }
47
44
  }