{"componentChunkName":"component---node-modules-lekoarts-gatsby-theme-minimal-blog-core-src-templates-post-query-tsx","path":"/blog/adding-comments-gatsby-giscus","result":{"data":{"post":{"__typename":"MdxPost","slug":"/blog/adding-comments-gatsby-giscus","title":"Adding Comments to My Gatsby Blog: The Giscus Journey","date":"20.05.2024","tags":[{"name":"Gatsby","slug":"gatsby"},{"name":"React","slug":"react"},{"name":"Giscus","slug":"giscus"},{"name":"Web Development","slug":"web-development"}],"description":"A fun deep dive into how I added a commenting system to this blog. Spoilers: We chose Giscus over Disqus because ads are the worst.","body":"function _extends() { _extends = Object.assign || 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); }\n\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; }\n\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\n/* @jsx mdx */\nvar _frontmatter = {\n  \"title\": \"Adding Comments to My Gatsby Blog: The Giscus Journey\",\n  \"date\": \"2024-05-20T00:00:00.000Z\",\n  \"slug\": \"/blog/adding-comments-gatsby-giscus\",\n  \"description\": \"A fun deep dive into how I added a commenting system to this blog. Spoilers: We chose Giscus over Disqus because ads are the worst.\",\n  \"tags\": [\"Gatsby\", \"React\", \"Giscus\", \"Web Development\"],\n  \"banner\": \"./banner.jpg\"\n};\n\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\n\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, \"So, I decided it was finally time to let you all speak your minds on my blog. A dangerous move? Maybe. But hey, engagement is engagement, right? \\uD83D\\uDE09\"), mdx(\"p\", null, \"I embarked on a quest to find the perfect commenting system. My criteria were simple, or so I thought:\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"Fast\"), \": No one likes a slow website.\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"Free\"), \": Need I say more?\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"Ad-Free\"), \": I'm not here to sell you insurance.\")), mdx(\"h3\", null, \"The Contenders\"), mdx(\"h4\", null, \"1. Disqus: The Old Giant\"), mdx(\"p\", null, \"Everyone knows Disqus. It's the \\\"easy\\\" button of commenting systems.\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"Pros\"), \": Supports anonymous guest comments. Easy to set up.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"Cons\"), \": The free plan comes with \", mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"ads\"), \". Lots of ads. And tracking scripts that weigh down the site like a brick.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"Verdict\"), \": Hard pass. I want my blog to be a sanctuary, not a billboard.\")), mdx(\"h4\", null, \"2. Self-Hosted (Remark42, Commento)\"), mdx(\"p\", null, \"Cool tech, privacy-focused, and open source.\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"Pros\"), \": Full control, no ads, supports anonymity.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"Cons\"), \": \\\"Self-hosted\\\" is code for \\\"you now have a server to manage/pay for.\\\" I wanted a \", mdx(\"em\", {\n    parentName: \"li\"\n  }, \"static\"), \" site, remember?\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"Verdict\"), \": Too much maintenance. I'm lazy.\")), mdx(\"h4\", null, \"3. Giscus: The Hero We Needed\"), mdx(\"p\", null, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"960px\"\n    }\n  }), \"\\n      \", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"87.91666666666667%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAASCAYAAABb0P4QAAAACXBIWXMAABYlAAAWJQFJUiTwAAACgElEQVQ4y5VUa2+jMBDM//9p96FSdeqlSpo0PPzAYIMJJMaGzGmXpq10atVDGu3awuuZ8Wo3eWWhtcK5c2g7j67z8OcBw3gFfbfb7b+wOZiIhyxgpyfe+Pg+5z//Nq91wK/DGVsxYooRMSbEGBHSDde4IDBmhDAhhPCGCVeK04TrdY3TFLEQQ9cYyPwIWZxwPB6xfzng5XDEn4PEYzYw+7wJ8F0Hax2sc3Bty3nbdmgai7br0Pf9KjlMEaoN0D5BND0zXJYFtzkhpQUh/afklBJKbXEsNEqpUZsKxhjU1sFXGmlaJd3l9t6vF371KNM04fR6wH7/gl1msH012B0zFEUO51oGS7UOzjnUxnDBewf8y3CeIXSD0nhs9YIntWBfRfRh/lLW7YtiXJBeh1g97hV+HzQedhovhYG1Fo21qJuGjad1ZRr0w/f9yQyNDxA2QLiAxl+AJWKeZ5C/d9zXy/J9f27GyxW1bRGmhEuIHOOnQvTq92LvPco9uYIUEignbzcxzdxb1rVorENlaujKQOoKShvUjYXSFXRVw9QNhmHEeRgYlA/jiHG84HK5rgXZm8owilJwa7yZtBrPceH4oz40puZCUiqcThkPhfkGpPmGeQHSHfPMVqyyP+xY9+KKlIihQ1GUkEpDKYlDrrHNHJ6LFk+nBruyw3NuUQgFIQSyvECW5Xx5nhccaU0gUhtT1xBCQlcVylJwcToopEJWlOwfoTIGpIb2paTLNRcgq0oh4H3Pj7ehREgJpTVHOiiVYraFttjLM07S4VT1OKqe15nuoJRCzsoUE6nrZu1DkkAThqYFTQ/vPU8TmiB0mWtp3b2j8z2jfZs49D/ldJY8/QuPgmeIA0yJgAAAAABJRU5ErkJggg==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"Giscus\",\n    \"title\": \"Giscus\",\n    \"src\": \"/static/2702f888b7eb930d3ab55361a1779c90/7d769/Giscus.png\",\n    \"srcSet\": [\"/static/2702f888b7eb930d3ab55361a1779c90/5243c/Giscus.png 240w\", \"/static/2702f888b7eb930d3ab55361a1779c90/ab158/Giscus.png 480w\", \"/static/2702f888b7eb930d3ab55361a1779c90/7d769/Giscus.png 960w\", \"/static/2702f888b7eb930d3ab55361a1779c90/87339/Giscus.png 1440w\", \"/static/2702f888b7eb930d3ab55361a1779c90/8128f/Giscus.png 1482w\"],\n    \"sizes\": \"(max-width: 960px) 100vw, 960px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  })), \"\\n    \"), \"\\nEnter \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://giscus.app/\"\n  }), \"Giscus\"), \". It uses \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"GitHub Discussions\"), \" to store comments.\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"Pros\"), \": 100% Free. Open Source. No ads. No tracking. Blazing fast.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"Cons\"), \": You \", mdx(\"em\", {\n    parentName: \"li\"\n  }, \"must\"), \" log in with GitHub to comment.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"Verdict\"), \": We have a winner! \\uD83C\\uDFC6\")), mdx(\"h3\", null, \"Implementation: The Shadow Realm\"), mdx(\"p\", null, \"Since I'm using the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"@lekoarts/gatsby-theme-minimal-blog\"), \", I had to use a Gatsby superpower called \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Component Shadowing\"), \". Basically, I hijacked the theme's \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"post.tsx\"), \" file and injected my own code.\"), mdx(\"p\", null, \"We encountered a fun issue where the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"@giscus/react\"), \" package hated my older Gatsby version. The solution? We built our own \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Giscus\"), \" component from scratch that injects the script tag manually. Modern problems require retro solutions.\"), mdx(\"p\", null, \"Here's the snippet that makes the magic happen:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-tsx\"\n  }), \"// src/components/Giscus.tsx\\nuseEffect(() => {\\n  const script = document.createElement('script')\\n  script.src = 'https://giscus.app/client.js'\\n  script.setAttribute('data-repo', \\\"jsean662/JBLOG-COMMENTS\\\")\\n  script.setAttribute('data-mapping', \\\"pathname\\\")\\n  script.setAttribute('data-theme', theme) // Allows dynamic dark mode!\\n  // ... helper attributes\\n  ref.current.appendChild(script)\\n}, [])\\n\")), mdx(\"p\", null, \"And just like that, we have comments! \\uD83D\\uDC47\"), mdx(\"p\", null, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"960px\"\n    }\n  }), \"\\n      \", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"40.833333333333336%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAICAYAAAD5nd/tAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAvUlEQVQoz5WR3QrDIAyF+/6vt7tdlNGbdYyuav2LRs/QVkYZhTbwGdB4ckg6HETOuVJCSIlpFrv7I7pyhBAQYwQzV5pQy0prvJVprXAcGV0RGscXPvMM7wlaG4QQ/1yecVdKu5RyFVm0hVwMPAVYR5dwnup/5rQKSmUglMaiHZwPtWDNZ/gJp7QJtserzhqRMsjxJpgzjHW1U5kdXaDUlxHdpwduzzsic9kyYK0DEZ0c/H4JnBJ6MaCXAzgxvpxVc+zAQirxAAAAAElFTkSuQmCC')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"Comments Section\",\n    \"title\": \"Comments Section\",\n    \"src\": \"/static/bc7e779b394c2393be3bf7c72d670b79/7d769/comment.png\",\n    \"srcSet\": [\"/static/bc7e779b394c2393be3bf7c72d670b79/5243c/comment.png 240w\", \"/static/bc7e779b394c2393be3bf7c72d670b79/ab158/comment.png 480w\", \"/static/bc7e779b394c2393be3bf7c72d670b79/7d769/comment.png 960w\", \"/static/bc7e779b394c2393be3bf7c72d670b79/87339/comment.png 1440w\", \"/static/bc7e779b394c2393be3bf7c72d670b79/88b03/comment.png 1920w\", \"/static/bc7e779b394c2393be3bf7c72d670b79/20945/comment.png 2104w\"],\n    \"sizes\": \"(max-width: 960px) 100vw, 960px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  })), \"\\n    \")), mdx(\"p\", null, \"One little detail: You do need a GitHub account to comment. We might explore anonymous commenting in the future if we can find a spam-free way to do it, but for now, we're keeping it simple and high-quality.\"), mdx(\"p\", null, \"Feel free to test it out below. Let me know what you think of the new setup (you literally can now).\"), mdx(\"p\", null, \"Cheers! \\uD83C\\uDF7B\"));\n}\n;\nMDXContent.isMDXComponent = true;","excerpt":"So, I decided it was finally time to let you all speak your minds on my blog. A dangerous move? Maybe. But hey, engagement is engagement…","timeToRead":1,"banner":null}},"pageContext":{"slug":"/blog/adding-comments-gatsby-giscus","formatString":"DD.MM.YYYY"}}}