Merge pull request #51 from ybbarng/decoupling-gatsby-config-and-web

Decouple the node side code and the browser side code

src/components/Disqus/Disqus.jsx

@@ -1,6 +1,5 @@
 import React, { Component } from 'react';
 import ReactDisqusComments from 'react-disqus-comments';
-import config from '../../../gatsby-config';
 
 class Disqus extends Component {
   constructor(props) {
@@ -20,15 +19,15 @@ class Disqus extends Component {
     this.setState({ toasts });
   }
   render() {
-    const { postNode } = this.props;
-    if (!config.siteMetadata.disqusShortname) {
+    const { postNode, siteMetadata } = this.props;
+    if (!siteMetadata.disqusShortname) {
       return null;
     }
     const post = postNode.frontmatter;
-    const url = config.siteMetadata.url + postNode.fields.slug;
+    const url = siteMetadata.url + postNode.fields.slug;
     return (
       <ReactDisqusComments
-        shortname={config.siteMetadata.disqusShortname}
+        shortname={siteMetadata.disqusShortname}
         identifier={post.title}
         title={post.title}
         url={url}

src/components/PostTemplateDetails/index.jsx

@@ -32,7 +32,7 @@ class PostTemplateDetails extends React.Component {
 
     const commentsBlock = (
       <div>
-        <Disqus postNode={post} />
+        <Disqus postNode={post} siteMetadata={this.props.data.site.siteMetadata} />
       </div>
     );
 

src/templates/post-template.jsx

@@ -34,6 +34,8 @@ export const pageQuery = graphql`
           name
           twitter
         }
+        disqusShortname
+        url
       }
     }
     markdownRemark(fields: { slug: { eq: $slug } }) {