Nocturnal Pumpkin Maelstrom

    gatsby-plugin-disqus

    1.2.3 • Public • Published

    Gatsby Plugin Disqus

    A plugin that simplifies adding Disqus comments to your Gatsby website

    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 different Disqus components into my Gatsby site, creating an easily-configured plugin for the Gatsby ecosystem felt like a no-brainer.

    Install

    $ yarn add gatsby-plugin-disqus

    or

    $ npm install -S gatsby-plugin-disqus

    Configure

    Add the plugin to your gatsby-config.js file with your Disqus shortname

    // gatsby-config.js
    module.exports = {
      plugins: [
        {
          resolve: `gatsby-plugin-disqus`,
          options: {
            shortname: `your-disqus-shortname`
          }
        },
      ]
    }

    Usage

    You can use the plugin as shown in this brief example:

    import { Disqus, CommentCount } from 'gatsby-plugin-disqus'
    
    const PostTemplate = () => {
      let disqusConfig = {
        url: `${config.siteUrl+location.pathname}`,
        identifier: post.id,
        title: post.title,
      }
      return (
        <>
          <h1>{post.title}</h1>
          <CommentCount config={disqusConfig} placeholder={'...'} />
          /* Post Contents */
          <Disqus config={disqusConfig} />
        </>
      )
    }
    
    export default PostTemplate

    While providing a url, identifier, and title are optional, these attributes are recommended as it will prevent threads from being lost in the case that the domain changes or the post is renamed. Additional information on all available parameters can be found on the wiki.

    Note: When running your site locally, you should pass the production URL to the config.url because this is the URL that Disqus will associate with the shortname and identifier to identify the correct comment thread.

    Contributing

    1. Make sure you have yarn installed.
    2. Create a new folder for your yarn workspace. mkdir gatsby-disqus-workspace
    3. Inside your workspace folder, clone this repo.
    4. cd into gatsby-disqus-workspace/gatsby-plugin-disqus/ and run yarn && yarn watch. Leave this terminal window open.
    5. Add a gatsby site that uses gatsby-plugin-disqus into your workspace folder for testing purposes.
    6. In your workspace folder create a package.json and add the following:
    {
    	"private": true,
    	"workspaces": [
    		"your-example-test-site",
    		"gatsby-plugin-disqus/lib"
    	]
    }
    1. In a new terminal window, navigate to your workspace folder and run yarn && yarn workspace <example-site> run develop.

    If you have unanswered questions or would like help with enhancing or debugging the plugin, feel free create an issue or submit a pull request.

    Install

    npm i gatsby-plugin-disqus

    DownloadsWeekly Downloads

    1,413

    Version

    1.2.3

    License

    MIT

    Unpacked Size

    24.4 kB

    Total Files

    9

    Last publish

    Collaborators

    • tterb