From 6196022748f275ff5f7d4b9e47b6c7ef87353827 Mon Sep 17 00:00:00 2001
From: Moris Zen <moris.pasic@gmail.com>
Date: Thu, 13 Sep 2018 23:40:56 +0200
Subject: [PATCH] Add social media activity service on blog page

---
 src/components/SEO.js  |  1 +
 src/styles/general.css | 25 +++++++++++++++++++++++++
 src/templates/blog.js  | 35 +++++++++++++++++++++++++++++++++--
 3 files changed, 59 insertions(+), 2 deletions(-)

diff --git a/src/components/SEO.js b/src/components/SEO.js
index 358095c..dea4678 100644
--- a/src/components/SEO.js
+++ b/src/components/SEO.js
@@ -72,6 +72,7 @@ class SEO extends Component {
         <script type="text/javascript">
           {`(function(o){var b="https://api.autopilothq.com/anywhere/",t="ae459aeb4a0b4099a3d74dc196c8e96c37d381d71ceb4d7e91640aee42bf58b1",a=window.AutopilotAnywhere={_runQueue:[],run:function(){this._runQueue.push(arguments);}},c=encodeURIComponent,s="SCRIPT",d=document,l=d.getElementsByTagName(s)[0],p="t="+c(d.title||"")+"&u="+c(d.location.href||"")+"&r="+c(d.referrer||""),j="text/javascript",z,y;if(!window.Autopilot) window.Autopilot=a;if(o.app) p="devmode=true&"+p;z=function(src,asy){var e=d.createElement(s);e.src=src;e.type=j;e.async=asy;l.parentNode.insertBefore(e,l);};y=function(){z(b+t+'?'+p,true);};if(window.attachEvent){window.attachEvent("onload",y);}else{window.addEventListener("load",y,false);}})({});`}
         </script>
+
         <title>{title}</title>
         <meta name="description" content={desc} />
         <meta name="image" content={img} />
diff --git a/src/styles/general.css b/src/styles/general.css
index 0fa8353..744250d 100644
--- a/src/styles/general.css
+++ b/src/styles/general.css
@@ -194,3 +194,28 @@ a {
     max-width: 95%;
   }
 }
+
+.crt-post-content-text,
+.crt-post-header {
+  display: none;
+}
+
+.crt-post-border,
+.crt-post-c {
+  border-radius: 0.25rem !important;
+}
+
+.crt-post-border {
+  border: none !important;
+  box-shadow: 0 6px 14px 0 rgba(51, 6, 13, 0.04),
+    0 2px 3px 0 rgba(51, 6, 13, 0.12) !important;
+}
+
+.crt-post:hover {
+  opacity: 0.5 !important;
+}
+
+.crt-load-more {
+  text-transform: uppercase;
+  font-weight: 700;
+}
diff --git a/src/templates/blog.js b/src/templates/blog.js
index b39e830..a5fc68d 100644
--- a/src/templates/blog.js
+++ b/src/templates/blog.js
@@ -4,6 +4,8 @@ import Link from 'gatsby-link'
 import PageIntro from '../components/PageIntro'
 import Card from '../components/Card'
 import SEO from '../components/SEO'
+import Helmet from 'react-helmet'
+import SectionIntro from '../components/SectionIntro'
 
 import PageTransition from 'gatsby-plugin-page-transitions'
 
@@ -12,8 +14,28 @@ class Blog extends Component {
     const data = this.props.data
     return (
       <PageTransition>
-      <SEO siteTitle="Saburly - Blog Posts" siteDescription="Bugs keep us busy, but sometimes we find the time to have fun & publish" />
-        <div className="container mx-auto p-4 w-full md:flex md:flex-wrap items-stretch w-full" siteUrl="https://saburly.com/blog">
+        <SEO
+          siteTitle="Saburly - Blog Posts"
+          siteDescription="Bugs keep us busy, but sometimes we find the time to have fun & publish"
+          siteUrl="https://saburly.com/blog"
+        />
+        <Helmet>
+          <script type="text/javascript">
+            {`(function(){
+        var i, e, d = document, s = "script";i = d.createElement("script");i.async = 1;
+        i.src = "https://cdn.curator.io/published/37974a5b-0974-46ba-8aac-a236fb4ba607.js";
+        e = d.getElementsByTagName(s)[0];e.parentNode.insertBefore(i, e);
+        })();`}
+          </script>
+        </Helmet>
+
+        <SectionIntro
+          classes="max-w-lg mx-auto"
+          h2Classes="text-5xl text-center mt-10 mb-4"
+          headline="Blog Posts"
+          textClasses="text-center"
+        />
+        <div className="container mx-auto p-4 w-full md:flex md:flex-wrap items-stretch w-full">
           {data.allWordpressPost.edges.map(({ node }) => (
             <div key={node.id} className="mt-4 md:w-1/2 p-2">
               <Link
@@ -35,6 +57,15 @@ class Blog extends Component {
             </div>
           ))}
         </div>
+        <div className="container mx-auto p-4 w-full">
+          <SectionIntro
+            classes="max-w-lg mx-auto"
+            h2Classes="text-5xl text-center mt-10 mb-4"
+            headline="Social Media Activity"
+            textClasses="text-center"
+          />
+          <div id="curator-feed-saburly" />
+        </div>
       </PageTransition>
     )
   }