From 1995b25ba3db641a4f0014db62c96c0a54fbe58d Mon Sep 17 00:00:00 2001
From: ybbarng <ybbarng@gmail.com>
Date: Tue, 6 Feb 2018 17:45:30 +0900
Subject: [PATCH] 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             | 9 ++++-----
 src/components/PostTemplateDetails/index.jsx | 2 +-
 src/templates/post-template.jsx              | 2 ++
 3 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/components/Disqus/Disqus.jsx b/src/components/Disqus/Disqus.jsx
index 6a8b2d7..2486c63 100644
--- a/src/components/Disqus/Disqus.jsx
+++ b/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}
diff --git a/src/components/PostTemplateDetails/index.jsx b/src/components/PostTemplateDetails/index.jsx
index 8736c82..b5b2b88 100644
--- a/src/components/PostTemplateDetails/index.jsx
+++ b/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>
     );
 
diff --git a/src/templates/post-template.jsx b/src/templates/post-template.jsx
index 386a58b..9ddfb93 100644
--- a/src/templates/post-template.jsx
+++ b/src/templates/post-template.jsx
@@ -34,6 +34,8 @@ export const pageQuery = graphql`
           name
           twitter
         }
+        disqusShortname
+        url
       }
     }
     markdownRemark(fields: { slug: { eq: $slug } }) {