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
yarn
installed. - Create a new folder to be used as your yarn workspace.
mkdir gatsby-disqus-workspace
- Inside your workspace folder, clone this repo.
cd
intogatsby-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-disqus
for testing purposes. - In your workspace folder create a
package.json
and 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,
cd
to 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