Quartz sync: Sep 2, 2023, 1:35 PM

content/Essays/template.md

@@ -0,0 +1,18 @@
+---
+draft: true
+title: An Essay
+tags:
+  - essay
+  - incomplete
+---
+<script>
+Var remark_config = {
+  Host: ' https://be-far.com/comments ',    site_id: 'remark',
+  }
+</script>
+<script>!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);</script>
+
+This is tan essay.
+
+Comment with [[Projects/quartz-comments|Remark42]] down below!
+<div id="remark42"></div>

quartz.config.ts

@@ -1,10 +1,18 @@
 import { QuartzConfig } from "./quartz/cfg"
 import * as Plugin from "./quartz/plugins"
+import { OptionType } from "./quartz/plugins/types"
+
+var remark = Plugin.Remark42({ host: "https://be-far.com/comments", site_id: "remark", theme: "dark", no_footer: true })
+declare global {
+  var remark_config: OptionType
+}
+
+globalThis.remark_config = remark.options
 
 const config: QuartzConfig = {
   configuration: {
     pageTitle: "🌱 be-far",
-    enableSPA: true,
+    enableSPA: false,
     enablePopovers: true,
     analytics: null,
     baseUrl: "be-far.com",
@@ -52,6 +60,7 @@ const config: QuartzConfig = {
       Plugin.CrawlLinks({ markdownLinkResolution: "shortest" }),
       Plugin.Latex({ renderEngine: "katex" }),
       Plugin.Description(),
+      remark
     ],
     filters: [Plugin.RemoveDrafts()],
     emitters: [

quartz.layout.ts

@@ -10,6 +10,7 @@ export const sharedPageComponents: SharedLayout = {
       "Source code": "https://github.com/bfahrenfort/quartz",
       "RSS": "https://be-far.com/index.xml"
     },
+    //remark_config: config.plugins.transformers.find((e) => {e.name === "Remark42"})?.options
   }),
 }
 

quartz/components/Footer.tsx

@@ -1,17 +1,25 @@
 import { QuartzComponentConstructor } from "./types"
+import { OptionType } from "../plugins/types"
 import style from "./styles/footer.scss"
 import { version } from "../../package.json"
 
-interface Options {
+interface Optionss {
   links: Record<string, string>
 }
 
-export default ((opts?: Options) => {
+console.log(globalThis.remark_config)
+
+export default ((opts?: Optionss) => {
   function Footer() {
     const year = new Date().getFullYear()
     const links = opts?.links ?? []
     return (
       <footer>
+        <hr />
+        <p style="margin-bottom:4px;font-weight:bold;font-size:2em;">
+          Share your thoughts with <a class="internal" href="./Projects/Obsidian/quartz-comments">Remark42</a>
+        </p>
+        <div id="remark42"></div>
         <hr />
         <p>
           © be-far {year}. Powered by <a href="https://quartz.jzhao.xyz/">Quartz</a>.

quartz/plugins/transformers/index.ts

@@ -7,3 +7,4 @@ export { CrawlLinks } from "./links"
 export { ObsidianFlavoredMarkdown } from "./ofm"
 export { SyntaxHighlighting } from "./syntax"
 export { TableOfContents } from "./toc"
+export { Remark42 } from "./remark42"

quartz/plugins/transformers/remark42.ts

@@ -0,0 +1,54 @@
+import { QuartzTransformerPlugin } from "../types"
+
+// Configuration documented at https://remark42.com/docs/configuration/frontend/
+interface Options {
+  host: string
+  site_id: string
+  components?: Array<String>
+  max_shown_comments?: number
+  max_last_comments?: number
+  theme?: 'light' | 'dark'
+  page_title?: string // Don't use this, it'll break your comment database. It's included for the sake of completeness.
+  locale?: string // Technically an enum, full list at https://remark42.com/docs/configuration/frontend/#locales
+  show_email_subscription?: boolean
+  show_rss_subscription?: boolean
+  simple_view?: boolean
+  no_footer?: boolean
+}
+
+export const Remark42: QuartzTransformerPlugin<Options> = (opts?: Options) => {
+  var scripts = new Array<any>()
+
+  // Put the config into window scope
+  var configAsString : string = "var remark_config={"
+  for(const key in opts)
+  {
+    let value = opts[key as keyof Options] // Fucked
+    configAsString += key + ":" + "'" + value + "'," // Turbo fucked
+  }
+  configAsString += "}"
+  scripts.push({script:configAsString, loadTime: "afterDOMReady", contentType: "inline"})
+  
+  // Put the embeddable components into window scope
+  function getComment(e : Array<String>) {
+    for (var o = 0; o < e.length; o++)
+    {
+      var src = opts?.host + '/web/' + e[o] + '.js'
+      scripts.push({src: src, loadTime: "afterDOMReady", contentType: "external",})
+    }
+  }
+  getComment(opts?.components || ["embed"])
+  return {
+    name: "Remark42",
+    options: opts,
+    externalResources() {
+      return {
+        css: [
+          // base css
+        ],
+        js: scripts
+      }
+    },
+  }
+}
+

quartz/plugins/types.ts

@@ -4,6 +4,8 @@ import { ProcessedContent } from "./vfile"
 import { QuartzComponent } from "../components/types"
 import { FilePath, FullSlug } from "../util/path"
 import { BuildCtx } from "../util/ctx"
+import { Options } from "vfile"
+import { IOptions } from "reading-time"
 
 export interface PluginTypes {
   transformers: QuartzTransformerPluginInstance[]
@@ -11,12 +13,13 @@ export interface PluginTypes {
   emitters: QuartzEmitterPluginInstance[]
 }
 
-type OptionType = object | undefined
+export type OptionType = object | undefined
 export type QuartzTransformerPlugin<Options extends OptionType = undefined> = (
   opts?: Options,
 ) => QuartzTransformerPluginInstance
 export type QuartzTransformerPluginInstance = {
   name: string
+  options?: OptionType
   textTransform?: (ctx: BuildCtx, src: string | Buffer) => string | Buffer
   markdownPlugins?: (ctx: BuildCtx) => PluggableList
   htmlPlugins?: (ctx: BuildCtx) => PluggableList