@rocktimsaikia/github-card 3.0.0 → 3.0.2

package/dist/index.js

@@ -1,4 +1,4 @@
-const widgetStyle=`
+let widgetStyle=`
 h1, div, p {
     margin: 0px;
     padding: 0px;
@@ -32,7 +32,8 @@ a{
     border-radius: 5px;
     box-shadow:  0 12px 13px rgba(0,0,0,0.16), 0 12px 13px rgba(0,0,0,0.16);
     text-align: center;
-    padding: 20px 30px;
+    padding: 20px 50px;
+    margin: 5px;
     padding-top: 5px;
     transition: all 0.5s;
 }
@@ -90,8 +91,8 @@ a{
 }
 .card .card-img-wrapper {
     position: relative;
-    height: 167px;
-    width: 171.74px;
+    height: 160px;
+    width: 160px;
     margin: 10px auto;
     margin-bottom: 20px;
 }
@@ -108,7 +109,6 @@ a{
     border-top: 2px solid #ff9b9b;
     box-shadow: 0 3px 6px -1px rgb(0 0 0 / 26%), 0 2px 4px -1px rgb(0 0 0 / 6%);
     border-radius: 5px;
-    width: 300px;
     margin: 0 auto;
     padding: 10px;
     display: flex;
@@ -118,7 +118,7 @@ a{
     position: relative;
 }
 .card .card-footer .footer-box .box-wrapper .count {
-    font-family: 'consolas'
+    font-family: 'consolas';
     color: #434343;
     font-size: 20px;
     font-weight: 600;
@@ -129,40 +129,36 @@ a{
     color: #00000085;
     letter-spacing: 0.5px;
 }
-
-@media(max-width:400px){
-    .card .card-footer .footer-box{
-        width: 100%;
-    }
-}
-`;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=`
+`;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=`
     <style>
         ${widgetStyle}
     </style>
     <div class="card"></div>
-`;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`
+`;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`
         <div class="cover"></div>
         <div class="card-wrapper">
-        <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>
+        <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>
         <div class="card-header">
-        <div class="card-img-wrapper"><img src="https://avatars.githubusercontent.com/${t.login}"/></div>
-        <h1><a class="card-title" href="${t.html_url}" target="_blank" rel="noopener">${t.name}</a></h1>
-        <div class="card-responsename"><a href="${t.html_url}" target="_blank" rel="noopener">@${t.login}</a></div>
-        <p class="card-desc">${t.bio??""}</p>
+        <div class="card-img-wrapper"><img src="https://avatars.githubusercontent.com/${e}" alt="${r}"/></div>
+        <h1><a class="card-title" href="${o}" target="_blank" rel="noopener">${r}</a></h1>
+        <div class="card-responsename"><a href="${o}" target="_blank" rel="noopener">@${e}</a></div>
+        <p class="card-desc">${escapeHtml(t.bio??"")}</p>
         <div class="card-footer">
         <div class="footer-box">
             <div class="box-wrapper">
                 <div class="count">${nFormatter(t.followers)}</div>
                 <div class="box-text">Followers</div>
-            </div>   
+            </div>
             <div class="box-wrapper">
                 <div class="count">${nFormatter(t.following)}</div>
                 <div class="box-text">Following</div>
-            </div>  
+            </div>
             <div class="box-wrapper">
                 <div class="count">${nFormatter(t.public_repos)}</div>
                 <div class="box-text">Repositories</div>
             </div>
         </div>
         </div>
+        </div>
+        </div>
         `}}customElements.define("github-card",myCard);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@rocktimsaikia/github-card",
-	"version": "3.0.0",
+	"version": "3.0.2",
 	"description": "A minimal github card widget for your portfolio.",
 	"main": "dist/index.js",
 	"type": "module",
@@ -11,6 +11,7 @@
 	"scripts": {
 		"lint": "eslint .",
 		"build": "rollup -c",
+		"build-watch": "npm run build --watch",
 		"prebuild": "del-cli dist && npm run lint",
 		"prepublishOnly": "npm run lint && npm run build",
 		"postversion": "git push && git push --tags"