Look at the Size of My Footer

Back in October, I finally put in the effort to redesign RailsTips, but I had no intentions of stopping there. One of the comments I get a lot is that people don’t realize how much content is on this site as the home page doesn’t have pagination.

I added the smörgåsbord a link at the bottom of the home page to help address that, but I knew that was weak and just a stop gap. What I have wanted to do for a while was feature the most recent, the most popular and the best of RailsTips in the footer of every page. I also wanted to show the recent quick tips. I finally got around to doing this tonight.

New Helpful Footer

If you hop out of your feed reader, you’ll be greeted with a wonderfully functional footer, as pictured below.

Popular Articles with Mephisto/Mint Integration

The recent articles is a simple Mephisto filter and the best of is just a static list that I’ll update when needed. The cool parts of the footer are the popular articles and the quick links. The popular list actually pulls directly from the stats application that I use for RailsTips. It was surprisingly easy to integrate the PHP stats app with Mephisto by going directory to the database. I created a simple Mephisto plugin that looks like this:

module MephistoRailstips
  class Visit < ::ActiveRecord::Base
    set_table_name 'mint_visit'
    
    def self.popular(days, limit=15)
      seconds  = days * 24 * 60 * 60
      now      = (Time.now.utc - 5.hours).to_i
      timespan = now - seconds
      find( :all, 
            :select => 'resource, resource_title, COUNT(resource_checksum) as total',
            :conditions => ['dt > ? AND resource != ?', timespan, 'http://railstips.org/'], 
            :group => 'resource_checksum', 
            :order => 'total DESC, dt DESC',
            :limit => limit)
    end
    
    def to_liquid
      VisitDrop.new(self)
    end
  end
  
  class VisitDrop < BaseDrop
    liquid_attributes.push(*[:resource, :resource_title, :total])
    
    def title
      @source.resource_title.split('//')[0]
    end
    
    def href
      @source.resource
    end
  end
  
  module Filters
    def popular_articles(days, limit=15)
      MephistoRailstips::Visit.popular(days, limit)
    end
  end
end

Liquid::Template.register_filter MephistoRailstips::Filters

Nothing fancy, but that allows me to do something like this in the liquid template for the RailsTips layout:

<ul>
  {{ 7 | popular_articles:12 | assign_to:'popular_articles' }}
  {% for article in popular_articles %}
    <li>
      <a href="{{ article.href }}" title="Viewed {{ article.total }} times"><strong>{{ article.total }}:</strong> {{ article.title }}</a>
    </li>
  {% endfor %}
</ul>

Quick Links with Yahoo Pipes

The quick links I took a bit different approach for as well. I created a Yahoo Pipe for the Quick Links feed and used the JSON output of the pipe with a function callback to generate the list you see. I just add a script tag like this:

<script type="text/javascript" src="http://pipes.yahoo.com/pipes/pipe.run?_id=ZoBpbs_c3RG_NLlQpgt1Yg&_render=json&_callback=handleRecentTips"></script>

Note that the last part of the script’s src attribute is _callback. This query argument tells Yahoo to pass the JSON object they create of the feed as an object, to the function I created named handleRecentTips. The entire code to get the quick links to show up is below. I split out the HTML generation so I can reuse it for other feeds in the future.

function generateHtml(obj, limit) {
	var html = '<ul>';
	for (var i=0; i < obj.count; i++) {
    if (i > (limit-1)) { break; }
		var item  = obj.value.items[i];
		html += '<li><a href="' + item.link + '">' + item.title + '</a></li>';
	}
	html += '</ul>';
	return html;
}

function handleRecentTips(obj) {
	$('more_quick_links').update(generateHtml(obj, 12));
}

Yahoo Pipes makes it drop dead easy to share a feed on your site with no server side code needed. Very sweet!

Live Preview on Comments

Another thing that people mentioned wanting is some kind of preview on comments. I added some notes a while back mentioning that comments use textile and what to wrap code blocks with. Those notes have helped the formatting of comments and code in comments, but tonight I decided to go a step further and add live preview finally. Go ahead and try with the comment form below. You’ll get a live preview of your name, url (if provided, gravatar (if you have one) and the comment you are entering.

Hope these updates make RailsTips a bit more useful. Let me know if you have other ideas for things that would be helpful.