From 45f6ef8fd95b2c24a481938b09cfa7721a69a852 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?H=C3=A9ctor=20Ramos?=
 <165856+hramos@users.noreply.github.com>
Date: Mon, 25 Sep 2017 12:53:54 -0700
Subject: [PATCH] Blog enhancements (#80)

* Small CSS adjustments.

* Blog adjustments.

* Add support for Prism in the blog
---
 lib/core/BlogPost.js       | 12 ++++++++++++
 lib/core/BlogPostLayout.js | 35 +++++++++++++++++++++++++++++++++++
 lib/core/BlogSidebar.js    |  2 +-
 lib/core/CompLibrary.js    |  4 +++-
 lib/core/Site.js           | 15 +++++++++++++++
 lib/rename-version.js      |  0
 lib/static/css/main.css    | 14 ++++++++++++++
 7 files changed, 80 insertions(+), 2 deletions(-)
 mode change 100644 => 100755 lib/rename-version.js

diff --git a/lib/core/BlogPost.js b/lib/core/BlogPost.js
index 19ed673bdf..753123085a 100644
--- a/lib/core/BlogPost.js
+++ b/lib/core/BlogPost.js
@@ -55,6 +55,16 @@ class BlogPost extends React.Component {
           </a>
         </div>
       );
+    } else if (post.authorImage) {
+      return (
+        <div className="authorPhoto">
+          <a href={post.authorURL} target="_blank">
+            <img
+              src={post.authorImage}
+            />
+          </a>
+        </div>
+      );
     } else {
       return null;
     }
@@ -99,6 +109,8 @@ class BlogPost extends React.Component {
           <a href={post.authorURL} target="_blank">
             {post.author}
           </a>
+          <br />
+          {post.authorTitle}
         </p>
         {this.renderTitle()}
         <p className="post-meta">
diff --git a/lib/core/BlogPostLayout.js b/lib/core/BlogPostLayout.js
index dcb1f4d01f..f1fa76336e 100644
--- a/lib/core/BlogPostLayout.js
+++ b/lib/core/BlogPostLayout.js
@@ -15,6 +15,40 @@ const Site = require("./Site.js");
 
 // used for entire blog posts, i.e., each written blog article with sidebar with site header/footer
 class BlogPostLayout extends React.Component {
+
+  renderSocialButtons() {
+    const post = this.props.metadata;
+    
+    const fbLike = this.props.config.facebookAppId ? 
+    <div
+      className="fb-like"
+      data-layout="standard"
+      data-share="true"
+      data-width="225"
+      data-show-faces="false">
+    </div>
+    : null;
+
+    const twitterShare = this.props.config.twitter ?
+    <a href="https://twitter.com/share" className="twitter-share-button" data-text={post.title} data-url={this.props.config.url + this.props.config.baseUrl + "blog/" + post.path} data-related={this.props.config.twitter} data-via={post.authorTwitter} data-show-count="false">Tweet</a>
+    : null;
+
+    if (!fbLike && !twitterShare) {
+      return;
+    }
+
+    return (
+      <div>
+        <aside className="entry-share">
+          <div className="social-buttons">
+            {fbLike}
+            {twitterShare}
+          </div>
+        </aside>
+      </div>
+    );
+  }
+
   render() {
     return (
       <Site
@@ -39,6 +73,7 @@ class BlogPostLayout extends React.Component {
                 language={"en"}
                 config={this.props.config}
               />
+              {this.renderSocialButtons()}
             </div>
             <div className="blog-recent">
               <a
diff --git a/lib/core/BlogSidebar.js b/lib/core/BlogSidebar.js
index 978a2017d1..f40b8f2f3c 100644
--- a/lib/core/BlogSidebar.js
+++ b/lib/core/BlogSidebar.js
@@ -18,7 +18,7 @@ class BlogSidebar extends React.Component {
     const contents = [
       {
         name: "Recent Posts",
-        links: MetadataBlog
+        links: MetadataBlog.slice(0, 5)
       }
     ];
     const title = this.props.current && this.props.current.title;
diff --git a/lib/core/CompLibrary.js b/lib/core/CompLibrary.js
index 33e730331d..4df01d268c 100644
--- a/lib/core/CompLibrary.js
+++ b/lib/core/CompLibrary.js
@@ -10,10 +10,12 @@
 const Marked = require("./Marked.js");
 const Container = require("./Container.js");
 const GridBlock = require("./GridBlock.js");
+const Prism = require("./Prism.js");
 
 // collection of other components to provide to users
 module.exports = {
   Marked: Marked,
   Container: Container,
-  GridBlock: GridBlock
+  GridBlock: GridBlock,
+  Prism: Prism
 };
diff --git a/lib/core/Site.js b/lib/core/Site.js
index fd9fee7947..4424f717b4 100644
--- a/lib/core/Site.js
+++ b/lib/core/Site.js
@@ -75,6 +75,21 @@ class Site extends React.Component {
             `
               }}
             />}
+          {this.props.config.facebookAppId && 
+            <script
+              dangerouslySetInnerHTML={{
+                __html: `window.fbAsyncInit = function() {FB.init({appId:'${this.props.config.facebookAppId}',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
+                `,
+              }}
+            />
+          }
+          {this.props.config.twitter && 
+            <script
+              dangerouslySetInnerHTML={{
+                __html: `window.twttr=(function(d,s, id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src='https://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js, fjs);t._e = [];t.ready = function(f) {t._e.push(f);};return t;}(document, 'script', 'twitter-wjs'));`,
+              }}
+            />
+          }
           {this.props.config.algolia &&
             (this.props.config.algolia.algoliaOptions
               ? <script
diff --git a/lib/rename-version.js b/lib/rename-version.js
old mode 100644
new mode 100755
diff --git a/lib/static/css/main.css b/lib/static/css/main.css
index efc75205f8..6fed10d3df 100644
--- a/lib/static/css/main.css
+++ b/lib/static/css/main.css
@@ -1657,6 +1657,9 @@ table tr th {
   .blog-recent {
     height: 40px;
   }
+  .blogContainer .lonePost {
+    margin-top: 0;
+  }
 }
 
 .header-link {
@@ -1980,3 +1983,14 @@ footer .copyright {
   color: rgba(255, 255, 255, 0.4);
   text-align: center;
 }
+
+.entry-share {
+  padding: 36px 0;
+  display: block;
+}
+
+@media screen and (max-width: 768px) {
+  .entry-share {
+    display: none;
+  }
+}
\ No newline at end of file