From d8587473aaadc79de955f2a7c331ab9c85973d8c Mon Sep 17 00:00:00 2001
From: Shivank Anchal <anchalshivank99@gmail.com>
Date: Sat, 14 Sep 2024 15:03:03 +0530
Subject: [PATCH] Enable comments and reactions on the blog posts

Signed-off-by: Shivank Anchal <anchalshivank99@gmail.com>
---
 .../2023-09-04-the-story-behind-replica_io.md |  1 -
 .../index.mdx                                 |  1 -
 docusaurus.config.js                          |  3 +-
 src/theme/BlogPostItem/index.js               | 32 +++++++++++++------
 4 files changed, 24 insertions(+), 13 deletions(-)

diff --git a/blog/2023-09-04-the-story-behind-replica_io.md b/blog/2023-09-04-the-story-behind-replica_io.md
index ab9f2c0..51bb91d 100644
--- a/blog/2023-09-04-the-story-behind-replica_io.md
+++ b/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
diff --git a/blog/2024-03-04-on-implementation-of-distributed-prtocols/index.mdx b/blog/2024-03-04-on-implementation-of-distributed-prtocols/index.mdx
index d1a8e65..6e90845 100644
--- a/blog/2024-03-04-on-implementation-of-distributed-prtocols/index.mdx
+++ b/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.
diff --git a/docusaurus.config.js b/docusaurus.config.js
index 58d4aa7..9339856 100644
--- a/docusaurus.config.js
+++ b/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.
diff --git a/src/theme/BlogPostItem/index.js b/src/theme/BlogPostItem/index.js
index cbf1c44..92a556f 100644
--- a/src/theme/BlogPostItem/index.js
+++ b/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}
         />
       )}
     </>