Add social media activity service on blog page

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

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

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