Hatena Bookmark Favorites List Widget for Dashing

README.md

Preview

Description

Displaying Hatena Bookmark Favorites List of user you specified.

Dependency

Nothing.

Installation

dashing install 0246e1156b391973cf8f

Configuration

Open hatebu_favs_tl.rb and edit user.

Usage

Add this to your dashboard layout file.

<li data-row="1" data-col="1" data-sizex="1" data-sizey="2">
  <div data-id="hatebu_favs_tl" data-view="HatebuFavsTl" data-title="Hatebu Favs TL"></div>
</li>

hatebu_favs_tl.coffee

class Dashing.HatebuFavsTl extends Dashing.Widget

hatebu_favs_tl.html

<div class="header">
  <i class="icon icon-bookmark"></i>
  <h1 class="title" data-bind="title"></h1>
</div>

<li class="content-area" data-foreach-item="items">
  <div class="bookmark-container">
    <p class="ago" data-bind="item.ago"></p>
    <div class="bookmark-content">
      <img data-bind-src="item.favicon">
      <span class="target-page-title" data-bind="item.title"></span>
      <div class="gh-feed-message">
        <i data-bind="item.comment"></i>
        <img data-bind-src="item.icon_url">
        (id: <span data-bind="item.user"></span>)
      </div>
    </div>
    <div class="clear"></div>
  </div>
</li>

hatebu_favs_tl.rb

# encoding: utf-8

require 'rss'

# Specify user name you want to display Hatena Bookmark favorites bookmarks.
user = '<HATENA_USER_ID>'
# Specify the limit size of the list to be displayed.
limit_size = 5

class HatebuFavsRss
  def initialize(user)
    @user = user
  end

  def items
    items = RSS::Parser.parse("http://b.hatena.ne.jp/#{@user}/favorite.rss?date=#{Time.now.to_i}").items
  end
end

class Bookmark
  def initialize(bookmark)
    @bookmark = bookmark
  end

  def user
    @bookmark.about =~ /b\.hatena\.ne\.jp\/([^\/]+)/
    $1
  end

  def icon
    @bookmark.content_encoded =~ /img src="([^"]+)" class="profile-image"/
    $1
  end

  def comment
    (@bookmark.description.nil? || @bookmark.description.empty?) ? '（no comments）' : @bookmark.description
  end

  def ago
    sec = (Time.now - @bookmark.dc_date).floor
    if sec < 3600
      sec = sec / 60
      "#{sec} minutes ago"
    elsif sec > 3600 && sec < 86400
      hour = sec / 60 / 60
      "#{hour} hours ago"
    else
      day = sec / 60 / 60 / 24
      "#{day} days ago"
    end
  end

  def target_favicon
    @bookmark.content_encoded =~ /img src="([^"]+)" alt=/
    $1
  end

  def target_title
    @bookmark.title
  end
end

SCHEDULER.every '5m', :first_in => 0 do
  rss = HatebuFavsRss.new(user)
  items = rss.items.map do |item|
    bookmark = Bookmark.new(item)
    {
      comment:  bookmark.comment,
      user:     bookmark.user,
      icon_url: bookmark.icon,
      ago:      bookmark.ago,
      title:    bookmark.target_title,
      favicon:  bookmark.target_favicon,
    }
  end

  send_event('hatebu_favs_tl', {items: items[0..limit_size-1]}) unless items.empty?
end

hatebu_favs_tl.scss

// ----------------------------------------------------------------------------
// Sass declarations
// ----------------------------------------------------------------------------
$background-color:  #008fde;
$title-color:       rgba(255, 255, 255, 0.7);

// ----------------------------------------------------------------------------
// Widget styles
// ----------------------------------------------------------------------------
.widget-hatebu-favs-tl {
  vertical-align: top !important;
  background-color: $background-color;

  .header {
    .title {
      color: $title-color;
    }
    .name {
      padding-left: 5px;
    }
  }

  .bookmark-container {
    padding-bottom: 12px;
    font-size: 13px;

    .ago {
      text-align: left;
      color: #e5e5e5;
      font-size: 12px;
      margin: 2px;
    }

    .bookmark-content {
      padding-left: 10px;
      float: left;
      vertical-align: top;
      text-align: left;
      color: #e5e5e5;

      .target-page-title {
        margin: 0 0 2px 0;
        color: #FFFFFF;
        font-size: 15px;
      }
    }

    .clear {
      clear:both;
    }

  }

  .icon.icon-bookmark {
    font-size: 48px;
    height: 48px;
    width: 54px;
  }

}