feat: add giscus comments to all docs automatically

Author: Srijatalamarla

docusaurus.config.ts

@@ -2,6 +2,7 @@ import { themes as prismThemes } from "prism-react-renderer";
 import type { Config } from "@docusaurus/types";
 import type * as Preset from "@docusaurus/preset-classic";
 import * as dotenv from "dotenv";
+import giscusInjector from "./src/plugins/giscus-injector";
 dotenv.config();
 
 // This runs in Node.js - Don't use client-side code here (browser APIs, JSX...)
@@ -53,6 +54,7 @@ const config: Config = {
           sidebarPath: require.resolve("./sidebars.ts"),
           editUrl: ({ docPath }) =>
             `https://github.com/recodehive/recode-website/tree/main/docs/${docPath}`,
+          remarkPlugins: [giscusInjector],
         },
         blog: {
           showReadingTime: true,

src/plugins/giscus-injector.ts

@@ -0,0 +1,44 @@
+const { visit } = require("unist-util-visit");
+
+/**
+ * Remark plugin to automatically inject GiscusComments component
+ * at the end of MDX files that don't already have it
+ */
+export default function giscusInjector() {
+  return (tree) => {
+    let hasGiscus = false;
+
+    // Check if GiscusComments already exists
+    visit(tree, (node) => {
+      // Check JSX elements
+      if (
+        node.type === "mdxJsxFlowElement" ||
+        node.type === "mdxJsxTextElement"
+      ) {
+        if (node.name === "GiscusComments") {
+          hasGiscus = true;
+        }
+      }
+
+      // Check raw JSX strings
+      if (
+        node.type === "jsx" &&
+        node.value &&
+        node.value.includes("GiscusComments")
+      ) {
+        hasGiscus = true;
+      }
+    });
+
+    // Only inject if not present
+    if (!hasGiscus) {
+      // Add the component as an MDX JSX element
+      tree.children.push({
+        type: "mdxJsxFlowElement",
+        name: "GiscusComments",
+        attributes: [],
+        children: [],
+      });
+    }
+  };
+}