Gatsby: Docs: add guide on how to enable comments

[janosh]

Gatsby offers a number of great guides on how to add various kinds of functionality such as search, analytics, forms, etc. One feature that is extremely common for blogs but not yet covered is how to enable comments.

There's a discussion on this topic in a 2017 Spectrum chat that lists several options:

• Disqus [[mention](https://spectrum.chat/gatsby-js/general/whats-the-best-way-to-make-commenting-system~0c7e3f0f-8737-4948-9c52-0d20dfe37a05?m=MTUxMTIzMDE0NjY2MQ==)]
• Staticman [[mention](https://spectrum.chat/gatsby-js/general/whats-the-best-way-to-make-commenting-system~0c7e3f0f-8737-4948-9c52-0d20dfe37a05?m=MTUzNDkxODUxMDk4OA==)]
• Facebook comments [[mention](https://spectrum.chat/gatsby-js/general/whats-the-best-way-to-make-commenting-system~0c7e3f0f-8737-4948-9c52-0d20dfe37a05?m=MTU0MTEwNTQyNDI1MA==)]
• JustComments [[mention](https://spectrum.chat/gatsby-js/general/whats-the-best-way-to-make-commenting-system~0c7e3f0f-8737-4948-9c52-0d20dfe37a05?m=MTU0MTQ0MzcxMTgxMQ==)]
• TalkYard [[mention](https://spectrum.chat/gatsby-js/general/whats-the-best-way-to-make-commenting-system~0c7e3f0f-8737-4948-9c52-0d20dfe37a05?m=MTUxNjMzMzM5MTU5NA==)]

It would be great if Gatsby could provide an official and more up-to-date guide on the pros and cons of each service (and perhaps others I'm unaware of) as well as how to implement some of them.

[sidharthachatterjee]

@janosh This seems like a great idea! Thank you for the detailed issue.

[m-allanson]

I agree, this sounds like a good idea 👍

This could start out as an _Adding Comments_ page in the section you pointed out.

[calpa]

Just for more information, Gitalk is another useful tools for comment.

[janosh]

@sidharthachatterjee @m-allanson Just submitted a PR for the guide on how to implement Disqus.

[ghost]

I implemented Github Issues as comments on my gatsby blog using vanilla javascript/Jquery by adapting what I found on http://donw.io/post/github-comments/. Here's the modified javascript file:
https://github.com/HolmSchool/holm-school-gatsby/blob/master/src/js/github-comments.js
Then on my blogpost template I added at the bottom:

up top:
const ghc = require('../js/github-comments')
ghc.DoGithubComments(post.frontmatter.ghissue)
let page = 1
...
down below in the DOM rendering:
<div id="gh-comments">
    <h6>COMMENTS</h6>
    <div id="gh-comments-list"></div>
    <div style={{textAlign: 'center'}}><button className={css`border-radius: 3px;border: 1px solid purple;color: purple;font-family:"Courier New", Courier;vertical-align: middle;`} onClick={() => ghc.DoGithubComments(post.frontmatter.ghissue, ++page)} id="gh-load-comments">Load more comments</button></div>
</div>

and also throwing in my GraphQL query the field "ghissue" (which I manually enter in the headers of my blogpost's markdown to reference the Github Issue number)

export const query = graphql`
  query($slug: String!) {
    markdownRemark(fields: { slug: { eq: $slug } }) {
      html
      frontmatter {
        title
        ghissue
      }
    }
  }
`

as found here: https://github.com/HolmSchool/holm-school-gatsby/blob/master/src/templates/blog-post.js

Example comments on a live Gatsby page:
https://holm.school/bootstrap-your-computer-science-career/

Let me know if I need to explain anything, or possibly write a blog post or something like that.

[janosh]

@ryaholm That's cool. You might want to submit a PR that extends the docs to cover your method once the initial guide at #12458 has been merged.