add pinboard activity

3 files changed, 116 insertions, 17 deletions

diff --git a/root/static/pinboard_activity.js b/root/static/pinboard_activity.js
new file mode 100644
index 0000000..0afee78
--- /dev/null
+++ b/root/static/pinboard_activity.js
@@ -0,0 +1,76 @@
+/**
+ * Pinboard recent bookmarks feed. Modified from:
+ * Github activity feed.
+ *
+ * Graeme Sutherland, July 2012.
+ *
+ * Uses .json activity from github to show public commits.
+ * Requires jQuery and underscore.js
+ *
+ */
+
+var PinboardActivity = (function($, _) {
+
+    // {"u":"http://www.h-online.com/developer/news/item/SubGit-1-0-stress-free-Subversion-to-Git-migration-1717931.html","d":"SubGit 1.0: \"stress-free\" Subversion to Git migration - The H Developer: News and Features","n":"RT @_doherty: This could be fun at work:  #git #svn","dt":"2012-09-28T23:48:20Z","a":"doy","t":["git","svn"]}
+    var
+        self = {},
+        default_template = '<li class="action"> \
+            <a class="pin-title" href="<%= u %>"><%= d %></a> \
+            <% if (n) { %> \
+                <br /> \
+                <%= n %> \
+            <% } %> \
+            <% if (t.length > 1 || (t.length == 1 && t[0] != "")) { %> \
+                <br /> tags: \
+                <% _.each(t, function (item) { %> \
+                    <a class="pin-tag" href="https://pinboard.in/u:<%= a %>/t:<%= item %>"><%= item %></a> \
+                <% }); %> \
+            <% } %> \
+        </li>';
+
+    /**
+     * Fill in activity into selector from public events for username,
+     * with optional template selector tmpl_selector.
+     */
+    self.show_activity = function (username, selector, tmpl_selector) {
+        var
+            url = 'https://feeds.pinboard.in/json/v1/u:' + username + '/?count=5&cb=?',
+            template = $(tmpl_selector).html() || default_template,
+            compiled = _.template(template),
+            current_date = '',
+            $current_list;
+
+        $.getJSON(url, {}, function (data) {
+            $.each(data, function(index, commit) {
+                var date = commit.dt.substring(0, 10);
+                if (date != current_date) {
+                    if (current_date) {
+                        var $new_item = $('<li class="date"></li>');
+                        $new_item.append('<h5>' + current_date + '</h5>');
+                        var $div = $('<div class="actions"></div>');
+                        $div.append($current_list);
+                        $new_item.append($div);
+                        $(selector).append($new_item);
+                    }
+
+                    $current_list = $('<ul></ul>');
+                    current_date = date;
+                }
+                var $action = $(compiled(commit));
+                if (index % 2) {
+                    $action.addClass('odd')
+                }
+                $current_list.append($action);
+            });
+            var $new_item = $('<li class="date"></li>');
+            $new_item.append('<h5>' + current_date + '</h5>');
+            var $div = $('<div class="actions"></div>');
+            $div.append($current_list);
+            $new_item.append($div);
+            $(selector).append($new_item);
+        });
+    };
+
+    return self;
+
+}(jQuery, _));
diff --git a/root/static/style.css b/root/static/style.css
index d6337e4..abdc0b8 100644
--- a/root/static/style.css
+++ b/root/static/style.css
@@ -114,7 +114,7 @@ a:visited {
     border-width : 1px;
 }
 
-.github {
+.sidebar {
     width : 250px;
     font-size : x-small;
     background-color : #8c8;
@@ -122,11 +122,10 @@ a:visited {
     border-width : 1px;
     padding : 8px;
     position : absolute;
-    left : -274px;
     margin-top : 8px;
 }
 
-.github h4 {
+.sidebar h4 {
     background-color : #58a;
     border           : 1px solid;
     margin           : 0px;
@@ -135,7 +134,7 @@ a:visited {
     text-align       : center;
 }
 
-.github h5 {
+.sidebar h5 {
     background-color : #58a;
     border           : 1px solid;
     margin           : 8px 16px;
@@ -144,47 +143,48 @@ a:visited {
     text-align       : center;
 }
 
-.github .actions {
+.sidebar .actions {
     border : 1px solid;
     float : left;
+    width : 100%;
 }
 
-.github ul {
+.sidebar ul {
     padding : 0px;
     list-style-type : none;
 }
 
-#github-activity {
+.sidebar-activity {
     padding : 0px;
     margin : 0px;
 }
 
-.github li {
+.sidebar li {
     float : left;
     width : 100%;
 }
 
-.github .action.odd {
+.sidebar .action.odd {
     background-color : #fff;
 }
 
-.github .action {
+.sidebar .action {
     background-color : #ddd;
     margin : 0px;
     padding : 4px;
     float : left;
 }
 
-.github .date ul {
+.sidebar .date ul {
     margin-right : 8px;
     clear : left;
 }
 
-.github dl {
+.sidebar dl {
     margin : 4px 0px;
 }
 
-.github dt {
+.sidebar dt {
     padding : 0px 8px;
     float : left;
     clear : left;
@@ -192,10 +192,27 @@ a:visited {
     width : 3em;
 }
 
-.github dd {
+.sidebar dd {
     float : left;
     padding : 0px;
     padding-left : 4px;
     margin : 0px;
     width : 176px;
 }
+
+.github {
+    left : -274px;
+}
+
+.pinboard {
+    left : 604px;
+}
+
+.pin-title {
+    text-decoration: none;
+    font-size: 1.2em;
+}
+
+.pin-tag {
+    font-size: 0.9em;
+}
diff --git a/root/template/index.tt b/root/template/index.tt
index 6ef85f6..712b35b 100644
--- a/root/template/index.tt
+++ b/root/template/index.tt
@@ -1,6 +1,10 @@
-<div class="github">
-<h4>my <a href="https://github.com/doy">github</a> activity</h2>
-<ul id="github-activity"></ul>
+<div class="github sidebar">
+<h4>my <a href="https://github.com/doy">github</a> activity</h4>
+<ul id="github-activity" class="sidebar-activity"></ul>
+</div>
+<div class="pinboard sidebar">
+<h4>my <a href="https://pinboard.in/u:doy">pinboard</a> links</h4>
+<ul id="pinboard-activity" class="sidebar-activity"></ul>
 </div>
 <h4>about me</h4>
 <p>I am a programmer working for <a href="http://iinteractive.com">Infinity Interactive</a>, mostly doing web development in Perl.</p>
@@ -15,8 +19,10 @@
 <script src="jquery-1.8.2.min.js"></script>
 <script src="underscore-min.js"></script>
 <script src="github_activity.js"></script>
+<script src="pinboard_activity.js"></script>
 <script type="text/javascript" charset="utf-8">
     $(document).ready(function() {
         GithubActivity.show_activity('doy', '#github-activity');
+        PinboardActivity.show_activity('doy', '#pinboard-activity');
     });
 </script>