Add share link to date

Author: liamdefty

assets/app.css

@@ -181,7 +181,11 @@
       flex-wrap: nowrap;
   -webkit-box-align: start;
       -ms-flex-align: start;
-          align-items: flex-start; }
+          align-items: flex-start;
+  text-decoration: none; }
+
+.liveblog-meta-time {
+  display: block; }
 
 .liveblog-meta-time span {
   display: block; }

assets/app.js

@@ -31,11 +31,18 @@
   color: #666;
 }
 
-.liveblog-meta-time {
+.entry-content .liveblog-meta-time {
   -ms-flex-preferred-size: 60px;
   flex-basis: 60px;
 }
 
+.entry-content .liveblog-meta-time,
+.entry-content .liveblog-meta-time:hover,
+.entry-content .liveblog-meta-time:focus {
+  -webkit-box-shadow: none;
+  box-shadow: none;
+}
+
 .liveblog-meta-time span {
   font-size: 10px;
   line-height: 12px;

assets/app.js.map

@@ -95,8 +95,9 @@ public function get_timestamp() {
 
 	public function for_json() {
 		$entry_id = $this->replaces ? $this->replaces : $this->get_id();
-		$avatar_size  = apply_filters( 'liveblog_entry_avatar_size', self::default_avatar_size );
-		$css_classes  = implode( ' ', get_comment_class( '', $entry_id, $this->comment->comment_post_ID ) );
+		$avatar_size = apply_filters( 'liveblog_entry_avatar_size', self::default_avatar_size );
+		$css_classes = implode( ' ', get_comment_class( '', $entry_id, $this->comment->comment_post_ID ) );
+		$share_link = get_permalink( $this->get_post_id() ) . '#' . $entry_id;
 		$entry = array(
 			'id'   			=> $entry_id,
 			'type' 			=> $this->get_type(),
@@ -108,6 +109,7 @@ public function for_json() {
 			'avatar_img' 	=> get_avatar( $this->comment->comment_author_email, $avatar_size ),
 			'author_link' 	=> get_comment_author_link( $entry_id ),
 			'entry_time' 	=> get_comment_date( 'U', $entry_id ),
+			'share_link'	=> $share_link,
 		);
 		$entry = apply_filters( 'liveblog_entry_for_json', $entry, $this );
 		return (object) $entry;

assets/theme.css

@@ -73,10 +73,10 @@ class EntryContainer extends Component {
         className={`liveblog-entry ${entry.key_event ? 'is-key-event' : ''} ${entry.css_classes}`}
       >
         <header className="liveblog-meta">
-          <div className="liveblog-meta-time">
+          <a className="liveblog-meta-time" href={entry.share_link} target="_blank">
             <span>{timeAgo(entry.entry_time)}</span>
             <span>{formattedTime(entry.entry_time)}</span>
-          </div>
+          </a>
           <div className="liveblog-meta-author">
             <div
               className="liveblog-meta-authour-avatar"

classes/class-wpcom-liveblog-entry.php

@@ -8,6 +8,11 @@
   display: flex;
   flex-wrap: nowrap;
   align-items: flex-start;
+  text-decoration: none;
+}
+
+.liveblog-meta-time {
+  display: block;
 }
 
 .liveblog-meta-time span {