quartz/quartz/components/_Remark.tsx

import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
import { Root } from "mdast"
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 {
      name: "TableOfContents",
      markdownPlugins() {
        return [
          () => {
            return async (tree: Root, file) => {
              // const display = file.data.frontmatter?.enableComments ?? true
              // if (display) {
                <>
                  <div id="remark42" style="margin-top: 2rem"></div>
                  <script dangerouslySetInnerHTML={{ __html: remarkConfig }}></script>
                  <script dangerouslySetInnerHTML={{ __html: embedScript }}></script>
                </>
              // }
            }
          }
        ]
      }
    }
  };

  return Remark
}) satisfies QuartzComponentConstructor<Options>;