Inlets With Titles/DateTime

_.md

[ Launch: Tributary Inlets With Titles ] 4617437 by georules
[ Launch: Tributary Inlets With Titles ] 4569668 by enjalot
[ Launch: Tributary Inlets ] 4562326 by poezn
[ Launch: Tributary Inlets ] 4561783 by enjalot
[ Launch: Tributary Inlets ] 4561743 by enjalot
[ Launch: Tributary Inlets ] 4549657 by enjalot
[ Launch: An inlet to Tributary ] 4545400 by enjalot

config.json

{"description":"Inlets With Titles/DateTime","endpoint":"","display":"html","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"tab":"edit","display_percent":0.6150630391506304,"hidepanel":false}

inlet.js

var display = d3.select("#display")
.style("overflow", "scroll");

var users_url = '/api/users';
var created_url = '/api/latest/created'

//grab the users
if(!tributary.users) {
   d3.json(users_url, function(err, res) {
     tributary.users = {};
     res.forEach(function(u) { 
       tributary.users[u.login] = u;
     })
     render();
  })
}


display.append("input")
.attr({
  id: "fetch",
  type: "button",
  value: "fetch"
})
.on("click", function() {
  d3.json(created_url, function(err, res) {
    tributary.inlets = res;
    render();
  })
})


function render() {
  if(!tributary.inlets) return;
  
  var inlets = display.selectAll("div.inlet")
  	.data(tributary.inlets)
  .enter()
  .append("div")
  .classed("inlet", true);
  
  inlets.append("a")
  .text(function(d) { return d.description })
  .attr({
    href: function(d) { return "/inlet/" + d.gistid },
    target: "_blank"
  })
  inlets.append("br")
  

  var user_inlets = inlets.filter(function(d) {
    return d.user
  })
  
    user_inlets.append("img")
  .attr({
    src: function(d) { 
      if(tributary.users)
        return tributary.users[d.user.login].avatar_url;
    },
    width: 25,
    height: 25
  })
    
  user_inlets.append("span")
    .classed("login", true)
    .text(function(d) { 
      date = new Date(d.createdAt);
      return " by " + d.user.login + " on " + date.toLocaleString()
    });
  

  
  user_inlets.append("span")
  .text(function(d) { return ", visits: " + (d.visits || "?")})

  user_inlets.append("span")
  .text(function(d) { return ", forks: " + (d.nforks || 0)})

  
};
render();
if(!tributary.inlets || !tributary.inlets.length) {
   d3.json(created_url, function(err, res) {
    tributary.inlets = res;
    render();
  })
}

style.css

#fetch {
  position:relative;
  margin-top: 20px;
  right: 40px;
  font-size:29px;
  float:right;
}

.inlet {
  margin-left: 10px;
  margin-top: 20px;
}

.inlet img {
  //margin-left: 10px;
  margin-top: 5px;
}