Коммиты из GitHub репозитория

Для удобства пользователей сайта, имеющего свои репозитарии на GitHub полезно на самом сайте транслировать коммиты из GitHub. В этом примере показано получение последних коммитов для Vue.js, с помощью GitHub API, и отображение их в виде списка. Вы можете переключаться между ветками master и dev.

---

А вот так это реализовано. Для начала контейнер для отображения:

<div id="demo">
 <div style="padding:0px 5px 5px 35px;">
 <template v-for="branch in branches">
 <input type="radio"
 :id="branch"
 :value="branch"
 name="branch"
 v-model="currentBranch">
 <label :for="branch">{{ branch }}</label>
 </template>
</div>

А теперь подключаем vue.js:

 <script type="text/javascript" src="https://unpkg.com/vue@2.1.10/dist/vue.js"></script>

И скрипт:

<script>var apiURL = 'https://api.github.com/repos/upbyte/svg/commits?per_page=5&sha='

var demo = new Vue({
 el: '#demo',
 data: {
 branches: ['master', 'dev'],
 currentBranch: 'master',
 commits: null
 },

 created: function () {
 this.fetchData()
 },

 watch: {
 currentBranch: 'fetchData'
 },

 filters: {
 truncate: function (v) {
 var newline = v.indexOf('&#92;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)
 console.log(self.commits[0].html_url)
 }
 xhr.send()
 }
 }
})</script>