Refactored post and layout to extract RelatedPosts, ShareButtons

Added BuyMeACofee button
Created new article about management path

Author: javaadpatel

.ghost.json

@@ -4,7 +4,7 @@
     "contentApiKey": "b005756f83ee6e0d74275ac47c"
   },
   "production": {
-    "apiUrl": "https://a75622ec71a4.ngrok.io",
+    "apiUrl": "https://ca4a1eeabd14.ngrok.io",
     "contentApiKey": "b005756f83ee6e0d74275ac47c"
   }
 }

package.json

@@ -47,7 +47,7 @@
     "babel-plugin-prismjs": "^2.0.1",
     "babel-preset-gatsby": "^0.3.4",
     "cheerio": "1.0.0-rc.3",
-    "gatsby": "2.19.23",
+    "gatsby": "2.13.1",
     "gatsby-awesome-pagination": "0.3.5",
     "gatsby-image": "2.2.41",
     "gatsby-plugin-advanced-sitemap": "1.5.2",

src/components/common/BuyMeACoffee.js

@@ -0,0 +1,47 @@
+import React, { useEffect } from "react";
+import Helmet from "react-helmet";
+
+const BuyMeACoffee = ({}) => {
+    /*Load BuyMeACoffeeWidget*/
+    useEffect(() => {
+        const script = document.createElement("script");
+        script.src = "https://cdnjs.buymeacoffee.com/1.0.0/widget.prod.min.js";
+        script.async = false;
+
+        //Call window on load to show the image
+        script.onload = () => {
+            var evt = document.createEvent("Event");
+            evt.initEvent("DOMContentLoaded", false, false);
+            window.dispatchEvent(evt);
+        };
+        document.body.appendChild(script);
+
+        return () => {
+            const bmcButton = document.getElementById("bmc-wbtn");
+            bmcButton.remove();
+            document.body.removeChild(script);
+        };
+    }, []);
+
+    return (
+        <>
+            <Helmet>
+                <script
+                    async={false}
+                    data-name="BMC-Widget"
+                    data-cfasync="false"
+                    src="https://cdnjs.buymeacoffee.com/1.0.0/widget.prod.min.js"
+                    data-id="javaad"
+                    data-description="Support me on Buy me a coffee!"
+                    data-message=""
+                    data-color="#FFDD00"
+                    data-position="Right"
+                    data-x_margin="10"
+                    data-y_margin="65"
+                ></script>
+            </Helmet>
+        </>
+    );
+};
+
+export default BuyMeACoffee;

src/components/common/Footer/Footer.js

@@ -18,7 +18,7 @@ const Footer = ({ site }) => {
                             alt="Javaad Patel"
                         />
                     </Link>{" "}
-                    © {new Date().getFullYear()}
+                    © 2020 - {new Date().getFullYear()}
                 </div>
                 <div className="site-foot-nav-right">
                     <Navigation

src/components/common/Header/Header__SocialIcons.js

@@ -40,6 +40,7 @@ const Header__SocialIcons = ({ anchorClassName, imageClassName }) => {
                 className={anchorClassName}
                 target={iconData.target}
                 rel="noopener noreferrer"
+                key={iconData.name}
             >
                 <div>
                     <img

src/components/common/Layout.js

@@ -35,7 +35,7 @@ const DefaultLayout = ({ data, children, bodyClass, isHome }) => {
                     window.dataLayer = window.dataLayer || [];
                     function gtag(){dataLayer.push(arguments);}
                     gtag('js', new Date());
-                  
+                    
                     gtag('config', 'UA-164501208-1');
                     `}
                 </script>
@@ -59,29 +59,6 @@ const DefaultLayout = ({ data, children, bodyClass, isHome }) => {
                 <div className="viewport-bottom">
                     {/* The footer at the very bottom of the screen */}
                     <Footer site={site} />
-                    {/* <footer className="site-foot">
-                        <div className="site-foot-nav container">
-                            <div className="site-foot-nav-left">
-                                <Link to="/">{site.title}</Link> ©{" "}
-                                {new Date().getFullYear()} &mdash; Published
-                                with{" "}
-                                <a
-                                    className="site-foot-nav-item"
-                                    href="https://ghost.org"
-                                    target="_blank"
-                                    rel="noopener noreferrer"
-                                >
-                                    Ghost
-                                </a>
-                            </div>
-                            <div className="site-foot-nav-right">
-                                <Navigation
-                                    data={site.navigation}
-                                    navClass="site-foot-nav-item"
-                                />
-                            </div>
-                        </div>
-                    </footer> */}
                 </div>
             </div>
         </>

src/components/common/RelatedPosts.js

@@ -0,0 +1,76 @@
+import React from "react";
+import _ from "lodash";
+import { Grid } from "semantic-ui-react";
+import {PostCard} from ".";
+
+import "../../styles/semantic-ui/grid.css";
+
+const RelatedPosts = ({allPosts, post}) => {
+
+    let relatedPosts;
+    let relatedPostsLimit = 2;
+
+    const findRelatedArticles = () => {
+        const primaryTag = post.primary_tag.slug;
+        const secondaryTag = _.chain(post.tags)
+            .filter(function (p) {
+                return p.slug !== primaryTag;
+            })
+            .head()
+            .value()?.slug;
+        const primaryRelatedArticles = _.chain(allPosts)
+            .filter(function ({ node }) {
+                return (
+                    node.tags.some(function ({ slug }) {
+                        return slug == primaryTag || slug == secondaryTag;
+                    }) && node.id !== post.id
+                );
+            })
+            .value();
+
+        relatedPosts = _.map(
+            _.take(primaryRelatedArticles, relatedPostsLimit),
+            (article, key) => {
+                return article.node;
+            }
+        );
+    };
+
+    findRelatedArticles();
+
+    const renderPosts = (relatedPosts) => {
+        return !_.isEmpty(relatedPosts) ? (
+            <Grid
+                inverted
+                container
+                stackable
+                columns="equal"
+                divided
+                className="related-articles-grid"
+            >
+                <Grid.Row textAlign="center">
+                    <Grid.Column>
+                        <strong>You might also enjoy</strong>
+                    </Grid.Column>
+                </Grid.Row>
+                <Grid.Row textAlign="center">
+                    {_.map(relatedPosts, (post) => {
+                        return (
+                            <Grid.Column>
+                                <PostCard
+                                    key={post.id}
+                                    post={post}
+                                    views={null}
+                                />
+                            </Grid.Column>
+                        );
+                    })}
+                </Grid.Row>
+            </Grid>
+        ) : <></>
+    }
+
+    return renderPosts(relatedPosts);
+}
+
+export default RelatedPosts;

src/components/common/ShareButtons.js

@@ -0,0 +1,60 @@
+import React from "react";
+import {
+    TwitterShareButton,
+    TwitterIcon,
+    RedditShareButton,
+    RedditIcon,
+    EmailShareButton,
+    EmailIcon,
+    LinkedinShareButton,
+    LinkedinIcon,
+} from "react-share";
+
+const ShareButtons = ({postShareUrl, postShareTitle}) => {
+
+    const twitterHandle = "@javaadpatel";
+    const siteUrl = "https://javaadpatel.com";
+
+    return (
+        <div
+        style={{
+            float: "right",
+            paddingBottom: "1em",
+            fontFamily: "Georgia, Times, serif",
+        }}
+    >
+        Share this post on {"   "}
+        <TwitterShareButton
+            url={postShareUrl}
+            title={postShareTitle}
+            related={[twitterHandle]}
+        >
+            <TwitterIcon size={32} round />
+        </TwitterShareButton>
+        <LinkedinShareButton
+            url={postShareUrl}
+            title={postShareTitle}
+            source={siteUrl}
+        >
+            <LinkedinIcon size={32} round />
+        </LinkedinShareButton>
+        <RedditShareButton
+            url={postShareUrl}
+            title={postShareTitle}
+            windowWidth={660}
+            windowHeight={460}
+        >
+            <RedditIcon size={32} round />
+        </RedditShareButton>
+        <EmailShareButton
+            url={postShareUrl}
+            subject={postShareTitle}
+            body="body"
+        >
+            <EmailIcon size={32} round />
+        </EmailShareButton>
+    </div>
+    )
+}
+
+export default ShareButtons;

src/components/common/index.js

@@ -6,3 +6,5 @@ export { default as SubscribeForm } from "./SubscribeForm";
 export { default as ScrollArrow } from "./ScrollArrow";
 export { default as Header } from "./Header/Header";
 export { default as Footer } from "./Footer/Footer";
+export {default as ShareButtons} from "./ShareButtons";
+export {default as RelatedPosts} from "./RelatedPosts";