FEATURE: Improve github commit, PR and issue rendering

FEATURE: Improve github commit, PR and issue rendering

Avatars are reduced in size significantly, and icons are added to easily differentiate PRs and commits. The ‘Issue:’ prefix is removed from issue oneboxes, to make them consistent with commits and PRs.

diff --git a/lib/onebox/engine/github_issue_onebox.rb b/lib/onebox/engine/github_issue_onebox.rb
index 0aaed86..58146af 100644
--- a/lib/onebox/engine/github_issue_onebox.rb
+++ b/lib/onebox/engine/github_issue_onebox.rb
@@ -34,7 +34,7 @@ module Onebox
         ulink = URI(link)
         {
           link: @url,
-          title: "Issue: " + @raw["title"],
+          title: @raw["title"],
           content: short_content.gsub("<br>", "\n"),
           labels: @raw["labels"],
           user: @raw['user'],
diff --git a/templates/githubcommit.mustache b/templates/githubcommit.mustache
index 3a61bc8..f48a5dd 100644
--- a/templates/githubcommit.mustache
+++ b/templates/githubcommit.mustache
@@ -1,10 +1,11 @@
-{{#author.avatar_url}}
-  <a href="{{author.html_url}}" target="_blank">
-    <img alt="{{author.login}}" src="{{author.avatar_url}}" class="thumbnail onebox-avatar" width="90" height="90">
-  </a>
-{{/author.avatar_url}}
+<svg width="60" height="60" class="github-icon" viewBox="0 0 14 16" version="1.1" aria-hidden="true"><path fill-rule="evenodd" d="M10.86 7c-.45-1.72-2-3-3.86-3-1.86 0-3.41 1.28-3.86 3H0v2h3.14c.45 1.72 2 3 3.86 3 1.86 0 3.41-1.28 3.86-3H14V7h-3.14zM7 10.2c-1.22 0-2.2-.98-2.2-2.2 0-1.22.98-2.2 2.2-2.2 1.22 0 2.2.98 2.2 2.2 0 1.22-.98 2.2-2.2 2.2z"></path></svg>
 
 <h4>
+  {{#author.avatar_url}}
+    <a href="{{author.html_url}}" target="_blank">
+      <img alt="{{author.login}}" src="{{author.avatar_url}}" class="onebox-avatar-inline" width="20" height="20">
+    </a>
+  {{/author.avatar_url}}
   <a href="{{html_url}}" target="_blank">{{title}}</a>
 </h4>
 
@@ -13,7 +14,7 @@
 {{/message}}
 
 <div class="date">
-  by <a href="{{author.html_url}}" target="_blank">{{author.login}}</a>
+  commit by <a href="{{author.html_url}}" target="_blank">{{author.login}}</a>
   on <a href="{{html_url}}" target="_blank">{{commit_date}}</a>
 </div>
 
diff --git a/templates/githubissue.mustache b/templates/githubissue.mustache
index 32e50f5..d33a6c4 100644
--- a/templates/githubissue.mustache
+++ b/templates/githubissue.mustache
@@ -1,12 +1,15 @@
-<a href="{{user.html_url}}">
-<img src="{{avatar}}" class="thumbnail onebox-avatar">
-</a>
+<svg width="60" height="60" class="github-icon" viewBox="0 0 14 16" version="1.1" aria-hidden="true"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"></path></svg>
 
-<h4><a href="{{link}}" target="_blank">{{title}}</a></h4>
+<h4>
+  <a href="{{user.html_url}}">
+    <img src="{{avatar}}" class="onebox-avatar-inline" height="20" width="20">
+  </a>
+  <a href="{{link}}" target="_blank">{{title}}</a>
+</h4>
 
 <div class="date" style="margin-top:10px;">
 	<div class="user" style="margin-top:10px;">
-	opened by <a href="{{user.html_url}}" target="_blank">{{user.login}}</a>
+	issue opened by <a href="{{user.html_url}}" target="_blank">{{user.login}}</a>
 	on <a href="{{link}}" target="_blank">{{created_at}}</a>
 	</div>
 	<div class="user">
diff --git a/templates/githubpullrequest.mustache b/templates/githubpullrequest.mustache
index e57bd79..0f98ca4 100644
--- a/templates/githubpullrequest.mustache
+++ b/templates/githubpullrequest.mustache
@@ -1,15 +1,16 @@
-{{#user.avatar_url}}
-  <a href="{{user.html_url}}" target="_blank">
-    <img alt="{{user.login}}" src="{{user.avatar_url}}" class="thumbnail onebox-avatar" width="90" height="90">
-  </a>
-{{/user.avatar_url}}
+<svg width="60" height="60" class="github-icon" viewBox="0 0 12 16" version="1.1" aria-hidden="true"><path fill-rule="evenodd" d="M11 11.28V5c-.03-.78-.34-1.47-.94-2.06C9.46 2.35 8.78 2.03 8 2H7V0L4 3l3 3V4h1c.27.02.48.11.69.31.21.2.3.42.31.69v6.28A1.993 1.993 0 0 0 10 15a1.993 1.993 0 0 0 1-3.72zm-1 2.92c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zM4 3c0-1.11-.89-2-2-2a1.993 1.993 0 0 0-1 3.72v6.56A1.993 1.993 0 0 0 2 15a1.993 1.993 0 0 0 1-3.72V4.72c.59-.34 1-.98 1-1.72zm-.8 10c0 .66-.55 1.2-1.2 1.2-.65 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2zM2 4.2C1.34 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z"></path></svg>
 
 <h4>
+  {{#user.avatar_url}}
+    <a href="{{user.html_url}}" target="_blank">
+      <img alt="{{user.login}}" src="{{user.avatar_url}}" class="onebox-avatar-inline" width="20" height="20">
+    </a>
+  {{/user.avatar_url}}
   <a href="{{html_url}}" target="_blank">{{title}}</a>
 </h4>
 
 <div class="date">
-  by <a href="{{user.html_url}}" target="_blank">{{user.login}}</a>
+  pull request by <a href="{{user.html_url}}" target="_blank">{{user.login}}</a>
   on <a href="{{html_url}}" target="_blank">{{created_at}}</a>
 </div>

GitHub sha: 0a1d2698

1 Like