I decided to create an elegant solution leveraging AngularJS's abililty to define new HTML elements (AngularJS calls these directives). I defined a new HTML element for displaying the number of stars in a GitHub repository:
It takes a single attribute named
repository. The above example specifies the repository for my ServerDate library.
AngularJS's magic transforms the
GitHubStars element into a link element which both points to the GitHub repository and shows the current star count, like this:
ServerDate has a count of
But how does it count the current number of stars? It sends a query to GitHub's API:
Content-Type header of
text/plain, not the
Content-type header to our gist.
Now all of the star counts are updated in real time whenever the page is loaded. Go check it out: http://www.NodeGuy.com/test/