@rocktimsaikia/github-card 3.0.1 → 3.0.3

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 (5) hide show
  1. package/{license → LICENSE} +1 -1
  2. package/README.md +66 -0
  3. package/dist/index.js +18 -16
  4. package/package.json +11 -14
  5. package/readme.md +0 -54
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 ADDED
@@ -0,0 +1,66 @@
1
+ <div>
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>
5
+ <p align="center">
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
+ <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
+ </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>
10
+ </div>
11
+
12
+
13
+ ## Highlights
14
+
15
+ - Tiny and zero-dependency (`~4kb`)
16
+ - Minimal and neat design
17
+ - Dark theme available
18
+
19
+ ## Installation
20
+
21
+ ```sh
22
+ npm install @rocktimsaikia/github-card
23
+ ```
24
+ or with `yarn`
25
+ ```sh
26
+ yarn add @rocktimsaikia/github-card
27
+ ```
28
+
29
+ ## Usage
30
+
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
+
35
+ ```js
36
+ import '@rocktimsaikia/github-card'
37
+ ```
38
+
39
+ Then use the element anywhere in your HTML:
40
+
41
+ ```html
42
+ <github-card data-user="rocktimsaikia"></github-card>
43
+ ```
44
+
45
+ Or skip the install and load it straight from a CDN in an HTML file:
46
+
47
+ ```html
48
+ <script type="module" src="https://unpkg.com/@rocktimsaikia/github-card@3.0.3"></script>
49
+ ```
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
+
58
+ ## Theme
59
+
60
+ ```html
61
+ <github-card data-user="rocktimsaikia" data-theme="dark"></github-card>
62
+ ```
63
+
64
+ ## License
65
+
66
+ 2026 © MIT [Rocktim Saikia](https://rocktimcodes.site)
package/dist/index.js CHANGED
@@ -1,4 +1,4 @@
1
- const widgetStyle=`
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
2
  h1, div, p {
3
3
  margin: 0px;
4
4
  padding: 0px;
@@ -118,7 +118,7 @@ a{
118
118
  position: relative;
119
119
  }
120
120
  .card .card-footer .footer-box .box-wrapper .count {
121
- font-family: 'consolas'
121
+ font-family: 'consolas';
122
122
  color: #434343;
123
123
  font-size: 20px;
124
124
  font-weight: 600;
@@ -129,34 +129,36 @@ a{
129
129
  color: #00000085;
130
130
  letter-spacing: 0.5px;
131
131
  }
132
- `;function nFormatter(t){if(!(1e3<=t))return t;let o=t;let r=0;for(;1e3<=o;)o/=1e3,r+=1;return o=o.toPrecision(3),o+=["","K","M","B","T"][r],o}const template=document.createElement("template");template.innerHTML=`
132
+ `,s=g;var p=document.createElement("template");p.innerHTML=`
133
133
  <style>
134
- ${widgetStyle}
134
+ ${s}
135
135
  </style>
136
136
  <div class="card"></div>
137
- `;class myCard extends HTMLElement{constructor(){super(),this._shadowRoot=this.attachShadow({mode:"open"}),this._shadowRoot.append(template.content.cloneNode(!0))}get observedAttribute(){return["data-theme"]}attributeChangedCallback(t,o,r){"data-theme"===t&&o!==r&&""!==r&&(this[t]=r)}connectedCallback(){var t;this.fetchData(this.getAttribute("data-user")).then(t=>{t=this.createCard(t);this._shadowRoot.querySelector(".card").innerHTML=t}),this.getAttribute("data-theme")&&(t=this.getAttribute("data-theme"),this.setTheme(t))}setTheme(t){"dark"===t?this._shadowRoot.querySelector(".card").classList.add("dark"):this._shadowRoot.querySelector(".card").classList.remove("dark")}async fetchData(t){const o=await fetch(`https://api.github.com/users/${t}`,{method:"GET"});return await o.json()}createCard(t){return`
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
138
  <div class="cover"></div>
139
139
  <div class="card-wrapper">
140
- <a href="https://github.com/${t.login}" target="_blank" rel="noopener"><img id="github-logo" src="https://i.ibb.co/frv5pB3/github-logo.png" alt="github-logo" border="0"></a>
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
141
  <div class="card-header">
142
- <div class="card-img-wrapper"><img src="https://avatars.githubusercontent.com/${t.login}"/></div>
143
- <h1><a class="card-title" href="${t.html_url}" target="_blank" rel="noopener">${t.name}</a></h1>
144
- <div class="card-responsename"><a href="${t.html_url}" target="_blank" rel="noopener">@${t.login}</a></div>
145
- <p class="card-desc">${t.bio??""}</p>
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
146
  <div class="card-footer">
147
147
  <div class="footer-box">
148
148
  <div class="box-wrapper">
149
- <div class="count">${nFormatter(t.followers)}</div>
149
+ <div class="count">${i(t.followers)}</div>
150
150
  <div class="box-text">Followers</div>
151
- </div>
151
+ </div>
152
152
  <div class="box-wrapper">
153
- <div class="count">${nFormatter(t.following)}</div>
153
+ <div class="count">${i(t.following)}</div>
154
154
  <div class="box-text">Following</div>
155
- </div>
155
+ </div>
156
156
  <div class="box-wrapper">
157
- <div class="count">${nFormatter(t.public_repos)}</div>
157
+ <div class="count">${i(t.public_repos)}</div>
158
158
  <div class="box-text">Repositories</div>
159
159
  </div>
160
160
  </div>
161
161
  </div>
162
- `}}customElements.define("github-card",myCard);
162
+ </div>
163
+ </div>
164
+ `}};customElements.define("github-card",c);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rocktimsaikia/github-card",
3
- "version": "3.0.1",
3
+ "version": "3.0.3",
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
  }
package/readme.md DELETED
@@ -1,54 +0,0 @@
1
- <div>
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>
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>
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
- </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>
10
- </div>
11
-
12
-
13
- ## Highlights
14
-
15
- - Tiny and Zero dependencies (`~4kb`)
16
- - Simple and easy to use
17
- - Minimal and neat design
18
- - Dark theme available
19
-
20
- ## Installation
21
- Available on [npm](https://www.npmjs.com/) as [**@rocktimsaikia/github-card**](https://www.npmjs.com/package/@rocktimsaikia/github-card).
22
-
23
- ```sh
24
- npm install @rocktimsaikia/github-card
25
- ```
26
- or with `yarn`
27
- ```sh
28
- yarn add @rocktimsaikia/github-card
29
- ```
30
-
31
- ## Usage
32
-
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.
34
-
35
- ```js
36
- import '@rocktimsaikia/github-card'
37
-
38
- <github-card data-user="rocktimsaikia"></github-card>
39
- ```
40
-
41
- Or use it as a script in a `html` file :
42
- ```html
43
- <script type="module" src="https://unpkg.com/@rocktimsaikia/github-card@latest?module"></script>
44
- ```
45
-
46
- ## Theme
47
- You can enable the optional dark theme by setting the `data-theme` attribute to `dark`
48
-
49
- ```html
50
- <github-card data-user="rocktimsaikia" data-theme="dark"></github-card>
51
- ```
52
- ## License
53
-
54
- 2021 © MIT [Rocktim Saikia](https://rocktimcodes.site)