Description
The goal of this plugin is to allow users to bring their content to life and cultivate engaged communities by integrating Disqus comments into their blazing-fast Gatsby websites. After struggling to integrate a few different Disqus React components into my Gatsby site, creating an easily-configurable plugin for the Gatsby ecosystem felt like a no-brainer.
Install
1$ yarn add gatsby-plugin-disqus
or
1$ npm install -S gatsby-plugin-disqus
Configure
Add the plugin to your gatsby-config.js file with your Disqus shortname
1// gatsby-config.js2module.exports = {3 plugins: [4 {5 resolve: `gatsby-plugin-disqus`,6 options: {7 shortname: `your-disqus-shortname`8 }9 },10 ]11}
Usage
The plugin can be used as shown in this brief example:
1import Disqus from 'gatsby-plugin-disqus'23const PostTemplate = () => (4 <>5 /* Page Contents */6 <Disqus7 identifier={post.id}8 title={post.title}9 url={`${config.siteUrl}${location.pathname}`}10 />11 </>12)1314export default PostTemplate
While providing an identifier, title, and url are optional, it is recommended as it will ensure that threads won’t be lost in the case that the domain changes or the post is renamed.
Contributing
- Make sure you have
yarninstalled. - Create a new folder to be used as your yarn workspace.
mkdir gatsby-disqus-workspace - Inside your workspace folder, clone this repo.
cdintogatsby-disqus-workspace/gatsby-plugin-disqus/and runyarn && yarn watch. Leave this terminal window open.- In addition to this repo in your workspace folder, add a gatsby site that uses
gatsby-plugin-disqusfor testing purposes. - In your workspace folder create a
package.jsonand add the following:
1{2 'private': true,3 'workspaces': [4 'your-example-test-site',5 'gatsby-plugin-disqus/lib'6 ]7}
- In a new terminal window,
cdto your workspace folder and runyarn && yarn workspace <example-site> run develop.
If you have unanswered questions, would like help with enhancing or debugging the plugin, feel free create an issue or submit a pull request

