FEATURE: Redesigned GitHub oneboxes

FEATURE: Redesigned GitHub oneboxes

Commit, PR and Issue oneboxes are updated with a new design. This is designed to be styled using flexbox by consumers.

Timestamps are supplied in machine-readable formats in data- attributes, allowing for client-side localization.

diff --git a/lib/onebox/engine/github_commit_onebox.rb b/lib/onebox/engine/github_commit_onebox.rb
index 30bbf9f..9a7d4c4 100644
--- a/lib/onebox/engine/github_commit_onebox.rb
+++ b/lib/onebox/engine/github_commit_onebox.rb
@@ -42,7 +42,10 @@ module Onebox
         end
 
         ulink = URI(link)
-        result['commit_date'] = Time.parse(result['commit']['author']['date']).strftime("%I:%M%p - %d %b %y %Z")
+        committed_at = Time.parse(result['commit']['author']['date'])
+        result['committed_at'] = committed_at.strftime("%I:%M%p - %d %b %y %Z")
+        result['committed_at_date'] = committed_at.strftime("%F")
+        result['committed_at_time'] = committed_at.strftime("%T")
         result['domain'] = "#{ulink.host}/#{ulink.path.split('/')[1]}/#{ulink.path.split('/')[2]}"
         result
       end
diff --git a/lib/onebox/engine/github_issue_onebox.rb b/lib/onebox/engine/github_issue_onebox.rb
index 58146af..689a4d6 100644
--- a/lib/onebox/engine/github_issue_onebox.rb
+++ b/lib/onebox/engine/github_issue_onebox.rb
@@ -31,6 +31,9 @@ module Onebox
         short_content =  content_words[0..max_words].join(" ")
         short_content += "..." if content_words.length > max_words
 
+        created_at = Time.parse(@raw['created_at'])
+        closed_at = Time.parse(@raw['closed_at']) if @raw['closed_at']
+
         ulink = URI(link)
         {
           link: @url,
@@ -38,8 +41,12 @@ module Onebox
           content: short_content.gsub("<br>", "\n"),
           labels: @raw["labels"],
           user: @raw['user'],
-          created_at: @raw['created_at'].split("T")[0], #get only date for now
-          closed_at: (@raw['closed_at'].nil? ? "" : @raw['closed_at'].split("T")[0]),
+          created_at: created_at.strftime("%I:%M%p - %d %b %y %Z"),
+          created_at_date: created_at.strftime("%F"),
+          created_at_time: created_at.strftime("%T"),
+          closed_at: closed_at&.strftime("%I:%M%p - %d %b %y %Z"),
+          closed_at_date: closed_at&.strftime("%F"),
+          closed_at_time: closed_at&.strftime("%T"),
           closed_by: @raw['closed_by'],
           avatar: "https://avatars1.githubusercontent.com/u/#{@raw['user']['id']}?v=2&s=96",
           domain: "#{ulink.host}/#{ulink.path.split('/')[1]}/#{ulink.path.split('/')[2]}",
diff --git a/lib/onebox/engine/github_pullrequest_onebox.rb b/lib/onebox/engine/github_pullrequest_onebox.rb
index 902e512..3fa1ab1 100644
--- a/lib/onebox/engine/github_pullrequest_onebox.rb
+++ b/lib/onebox/engine/github_pullrequest_onebox.rb
@@ -23,7 +23,12 @@ module Onebox
       def data
         result = raw.clone
         result['link'] = link
-        result['created_at'] = Time.parse(result['created_at']).strftime("%I:%M%p - %d %b %y %Z")
+        
+        created_at = Time.parse(result['created_at'])
+        result['created_at'] = created_at.strftime("%I:%M%p - %d %b %y %Z")
+        result['created_at_date'] = created_at.strftime("%F")
+        result['created_at_time'] = created_at.strftime("%T")
+
         ulink = URI(link)
         result['domain'] = "#{ulink.host}/#{ulink.path.split('/')[1]}/#{ulink.path.split('/')[2]}"
         result
diff --git a/lib/onebox/sanitize_config.rb b/lib/onebox/sanitize_config.rb
index 43cfb6f..9ff026a 100644
--- a/lib/onebox/sanitize_config.rb
+++ b/lib/onebox/sanitize_config.rb
@@ -17,7 +17,8 @@ class Sanitize
         'video' => %w[controls height loop width autoplay muted poster],
         'path' => %w[d],
         'svg' => ['aria-hidden', 'width', 'height', 'viewbox'],
-        'div' => [:data], # any data-* attributes
+        'div' => [:data], # any data-* attributes,
+        'span' => [:data], # any data-* attributes
       },
 
       add_attributes: {
diff --git a/templates/githubcommit.mustache b/templates/githubcommit.mustache
index f48a5dd..623e61b 100644
--- a/templates/githubcommit.mustache
+++ b/templates/githubcommit.mustache
@@ -1,25 +1,41 @@
-<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>
+<div class="github-row">
+  <div class="github-icon-container" title="Commit">
+    <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>
+  </div>
 
-<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>
+  <div class="github-info-container">
+    <h4>
+      <a href="{{html_url}}" target="_blank">{{title}}</a>
+    </h4>
 
-{{#message}}
-  <pre class="message" style="white-space: normal;">{{message}}</pre>
-{{/message}}
+    <div class="github-info">
+      <div class="date">
+        committed <span class="discourse-local-date" data-format='ll' data-date="{{committed_at_date}}" data-time="{{committed_at_time}}" data-timezone="UTC">{{committed_at}}</span>
+      </div>
 
-<div class="date">
-  commit by <a href="{{author.html_url}}" target="_blank">{{author.login}}</a>
-  on <a href="{{html_url}}" target="_blank">{{commit_date}}</a>
-</div>
+      <div class="user">
+        <a href="{{author.html_url}}" target="_blank">
+          <img alt="{{author.login}}" src="{{author.avatar_url}}" class="onebox-avatar-inline" width="20" height="20">
+          {{author.login}}
+        </a>
+        
+      </div>
 
-<div class="github-commit-stats">
-  changed <strong>{{files.length}} files</strong>
-  with <strong>{{stats.additions}} additions</strong>
-  and <strong>{{stats.deletions}} deletions</strong>.
+      <div class="lines" title="changed {{files.length}} files with {{stats.additions}} additions and {{stats.deletions}} deletions">
+        <a href="{{html_url}}/files" target="_blank">
+          <span class="added">+{{stats.additions}}</span>
+          <span class="removed">-{{stats.deletions}}</span>
+        </a>
+      </div>
+    </div>
+
+  </div>
 </div>
+
+
+{{#message}}
+  <div class="github-row">
+    <pre class="github-content" style="white-space: normal;">{{message}}</pre>
+  </div>
+{{/message}}
+
diff --git a/templates/githubissue.mustache b/templates/githubissue.mustache
index 10323e3..b155b3e 100644
--- a/templates/githubissue.mustache
+++ b/templates/githubissue.mustache
@@ -1,29 +1,40 @@
-<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>
+<div class="github-row">
+  <div class="github-icon-container" title="Issue">
+	  <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>
+  </div>
 
-<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="github-info-container">
+    <h4>
+      <a href="{{link}}" target="_blank">{{title}}</a>
+    </h4>
 
-<div class="date" style="margin-top:10px;">

[... diff too long, it was truncated ...]

GitHub sha: 8003a48e