KAN-15: Share blog articles on Discours with comment section (#128)

* add comments from the Community

* prettier formatting

* remove unused style

* create component for Discourse comments

* remove debug logs

src/theme/BlogPostItem/DiscourseComments.jsx

@@ -0,0 +1,62 @@
+import React, { useEffect, useRef } from "react";
+import { useColorMode } from "@docusaurus/theme-common";
+import BrowserOnly from "@docusaurus/BrowserOnly";
+
+const DiscourseComments = ({ embedUrl }) => {
+  const { colorMode } = useColorMode();
+  const scriptAdded = useRef(false);
+
+  // Function to send the theme to the iframe
+  const sendThemeToIframe = () => {
+    const discourseUrl = "https://community.reduct.store/";
+    const iframe = document.querySelector(
+      'iframe[src*="community.reduct.store"]',
+    );
+    if (iframe && iframe.contentWindow) {
+      iframe.contentWindow.postMessage({ theme: colorMode }, discourseUrl);
+    }
+  };
+
+  useEffect(() => {
+    const discourseUrl = "https://community.reduct.store/";
+
+    if (!scriptAdded.current) {
+      window.DiscourseEmbed = {
+        discourseUrl,
+        discourseEmbedUrl: embedUrl,
+      };
+
+      // Add Discourse embed script if not already there
+      const script = document.createElement("script");
+      script.type = "text/javascript";
+      script.async = true;
+      script.src = `${discourseUrl}/javascripts/embed.js`;
+      document.body.appendChild(script);
+
+      // Mark the script as added (avoid duplicate script)
+      scriptAdded.current = true;
+    }
+
+    // Send the theme on colorMode change
+    sendThemeToIframe();
+
+    // Send the theme to the iframe when it loads
+    const handleIframeLoad = (event) => {
+      if (event.data === "iframe loaded") {
+        sendThemeToIframe();
+      }
+    };
+    window.addEventListener("message", handleIframeLoad);
+    return () => {
+      window.removeEventListener("message", handleIframeLoad);
+    };
+  }, [embedUrl, colorMode]);
+
+  return <div id="discourse-comments"></div>;
+};
+
+const DiscourseCommentsWrapper = (props) => (
+  <BrowserOnly>{() => <DiscourseComments {...props} />}</BrowserOnly>
+);
+
+export default DiscourseCommentsWrapper;

src/theme/BlogPostItem/index.js

@@ -1,9 +1,10 @@
-import React from "react";
 import BlogPostItem from "@theme-original/BlogPostItem";
 import SocialShareBar from "@site/src/components/promotional/SocialShareBar";
 import SlidingBanner from "@site/src/components/promotional/SlidingBanner";
 import BlogForm from "@site/src/components/forms/BlogForm";
+import DiscourseComments from "./DiscourseComments";
 import { useLocation } from "@docusaurus/router";
+import styles from "./styles.module.css";
 
 export default function BlogPostItemWrapper(props) {
   const { frontMatter } = props.children.type;
@@ -28,6 +29,14 @@ export default function BlogPostItemWrapper(props) {
         <>
           <SocialShareBar frontMatter={frontMatter} />
           <BlogForm elementId="subscribe-blog-form" frontMatter={frontMatter} />
+          <div className={styles.commentsContainer}>
+            <div className={styles.discourseTitle}>
+              Comments from the Community
+            </div>
+            <DiscourseComments
+              embedUrl={`https://www.reduct.store${pagePath}`}
+            />
+          </div>
           <SlidingBanner />
         </>
       )}

src/theme/BlogPostItem/styles.module.css

@@ -0,0 +1,15 @@
+.commentsContainer {
+  text-align: center;
+  margin-top: 2rem;
+  padding: 1rem;
+  background-color: var(--reduct--background-white);
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.discourseTitle {
+  font-size: 24px;
+  font-weight: 600;
+  margin-bottom: 20px;
+}