Enable comments and reactions on the blog posts

Signed-off-by: Shivank Anchal <[email protected]>

blog/2023-09-04-the-story-behind-replica_io.md

@@ -3,7 +3,6 @@ title: The Story Behind Replica_IO
 description: The Story Behind Replica_IO - an open-source framework for building practical distributed replication mechanisms.
 authors: sergefdrv
 tags: ["introduction", "announcement", "story"]
-draft: true
 ---
 
 This post tells how the Replica_IO project originated and explains the

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

@@ -5,7 +5,6 @@ authors: sergefdrv
 tags: ["technical", "overview", "long"]
 toc_max_heading_level: 4
 image: "./image.png"
-draft: false
 ---
 
 This post concludes the first phase of the [state-of-the-art exploration](https://github.com/replica-io/replica-io/issues/7) in the scope of milestone [M0.1](https://github.com/replica-io/replica-io/milestone/1) of the Replica_IO project, namely exploration of selected notable distributed protocol implementations. It shares the main conclusions drawn from exploring 14 different code bases and outlines the key areas of focus for the next steps developing the Replica_IO framework.

docusaurus.config.js

@@ -32,7 +32,8 @@ const config = {
     description: 'An open-source framework for building practical distributed replication mechanisms.',
     gitHubUrl: gitHubUrl,
     siteLicense: siteLicense,
-    recentBlogPostsOnHomePage: 5
+    recentBlogPostsOnHomePage: 5,
+    shortname: 'https-replica-io-dev'
   },
 
   // GitHub pages deployment config.

src/theme/BlogPostItem/index.js

@@ -1,24 +1,36 @@
-import React from 'react';
-import { DiscussionEmbed } from 'disqus-react'
+import React, { useEffect, useState } from 'react';
+import { DiscussionEmbed } from 'disqus-react';
 import BlogPostItem from '@theme-original/BlogPostItem';
-import {useBlogPost} from '@docusaurus/plugin-content-blog/client'
+import { useBlogPost } from '@docusaurus/plugin-content-blog/client';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import { useColorMode } from '@docusaurus/theme-common';
 
 export default function BlogPostItemWrapper(props) {
-  const { metadata } = useBlogPost()
-  const { frontMatter, slug, title } = metadata
-  const { comments = true } = frontMatter
+  const { metadata } = useBlogPost();
+  const { frontMatter, permalink, title } = metadata;
+  const { comments = true } = frontMatter;
+  const { siteConfig, i18n } = useDocusaurusContext();
+  const shortname = siteConfig.customFields.shortname;
+  const { colorMode } = useColorMode();
+  const [key, setKey] = useState(0);
+
+  useEffect(() => {
+    setKey((prevKey) => prevKey + 1);
+  }, [colorMode]);
+
   return (
     <>
       <BlogPostItem {...props} />
       {comments && (
         <DiscussionEmbed
-          shortname='https-replica-io-dev'
+          key={key}
+          shortname={shortname}
           config={{
-            url: slug,
-            identifier: slug,
+            identifier: permalink,
             title,
-            language: 'en_US',
+            language: i18n.currentLocale,
           }}
+          theme={colorMode}
         />
       )}
     </>