Add initial prototype for comments (#92)

* Add initial prototype for comments

Signed-off-by: Radu Nichita <radunichita99@gmail.com>

Author: RaduNichita

blog/2025-01-29-nyc-hackathon/index.md blog/2025-01-29-nyc-hackathon/index.mdxblog/2025-01-29-nyc-hackathon/index.md renamed to blog/2025-01-29-nyc-hackathon/index.mdx

@@ -4,6 +4,8 @@ authors: ["camio"]
 tags: ["hackathon", "beman"]
 ---
 
+import DiscourseComments from '@site/src/components/DiscourseComments';
+
 # NYC Hackathon
 
 ![busy coding](./images/hacking.jpg "Several hackathon members busy coding. They give the impression of serious and intense work happening!")
@@ -33,3 +35,5 @@ Overall it was productive and a ton of fun. Thanks to Robert, Eddie, Linus,
 River, Nick, Bret, and Robert for participating!
 
 ![portrait of attendees](./images/final-photo.jpg "All the hackathon folks standing together in a portrait looking very cool.")
+
+<DiscourseComments />

docusaurus.config.ts

@@ -123,6 +123,7 @@ const config: Config = {
       theme: prismThemes.github,
       darkTheme: prismThemes.dracula,
     },
+    discourseUrl: 'https://discourse.bemanproject.org/',
   } 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,37 @@
+import React, { useEffect } from 'react';
+import type { Props } from '@docusaurus/types';
+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) {
+      // normalize URL to end with a single slash
+      const forum = https://discourse.example.com/
+      win.DiscourseEmbed = {
+        discourseUrl: forum,
+        discourseEmbedUrl: "https://discourse.bemanproject.org/t/test-topic-for-blog-comments/472"
+      };
+      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' }} />;
+}

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"