Get siteMetadata via GraphQL

It is important that decoupling between node code and browser code.
The 'gatsby-config.js' file must be kept in node code, but it exposed
into browser code because of the Disqus module.
To decouple this, all of the siteMetadata information is served via
GraphQL.
This commit has this change.

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;
+    const { postNode, siteMetadata } = this.props;
-    if (!config.siteMetadata.disqusShortname) {
+    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 } }) {