From 6c4e1b47a1dadc4f3f5132c76fcdddcc2437fcaf Mon Sep 17 00:00:00 2001
From: adueck <adueck@users.noreply.github.com>
Date: Thu, 1 Aug 2024 17:03:13 -0400
Subject: [PATCH] try remark42

---
 index.html                  |   1 +
 src/components/Chapter.jsx  |   2 +
 src/components/Remark42.tsx | 100 ++++++++++++++++++++++++++++++++++++
 3 files changed, 103 insertions(+)
 create mode 100644 src/components/Remark42.tsx
diff --git a/index.html b/index.html
index c86a53f..bac56fd 100644
--- a/index.html
+++ b/index.html
@@ -32,6 +32,7 @@
     <meta name="twitter:card" content="summary_large_image">
     
     <meta name="robots" content="index, follow" />
+    <!-- <script defer src="https://remark42.lingdocs.com/web/embed.js"></script> -->
     <title>LingDocs Pashto Grammar</title>
   </head>
   <body>
diff --git a/src/components/Chapter.jsx b/src/components/Chapter.jsx
index fb6caec..5f14257 100644
--- a/src/components/Chapter.jsx
+++ b/src/components/Chapter.jsx
@@ -10,6 +10,7 @@ import TableOfContents from "./TableOfContents";
 import Footer from "./Footer";
 import ChapterFeedback from "./ChapterFeedback";
 import { Helmet } from "react-helmet";
+import { Comments } from "./Remark42";
 
 const Chapter = ({ children: chapter }) => {
   const title = `${chapter.frontMatter.title} | LingDocs Pashto Grammar`;
@@ -41,6 +42,7 @@ const Chapter = ({ children: chapter }) => {
         <Content />
       </div>
       <ChapterFeedback chapter={chapter.path} />
+      <Comments id={chapter.path} />
       <Footer chapter={chapter} />
     </main>
     {!chapter.frontMatter.fullWidth && <TableOfContents tableOfContents={chapter.tableOfContents} />}
diff --git a/src/components/Remark42.tsx b/src/components/Remark42.tsx
new file mode 100644
index 0000000..e5d28ae
--- /dev/null
+++ b/src/components/Remark42.tsx
@@ -0,0 +1,100 @@
+import { Fragment, useEffect } from "react";
+
+declare global {
+  interface Window {
+    REMARK42: any;
+    remark_config: any;
+  }
+}
+
+// This function will insert the usual <script> tag of
+// Remark42 into the specified DOM location (parentElement)
+const insertScript = (id: string, parentElement: HTMLElement) => {
+  const script = window.document.createElement("script");
+  script.type = "text/javascript";
+  script.async = true;
+  script.id = id;
+  /* For Gatsby it's important to manually provide the URL
+  and make sure it does not contain a trailing slash ("/").
+  Because otherwise the comments for paths with/without 
+  the trailing slash are stored separately in the BoltDB database.
+  When following a Gatsby Link a page is loaded without the trailing slash,
+  but when refreshing the page (F5) it is loaded with the trailing slash.
+  So essentially every URL can become duplicated in the DB and you may not see
+  your comments from the inverse URL at your present URL.
+  Making sure url is provided without the trailing slash
+  in the remark42 config solves this. */
+  let url = window.location.origin + window.location.pathname;
+  if (url.endsWith("/")) {
+    url = url.slice(0, -1);
+  }
+  // Now the actual config and script-fetching function:
+  script.innerHTML = `
+    var remark_config = {
+      host: "https://remark42.lingdocs.com",
+      site_id: "pashto-grammar",
+      url: "${url}",
+      theme: "light",
+      components: ["embed"],
+    };
+    !function(e,n){for(var o=0;o<e.length;o++){var r=n.createElement("script"),c=".js",d=n.head||n.body;"noModule"in r?(r.type="module",c=".mjs"):r.async=!0,r.defer=!0,r.src=remark_config.host+"/web/"+e[o]+c,d.appendChild(r)}}(remark_config.components||["embed"],document);`;
+  parentElement.appendChild(script);
+};
+
+/* This function removes the previously added script from the DOM.
+Might be necessary when page transitions happen, to make sure a new instance 
+is created, pointing to the current URL. Although this might actually 
+not be necessary, please do your own testing. */
+const removeScript = (id: string, parentElement: HTMLElement) => {
+  const script = window.document.getElementById(id);
+  if (script) {
+    parentElement.removeChild(script);
+  }
+};
+
+// This function will be provided to useEffect and will insert the script
+// when the component is mounted and remove it when it unmounts
+const manageScript = () => {
+  if (!window) {
+    return () => {};
+  }
+  const { document } = window;
+  if (document.getElementById("remark42")) {
+    insertScript("comments-script", document.body);
+  }
+  return () => removeScript("comments-script", document.body);
+};
+
+/* Another function for another useEffect - this is the most crucial part for
+Gatsby compatibility. It will ensure that each page loads its own appropriate
+comments, and that comments will be properly loaded */
+const recreateRemark42Instance = () => {
+  if (!window) {
+    return;
+  }
+  const remark42 = window.REMARK42;
+  if (remark42) {
+    remark42.destroy();
+    remark42.createInstance(window.remark_config);
+  }
+};
+
+type CommentsProps = {
+  location: string;
+};
+
+// The location prop is {props.location.pathname} from the parent component.
+// I.e. invoke the component like this in the parent: <Comments location={props.location.pathname} />
+export function Comments({ location }: CommentsProps) {
+  // Insert the two useEffect hooks. Maybe you can combine them into one? Feel free if you want to.
+  useEffect(manageScript, [location]);
+  useEffect(recreateRemark42Instance, [location]);
+
+  return (
+    <Fragment>
+      <h4>Questions and Comments</h4>
+      {/* This div is the target for actual comments insertion */}
+      <div id="remark42" />
+    </Fragment>
+  );
+}
