user page vanity edition

_.md

[ Launch: user page vanity edition ] 6970551 by jzgit
[ Launch: user page ] 5860371 by gelicia
[ Launch: testing params ] 5088240 by enjalot
[ Launch: testing params ] 5088156 by enjalot

config.json

{"description":"user page vanity edition","endpoint":"","display":"div","public":true,"require":[],"fileconfigs":{"inlet.js":{"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},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"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,"thumbnail":"http://i.imgur.com/rxbOTzD.png"}

inlet.js

var query = tributary.query;
var username = query.user || "zeffii";

var imgWidth = 32;
var imgHeight = 32;

var urlBase = "http://tributary.io"
var url = urlBase + "/api/user/" + username + "/latest?limit=200";

d3.json(url, function(err, inlets) {
  render(inlets);
});

var dateFormat = d3.time.format("%m.%d.%Y")

var display  = d3.select("#display");
display.append("div")
.classed("name", true)
.text(username);

function render(inlets) {
  
  display.append("div")
  .classed("count", true)
  .text(inlets.length + " inlets")
  //console.log(inlets);
  var divs = display.selectAll("div.inlet")
  .data(inlets)
  
  var enter = divs
  .enter()
  .append("div")
  .classed("inlet", true);
  
  //TODO: default image for when no thumbnail exists
  enter
  .filter(function(d, i) { return d.thumbnail && d.thumbnail !== null; })
  .append("img")
    .classed("image", true)
  .attr({
    src: function(d) { return d.thumbnail },
    width: imgWidth,
    height: imgHeight
  })

  enter
  .filter(function(d, i) { return (!d.thumbnail) || d.thumbnail === null; })
  .style("margin-left", (imgWidth + 10) + "px");
  
  enter.append("a")
  .classed("description", true)
  .attr({
    href: function(d) { return urlBase + "/inlet/" + d.gistid },
    target: "blank"
  })
  .text(function(d) { return d.description });
  
 var detailDiv = enter.append("div")
  .classed("details", true)
  
  detailDiv.append("span")
   .classed("stats", true)
  .text(function(d) { 
    return " Visits: " + (d.visits === undefined ? 0 : d.visits)
    + " Forks: " + (d.nforks === undefined ? 0 : d.nforks)
  })
  
   detailDiv.append("span")
  .classed("date", true)
  .text(function(d) { 
    var date = new Date(d.createdAt);
    return "  " + dateFormat(date)
  })
  
  
}

style.css

#display {
  overflow: scroll
}
.name {
  font-weight: 700;
  font-size: 24px;
}

.inlet {
}

.inlet .description {
}

.inlet .date {
  font-size: 10px;
}

.inlet img {
  margin: 5px;
}

.stats {
  font-size: 15px;
  font-weight: bold;
  margin-bottom:10px;
}

.image, .details{
  display:inline;
  vertical-align:middle;
}