334 lines
9.5 KiB
Vue
334 lines
9.5 KiB
Vue
<template>
|
||
<div id="github-feed" class="github-feed">
|
||
<h3>GitHub</h3>
|
||
<h5 class="last-updated" v-on:click="updateFeed">Last updated: {{ formatDate(lastUpdated) }}</h5>
|
||
|
||
<div v-for="event in events" class="github-feed__event">
|
||
<a v-bind:href="generateGithubUrl('actor', event)" target="_blank" rel="noopener noreferrer">
|
||
<img v-bind:src="event.actor.avatar_url" class="github-feed__event__avatar">
|
||
</a>
|
||
|
||
<p>
|
||
<template v-if="event.type == 'CommitCommentEvent'">
|
||
<strong>{{ event.actor.display_login }}</strong> commented on
|
||
<a v-bind:href="generateGithubUrl('comment', event)" title="View this comment on GitHub">commit</a> in
|
||
</template>
|
||
|
||
<template v-else-if="event.type == 'CreateEvent'">
|
||
<strong>{{ event.actor.display_login }}</strong> created
|
||
{{ event.payload.ref_type }} <code>{{ event.payload.ref }}</code> in
|
||
</template>
|
||
|
||
<template v-else-if="event.type == 'DeleteEvent'">
|
||
<strong>{{ event.actor.display_login }}</strong> deleted
|
||
{{ event.payload.ref_type }} <code>{{ event.payload.ref }}</code> in
|
||
</template>
|
||
|
||
<template v-else-if="event.type == 'ForkEvent'">
|
||
<strong>{{ event.actor.display_login }}</strong> forked
|
||
<strong><a v-bind:href="generateGithubUrl('repo', event)" title="View this repo on GitHub" target="_blank" rel="noopener noreferrer">{{ event.repo.name }}</a></strong> to
|
||
<strong><a v-bind:href="generateGithubUrl('forkee', event)" title="View this repo fork on GitHub" target="_blank" rel="noopener noreferrer">{{ event.payload.forkee.name }}</a></strong> in
|
||
</template>
|
||
|
||
<template v-else-if="event.type == 'IssueCommentEvent'">
|
||
<strong>{{ event.actor.display_login }}</strong> commented on
|
||
<template v-if="event.payload.issue.pull_request">pull request </template><template v-else>issue </template>
|
||
<em><a v-bind:href="generateGithubUrl('issue', event)" title="View this comment on GitHub" target="_blank" rel="noopener noreferrer">{{ event.payload.issue.title }}</a></em> in
|
||
</template>
|
||
|
||
<template v-else-if="event.type == 'IssuesEvent'">
|
||
<strong>{{ event.actor.display_login }}</strong> {{ event.payload.action }} issue
|
||
<em><a v-bind:href="generateGithubUrl('issue', event)" title="View this issue on GitHub" target="_blank" rel="noopener noreferrer">{{ event.payload.issue.title }}</a></em> in
|
||
</template>
|
||
|
||
<template v-else-if="event.type == 'PullRequestEvent'">
|
||
<strong>{{ event.actor.display_login }}</strong> {{ event.payload.action }} pull request
|
||
<em><a v-bind:href="generateGithubUrl('pull_request', event)" title="View this pull request on GitHub" target="_blank" rel="noopener noreferrer">{{ event.payload.pull_request.title }}</a></em> in
|
||
</template>
|
||
|
||
<template v-else-if="event.type == 'PullRequestReviewCommentEvent'">
|
||
<strong>{{ event.actor.display_login }}</strong> commented on pull request
|
||
<em><a v-bind:href="generateGithubUrl('pull_request', event)" title="View this comment on GitHub" target="_blank" rel="noopener noreferrer">{{ event.payload.pull_request.title }}</a></em> in
|
||
</template>
|
||
|
||
<template v-else-if="event.type == 'PushEvent'">
|
||
<strong>{{ event.actor.display_login }}</strong> pushed to
|
||
<code><a v-bind:href="generateGithubUrl('push', event)" title="View this branch on GitHub" target="_blank" rel="noopener noreferrer">{{ refToBranch(event.payload.ref) }}</a></code> in
|
||
</template>
|
||
|
||
<template v-else-if="event.type == 'ReleaseEvent'">
|
||
<strong>{{ event.actor.display_login }}</strong> released
|
||
<em><a v-bind:href="generateGithubUrl('release', event)" title="View this release on GitHub" target="_blank" rel="noopener noreferrer">{{ event.payload.release.tag_name }}</a></em> in
|
||
</template>
|
||
|
||
<template v-else-if="event.type == 'WatchEvent'">
|
||
<strong>{{ event.actor.display_login }}</strong> starred the repo
|
||
</template>
|
||
|
||
<a v-bind:href="generateGithubUrl('repo', event)" title="View this repo on GitHub" target="_blank" rel="noopener noreferrer"><strong>{{ event.repo.name }}</strong></a>
|
||
<em class="github-feed__event__time">{{ event.created_at | moment('from') }}</em>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data () {
|
||
return {
|
||
events: [],
|
||
updateInterval: {},
|
||
lastUpdated: new Date()
|
||
}
|
||
},
|
||
name: 'GithubFeed',
|
||
mounted () {
|
||
|
||
this.updateFeed();
|
||
|
||
this.updateInterval = setInterval(this.updateFeed, 60*1000);
|
||
|
||
},
|
||
methods: {
|
||
updateFeed () {
|
||
|
||
var component = this;
|
||
|
||
component.$http.get('https://lbry.tech/github-feed').then(function(response) {
|
||
component.events = response.body;
|
||
});
|
||
|
||
component.lastUpdated = new Date();
|
||
|
||
},
|
||
refToBranch (ref) {
|
||
|
||
return ref.replace('refs/heads/','');
|
||
|
||
},
|
||
formatDate (date) {
|
||
|
||
return date.toLocaleString('en-US');
|
||
|
||
},
|
||
generateGithubUrl (type, event) {
|
||
|
||
switch(type) {
|
||
case 'actor':
|
||
return 'https://github.com/' + event.actor.display_login;
|
||
break;
|
||
case 'comment':
|
||
return event.payload.comment.html_url;
|
||
break;
|
||
case 'repo':
|
||
return 'https://github.com/' + event.repo.name;
|
||
break;
|
||
case 'forkee':
|
||
return 'https://github.com/' + event.payload.forkee.full_name;
|
||
break;
|
||
case 'issue':
|
||
return event.payload.issue.html_url;
|
||
break;
|
||
case 'pull_request':
|
||
return event.payload.pull_request.html_url;
|
||
break;
|
||
case 'release':
|
||
return event.payload.release.html_url;
|
||
break;
|
||
case 'push':
|
||
return 'https://github.com/' + event.repo.name + '/tree/' + event.payload.ref.replace('refs/heads/','');
|
||
break;
|
||
|
||
}
|
||
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
@import "../scss/init/colors";
|
||
|
||
.github-feed {
|
||
border-bottom: 1px solid rgba($black, 0.05);
|
||
border-left: 1px solid rgba($black, 0.05);
|
||
font-size: 0.8rem;
|
||
grid-area: github;
|
||
position: relative;
|
||
|
||
@media (min-width: 1301px) {
|
||
padding-top: 3.7rem;
|
||
}
|
||
|
||
@media (min-width: 1001px) and (max-width: 1300px) {
|
||
padding-top: 2.95rem;
|
||
}
|
||
|
||
@media (min-width: 1001px) {
|
||
padding-bottom: 2rem;
|
||
padding-right: 10%;
|
||
padding-left: 2rem;
|
||
}
|
||
|
||
@media (max-width: 1000px) {
|
||
padding-top: 2rem;
|
||
padding-bottom: 2rem;
|
||
}
|
||
|
||
@media (min-width: 901px) {
|
||
padding-right: 1rem;
|
||
padding-left: 1rem;
|
||
}
|
||
|
||
@media (max-width: 900px) {
|
||
padding-right: 2rem;
|
||
padding-left: 2rem;
|
||
}
|
||
|
||
@media (max-width: 700px) {
|
||
overflow-x: auto;
|
||
overflow-y: hidden;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
h3, h5 {
|
||
@media (min-width: 1001px) {
|
||
text-align: center;
|
||
}
|
||
}
|
||
|
||
h3 {
|
||
letter-spacing: 0.1rem;
|
||
line-height: 1;
|
||
text-transform: uppercase;
|
||
width: 100%;
|
||
|
||
@media (min-width: 1301px) {
|
||
top: 2.15rem; left: 0;
|
||
|
||
color: rgba($black, 0.045);
|
||
font-size: 4rem;
|
||
position: absolute;
|
||
}
|
||
|
||
@media (max-width: 1300px) {
|
||
color: $black;
|
||
}
|
||
|
||
@media (min-width: 901px) and (max-width: 1300px) {
|
||
font-size: 3rem;
|
||
}
|
||
|
||
@media (max-width: 900px) {
|
||
font-size: 2rem;
|
||
margin-bottom: 1rem;
|
||
}
|
||
}
|
||
|
||
h5 {
|
||
font-style: italic;
|
||
font-weight: normal;
|
||
|
||
@media (min-width: 1001px) {
|
||
margin-bottom: 3rem;
|
||
}
|
||
|
||
@media (min-width: 901px) and (max-width: 1000px) {
|
||
margin-bottom: 2rem;
|
||
}
|
||
|
||
@media (max-width: 900px) {
|
||
margin-bottom: 0.5rem;
|
||
position: relative;
|
||
top: -1rem;
|
||
}
|
||
}
|
||
}
|
||
|
||
.github-feed__event {
|
||
line-height: 1.55;
|
||
|
||
@media (max-width: 700px) {
|
||
display: inline-block;
|
||
margin-right: 1.25rem;
|
||
vertical-align: top;
|
||
width: 200px;
|
||
}
|
||
|
||
&:not(:last-of-type) {
|
||
@media (min-width: 701px) {
|
||
margin-bottom: 1.25rem;
|
||
}
|
||
}
|
||
|
||
> a:first-of-type {
|
||
font-weight: 700;
|
||
margin-bottom: 0.5rem;
|
||
width: 100%;
|
||
}
|
||
|
||
> p:first-of-type {
|
||
@media (max-width: 700px) {
|
||
box-shadow: 0 2px 5px rgba($black, 0.025);
|
||
}
|
||
|
||
code {
|
||
background-color: $black;
|
||
border-radius: 3px;
|
||
color: $white;
|
||
font-size: 80%;
|
||
letter-spacing: 0.05rem;
|
||
padding: 0.2rem 0.5rem;
|
||
position: relative;
|
||
top: -1px;
|
||
}
|
||
|
||
em:not(.github-feed__event__time) {
|
||
text-decoration: underline;
|
||
}
|
||
|
||
@media (min-width: 701px) {
|
||
display: inline-block;
|
||
margin-left: 0.5rem;
|
||
vertical-align: top;
|
||
width: calc(100% - 4.5rem);
|
||
}
|
||
|
||
@media (max-width: 700px) {
|
||
top: -3.5rem; left: 5%;
|
||
|
||
background-color: $white;
|
||
border: 1px solid rgba($gray, 0.1);
|
||
border-radius: 3px;
|
||
padding: 1rem;
|
||
position: relative;
|
||
white-space: normal;
|
||
width: 90%;
|
||
}
|
||
}
|
||
}
|
||
|
||
.github-feed__event__avatar {
|
||
border: 1px solid rgba($gray, 0.1);
|
||
border-radius: 3px;
|
||
object-position: center;
|
||
object-fit: cover;
|
||
|
||
@media (min-width: 701px) {
|
||
width: 2.5rem; height: 2.5rem;
|
||
}
|
||
|
||
@media (max-width: 700px) {
|
||
width: 100%; height: 100%;
|
||
}
|
||
}
|
||
|
||
.github-feed__event__time {
|
||
color: $gray;
|
||
display: block;
|
||
|
||
@media (max-width: 700px) {
|
||
padding-top: 1rem;
|
||
}
|
||
}
|
||
</style>
|