1
It's easy to add
Vue.js to XOOPS Blocks. How about creating a block showing latest XOOPS Core commits on GitHub? We can do it by modifying the existing code from Vue.js example "
GitHub Commits" We create a new XOOPS Custom Block in Admin and paste following code:
<div id="demo">
<h1>Latest XOOPS Commitsh1>
<template v-for="branch in branches">
<input type="radio"
:id="branch"
:value="branch"
name="branch"
v-model="currentBranch">
<label :for="branch">{{ branch }}label>
template>
<p>XOOPS/XoopsCore25@{{ currentBranch }}p>
<ul>
<li v-for="record in commits">
<a :href="record.html_url" target="_blank" class="commit">{{ record.sha.slice(0, 7) }}a>
- <span class="message">{{ record.commit.message | truncate }}span><br>
by <span class="author"><a :href="record.author.html_url" target="_blank">{{ record.commit.author.name }}a>span>
at <span class="date">{{ record.commit.author.date | formatDate }}span>
li>
ul>
div>
<style>
#demo {
font-family: 'Helvetica', Arial, sans-serif;
}
li {
line-height: 1.5em;
margin-bottom: 20px;
}
.author, .date {
font-weight: bold;
}
style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.4/vue.min.js">script>
<script>
var apiURL = 'https://api.github.com/repos/XOOPS/XoopsCore25/commits?per_page=3&sha='
/**
* Actual demo
*/
var demo = new Vue({
el: '#demo',
data: {
branches: ['master'],
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>
Save it as HTML, and we're done!
