added remark42

quartz/components/Remark.tsx

@@ -0,0 +1,55 @@
+import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
+import { classNames } from "../util/lang"
+// @ts-ignore
+// import script from "./scripts/comments.inline"
+
+type Options = {
+  options: {
+    host: string
+    siteId: string
+    locale: string
+  }
+}
+
+// function boolToStringBool(b: boolean): string {
+//   return b ? "1" : "0"
+// }
+
+export default ((opts: Options) => {
+  const Remark: QuartzComponent = ({ displayClass, cfg }: QuartzComponentProps) => {
+    const remarkConfig = `
+      var remark_config = {
+        host: "${opts.options.host}",
+        site_id: "${opts.options.siteId}",
+        components: ["embed"],
+        locale: "${opts.options.locale}",
+        theme: localStorage.theme,
+        show_email_subscription: false,
+        simple_view: false
+      };
+    `;
+
+    const embedScript = `
+      !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);
+    `;
+
+    return (
+      <>
+        <script dangerouslySetInnerHTML={{ __html: remarkConfig }}></script>
+        <script dangerouslySetInnerHTML={{ __html: embedScript }}></script>
+      </>
+    );
+  };
+
+  return Remark;
+}) satisfies QuartzComponentConstructor<Options>;

quartz/components/index.ts

@@ -20,6 +20,7 @@ import MobileOnly from "./MobileOnly"
 import RecentNotes from "./RecentNotes"
 import Breadcrumbs from "./Breadcrumbs"
 import Comments from "./Comments"
+import Remark from "./Remark"
 
 export {
   ArticleTitle,
@@ -44,4 +45,5 @@ export {
   NotFound,
   Breadcrumbs,
   Comments,
+  Remark
 }