Merge pull request #43 from marcelabomfim/master

Disqus support

README.md

@@ -16,6 +16,7 @@ Lumen is a minimal, lightweight and mobile-first starter for creating blogs uses
 + Automatic Sitemap generation.
 + Offline support.
 + Google Analytics support.
++ Disqus Comments support.
 
 ## Folder Structure
 
@@ -32,6 +33,7 @@ Lumen is a minimal, lightweight and mobile-first starter for creating blogs uses
     │       └── pages
     ├── components
     │   ├── CategoryTemplateDetails
+    │   ├── Disqus
     │   ├── Links
     │   ├── Menu
     │   ├── PageTemplateDetails
@@ -76,9 +78,9 @@ Install this starter (assuming Gatsby is installed) by running from your CLI:
 :---: |:---: |:---: |:---: |:---: |:---: |
 [alxshelepenok](https://github.com/alxshelepenok) |[abisz](https://github.com/abisz) |[ihororlovskyi](https://github.com/ihororlovskyi) |[vinnymac](https://github.com/vinnymac) |[axelclark](https://github.com/axelclark) |[concreted](https://github.com/concreted) |
 
-[<img alt="charandas" src="https://avatars2.githubusercontent.com/u/542168?v=4&s=117" width="117">](https://github.com/charandas) |[<img alt="zollillo" src="https://avatars3.githubusercontent.com/u/8833904?v=4&s=117" width="117">](https://github.com/zollillo) |[<img alt="swapnilmishra" src="https://avatars2.githubusercontent.com/u/875450?v=4&s=117" width="117">](https://github.com/swapnilmishra) |
+[<img alt="charandas" src="https://avatars2.githubusercontent.com/u/542168?v=4&s=117" width="117">](https://github.com/charandas) |[<img alt="zollillo" src="https://avatars3.githubusercontent.com/u/8833904?v=4&s=117" width="117">](https://github.com/zollillo) |[<img alt="swapnilmishra" src="https://avatars2.githubusercontent.com/u/875450?v=4&s=117" width="117">](https://github.com/swapnilmishra) |[<img alt="marcelabomfim" src="https://avatars1.githubusercontent.com/u/6224547?v=4&s=117" width="117">](https://github.com/marcelabomfim) |
-:---: |:---: |:---: |
+:---: |:---: |:---: |:---: |
-[charandas](https://github.com/charandas) |[zollillo](https://github.com/zollillo) |[swapnilmishra](https://github.com/swapnilmishra) |
+[charandas](https://github.com/charandas) |[zollillo](https://github.com/zollillo) |[swapnilmishra](https://github.com/swapnilmishra) |[marcelabomfim](https://github.com/marcelabomfim) |
 
 
 ## License

gatsby-config.js

@@ -4,6 +4,7 @@ module.exports = {
     title: 'Blog by John Doe',
     subtitle: 'Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu.',
     copyright: '© All rights reserved.',
+    disqusShortname: '',
     menu: [
       {
         label: 'Articles',

package.json

@@ -27,15 +27,15 @@
     "gatsby": "^1.8.12",
     "gatsby-link": "^1.6.8",
     "gatsby-plugin-catch-links": "^1.0.5",
+    "gatsby-plugin-feed": "^1.3.5",
     "gatsby-plugin-google-analytics": "^1.0.4",
     "gatsby-plugin-manifest": "^1.0.4",
-    "gatsby-plugin-postcss-sass": "^1.0.3",
-    "gatsby-plugin-feed": "^1.3.5",
-    "gatsby-plugin-sitemap": "^1.2.2",
     "gatsby-plugin-offline": "^1.0.4",
+    "gatsby-plugin-postcss-sass": "^1.0.3",
     "gatsby-plugin-preact": "^1.0.0",
     "gatsby-plugin-react-helmet": "^1.0.3",
     "gatsby-plugin-sharp": "^1.6.2",
+    "gatsby-plugin-sitemap": "^1.2.2",
     "gatsby-remark-copy-linked-files": "^1.5.2",
     "gatsby-remark-images": "^1.5.4",
     "gatsby-remark-prismjs": "^1.2.1",
@@ -44,8 +44,9 @@
     "gatsby-source-filesystem": "^1.4.3",
     "gatsby-transformer-remark": "^1.7.1",
     "gatsby-transformer-sharp": "^1.6.1",
-    "typeface-roboto": "latest",
+    "lodash": "^4.17.2",
-    "lodash": "^4.17.2"
+    "react-disqus-comments": "^1.1.1",
+    "typeface-roboto": "latest"
   },
   "devDependencies": {
     "postcss-pxtorem": "^4.0.1",

src/components/Disqus/Disqus.jsx

@@ -0,0 +1,49 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import ReactDisqusComments from 'react-disqus-comments';
+import config from '../../../gatsby-config';
+
+class Disqus extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      toasts: []
+    };
+    this.notifyAboutComment = this.notifyAboutComment.bind(this);
+    this.onSnackbarDismiss = this.onSnackbarDismiss.bind(this);
+  }
+
+  onSnackbarDismiss() {
+    const [, ...toasts] = this.state.toasts;
+    this.setState({ toasts });
+  }
+  notifyAboutComment() {
+    const toasts = this.state.toasts.slice();
+    toasts.push({ text: 'New comment available!!' });
+    this.setState({ toasts });
+  }
+  render() {
+    const { postNode } = this.props;
+    if (!config.siteMetadata.disqusShortname) {
+      return null;
+    }
+    const post = postNode.frontmatter;
+    const url = config.siteMetadata.url + postNode.fields.slug;
+    return (
+      <ReactDisqusComments
+        shortname={config.siteMetadata.disqusShortname}
+        identifier={post.title}
+        title={post.title}
+        url={url}
+        category_id={post.category_id}
+        onNewComment={this.notifyAboutComment}
+      />
+    );
+  }
+}
+
+Disqus.propTypes = {
+  postNode: PropTypes.object.isRequired
+};
+
+export default Disqus;

src/components/PostTemplateDetails/index.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Link from 'gatsby-link';
 import moment from 'moment';
+import Disqus from '../Disqus/Disqus';
 import './style.scss';
 
 class PostTemplateDetails extends React.Component {
@@ -30,6 +31,12 @@ class PostTemplateDetails extends React.Component {
       </div>
     );
 
+    const commentsBlock = (
+      <div>
+        <Disqus postNode={post} />
+      </div>
+    );
+
     return (
       <div>
         {homeBlock}
@@ -50,6 +57,7 @@ class PostTemplateDetails extends React.Component {
                 <br /> <strong>{author.name}</strong> on Twitter
               </a>
             </p>
+            {commentsBlock}
           </div>
         </div>
       </div>