Enable comments and reactions on blog posts

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,
+    disqusShortname: 'https-replica-io-dev'
   },
 
   // GitHub pages deployment config.

package.json

@@ -20,6 +20,7 @@
     "@mdx-js/react": "^3.0.1",
     "botex": "^1.0.0",
     "clsx": "^2.1.1",
+    "disqus-react": "^1.1.5",
     "prism-react-renderer": "^2.3.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

src/theme/BlogPostItem/index.js

@@ -0,0 +1,42 @@
+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 useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import { useColorMode } from '@docusaurus/theme-common';
+
+export default function BlogPostItemWrapper(props) {
+  const { metadata } = useBlogPost();
+  const { frontMatter, permalink, title } = metadata;
+  const currentUrlOrigin = typeof window !== 'undefined' ? window.location.origin : '';
+  const fullPermalink = `${currentUrlOrigin}${permalink}`;
+  const { comments = true } = frontMatter;
+  const { siteConfig, i18n } = useDocusaurusContext();
+  const shortname = siteConfig.customFields.disqusShortname;
+  const { colorMode } = useColorMode();
+  const [disqusColorMode, setDisqusColorMode] = useState(colorMode);
+
+  useEffect(() => {
+    // Disqus doesn't auto-update when the site's theme changes,
+    // so we re-render the DiscussionEmbed to reflect the new theme.
+    setDisqusColorMode(colorMode);
+  }, [colorMode]);
+
+  return (
+    <>
+      <BlogPostItem {...props} />
+      {comments && (
+        <DiscussionEmbed
+          // This property is not used by `DiscussionEmbed`, but forces React to re-render it upon theme changes
+          colorMode={disqusColorMode}
+          shortname={shortname}
+          config={{
+            url: fullPermalink,
+            title,
+            language: i18n.currentLocale,
+          }}
+        />
+      )}
+    </>
+  );
+}

src/theme/Footer/Copyright/index.js

@@ -6,7 +6,7 @@ export default function CopyrightWrapper(props) {
   const { siteConfig: { customFields: {
     siteLicense,
   } } } = useDocusaurusContext();
-
+  
   return (
     <>
       <div>Made with ❤️ on Earth.</div>