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) {