Enable comments on blog post pages (#46)

Author: sergefdrv

blog/2024-03-04-on-implementation-of-distributed-prtocols/index.mdx

@@ -407,9 +407,3 @@ It does not mean at all that exploration, ideation, and prototyping will not tak
 import Admonition from '@theme/Admonition';
 
 <Admonition type="info" icon="❤️" title="Supporting">If you like the project and find it valuable, please <a href="https://github.com/sponsors/replica-io">support</a> its further development! 🙏</Admonition>
-
-:::tip
-
-If you have any thought you would like to share or any question regarding this post, please add a comment [here](https://github.com/orgs/replica-io/discussions/35). You are also welcome to [start a new discussion](https://github.com/orgs/replica-io/discussions/new/choose) or chime in to [our Discord](https://discordapp.com/invite/CzPfN75URD) server.
-
-:::

blog/2024-08-27-on-frameworks-for-implementing-distributed-protocols/index.mdx

@@ -161,9 +161,3 @@ import Admonition from '@theme/Admonition';
 <Admonition type="info" icon="❤️" title="Supporting">
 If you like the project and find it valuable, please <a href="https://github.com/sponsors/replica-io">support</a> its further development! 🙏
 </Admonition>
-
-:::note
-
-If you have any thought you would like to share or any question regarding this post, please add a comment [here](https://github.com/orgs/replica-io/discussions/43). You are also welcome to [start a new discussion](https://github.com/orgs/replica-io/discussions/new) or chime in to [our Discord](https://discord.replica-io.dev/) server.
-
-:::

blog/_template.md

@@ -3,13 +3,14 @@ title:
 description:
 authors:
 image:
-keywords: []
 tags: []
+keywords: []
 hide_table_of_contents: false
+disableComments: false
 ---
 
 
 
-{/* Summary part ends here */}
-{/*truncate*/}
+<!-- Summary part ends here -->
+<!--truncate-->
 

docusaurus.config.js

@@ -32,7 +32,17 @@ const config = {
     description: 'An open-source framework for building practical distributed replication mechanisms.',
     gitHubUrl: gitHubUrl,
     siteLicense: siteLicense,
-    recentBlogPostsOnHomePage: 5
+    recentBlogPostsOnHomePage: 5,
+    giscusConfig: {
+      repo: 'replica-io/replica-io',
+      repoId: 'R_kgDOJGevLg',
+      category: 'General',
+      categoryId: 'DIC_kwDOJGevLs4CUted',
+      reactionsEnabled: '1',
+      inputPosition: 'top',
+      loading: 'lazy',
+      themes: {light: 'light', dark: 'transparent_dark'},
+    },
   },
 
   // GitHub pages deployment config.

package-lock.json

@@ -17,6 +17,7 @@
     "@docusaurus/core": "^3.8.0",
     "@docusaurus/preset-classic": "^3.8.0",
     "@fortawesome/fontawesome-free": "^6.6.0",
+    "@giscus/react": "^3.1.0",
     "@mdx-js/react": "^3.0.1",
     "botex": "^1.0.0",
     "clsx": "^2.1.1",

package.json

@@ -0,0 +1,21 @@
+import Giscus from '@giscus/react';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import { useColorMode } from '@docusaurus/theme-common';
+
+export default function GiscusComments(props) {
+  const { colorMode } = useColorMode();
+  const { siteConfig, i18n } = useDocusaurusContext();
+  const { giscusConfig } = siteConfig.customFields;
+
+  return (
+    <Giscus
+      id='comments'
+      mapping='specific'
+      strict='0' /* We don't include title hash in discussion body */
+      term={props.title}
+      theme={giscusConfig.themes[colorMode] || colorMode}
+      lang={i18n.lang}
+      {...giscusConfig}
+    />
+  );
+}

src/components/GiscusComments/index.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import BlogPostItem from '@theme-original/BlogPostItem';
+import GiscusComments from '@site/src/components/GiscusComments';
+import { useBlogPost } from '@docusaurus/plugin-content-blog/client';
+
+export default function BlogPostItemWrapper(props) {
+  const { metadata, isBlogPostPage } = useBlogPost();
+  const { title, frontMatter: { disableComments } } = metadata;
+
+  return (
+    <>
+      <BlogPostItem {...props} />
+      {isBlogPostPage && !disableComments && (
+        <GiscusComments title={title}/>
+      )}
+    </>
+  );
+}