https://github.com/tterb/gatsby-plugin-disqus

:speech_balloon: A plugin for adding Disqus comments to GatsbyJS
https://github.com/tterb/gatsby-plugin-disqus

disqus gatsby gatsby-plugin gatsbyjs

Last synced: 3 months ago
JSON representation

:speech_balloon: A plugin for adding Disqus comments to GatsbyJS

• Host: GitHub
• URL: https://github.com/tterb/gatsby-plugin-disqus
• Owner: tterb
• License: mit
• Created: 2019-04-16T03:36:28.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2023-07-19T01:11:19.000Z (over 1 year ago)
• Last Synced: 2024-09-28T14:01:21.336Z (4 months ago)
• Topics: disqus, gatsby, gatsby-plugin, gatsbyjs
• Language: JavaScript
• Homepage: https://brettstevenson.io/gatsby-plugin-disqus
• Size: 7.1 MB
• Stars: 45
• Watchers: 4
• Forks: 5
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • Contributing: docs/CONTRIBUTING.md
  • License: LICENSE
  • Code of conduct: docs/CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        
#  Gatsby Plugin Disqus  

A plugin that simplifies adding [Disqus](https://disqus.com/) comments to your [Gatsby](https://www.gatsbyjs.org/) 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  

```sh

$ yarn add gatsby-plugin-disqus

```  

or  

```sh

$ npm install -S gatsby-plugin-disqus

```

## Configure  

Add the plugin to your `gatsby-config.js` file with your [Disqus shortname](https://help.disqus.com/installation/whats-a-shortname)  

```js

// 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:  

```jsx

import { Disqus, CommentCount } from 'gatsby-plugin-disqus'

const PostTemplate = () => {

  let disqusConfig = {

    url: `${config.siteUrl+location.pathname}`,

    identifier: post.id,

    title: post.title,

  }

  return (

    <>

      
{post.title}

      

      /* Post Contents */

      

    >

  )

}


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](https://github.com/tterb/gatsby-plugin-disqus/wiki/Configure#parameters).

**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`](https://yarnpkg.com/) 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:

```json

{

	"private": true,

	"workspaces": [

		"your-example-test-site",

		"gatsby-plugin-disqus/lib"

	]

}

```

  7. In a new terminal window, navigate to your workspace folder and run `yarn && yarn workspace  run develop`.

If you have unanswered questions or would like help with enhancing or debugging the plugin, feel free create an [issue](https://github.com/tterb/gatsby-plugin-disqus/issues/new) or submit a [pull request](https://github.com/tterb/gatsby-plugin-disqus/pulls).