feat(comments): add conditional display using frontmatter

docs/features/comments.md

@@ -57,6 +57,7 @@ Quartz also exposes a few of the other Giscus options as well and you can provid
 ```ts
 type Options = {
   provider: "giscus"
+  respectFrontmatter?: boolean
   options: {
     repo: `${string}/${string}`
     repoId: string
@@ -114,3 +115,14 @@ afterBody: [
   }),
 ],
 ```
+
+#### Conditionally display comments
+
+Quartz can conditionally display the comment box based on a field `comments` in the frontmatter. To enable this feature, set `respectFrontmatter` to `true` & adjust pages where comments should be enabled:
+
+```
+---
+title: Comments enabled here!
+comments: true
+---
+```

quartz/components/Comments.tsx

@@ -5,6 +5,7 @@ import script from "./scripts/comments.inline"
 
 type Options = {
   provider: "giscus"
+  respectFrontmatter?: boolean
   options: {
     repo: `${string}/${string}`
     repoId: string
@@ -25,7 +26,13 @@ function boolToStringBool(b: boolean): string {
 }
 
 export default ((opts: Options) => {
-  const Comments: QuartzComponent = ({ displayClass, cfg }: QuartzComponentProps) => {
+  const Comments: QuartzComponent = ({ displayClass, fileData, cfg }: QuartzComponentProps) => {
+    // check if comments should be displayed according to frontmatter
+    if ((opts.respectFrontmatter ?? false) && 
+        !(fileData.frontmatter?.comments ?? false)) {
+      return null
+    }
+
     return (
       <div
         class={classNames(displayClass, "giscus")}
@@ -46,7 +53,10 @@ export default ((opts: Options) => {
     )
   }
 
-  Comments.afterDOMLoaded = script
+  // make sure we actually need to load the script
+  if(Comments != null) {
+    Comments.afterDOMLoaded = script
+  }
 
   return Comments
 }) satisfies QuartzComponentConstructor<Options>