docs: add badges

Author: lokesh-coder

docs/app/app.component.html

@@ -12,27 +12,39 @@
           </p>
         </div>
         <div class="badges d-flex align-items-center my-3 justify-content-center">
+          <!-- <div class="badge"><img src="https://badgen.net/badge/Angular/7.x/1b95e0" alt="" /></div> -->
           <div class="badge">
-            <a
-              class="github-button"
-              href="https://github.com/lokesh-coder/toppy"
-              data-show-count="true"
-              aria-label="Star lokesh-coder/toppy on GitHub"
-              >Star</a
-            >
+            <img
+              src="https://img.shields.io/npm/v/toppy.svg?style=popout-square&colorA=00bcd4&colorB=7d61af&label=&logo=data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHJvbGU9ImltZyIgdmlld0JveD0iMCAwIDI0IDI0IiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiPjxwYXRoIGQ9Ik0wIDcuMzM0djhoNi42NjZ2MS4zMzJIMTJ2LTEuMzMyaDEydi04SDB6bTYuNjY2IDYuNjY0SDUuMzM0di00SDMuOTk5djRIMS4zMzVWOC42NjdoNS4zMzF2NS4zMzF6bTQgMHYxLjMzNkg4LjAwMVY4LjY2N2g1LjMzNHY1LjMzMmgtMi42Njl2LS4wMDF6bTEyLjAwMSAwaC0xLjMzdi00aC0xLjMzNnY0aC0xLjMzNXYtNGgtMS4zM3Y0aC0yLjY3MVY4LjY2N2g4LjAwMnY1LjMzMXoiIGZpbGw9IndoaXRlIi8+PHBhdGggZD0iTTEwLjY2NSAxMEgxMnYyLjY2N2gtMS4zMzVWMTB6IiBmaWxsPSJ3aGl0ZSIvPjwvc3ZnPg=="
+              alt=""
+            />
           </div>
           <div class="badge">
-            <a
-              href="https://twitter.com/share?ref_src=twsrc%5Etfw"
-              class="twitter-share-button"
-              data-text="Cute overlay library for Angular - tooltips, modals, toastr, menu, dropdowns, alerts, popovers, sidebar and more... "
-              data-url="https://lokesh-coder.github.io/toppy/"
-              data-via="lokesh-coder"
-              data-hashtags="angular"
-              data-show-count="false"
-              >Tweet</a
-            >
+            <img
+              src="https://img.shields.io/npm/dt/toppy.svg?style=flat-square&colorA=00bcd4&colorB=7d61af&logo=data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgY2xhc3M9ImZlYXRoZXIgZmVhdGhlci1kb3dubG9hZCI+PHBhdGggZD0iTTIxIDE1djRhMiAyIDAgMCAxLTIgMkg1YTIgMiAwIDAgMS0yLTJ2LTQiPjwvcGF0aD48cG9seWxpbmUgcG9pbnRzPSI3IDEwIDEyIDE1IDE3IDEwIj48L3BvbHlsaW5lPjxsaW5lIHgxPSIxMiIgeTE9IjE1IiB4Mj0iMTIiIHkyPSIzIj48L2xpbmU+PC9zdmc+&label="
+              alt=""
+            />
+          </div>
+          <div class="badge">
+            <img
+              src="https://img.shields.io/github/stars/lokesh-coder/toppy.svg?style=flat-square&colorA=00bcd4&colorB=7d61af&label=&logo=github&logoColor=fff"
+              alt=""
+            />
+          </div>
+          <div class="badge">
+            <img
+              src="https://img.shields.io/codecov/c/github/lokesh-coder/toppy/master.svg?style=flat-square&colorA=00bcd4&colorB=7d61af&label=&logo=codecov&logoColor=fff"
+              alt=""
+            />
+          </div>
+          <div class="badge">
+            <img
+              src="https://img.shields.io/badge/share-tweet-aaa.svg?style=flat-square&colorA=00bcd4&colorB=7d61af&label=&logo=twitter&logoColor=fff"
+              (click)="tweet($event)"
+              alt=""
+            />
           </div>
+
           <!--
             <div class="badge">
               <select

docs/app/app.component.ts

@@ -71,4 +71,21 @@ export class AppComponent {
         }
       });
   }
+
+  tweet(e) {
+    const getWindowOptions = function() {
+      const width = 500;
+      const height = 350;
+      const left = window.innerWidth / 2 - width / 2;
+      const top = window.innerHeight / 2 - height / 2;
+
+      return ['resizable,scrollbars,status', 'height=' + height, 'width=' + width, 'left=' + left, 'top=' + top].join();
+    };
+    // const text = encodeURIComponent('Hey everyone, come & see how good I look!');
+    const shareUrl = `https://twitter.com/intent/tweet?hashtags=angular&original_referer=http%3A%2F%2Flocalhost%3A4200%2F&ref_src=twsrc%5Etfw&text=Cute%20overlay%20library%20for%20Angular%20-%20tooltips%2C%20modals%2C%20toastr%2C%20menu%2C%20dropdowns%2C%20alerts%2C%20popovers%2C%20sidebar%20and%20more...%20&tw_p=tweetbutton&url=https%3A%2F%2Flokesh-coder.github.io%2Ftoppy%2F&via=lokesh-coder`;
+
+    e.preventDefault();
+    const win = window.open(shareUrl, 'ShareOnTwitter', getWindowOptions());
+    win.opener = null; // 2
+  }
 }