@rocktimsaikia/github-card 3.0.2 → 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 (4) hide show
  1. package/{license → LICENSE} +1 -1
  2. package/README.md +25 -13
  3. package/dist/index.js +13 -13
  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
+ Here is a live <a href="https://codepen.io/RocktimSaikia/full/jObbBmR">codepen Demo</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://codepen.io/RocktimSaikia/full/jObbBmR"><img src="https://i.ibb.co/LdZZMdr/github-card.png"/></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,39 @@ 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@3.0.3"></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
+
52
64
  ## License
53
65
 
54
- 2021 © MIT [Rocktim Saikia](https://rocktimcodes.site)
66
+ 2026 © MIT [Rocktim Saikia](https://rocktimcodes.site)
package/dist/index.js CHANGED
@@ -1,4 +1,4 @@
1
- let 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;
@@ -129,36 +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 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=`
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))}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`
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/${e}" 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/${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>
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
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
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
162
  </div>
163
163
  </div>
164
- `}}customElements.define("github-card",myCard);
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.2",
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
  }