JSFiddle - React, Tailwind, and code Playground

by zhning

HTML

<script src="http://besideriver.com/RiverJS/1.0.8/river.min.js"></script>
<div id="demo" scope="ajax">
     <h1>Latest River.js Commits</h1>

    <input type="radio" id="master" name="branch" checked value="master" jclick="changeToMaster">
    <label for="master">master</label>
    <br>
    <input type="radio" id="dev" name="branch" value="dev" jclick="changeToDev">
    <label for="dev">dev</label>
    <ul>
        <li repeat="commit in commits" filter> <a href="{{html_url}}" target="_blank" class="commit">{{commit.sha}}</a>
- <span class="message">{{commit.commit.message}}</span>

            <br>by <span class="author">{{commit.commit.author.name}}</span>
at <span class="date">{{commit.commit.author.date}}</span>

        </li>
    </ul>
</div>

CSS

#demo {
    font-family:'Helvetica', Arial, sans-serif;
    font-size: 13px;
    padding-left: 15px;
}
a {
    text-decoration: none;
    color: #f66;
}
li {
    line-height: 1.5em;
    margin-bottom: 20px;
}
.author, .date {
    font-weight: bold;
}

JavaScript

define('ajax', function (exports, require, module) {
    var apiUrl = 'https://api.github.com/repos/zhang-ning/RiverJS/commits?per_page=3&sha=';

    function get(branch) {
        var xhr = new XMLHttpRequest()
        xhr.open('GET', apiUrl + branch)
        xhr.onload = function () {
            exports.commits = JSON.parse(xhr.responseText);
            exports.apply();
        }
        xhr.send()
    }

    exports.changeToMaster = function () {
        get('master');
    }
    exports.changeToDev = function () {
        get('dev');
    }
    get('master');
})

define('river.grammer.filter', function (exports, require, module) {
    exports = module.exports = function (str, scope, element) {

        var time = new Date(scope.commit.commit.author.date);

        element.querySelector('.date').innerHTML = time.toLocaleString();
        element.querySelector('a').innerHTML = scope.commit.sha.slice(0, 5);
    };
});