Коммиты из GitHub репозитория
Для удобства пользователей сайта, имеющего свои репозитарии на GitHub полезно на самом сайте транслировать коммиты из GitHub. В этом примере показано получение последних коммитов для Vue.js, с помощью GitHub API, и отображение их в виде списка. Вы можете переключаться между ветками master и dev.
А вот так это реализовано. Для начала контейнер для отображения:
Репозитарий: upbyte/svg@{{ currentBranch }}
- {{ record.sha.slice(0, 7) }} - {{ record.commit.message | truncate }} ● автор: {{ record.commit.author.name }} | {{ record.commit.author.date | formatDate }}
А вот так это реализовано. Для начала контейнер для отображения:
<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('\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>