feat(disqus): add url into disqus config (close #135)

CHANGELOG.adoc

@@ -3,10 +3,9 @@
 :!author-email:
 :author: {author-name}
 :!email: {author-email}
-:revnumber: Branch feat/change-disqus v1.0.0. (Base v1.55.1)
-:revdate: 2020-01-19T23:20:47+0900
-:revremark: Add log that Update prop type from `any` to `string` \
-            in `Disqus` component
+:revnumber: Branch feat/change-disqus v1.1.0. (Base v1.55.1)
+:revdate: 2020-01-20T07:37:58+0900
+:revremark: Add log that add url into disqus config.
 :doctype: article
 :description: gatsby-simple-blog-with-asciidoctor Change Log
 :title:
@@ -43,10 +42,14 @@ ifndef::env-github[:icons: font]
 :repository-url: {hitsuji-no-shippo-github-profile-url}/gatsby-simple-blog-with-asciidoctor
 :issues-url: {repository-url}/issues
 
-== 0.4.0 (2020-01-19)
+== 0.4.0 (2020-01-20)
 
 === Features
 
+==== Add
+
+* url into disqus config. (close link:{issues-url}/135[#135^])
+
 ==== Update
 
 * Theme icon positions.

src/components/Disqus/Disqus.js

@@ -4,16 +4,17 @@ import PropTypes from 'prop-types';
 import { graphql, useStaticQuery } from 'gatsby';
 import { DiscussionEmbed } from 'disqus-react';
 
-function Disqus({ identifier, title, show }) {
+function Disqus({ identifier, title, slug, show }) {
   const {
     site: {
-      siteMetadata: { disqusShortName },
+      siteMetadata: { siteUrl, disqusShortName },
     },
   } = useStaticQuery(
     graphql`
       query {
         site {
           siteMetadata {
+            siteUrl
             disqusShortName
           }
         }
@@ -25,12 +26,27 @@ function Disqus({ identifier, title, show }) {
     return null;
   }
 
-  return <DiscussionEmbed shortname={disqusShortName} config={{ identifier, title }} />;
+  const config = {
+    identifier,
+    title,
+  }
+
+  if (typeof siteUrl === `string`) {
+    config.url = `${siteUrl}/${slug}`
+  }
+
+  return (
+    <DiscussionEmbed
+      shortname={disqusShortName}
+      config={config}
+    />
+  );
 }
 
 Disqus.propTypes = {
   identifier: PropTypes.string.isRequired,
   title: PropTypes.string.isRequired,
+  slug: PropTypes.string.isRequired,
   show: PropTypes.bool,
 };
 

src/templates/blog-post.js

@@ -71,7 +71,11 @@ function BlogPostTemplate({ data, pageContext, location }) {
         </li>
       </ul>
 
-      <Disqus identifier={post.id} show={post.pageAttributes.disqus} title={post.document.title} />
+      <Disqus
+        identifier={post.id}
+        show={post.pageAttributes.disqus}
+        title={post.document.title}
+        slug={post.fields.slug} />
     </Layout>
   );
 }