Enhance support for discourse comments

Co-authored-by: Muhammed Guludag <mguludag@outlook.com>
Signed-off-by: Radu Nichita <radunichita99@gmail.com>

Author: RaduNichita

blog/2024-10-30-about-beman/index.md

@@ -2,6 +2,7 @@
 slug: about-beman
 authors: [dabrahams]
 tags: [beman]
+comments: true
 ---
 
 # About Beman

blog/2025-01-13-beman-intro/index.md

@@ -2,6 +2,7 @@
 slug: beman-tutorial
 authors: [JeffGarland]
 tags: [cppcon, conference]
+comments: true
 ---
 
 # Beman Project Introduction Online

blog/2025-01-29-nyc-hackathon/index.md

@@ -2,6 +2,7 @@
 slug: nyc-hackathon
 authors: ["camio"]
 tags: ["hackathon", "beman"]
+comments: true
 ---
 
 # NYC Hackathon

src/components/DiscourseComments/index.tsx

@@ -34,10 +34,36 @@ export default function DiscourseComments(): JSX.Element {
         discourseEmbedUrl: `${base}${path}`,
       };
 
+      // Remove existing Discourse iframe if present
+      const existingIframe = document.querySelector('#discourse-comments iframe');
+      if (existingIframe && existingIframe.parentNode) {
+        existingIframe.parentNode.removeChild(existingIframe);
+      }
+
+      // Load or reload the embed script
+      const existingScript = document.querySelector(`script[src="${forum}javascripts/embed.js"]`);
+      if (existingScript) {
+        existingScript.parentNode.removeChild(existingScript);
+      }
+
       const script = document.createElement('script');
-      script.src = `${forum}javascripts/embed.js`;
+      script.src = forum + 'javascripts/embed.js';
       script.async = true;
+      script.referrerPolicy = 'no-referrer-when-downgrade';
+      script.onload = () => console.log('Discourse script loaded successfully');
+      script.onerror = () => console.error('Failed to load Discourse script');
       document.body.appendChild(script);
+
+      return () => {
+        if (script.parentNode) {
+          script.parentNode.removeChild(script);
+        }
+        // Clean up iframe on unmount
+        const iframe = document.querySelector('#discourse-comments iframe');
+        if (iframe && iframe.parentNode) {
+          iframe.parentNode.removeChild(iframe);
+        }
+      };
     }
   }, [discourseUrl]);
 

src/theme/BlogPostItem/index.tsx

@@ -1,21 +1,29 @@
-import React, { type ReactNode } from 'react';
-import BlogPostItem from '@theme-original/BlogPostItem';
-import type BlogPostItemType from '@theme/BlogPostItem';
-import type { WrapperProps } from '@docusaurus/types';
+import React from "react";
+import { useLocation } from "@docusaurus/router";
+import BlogPostItem from "@theme-original/BlogPostItem";
+import DiscourseComments from "@site/src/components/DiscourseComments";
 
-// 1) Import your DiscourseComments
-import DiscourseComments from '@site/src/components/DiscourseComments';
+export default function BlogPostItemWrapper(props) {
+  const { pathname } = useLocation();
+  // Safely access frontMatter from props.children.type
+  const frontMatter = props.children?.type?.frontMatter || {};
 
-type Props = WrapperProps<typeof BlogPostItemType>;
+  // Only render comments for individual blog posts (not list or archive pages)
+  const isBlogListPage =
+    pathname === "/blog" ||
+    pathname.startsWith("/blog/archive") ||
+    pathname.startsWith("/blog/tags");
+  const commentsEnabled =
+    frontMatter.comments === true || frontMatter.comments === "true";
+  const shouldShowComments =
+    commentsEnabled && !isBlogListPage && frontMatter.slug;
 
-export default function BlogPostItemWrapper(props: Props): ReactNode {
   return (
     <>
-      {/* 2) Render the original blog content */}
       <BlogPostItem {...props} />
-
-      {/* 3) Then render Discourse comments */}
-      <DiscourseComments />
+      {shouldShowComments && (
+        <DiscourseComments key={frontMatter.slug || "discourse"} />
+      )}
     </>
   );
-}
+}