JSFiddle - React, Tailwind, and code Playground

by oroce

HTML

<script src="http://underscorejs.org/underscore-min.js"></script>
<h1><a href="http://gruntjs.com/">Grunt</a> plugins published to Npm</h1>
<p>(published with keyword "gruntplugin")</p>
<div id="content">Loading&hellip;</div>

<script type="text/tmpl" id="list">
<table>
    <thead>
        <tr>
            <th>name</th>
            <th>version</th>
            <th>description</th>
            <th>author</th>
            <th>homepage</th>
        </tr>
    </thead>
    <tbody>
    <% _.each(rows, function(row, i) { %>
        <% var val = row.value; %>
        <% var ver = val['dist-tags'].latest; %>
        <tr>
            <td><%= i + 1 %></td>
            <td><a href="http://search.npmjs.org/#/<%= row.key %>"><%= row.key %></a></td>
            <td><%= ver %></td>
            <td><%= val.description %></td>
            <td><%= val.author.name %></td>
            <td>
                <% if (val.versions[ver].homepage) { %>
                    <a href="<%= val.versions[ver].homepage %>">homepage</a>
                <% } %>
            </td>
        </tr>
    <% }); %>
    </tbody>
</table>
</script>

CSS

h1 { margin: 0; }
td, th { padding: 0.2em; 0.4em; }
th { color: #fff; background: #777; }
tr:nth-child(even) { background: #eee; }

JavaScript

var renderRows = _.template($('#list').text());
    
var term = '"gruntplugin"';
$.getJSON('http://jsonpify.heroku.com/?callback=?', {
    resource: 'http://search.npmjs.org/_list/search/search?' +
        $.param({startkey: term, endkey: term})
}).done(function(data) {
    if (data.rows) {
        console.log(data.rows);
        $('#content').html(renderRows(data));
    }
});