reverted previous commit and other minor bug fixes and improvements and version bump

shyamlohar · shyamlohar · commit 8332c631381a · 2020-07-20T19:47:01.000+05:30
diff --git a/example/.env.development b/example/.env.development
@@ -1,3 +1,3 @@
 FORM_URL=http://localhost:3000/api/project/5e81b8923d8c2d64d8549add/forms
-DISQUS_SHORTNAME=
+GATSBY_DISQUS_SHORTNAME=
 GATSBY_FB_APP_ID=
diff --git a/example/src/@draftbox-co/gatsby-theme-ghost-attila/components/disqus.jsx b/example/src/@draftbox-co/gatsby-theme-ghost-attila/components/disqus.jsx
@@ -3,11 +3,11 @@ import { DiscussionEmbed } from "disqus-react";
 
 const Disqus = props => {
   const disqusConfig = {
-    shortname: process.env.DISQUS_SHORTNAME,
+    shortname: process.env.GATSBY_DISQUS_SHORTNAME,
     identifier: props.slug,
     title: props.slug
   };
-  return process.env.DISQUS_SHORTNAME ? (
+  return process.env.GATSBY_DISQUS_SHORTNAME ? (
     <DiscussionEmbed {...disqusConfig} />
   ) : (
     <></>
diff --git a/gatsby-theme-ghost-attila/gatsby-config.js b/gatsby-theme-ghost-attila/gatsby-config.js
@@ -5,36 +5,37 @@ const ghostConfigDefaults = require(`./src/utils/.ghost.json`);
 
 const generateRSSFeed = require(`./src/utils/rss/generate-feed`);
 
-module.exports = themeOptions => {
+module.exports = (themeOptions) => {
   const siteConfig = themeOptions.siteConfig || siteConfigDefaults;
   const ghostConfig = themeOptions.ghostConfig || ghostConfigDefaults;
-  const finalConfig = process.env.NODE_ENV === `development`
-  ? ghostConfig.development
-  : ghostConfig.production;
+  const finalConfig =
+    process.env.NODE_ENV === `development`
+      ? ghostConfig.development
+      : ghostConfig.production;
 
   siteConfig.apiUrl = finalConfig.apiUrl;
-  console.log('what is', siteConfig);
+  console.log("what is", siteConfig);
   return {
     siteMetadata: siteConfig,
     plugins: [
       {
         resolve: `gatsby-plugin-sass`,
         options: {
-          sassRuleModulesTest: /.*\.module\.s(a|c)ss$/
-        }
+          sassRuleModulesTest: /.*\.module\.s(a|c)ss$/,
+        },
       },
       {
         resolve: `gatsby-plugin-page-creator`,
         options: {
-          path: path.join(__dirname, `src`, `pages`)
-        }
+          path: path.join(__dirname, `src`, `pages`),
+        },
       },
       {
         resolve: `gatsby-source-filesystem`,
         options: {
           path: path.join(__dirname, `src`, `images`),
-          name: `images`
-        }
+          name: `images`,
+        },
       },
       `gatsby-plugin-sharp`,
       `gatsby-transformer-sharp`,
@@ -43,23 +44,23 @@ module.exports = themeOptions => {
         options:
           process.env.NODE_ENV === `development`
             ? ghostConfig.development
-            : ghostConfig.production
+            : ghostConfig.production,
       },
       {
         resolve: `gatsby-transformer-rehype`,
         options: {
-          filter: node =>
+          filter: (node) =>
             node.internal.type === `GhostPost` ||
             node.internal.type === `GhostPage`,
           plugins: [
             {
-              resolve: `gatsby-rehype-prismjs`
+              resolve: `gatsby-rehype-prismjs`,
             },
             {
-              resolve: `gatsby-rehype-ghost-links`
-            }
-          ]
-        }
+              resolve: `gatsby-rehype-ghost-links`,
+            },
+          ],
+        },
       },
       /**
        *  Utility Plugins
@@ -81,8 +82,8 @@ module.exports = themeOptions => {
                 siteDescription
               }
             }
-          }`
-        }
+          }`,
+        },
       },
       {
         resolve: `gatsby-plugin-feed`,
@@ -97,8 +98,8 @@ module.exports = themeOptions => {
               }
             }
           }`,
-          feeds: [generateRSSFeed(siteConfig)]
-        }
+          feeds: [generateRSSFeed(siteConfig)],
+        },
       },
       {
         resolve: `gatsby-plugin-advanced-sitemap`,
@@ -148,17 +149,17 @@ module.exports = themeOptions => {
           `,
           mapping: {
             allGhostPost: {
-              sitemap: `posts`
+              sitemap: `posts`,
             },
             allGhostTag: {
-              sitemap: `tags`
+              sitemap: `tags`,
             },
             allGhostAuthor: {
-              sitemap: `authors`
+              sitemap: `authors`,
             },
             allGhostPage: {
-              sitemap: `pages`
-            }
+              sitemap: `pages`,
+            },
           },
           exclude: [
             `/dev-404-page`,
@@ -169,17 +170,17 @@ module.exports = themeOptions => {
             `/offline.html`,
           ],
           createLinkInHead: true,
-          addUncaughtPages: true
-        }
+          addUncaughtPages: true,
+        },
       },
       `gatsby-plugin-catch-links`,
       `gatsby-plugin-react-helmet`,
       `gatsby-plugin-force-trailing-slashes`,
       {
         resolve: `gatsby-plugin-postcss`,
         options: {
-          postCssPlugins: [require(`cssnano`)()]
-        }
+          postCssPlugins: [require(`cssnano`)()],
+        },
       },
       {
         resolve: `@draftbox-co/gatsby-plugin-amp`,
@@ -191,15 +192,16 @@ module.exports = themeOptions => {
           relAmpHtmlPattern: `{{canonicalBaseUrl}}{{pathname}}{{pathIdentifier}}`,
           useAmpClientIdApi: true,
           dirName: __dirname,
-          themePath: `src/amp-styles/post.amp.css`
-        }
+          themePath: `src/amp-styles/post.amp.css`,
+        },
       },
       {
         resolve: `gatsby-plugin-remove-generator`,
         options: {
           content: `Draftbox`,
         },
       },
-    ]
+      `gatsby-plugin-remove-serviceworker`,
+    ],
   };
 };
diff --git a/gatsby-theme-ghost-attila/package.json b/gatsby-theme-ghost-attila/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@draftbox-co/gatsby-theme-ghost-attila",
   "description": "A Gatsby theme plugin for creating blogs from headless Ghost CMS.",
-  "version": "1.0.40",
+  "version": "1.0.42",
   "license": "MIT",
   "author": "Draftbox",
   "homepage": "https://github.com/draftbox-co/gatsby-attila-theme-ghost",
@@ -69,11 +69,11 @@
     "gatsby-plugin-feed": "^2.3.27",
     "gatsby-plugin-force-trailing-slashes": "^1.0.4",
     "gatsby-plugin-manifest": "^2.2.42",
-    "gatsby-plugin-remove-serviceworker": "^1.0.0",
     "gatsby-plugin-page-creator": "^2.1.40",
     "gatsby-plugin-postcss": "^2.1.20",
     "gatsby-plugin-react-helmet": "^3.1.22",
     "gatsby-plugin-remove-generator": "^1.0.5",
+    "gatsby-plugin-remove-serviceworker": "^1.0.0",
     "gatsby-plugin-sass": "^2.1.29",
     "gatsby-plugin-sharp": "^2.4.5",
     "gatsby-rehype-ghost-links": "^1.1.0",
@@ -86,6 +86,7 @@
     "node-sass": "^4.13.1",
     "prismjs": "^1.19.0",
     "react-helmet": "^5.2.1",
+    "react-intersection-observer": "^8.26.2",
     "reading-time": "^1.2.0",
     "styled-components": "^5.0.1"
   }
diff --git a/gatsby-theme-ghost-attila/src/components/post-card.jsx b/gatsby-theme-ghost-attila/src/components/post-card.jsx
@@ -12,7 +12,11 @@ const PostCard = ({ post }) => {
     <div id={post.uuid} className="container">
       <main className="content" role="main">
         <div>
-          <article className={`post tag-getting-started ${post.featured ? 'featured' : ''}`}>
+          <article
+            className={`post tag-getting-started ${
+              post.featured ? "featured" : ""
+            }`}
+          >
             <div className="inner">
               <div className="box post-box">
                 <h2 className="post-title">
@@ -26,16 +30,16 @@ const PostCard = ({ post }) => {
                 <span className="post-meta">
                   By{" "}
                   {post.authors.map((author, index) => (
-                    <>
-                    <Link
-                      key={index}
-                      className="post-meta-tag"
-                      to={`/author/${author.slug}`}
-                    >
-                      {author.name}
-                    </Link>
-                    {index !== post.authors.length - 1 ? ", " : ""}
-                    </>
+                    <React.Fragment key={index}>
+                      <Link
+                        key={index}
+                        className="post-meta-tag"
+                        to={`/author/${author.slug}`}
+                      >
+                        {author.name}
+                      </Link>
+                      {index !== post.authors.length - 1 ? ", " : ""}
+                    </React.Fragment>
                   ))}
                   {post.tags.length > 0 && " in "}
                   {post.tags.map((tag, index) => (
diff --git a/gatsby-theme-ghost-attila/src/templates/postTemplate.jsx b/gatsby-theme-ghost-attila/src/templates/postTemplate.jsx
@@ -9,10 +9,19 @@ import Disqus from "../components/disqus";
 import FbComments from "../components/fb-comments";
 import CopyLink from "../components/copy-link";
 import "../styles/prism-theme/prism_dracula.scss";
+import { InView } from "react-intersection-observer";
 
 const PostTemplate = ({ data, location, pageContext }) => {
   const [href, sethref] = useState("");
 
+  const [showComments, setshowComments] = useState(false);
+
+  const handleCommentsVisibility = (inView) => {
+    if (inView && !showComments) {
+      setshowComments(true);
+    }
+  };
+
   useEffect(() => {
     if (typeof window !== "undefined") {
       sethref(window.location.href);
@@ -58,7 +67,7 @@ const PostTemplate = ({ data, location, pageContext }) => {
         window.removeEventListener("scroll", readingProgessTracker);
       }
     };
-  });
+  }, []);
 
   return (
     <>
@@ -255,15 +264,34 @@ const PostTemplate = ({ data, location, pageContext }) => {
                 </aside>
               </div>
             </article>
-            <div className="inner embed-ghost" style={{ marginTop: "20px" }}>
-              <Disqus slug={pageContext.slug} title={data.ghostPost.title} />
-            </div>
-            <div className="inner embed-facebook" style={{ marginTop: "20px" }}>
-              <FbComments
-                slug={pageContext.slug}
-                title={data.ghostPost.title}
-                href={href}
-              />
+            <InView
+              as="div"
+              onChange={(inView) => handleCommentsVisibility(inView)}
+            ></InView>
+            <div>
+              {process.env.GATSBY_DISQUS_SHORTNAME && showComments && (
+                <div
+                  className="inner embed-ghost"
+                  style={{ marginTop: "20px" }}
+                >
+                  <Disqus
+                    slug={pageContext.slug}
+                    title={data.ghostPost.title}
+                  />
+                </div>
+              )}
+              {process.env.GATSBY_FB_APP_ID && showComments && (
+                <div
+                  className="inner embed-facebook"
+                  style={{ marginTop: "20px" }}
+                >
+                  <FbComments
+                    slug={pageContext.slug}
+                    title={data.ghostPost.title}
+                    href={href}
+                  />
+                </div>
+              )}
             </div>
           </main>
           <SubscribeForm />
diff --git a/yarn.lock b/yarn.lock
@@ -1937,6 +1937,11 @@
   version "2.30.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-2.30.0.tgz#7681c305a6f4341ae2579f5e3a75846c29eee9ce"
   integrity sha512-9kDOxzp0K85UnpmPJqUzdWaCNorYYgk1yZmf4IKzpeTlSAclnFsrLjfwD9mQExctLoLoGAUXq1co+fbr+3HeFw==
+  dependencies:
+    "@types/eslint-visitor-keys" "^1.0.0"
+    "@typescript-eslint/experimental-utils" "2.30.0"
+    "@typescript-eslint/typescript-estree" "2.30.0"
+    eslint-visitor-keys "^1.1.0"
 
 "@typescript-eslint/typescript-estree@2.30.0":
   version "2.30.0"
@@ -11923,6 +11928,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"
@@ -12918,7 +12930,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==
@@ -13991,6 +14003,11 @@ tiny-emitter@^2.0.0:
   resolved "https://registry.yarnpkg.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz#1d1a56edfc51c43e863cbb5382a72330e3555423"
   integrity sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==
 
+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"
