var trend = require("github-trend-crawler");
var crawler = new trend.Crawler();
 
// Empty string means 'all languages'
window.onload=function(){
    crawler.fetchTrendRepos("", function(repos){
        var txt = "<div id='repo-list' class='ui segments'>";
        repos.forEach(function(repo){
            var link = repo.link
            txt += "<div class='repo-item ui raised segment'>" + "<a href=" + "'" + link + "'" + "><span style='font-weight: bold'>" +repo.name + "</span></a>" + "</div>";
        });
        txt += "</div>"
        document.getElementById('result').innerHTML = txt;
    }).catch(function(err){
        console.log(err.message);
    });
}; 

@@ -241,16 +241,28 @@
 'ui 
-segments
+relaxed divided list
 '%3E%22;
@@ -320,109 +320,171 @@
 var 
-link = repo.link%0A            txt += %22%3Cdiv class='repo-item ui raised segment'%3E%22 + %22%3Ca href=%22 +
+body = %22%3Cdiv class='repo-item item'%3E%3Ci class='large github middle aligned icon'%3E%3C/i%3E%3Cdiv class='content'%3E%3Ca class='header' href=%22;%0A            body += 
  %22'%22 + 
+repo.
 link
@@ -493,48 +493,36 @@
  %22'%22
- + %22%3E%3Cspan style='font-weight: bold'
+;%0A            body += %22
 %3E%22 +
+ 
 repo
@@ -536,28 +536,87 @@
  %22%3C/
-span%3E%3C/a%3E%22
+a%3E%3Cdiv class='description'%3E%22 + repo.desc +%22%3C/div%3E%22;%0A            body
  +
+=
  %22%3C/div%3E
 %22;%0A 
@@ -607,27 +607,58 @@
 y += %22%3C/div%3E
+%3C/div%3E
 %22;%0A
+            txt += body;%0A
         %7D);%0A
@@ -680,16 +680,17 @@
 %22%3C/div%3E%22
+;
 %0A       
@@ -719,14 +719,11 @@
 Id('
-result
+all
 ').i

Change dataflow ui