octopressのsidebarにgithub repoとかcoderwallとか表示する

サイドバーのGitHub ReposがずっとStatus updating...だったのを直した。
github api v3じゃなくてv2を使ってたのが原因だったらしい。
作業としてはoctopress 2.1をマージしてrake updateした。

ついでにcoderwallのバッチを表示するようにした。
アイコンだけだとよくわからないのでgithub/jaz303/tipsyを使ってバッジの説明を表示するようにした。

# 以下にtipsyを配置
source/javascripts/jquery.tipsy.js
source/stylesheets/tipsy.css

• source/_includes/sidebars/sections/coderwall.html

{% if site.coderwall_user %}
<section class="well">
  <ul class="nav">
    <li class="nav-header">Coderwall Badges</li>
  </ul>
  <div id="coderwall_badges"></div>
  <a href="http://coderwall.com/{{site.coderwall_user}}">@{{site.coderwall_user}}</a> on coderwall
  <link rel="stylesheet" href="/stylesheets/tipsy.css" type="text/css" />
  <script type='text/javascript' src='/javascripts/jquery.tipsy.js'></script>
  <script type="text/javascript">
    $(document).ready(function(){
      $.getJSON("http://coderwall.com/{{site.coderwall_user}}.json?callback=?", function(data){
        for(var i = 0; i < data.data.badges.length ; i++){
          var badge = data.data.badges[i];
          var badge_tag = $("<img />");
          badge_tag.css("width", "25%");
          badge_tag.attr("src",badge.badge);
          badge_tag.attr("title", "<strong>" + badge.name + "</strong><br>" + badge.description);
          badge_tag.tipsy({gravity: 'se', html: true});
          $("#coderwall_badges").append(badge_tag);
        }
      });
    });
  </script>
</section>
{% endif %}

• source/_includes/sidebars/blog_index_default.html

<!--以下を追記-->
{% include sidebars/sections/coderwall.html %}

<!--
  page, postのデフォルトサイドバーは以下のファイルへ
  source/_includes/sidebars/page_default.html
  source/_includes/sidebars/post_default.html
-->

octopress 2.1からsource/_includes/asideじゃなくてsource/_includes/sidebarsを使うようになってて、最初ちょっと混乱した。

参考:

Octopress のサイドバーに Coderwall Badges を表示 - Yoshiori Blog
http://yoshiori.github.com/blog/2012/07/12/coderwall-badges/