Disqus & Gatsby


UPDATE

Don’t use Disqus.

Original Post

You can find multiple starters that have Disqus already built in, but if you began without it, here’s a quick-n-dirty way to add it. (N.B.: This is entirely copied from gatsby-starter-casper.)

Disqus.com

First, get your Disqus account ready. Create an account if you need to; all that jazz. Then, from the Disqus admin page, click on Your Sites near the top left, then ”+ New”.

add new site button on disqus

Give the resulting wizard a website name (this will be the shortname you’ll need in a minute.)

shortname entry field

The Disqus setup will then offer you a bunch of possible code snippets depending on your platform. You can skip all of that.

Install dependency, copy gatsby-starter-casper code

In your gatsby folder, user npm or yarn to install react-disqus-comments.

Somewhere in your /src (probably in something like /src/Components/Disqus), create a Disqus.js(x) file. Copy over the code from the same file in Gatsby-Starter-Casper.

Personalize the component

The file you copied returns an element that looks like this:

<ReactDisqusComments
  shortname={config.disqusShortname}
  identifier={post.title}
  title={post.title}
  url={url}
  category_id={post.category_id}
  onNewComment={this.notifyAboutComment}
/>

I don’t know if it’s a bad practice, but since I don’t have a master config file anywhere, I deleted the import config from ./wherever at the top, and simply hard-coded my shortname into the code, where the original uses config.disqusShortname.

My frontmatter includes a title, so the post.title worked without changing. I suppose you might need to tinker with the identifier or title props, if your markdown files or frontmatter are arranged differently.

The url and category_id properties are not required, and I removed them. You can read about what they (and the other props) do, and what their defaults are, in the react-disqus-comments code. (That link goes directly to the PropTypes declaration for the props, which are extensively documented. Super-helpful: ⭐⭐⭐⭐⭐.)

For reference, my amended element’s render() looks like this:

  render() {
    const { postNode } = this.props;
    const post = postNode.frontmatter;
    return (
      <ReactDisqusComments
        shortname="pineandvine"
        identifier={post.date}
        title={post.title}
        onNewComment={this.notifyAboutComment}
      />
    );
  }

NOTE: I swapped out the identifier with post.date, for a reason too long to explain here and I am probably wrong and didn’t need to.

Use your new Disqus component

Now you need to use that Disqus.js(x) file. You likely want comments on your individual blog posts, so import Disqus from '../components/Disqus/Disqus' in your blog’s template for a single post. (Check your site’s relative path, there). In my case, it’s /src/templates/blog-post.js. In the Casper starter we’re copying, it’s /src/templates/post.jsx.

Use the imported component in your template’s JSX. I inserted <Disqus postNode={post} /> immediately after the div that dangerously sets the innerHTML to post.html.

Disqus element screenshot

You might want to put it somewhere different.

Note that the Disqus component requires that you send in a postNode as props. In the repo we’re copying, the blog template’s render method includes this line:

const postNode = this.props.data.markdownRemark;

which means the Disqus component’s prop is just postNode={postNode}. The starter I have been fiddling with destructures the query data a little differently, so my prop reads postNode={post}. You’ll want to make sure you’re passing the correct bit down to the Disqus component.

That’s it?

I was getting errors in the console and a ‘sorry, nope’ message from Disqus, at first. One of the errors was a security error about http vs https content, so I knew I’d need to push my code to Netlify, because my insecure localhost environment wouldn’t work. While I waited for the ‘production’ site to build, I poked around further and got the impression that maybe my ad-blocker was part of the problem too. So I disabled that.

Some combination of these actions must’ve worked, because the Disqus comment tool loaded when my site came back up.

no problemo says bart simpson

(NOTE: If you’re not using Material-UI, you can also take out the constructor and the bound functions in the Disqus component.)

This entry was posted on March 04, 2018 with tags