fix(data): add more info and minor styles

GeoDoo · Sep 8, 2020 · f2d5e04 · f2d5e04
1 parent 2cd8d36
commit f2d5e04
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -3,18 +3,32 @@
 [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)
 [![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)
 
+# \<github-profile-widget\>
+
 > A web component to show a profile widget for your Github account that can be easily embedded to your website.
 
 ## How to use
+
 ```html
 <github-profile-widget username="GeoDoo"></github-profile-widget>
 <script src="https://npmcdn.com/github-profile-widget@<version-you-want>/github-profile-widget.js"></script>
 ```
 
 or you can use npm or yarn:
+
 ```bash
 $ npm install --save github-profile-widget
+$ yarn install --save github-profile-widget
 ```
 
+## Contributing
+
+1. Fork it!
+2. Create your feature branch: `git checkout -b my-new-feature`
+3. Commit your changes: `git commit -m 'Add some feature'`
+4. Push to the branch: `git push origin my-new-feature`
+5. Submit a pull request
+
 ## License
-This work is licensed under the [GPL-3.0 License](LICENSE.md).
+
+This work is licensed under the [GPL-3.0 License](LICENSE.md).
diff --git a/github-profile-widget.js b/github-profile-widget.js
@@ -27,9 +27,20 @@
             <a href=${this.data.html_url}>
               <img src=${this.data.avatar_url} />
             </a>
-            <h3>${this.data.name}</h3>
+            <h2>${this.data.name}</h2>
             <p>${this.data.bio}</p>
-            <p>${this.data.company}</p>          
+            <p>${this.data.company}</p>        
+            <div>
+              <a class="button" href=https://github.com/${this.data.login}?tab=repositories>
+                Public repos: ${this.data.public_repos}
+              </a>
+              <a class="button" href=https://github.com/${this.data.login}?tab=followers>
+                Followers: ${this.data.followers}
+              </a>
+              <a class="button" href=https://github.com/${this.data.login}?tab=following>
+                Following: ${this.data.following}
+              </a>
+            </div>        
           </div>
           `;
         },
@@ -45,6 +56,18 @@
         text-align: center;
       }
       
+      .button {
+        display: inline-block;
+        margin: 8px;
+        text-decoration: none;
+        color: black;
+        font-weight: bold;
+      }
+
+      .button:hover {
+        color: #2ea44f;
+      }
+
       img {
         width: 100px;
         border-radius: 50%;