Stack Overflow user profile Dashing widget

README.md

Badge Overflow

An exceptionally handsome way to track your Stack Overflow badges.
Note: Badge Overflow now works with all Stack Exchange sites.

Created by Adam & Stephanie Sharp.

User Profile widget

A Dashing widget that displays a Stack Exchange user's profile, including avatar, name, reputation and number of badges the user has been awarded in each rank (bronze, silver, and gold). The avatar image and user's name are linked to the user's profile page for the specified Stack Exchange site.

Demo

You can view the demo dashboard at badgeoverflow.heroku.com. The code is available on GitHub.

Setup

1. Install the widget:

   $ dashing install 6484136
   

2. Add the gem badgeoverflow-core to your Gemfile:

   gem 'badgeoverflow-core', :git => "https://github.com/sharplet/badgeoverflow-core.git"

3. Create the file config/badgeoverflow.yml and set the user ID you want to track progress for:

   user_id: 1

   The default site is Stack Overflow. To use a different Stack Exchange site, put the API site parameter in badgeoverflow.yml, for example:

   user_id: 1
   site: serverfault

   A list of API site parameters for all Stack Exchange sites is available here.

4. Add the widget to your dashboard:

   <li data-row="2" data-col="3" data-sizex="2" data-sizey="1">
     <div data-id="user" data-view="User" data-title="User"></div>
   </li>

5. Optionally, add the font Cabin to dashboards/layout.erb:

   <link href='//fonts.googleapis.com/css?family=Cabin:400,500,600,700' rel='stylesheet' type='text/css'>

How it works

The widget talks to the Stack Exchange API via the badgeoverflow-core gem, which we wrote while developing the widget.

user.coffee

class Dashing.User extends Dashing.Widget

  ready: ->
    # This is fired when the widget is done being rendered

  onData: (data) ->
    # Handle incoming data
    # You can access the html node of this widget with `@node`
    # Example: $(@node).fadeOut().fadeIn() will make the node flash each time data comes in.

user.html

<div class="avatar">
  <a data-bind-href="link">
    <img data-bind-src="image" data-bind-width="width"/>
  </a>
</div>

<div class="profile">
  <a data-bind-href="link">
    <h1 class="title" data-bind="name"></h1>
  </a>

  <h1 class="reputation" data-bind="reputation"></h1>

  <ul class="list-nostyle">
    <li data-foreach-badge_count="badge_counts">
      <span class="rank"><div data-bind-class="badge_count.rank"></div></span>
      <span class="label" data-bind="badge_count.count"></span>
    </li>
  </ul>
</div>

<p class="updated-at" data-bind="updatedAtMessage"></p>

user.rb

require 'badgeoverflow/core'

service = StackExchangeService.new
user_id = BadgeOverflowConfig.user_id
avatar_size = 230

SCHEDULER.every '1h', :first_in => 0 do |job|
  service.fetch 'users', ids: user_id do |users|
    user = users.first

    profile_image = user['profile_image']
    if profile_image.include? 'gravatar.com'
      profile_image << "&size=#{avatar_size}"
    end

    badge_counts = user['badge_counts'].map { |r,c| { rank: r, count: c } }
    badge_counts.reverse!

    send_event 'user', {
      name: user['display_name'],
      link: user['link'],
      reputation: user['reputation'].with_suffix,
      badge_counts: badge_counts,
      image: profile_image,
      width: avatar_size
    }
  end
end

user.scss

// ----------------------------------------------------------------------------
// Sass declarations
// ----------------------------------------------------------------------------
$background-color: #fff;
$foreground-color: #808080;

// ----------------------------------------------------------------------------
// Widget-image styles
// ----------------------------------------------------------------------------
.widget-user {

  background-color: $background-color;
  color: $foreground-color;
  font-family: "Cabin", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;

  .avatar {
    float: left;
    margin-left: 30px;

    img {
      -webkit-border-radius: 50em;
      -moz-border-radius: 50em;
      border-radius: 50em;
    }
  }

  .profile {
    float: right;
    width: 310px;

    h1 {
      font-weight: 500;
    }

    .reputation {
      font-size: 3.2em;
      font-weight: 500;
      padding-top: 30px;
      padding-bottom: 34px;
    }

    ul {
      font-weight: 700;

      li:not(:last-child) {
        margin-right: 26px;
      }

      li {
        display: inline-block;

        .rank div {
          display: inline-block;
          margin-top: 1px;
          margin-right: 6px;
          width: 20px;
          height: 20px;

          -webkit-border-radius: 50em;
          -moz-border-radius: 50em;
          border-radius: 50em;
        }

        .label {
          vertical-align: top;
        }

        .gold {
          background-color: #FEC337;
        }

        .silver {
          background-color: #B8B8B8;
        }

        .bronze {
          background-color: #BF8753;
        }
      }
    }

  }

  .updated-at {
    color: $foreground-color;
    opacity: 0.8;
  }

}

This is great, I only wish it could do other sites in the stack exchange network ( not just stack overflow)

Works well, thanks!

@spuder Now you can use this widget with other Stack Exchange sites. Just add the API site parameter in badgeoverflow.yml (see Step 3 above).