From d23f0390ecb431c54df41b99e9afc688871453d5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=83=9D=E3=83=BC=E3=83=AB=20=E3=82=A6=E3=82=A7=E3=83=83?=
=?UTF-8?q?=E3=83=96?= <netopwibby@thenetwork.email>
Date: Fri, 28 Sep 2018 11:41:24 -0500
Subject: [PATCH] Improved GitHub feed
---
app/helpers/github.js | 185 +++++++++++++++++++++++-----
app/sass/partials/_github-feed.scss | 1 +
2 files changed, 158 insertions(+), 28 deletions(-)
diff --git a/app/helpers/github.js b/app/helpers/github.js
index da4f721..c978423 100644
--- a/app/helpers/github.js
+++ b/app/helpers/github.js
@@ -48,75 +48,197 @@ function generateEvent(event) {
switch (event.type) {
case "CommitCommentEvent":
return `
- <strong>${event.actor.display_login}</strong> commented on
- <a href="${generateUrl("comment", event)}" title="View this comment on GitHub">commit</a> in
+ <strong><a
+ href="${generateUrl("actor", event)}"
+ rel="noopener noreferrer"
+ target="_blank"
+ title="Visit ${event.actor.login}'s profile on GitHub"
+ >${event.actor.display_login}</a></strong> commented on
+
+ <a
+ href="${generateUrl("comment", event)}"
+ target="_blank"
+ title="View this comment on GitHub"
+ rel="noopener noreferrer"
+ >commit</a> in
`;
case "CreateEvent":
return `
- <strong>${event.actor.display_login}</strong> created
- ${event.payload.ref_type} <code>${event.payload.ref}</code> in
+ <strong><a
+ href="${generateUrl("actor", event)}"
+ rel="noopener noreferrer"
+ target="_blank"
+ title="Visit ${event.actor.login}'s profile on GitHub"
+ >${event.actor.display_login}</a></strong> created ${event.payload.ref_type}
+
+ <code><a
+ href="${generateUrl("create", event)}"
+ rel="noopener noreferrer"
+ target="_blank"
+ title="View this branch on GitHub"
+ >${refToBranch(event.payload.ref)}</a></code> in
`;
case "DeleteEvent":
return `
- <strong>${event.actor.display_login}</strong> deleted
+ <strong><a
+ href="${generateUrl("actor", event)}"
+ rel="noopener noreferrer"
+ target="_blank"
+ title="Visit ${event.actor.login}'s profile on GitHub"
+ >${event.actor.display_login}</a></strong> deleted
+
${event.payload.ref_type} <code>${event.payload.ref}</code> in
`;
case "ForkEvent":
return `
- <strong>${event.actor.display_login}</strong> forked
- <strong><a href="${generateUrl("repo", event)}" title="View this repo on GitHub" target="_blank" rel="noopener noreferrer">${event.repo.name}</a></strong> to
- <strong><a href="${generateUrl("forkee", event)}" title="View this repo fork on GitHub" target="_blank" rel="noopener noreferrer">${event.payload.forkee.name}</a></strong> in
+ <strong><a
+ href="${generateUrl("actor", event)}"
+ rel="noopener noreferrer"
+ target="_blank"
+ title="Visit ${event.actor.login}'s profile on GitHub"
+ >${event.actor.display_login}</a></strong> forked
+
+ <strong><a
+ href="${generateUrl("repo", event)}"
+ rel="noopener noreferrer"
+ target="_blank"
+ title="View this repo on GitHub"
+ >${event.repo.name}</a></strong> to
+
+ <strong><a
+ href="${generateUrl("forkee", event)}"
+ rel="noopener noreferrer"
+ target="_blank"
+ title="View this repo fork on GitHub"
+ >${event.payload.forkee.full_name}</a></strong>
`;
case "IssueCommentEvent":
if (event.payload.issue.pull_request) {
return `
- <strong>${event.actor.display_login}</strong> commented on pull request
- <em><a href="${generateUrl("issue", event)}" title="View this comment on GitHub" target="_blank" rel="noopener noreferrer">${event.payload.issue.title}</a></em> in
+ <strong><a
+ href="${generateUrl("actor", event)}"
+ rel="noopener noreferrer"
+ target="_blank"
+ title="Visit ${event.actor.login}'s profile on GitHub"
+ >${event.actor.display_login}</a></strong> commented on pull request
+
+ <em><a
+ href="${generateUrl("issue", event)}"
+ rel="noopener noreferrer"
+ target="_blank"
+ title="View this comment on GitHub"
+ >${event.payload.issue.title}</a></em> in
`;
} else {
return `
<strong>${event.actor.display_login}</strong> commented on issue
- <em><a href="${generateUrl("issue", event)}" title="View this comment on GitHub" target="_blank" rel="noopener noreferrer">${event.payload.issue.title}</a></em> in
+
+ <em><a
+ href="${generateUrl("issue", event)}"
+ rel="noopener noreferrer"
+ target="_blank"
+ title="View this comment on GitHub"
+ >${event.payload.issue.title}</a></em> in
`;
}
case "IssuesEvent":
return `
- <strong>${event.actor.display_login}</strong> ${event.payload.action} issue
- <em><a href="${generateUrl("issue", event)}" title="View this issue on GitHub" target="_blank" rel="noopener noreferrer">${event.payload.issue.title}</a></em> in
+ <strong><a
+ href="${generateUrl("actor", event)}"
+ rel="noopener noreferrer"
+ target="_blank"
+ title="Visit ${event.actor.login}'s profile on GitHub"
+ >${event.actor.display_login}</a></strong> ${event.payload.action} issue
+
+ <em><a
+ href="${generateUrl("issue", event)}"
+ rel="noopener noreferrer"
+ target="_blank"
+ title="View this issue on GitHub"
+ >${event.payload.issue.title}</a></em> in
`;
case "PullRequestEvent":
return `
- <strong>${event.actor.display_login}</strong> ${event.payload.action} pull request
- <em><a href="${generateUrl("pull_request", event)}" title="View this pull request on GitHub" target="_blank" rel="noopener noreferrer">${event.payload.pull_request.title}</a></em> in
+ <strong><a
+ href="${generateUrl("actor", event)}"
+ rel="noopener noreferrer"
+ target="_blank"
+ title="Visit ${event.actor.login}'s profile on GitHub"
+ >${event.actor.display_login}</a></strong> pull request
+
+ <em><a
+ href="${generateUrl("pull_request", event)}"
+ rel="noopener noreferrer"
+ target="_blank"
+ title="View this pull request on GitHub"
+ >${event.payload.pull_request.title}</a></em> in
`;
case "PullRequestReviewCommentEvent":
return `
- <strong>${event.actor.display_login}</strong> commented on pull request
- <em><a href="${generateUrl("pull_request", event)}" title="View this comment on GitHub" target="_blank" rel="noopener noreferrer">${event.payload.pull_request.title}</a></em> in
+ <strong><a
+ href="${generateUrl("actor", event)}"
+ rel="noopener noreferrer"
+ target="_blank"
+ title="Visit ${event.actor.login}'s profile on GitHub"
+ >${event.actor.display_login}</a></strong> commented on pull request
+
+ <em><a
+ href="${generateUrl("pull_request", event)}"
+ rel="noopener noreferrer"
+ target="_blank"
+ title="View this comment on GitHub"
+ >${event.payload.pull_request.title}</a></em> in
`;
case "PushEvent":
return `
- <strong>${event.actor.display_login}</strong> pushed to
- <code><a href="${generateUrl("push", event)}" title="View this branch on GitHub" target="_blank" rel="noopener noreferrer">${refToBranch(event.payload.ref)}</a></code> in
+ <strong><a
+ href="${generateUrl("actor", event)}"
+ rel="noopener noreferrer"
+ target="_blank"
+ title="Visit ${event.actor.login}'s profile on GitHub"
+ >${event.actor.display_login}</a></strong> pushed to
+
+ <code><a
+ href="${generateUrl("push", event)}"
+ rel="noopener noreferrer"
+ target="_blank"
+ title="View this branch on GitHub"
+ >${refToBranch(event.payload.ref)}</a></code> in
`;
case "ReleaseEvent":
return `
- <strong>${event.actor.display_login}</strong> released
- <em><a href="${generateUrl("release", event)}" title="View this release on GitHub" target="_blank" rel="noopener noreferrer">${event.payload.release.tag_name}</a></em> in
+ <strong><a
+ href="${generateUrl("actor", event)}"
+ rel="noopener noreferrer"
+ target="_blank"
+ title="Visit ${event.actor.login}'s profile on GitHub"
+ >${event.actor.display_login}</a></strong> released
+
+ <em><a
+ href="${generateUrl("release", event)}"
+ title="View this release on GitHub"
+ target="_blank"
+ rel="noopener noreferrer"
+ >${event.payload.release.tag_name}</a></em> in
`;
case "WatchEvent":
return `
- <strong>${event.actor.display_login}</strong> starred the repo
+ <strong><a
+ href="${generateUrl("actor", event)}"
+ rel="noopener noreferrer"
+ target="_blank"
+ title="Visit ${event.actor.login}'s profile on GitHub"
+ >${event.actor.display_login}</a></strong> starred the repo
`;
default:
@@ -135,15 +257,19 @@ function generateGitHubFeed(displayGitHubFeed) {
reply.forEach(item => events.push(JSON.parse(item)));
for (const event of events) {
+ const repoName = `
+ <a href="${generateUrl("repo", event)}" title="View this repo on GitHub" target="_blank" rel="noopener noreferrer"><strong>${event.repo.name}</strong></a>
+ `;
+
renderedEvents.push(`
<div class='github-feed__event'>
<a href="${generateUrl("actor", event)}" target="_blank" rel="noopener noreferrer">
- <img src="${event.actor.avatar_url}" class="github-feed__event__avatar" alt=""/>
+ <img src="${event.actor.avatar_url}" class="github-feed__event__avatar" alt="${event.actor.login}'s avatar"/>
</a>
<p>
${generateEvent(event)}
- <a href="${generateUrl("repo", event)}" title="View this repo on GitHub" target="_blank" rel="noopener noreferrer"><strong>${event.repo.name}</strong></a>
+ ${event.type !== "ForkEvent" ? repoName : ""}
<em class="github-feed__event__time">${relativeDate(new Date(event.created_at))}</em>
</p>
</div>
@@ -170,8 +296,8 @@ function generateUrl(type, event) {
case "comment":
return event.payload.comment.html_url;
- case "repo":
- return `https://github.com/${event.repo.name}`;
+ case "create":
+ return `https://github.com/${event.repo.name}/tree/${event.payload.ref}`;
case "forkee":
return `https://github.com/${event.payload.forkee.full_name}`;
@@ -182,11 +308,14 @@ function generateUrl(type, event) {
case "pull_request":
return event.payload.pull_request.html_url;
+ case "push":
+ return `https://github.com/${event.repo.name}/tree/${event.payload.ref.replace("refs/heads/", "")}`;
+
case "release":
return event.payload.release.html_url;
- case "push":
- return `https://github.com/${event.repo.name}/tree/${event.payload.ref.replace("refs/heads/", "")}`;
+ case "repo":
+ return `https://github.com/${event.repo.name}`;
default:
break;
diff --git a/app/sass/partials/_github-feed.scss b/app/sass/partials/_github-feed.scss
index 46d1dbd..1c6542a 100644
--- a/app/sass/partials/_github-feed.scss
+++ b/app/sass/partials/_github-feed.scss
@@ -95,6 +95,7 @@
}
.github-feed__event {
+ cursor: default;
line-height: 1.55;
@media (max-width: 700px) {