Blog enhancements (#80)

* Small CSS adjustments.

* Blog adjustments.

* Add support for Prism in the blog

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">

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

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;

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
 };

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

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;
+  }
+}