JSFiddle - React, Tailwind, and code Playground

by yyx990803

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.12.15/vue.min.js"></script>
<div id="demo">
  <h1>Latest Vue.js Commits</h1>
  <template v-repeat="b:branches">
    <input type="radio"
      name="branch"
      id="{{*b}}"
      value="{{*b}}"
      v-model="currentBranch">
    <label for="{{*b}}">{{*b}}</label>
  </template>
  <p>yyx990803/vue@{{currentBranch}}</p>
  <ul>
    <li v-repeat="commits">
      <a href="{{html_url}}" target="_blank" class="commit">{{sha.slice(0, 7)}}</a>
      - <span class="message">{{commit.message | truncate}}</span><br>
      by <span class="author">{{commit.author.name}}</span>
      at <span class="date">{{commit.author.date | formatDate}}</span>
    </li>
  </ul>
</div>

CSS

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

JavaScript

var apiURL = 'https://api.github.com/repos/yyx990803/vue/commits?per_page=3&sha='

var demo = new Vue({

  el: '#demo',

  data: {
    branches: ['master', 'dev'],
    currentBranch: 'master',
    commits: null
  },

  created: function () {
    this.fetchData()
    this.$watch('currentBranch', function () {
      this.fetchData()
    })
  },

  filters: {
    truncate: function (v) {
      var newline = v.indexOf('\n')
      return newline > 0 ? v.slice(0, newline) : v
    },
    formatDate: function (v) {
      return v.replace(/T|Z/g, ' ')
    }
  },

  methods: {
    fetchData: function () {
      var xhr = new XMLHttpRequest()
      var self = this
      xhr.open('GET', apiURL + self.currentBranch)
      xhr.onload = function () {
        self.commits = JSON.parse(xhr.responseText)
      }
      xhr.send()
    }
  }
})