{
    "componentChunkName": "component---src-templates-post-jsx",
    "path": "/blog/gatsby-plugin-disqus",
    "result": {"data":{"post":{"id":"50cb4899-3d2a-59eb-b75c-521c2d879ab3","body":"var _excluded = [\"components\"];\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n  \"title\": \"Gatsby + Disqus\",\n  \"slug\": \"/gatsby-plugin-disqus\",\n  \"description\": \"Simplifying the process of adding Disqus comments to your Gatsby website\",\n  \"date\": \"2019-06-06T00:00:00.000Z\",\n  \"category\": \"GatsbyJS\",\n  \"image\": \"./img/gatsby-disqus.png\",\n  \"tags\": [\"gatsbyjs\", \"projects\", \"react\", \"javascript\", \"web dev\"],\n  \"published\": true\n};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"h2\", null, \"Description\"), mdx(\"p\", null, \"The goal of this plugin is to allow users to bring their content to life and cultivate engaged communities by integrating \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://disqus.com/\",\n    \"target\": \"_blank\",\n    \"rel\": \"nofollow noopener noreferrer\"\n  }, \"Disqus\"), \" comments into their blazing-fast \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://www.gatsbyjs.org/\",\n    \"target\": \"_blank\",\n    \"rel\": \"nofollow noopener noreferrer\"\n  }, \"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.  \"), mdx(\"h2\", null, \"Install\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-bash\"\n  }, \"$ yarn add gatsby-plugin-disqus\\n\")), mdx(\"p\", null, \"or  \"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-bash\"\n  }, \"$ npm install -S gatsby-plugin-disqus\\n\")), mdx(\"h2\", null, \"Configure\"), mdx(\"p\", null, \"Add the plugin to your \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"gatsby-config.js\"), \" file with your \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://help.disqus.com/installation/whats-a-shortname\",\n    \"target\": \"_blank\",\n    \"rel\": \"nofollow noopener noreferrer\"\n  }, \"Disqus shortname\"), \"  \"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"// gatsby-config.js\\nmodule.exports = {\\n  plugins: [\\n    {\\n      resolve: `gatsby-plugin-disqus`,\\n      options: {\\n        shortname: `your-disqus-shortname`\\n      }\\n    },\\n  ]\\n}\\n\")), mdx(\"h2\", null, \"Usage\"), mdx(\"p\", null, \"The plugin can be used as shown in this brief example:  \"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"import Disqus from 'gatsby-plugin-disqus'\\n\\nconst PostTemplate = () => (\\n  <>\\n    /* Page Contents */\\n    <Disqus \\n      identifier={post.id}\\n      title={post.title}\\n      url={`${config.siteUrl}${location.pathname}`}\\n    />\\n  </>\\n)\\n\\nexport default PostTemplate\\n\")), mdx(\"p\", null, \"While providing an \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"identifier\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"title\"), \", and \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"url\"), \" are optional, it is recommended as it will ensure that threads won\\u2019t be lost in the case that the domain changes or the post is renamed.\"), mdx(\"h2\", null, \"Contributing\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Make sure you have \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"yarn\"), \" installed.\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Create a new folder to be used as your yarn workspace. \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"mkdir gatsby-disqus-workspace\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Inside your workspace folder, clone this repo.\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"cd\"), \" into \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"gatsby-disqus-workspace/gatsby-plugin-disqus/\"), \" and run \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"yarn && yarn watch\"), \". \", mdx(\"em\", {\n    parentName: \"li\"\n  }, \"Leave this terminal window open.\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"In addition to this repo in your workspace folder, add a gatsby site that uses \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"gatsby-plugin-disqus\"), \" for testing purposes.\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"In your workspace folder create a \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"package.json\"), \" and add the following:\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-json\"\n  }, \"{\\n    'private': true,\\n    'workspaces': [\\n        'your-example-test-site',\\n        'gatsby-plugin-disqus/lib'\\n    ]\\n}\\n\")), mdx(\"ol\", {\n    \"start\": 7\n  }, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"In a new terminal window, \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"cd\"), \" to your workspace folder and run \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"yarn && yarn workspace <example-site> run develop\"), \".\")), mdx(\"p\", null, \"If you have unanswered questions, would like help with enhancing or debugging the plugin, feel free create an \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://github.com/tterb/gatsby-plugin-disqus/issues/new\",\n    \"target\": \"_blank\",\n    \"rel\": \"nofollow noopener noreferrer\"\n  }, \"issue\"), \" or submit a \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://github.com/tterb/gatsby-plugin-disqus/pulls\",\n    \"target\": \"_blank\",\n    \"rel\": \"nofollow noopener noreferrer\"\n  }, \"pull request\"), \"  \"));\n}\n;\nMDXContent.isMDXComponent = true;","fields":{"slug":"/gatsby-plugin-disqus"},"frontmatter":{"title":"Gatsby + Disqus","description":"Simplifying the process of adding Disqus comments to your Gatsby website","date":"06 June 2019","category":"GatsbyJS","image":{"childImageSharp":{"gatsbyImageData":{"layout":"fullWidth","backgroundColor":"#583878","images":{"fallback":{"src":"/static/7f5c4a4c18e98c1fcebaddaaca69a447/553de/gatsby-disqus.png","srcSet":"/static/7f5c4a4c18e98c1fcebaddaaca69a447/343d9/gatsby-disqus.png 750w,\n/static/7f5c4a4c18e98c1fcebaddaaca69a447/c6c92/gatsby-disqus.png 1080w,\n/static/7f5c4a4c18e98c1fcebaddaaca69a447/b513e/gatsby-disqus.png 1366w,\n/static/7f5c4a4c18e98c1fcebaddaaca69a447/553de/gatsby-disqus.png 1920w","sizes":"100vw"},"sources":[{"srcSet":"/static/7f5c4a4c18e98c1fcebaddaaca69a447/06f57/gatsby-disqus.webp 750w,\n/static/7f5c4a4c18e98c1fcebaddaaca69a447/b5fe1/gatsby-disqus.webp 1080w,\n/static/7f5c4a4c18e98c1fcebaddaaca69a447/834a8/gatsby-disqus.webp 1366w,\n/static/7f5c4a4c18e98c1fcebaddaaca69a447/3f2a9/gatsby-disqus.webp 1920w","type":"image/webp","sizes":"100vw"}]},"width":1,"height":0.3755208333333333}}}}},"avatar":{"childImageSharp":{"gatsbyImageData":{"layout":"constrained","backgroundColor":"#f8f8f8","images":{"fallback":{"src":"/static/b24b72d8f366da7af02542a735d82fa0/f9edd/me.jpg","srcSet":"/static/b24b72d8f366da7af02542a735d82fa0/93848/me.jpg 60w,\n/static/b24b72d8f366da7af02542a735d82fa0/73bb6/me.jpg 120w,\n/static/b24b72d8f366da7af02542a735d82fa0/f9edd/me.jpg 240w,\n/static/b24b72d8f366da7af02542a735d82fa0/97a19/me.jpg 480w","sizes":"(min-width: 240px) 240px, 100vw"},"sources":[{"srcSet":"/static/b24b72d8f366da7af02542a735d82fa0/927d1/me.webp 60w,\n/static/b24b72d8f366da7af02542a735d82fa0/507b0/me.webp 120w,\n/static/b24b72d8f366da7af02542a735d82fa0/8d565/me.webp 240w,\n/static/b24b72d8f366da7af02542a735d82fa0/21b1a/me.webp 480w","type":"image/webp","sizes":"(min-width: 240px) 240px, 100vw"}]},"width":240,"height":240}}}},"pageContext":{"slug":"/gatsby-plugin-disqus"}},
    "staticQueryHashes": []}