JSFiddle - React, Tailwind, and code Playground

by Renoir Boulanger

HTML

<script src="https://cdn.rawgit.com/yyx990803/vue/master/dist/vue.min.js"></script>
<section id="contributions">
  <h1>Latest WebPlatform Docs Contributions</h1>
  <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>
</section>

CSS

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/webplatform/docs/commits?per_page=20&sha='

var contributions = new Vue({

  el: '#contributions',

  data: {
    branches: ['master'],
    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()
    }
  }
})