Lazy loading for FB, Disqus, fix for FB width and minor improvement

Author: thandaanda

example/src/@draftbox-co/gatsby-wordpress-theme-libre/components/disqus.jsx

@@ -1,15 +1,21 @@
 import React from "react";
 import { DiscussionEmbed } from "disqus-react";
 
-const Disqus = props => {
+const Disqus = (props) => {
   const disqusConfig = {
     shortname: process.env.GATSBY_DISQUS_SHORTNAME,
     identifier: props.slug,
-    title: props.slug
+    title: props.slug,
   };
 
   return process.env.GATSBY_DISQUS_SHORTNAME ? (
-    <DiscussionEmbed {...disqusConfig} />
+    <DiscussionEmbed
+      shortname={disqusConfig.shortname}
+      config={{
+        identifier: disqusConfig.identifier,
+        title: disqusConfig.title,
+      }}
+    />
   ) : (
     <></>
   );

example/src/@draftbox-co/gatsby-wordpress-theme-libre/components/fb-comments.jsx

@@ -4,7 +4,7 @@ import { FacebookProvider, Comments } from 'react-facebook';
 const FbComments = props => {
   return process.env.GATSBY_FB_APP_ID ? (
     <FacebookProvider appId={process.env.GATSBY_FB_APP_ID}>
-      <Comments href={props.href}/>
+      <Comments href={props.href} width={'100%'}/>
     </FacebookProvider>
   ) : (
     <></>

gatsby-wordpress-theme-libre/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@draftbox-co/gatsby-wordpress-theme-libre",
-  "version": "1.0.39",
+  "version": "1.0.40",
   "license": "MIT",
   "resolutions": {
     "sharp": "0.23.4"
@@ -67,6 +67,7 @@
     "html-to-text": "^5.1.1",
     "node-fetch": "^2.6.0",
     "react-helmet": "^5.2.1",
+    "react-intersection-observer": "^8.26.2",
     "reading-time": "^1.2.0"
   }
 }

gatsby-wordpress-theme-libre/src/templates/post.js

@@ -12,6 +12,7 @@ import twitterShare from "../images/twitter-share.svg";
 import linkedInShare from "../images/linkedin.svg";
 import mailShare from "../images/mail.svg";
 import CopyLink from "../components/copy-link";
+import { InView } from "react-intersection-observer";
 
 const Post = ({ data, location }) => {
   const [href, sethref] = useState("");
@@ -29,6 +30,14 @@ const Post = ({ data, location }) => {
 
   const mailShareUrl = `mailto:?subject=${data.wordpressPost.plainTitle}&body=${href}`;
 
+  const [showComments, setshowComments] = useState(false);
+
+  const handleCommentsVisibility = (inView) => {
+    if (inView && !showComments) {
+      setshowComments(true);
+    }
+  };
+
   return (
     <Layout>
       <ArticleMeta data={data.wordpressPost} amp={false} location={location} />
@@ -245,7 +254,7 @@ const Post = ({ data, location }) => {
                     <div className="nav-links">
                       {data.prev && (
                         <div className="nav-previous">
-                          <Link to={`/${data.prev.slug}`} rel="prev">
+                          <Link to={`${data.prev.slug}`} rel="prev">
                             <span className="meta-nav">Previous Post</span>{" "}
                             <span
                               dangerouslySetInnerHTML={{
@@ -258,7 +267,7 @@ const Post = ({ data, location }) => {
 
                       {data.next && (
                         <div className="nav-next">
-                          <Link to={`/${data.next.slug}`} rel="next">
+                          <Link to={`${data.next.slug}`} rel="next">
                             <span className="meta-nav">Next Post</span>{" "}
                             <span
                               dangerouslySetInnerHTML={{
@@ -271,9 +280,19 @@ const Post = ({ data, location }) => {
                     </div>{" "}
                   </nav>
                 </article>
+                <InView
+                  as="div"
+                  onChange={(inView) => handleCommentsVisibility(inView)}
+                ></InView>
+                <div>
+                  {process.env.GATSBY_DISQUS_SHORTNAME && showComments && (
+                    <Disqus />
+                  )}
+                  {process.env.GATSBY_FB_APP_ID && showComments && (
+                    <FbComments href={href} />
+                  )}
+                </div>
 
-                <Disqus />
-                <FbComments href={href} />
                 <SubscribeForm />
               </main>
             </div>

yarn.lock

@@ -1738,11 +1738,6 @@
   resolved "https://registry.yarnpkg.com/@types/debug/-/debug-0.0.30.tgz#dc1e40f7af3b9c815013a7860e6252f6352a84df"
   integrity sha512-orGL5LXERPYsLov6CWs3Fh6203+dXzJkR7OnddIr2514Hsecwc8xRpzCapshBbKFImCsvS/mk6+FWiN5LyZJAQ==
 
-"@types/eslint-visitor-keys@^1.0.0":
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@types/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz#1ee30d79544ca84d68d4b3cdb0af4f205663dd2d"
-  integrity sha512-OCutwjDZ4aFS6PB1UZ988C4YgwlBHJd6wCeQqaLdmadZ/7e+w79+hbMUFC1QXDNCmdyoRfAFdm0RypzwR+Qpag==
-
 "@types/events@*":
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/@types/events/-/events-3.0.0.tgz#2862f3f58a9a7f7c3e78d79f130dd4d71c25c2a7"
@@ -11349,6 +11344,13 @@ react-hot-loader@^4.12.20:
     shallowequal "^1.1.0"
     source-map "^0.7.3"
 
+react-intersection-observer@^8.26.2:
+  version "8.26.2"
+  resolved "https://registry.yarnpkg.com/react-intersection-observer/-/react-intersection-observer-8.26.2.tgz#0562ff0c06b2b10e809190c2fa9b6ded656e6e16"
+  integrity sha512-GmSjLNK+oV7kS+BHfrJSaA4wF61ELA33gizKHmN+tk59UT6/aW8kkqvlrFGPwxGoaIzLKS2evfG5fgkw5MIIsg==
+  dependencies:
+    tiny-invariant "^1.1.0"
+
 react-is@^16.12.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
@@ -12214,7 +12216,7 @@ shallowequal@^1.0.1, shallowequal@^1.1.0:
   resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8"
   integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==
 
-sharp@^0.23.4:
+sharp@0.23.4, sharp@^0.23.4:
   version "0.23.4"
   resolved "https://registry.yarnpkg.com/sharp/-/sharp-0.23.4.tgz#ca36067cb6ff7067fa6c77b01651cb9a890f8eb3"
   integrity sha512-fJMagt6cT0UDy9XCsgyLi0eiwWWhQRxbwGmqQT6sY8Av4s0SVsT/deg8fobBQCTDU5iXRgz0rAeXoE2LBZ8g+Q==
@@ -13217,6 +13219,11 @@ timsort@^0.3.0:
   resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4"
   integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=
 
+tiny-invariant@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.1.0.tgz#634c5f8efdc27714b7f386c35e6760991d230875"
+  integrity sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw==
+
 tinycolor2@^1.4.1:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.4.1.tgz#f4fad333447bc0b07d4dc8e9209d8f39a8ac77e8"