Integrate Discourse comment feature for blog posts (#98)

* Add initial prototype for comments

Signed-off-by: Radu Nichita <[email protected]>

* Re-deploy - will be reverted

---------

Signed-off-by: Radu Nichita <[email protected]>
Co-authored-by: Darius Neațu <[email protected]>

Author: RaduNichita

docusaurus.config.ts

@@ -123,6 +123,7 @@ const config: Config = {
       theme: prismThemes.github,
       darkTheme: prismThemes.dracula,
     },
+    discourseUrl: 'https://discourse.bemanproject.org/', // Temporary change, re-deploy.
   } satisfies Preset.ThemeConfig,
 };
 

package.json

@@ -19,6 +19,7 @@
     "@docusaurus/preset-classic": "3.7.0",
     "@mdx-js/react": "^3.0.0",
     "@remark-embedder/core": "^3.0.3",
+    "@remark-embedder/transformer-oembed": "^5.0.1",
     "clsx": "^2.0.0",
     "prism-react-renderer": "^2.3.0",
     "react": "^19.0.0",

src/components/DiscourseComments/index.tsx

@@ -0,0 +1,45 @@
+import React, { useEffect } from 'react';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+
+type DiscourseEmbedWindow = Window & {
+  DiscourseEmbed?: {
+    discourseUrl: string;
+    discourseEmbedUrl: string;
+    discourseTopicTitle?: string;
+  };
+};
+
+export default function DiscourseComments(): JSX.Element {
+  const {
+    siteConfig: {
+      themeConfig: { discourseUrl },
+    },
+  } = useDocusaurusContext<{ discourseUrl: string }>();
+
+  useEffect(() => {
+    const win = window as DiscourseEmbedWindow;
+
+    if (!win.DiscourseEmbed) {
+      const forum = discourseUrl.endsWith('/') ? discourseUrl : `${discourseUrl}/`;
+      const path = window.location.pathname;
+
+      // Use production URL only if not localhost
+      const isLocal = window.location.hostname === 'localhost';
+      const base = isLocal
+        ? 'https://bemanproject.org'
+        : `${window.location.origin}`;
+
+      win.DiscourseEmbed = {
+        discourseUrl: forum,
+        discourseEmbedUrl: `${base}${path}`,
+      };
+
+      const script = document.createElement('script');
+      script.src = `${forum}javascripts/embed.js`;
+      script.async = true;
+      document.body.appendChild(script);
+    }
+  }, [discourseUrl]);
+
+  return <div id="discourse-comments" style={{ marginTop: '2rem' }} />;
+}

src/theme/BlogPostItem/index.tsx

@@ -0,0 +1,21 @@
+import React, { type ReactNode } from 'react';
+import BlogPostItem from '@theme-original/BlogPostItem';
+import type BlogPostItemType from '@theme/BlogPostItem';
+import type { WrapperProps } from '@docusaurus/types';
+
+// 1) Import your DiscourseComments
+import DiscourseComments from '@site/src/components/DiscourseComments';
+
+type Props = WrapperProps<typeof BlogPostItemType>;
+
+export default function BlogPostItemWrapper(props: Props): ReactNode {
+  return (
+    <>
+      {/* 2) Render the original blog content */}
+      <BlogPostItem {...props} />
+
+      {/* 3) Then render Discourse comments */}
+      <DiscourseComments />
+    </>
+  );
+}

yarn.lock

@@ -2033,6 +2033,13 @@
     unified "^11.0.4"
     unist-util-visit "^5.0.0"
 
+"@remark-embedder/transformer-oembed@^5.0.1":
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/@remark-embedder/transformer-oembed/-/transformer-oembed-5.0.1.tgz#7734d3ecb1ea101447832f6350c5ebf0b249380c"
+  integrity sha512-NKR9WYyzI74iZ1nWVXcKQ9dz1xIBuN3nONqVsRbyp9yVZJv8tCi25BSVmgVQtqaNsEjbSemEp8yp+hwQzuLVxg==
+  dependencies:
+    "@babel/runtime" "^7.24.5"
+
 "@sideway/address@^4.1.5":
   version "4.1.5"
   resolved "https://registry.yarnpkg.com/@sideway/address/-/address-4.1.5.tgz#4bc149a0076623ced99ca8208ba780d65a99b9d5"