wrapping into a jquery plugin

Author: zenorocha

demo.html

@@ -30,8 +30,12 @@ <h1>Github Project Widget</h1>
     <img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png" alt="Fork me on GitHub">
   </a>
 
-  <script src="js/jquery.js"></script>
-  <script src="js/github.js"></script>
+  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
+  <script src="js/jquery.github.widget.js"></script>
+
+  <script>
+    $('.github-widget').githubWidget();
+  </script>
 
 </body>
 </html>

js/github.js

@@ -19,7 +19,7 @@
     // minified (especially when both are regularly referenced in your plugin).
 
     // Create the defaults once
-    var pluginName = 'defaultPluginName',
+    var pluginName = 'githubWidget',
         document = window.document,
         defaults = {
             propertyName: "value"
@@ -28,6 +28,8 @@
     // The actual plugin constructor
     function Plugin( element, options ) {
         this.element = element;
+        this.$container = $(element);
+        this.repo = this.$container.attr("data-repo");
 
         // jQuery has an extend method which merges the contents of two or
         // more objects, storing the result in the first object. The first object
@@ -42,9 +44,44 @@
     }
 
     Plugin.prototype.init = function () {
-        // Place initialization logic here
-        // You already have access to the DOM element and the options via the instance,
-        // e.g., this.element and this.options
+
+        var self = this;
+
+        $.ajax({
+          url: 'https://api.github.com/repos/' + this.repo,
+          dataType: 'jsonp',
+          success: function(results){
+
+            var repo = results.data;
+            var date = new Date(repo.pushed_at);
+            var pushed_at = date.getMonth() + '/' + date.getDate() + '/' + date.getFullYear();
+            var $widget = $(' \
+              <div class="github-box repo">  \
+                  <div class="github-box-title"> \
+                      <h3> \
+                          <a class="repo" href="' + repo.url.replace('api.','').replace('repos/','') + '">' + repo.name + '</a> \
+                      </h3> \
+                      <div class="github-stats"> \
+                          <a class="watchers" href="' + repo.url.replace('api.','').replace('repos/','') + '/watchers">' + repo.watchers + '</a> \
+                          <a class="forks" href="' + repo.url.replace('api.','').replace('repos/','') + '/forks">' + repo.forks + '</a> \
+                      </div> \
+                  </div> \
+                  <div class="github-box-content"> \
+                      <p class="description">' + repo.description + ' &mdash; <a href="' + repo.url.replace('api.','').replace('repos/','') + '#readme">Read More</a></p> \
+                      <p class="link"><a href="' + repo.homepage + '">' + repo.homepage + '</a></p> \
+                  </div> \
+                  <div class="github-box-download"> \
+                      <p class="updated">Latest commit to <strong>master</strong> on ' + pushed_at + '</p> \
+                      <a class="download" href="' + repo.url.replace('api.','').replace('repos/','') + '/zipball/master">Download as zip</a> \
+                  </div> \
+              </div> \
+            ');
+
+            $widget.appendTo(self.$container);
+
+          }
+
+        });
     };
 
     // A really lightweight plugin wrapper around the constructor,