From 2bab23f64e0103a38efe4d5012f30d567bd71dbf Mon Sep 17 00:00:00 2001
From: David Fischer <david@konst.fish>
Date: Mon, 4 Nov 2024 21:25:59 +0100
Subject: [PATCH] feat(comments): add conditional display using frontmatter

---
 docs/features/comments.md      | 12 ++++++++++++
 quartz/components/Comments.tsx | 14 ++++++++++++--
 2 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/docs/features/comments.md b/docs/features/comments.md
index 1f11effc4..f80f89d8c 100644
--- a/docs/features/comments.md
+++ b/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
+---
+```
\ No newline at end of file
diff --git a/quartz/components/Comments.tsx b/quartz/components/Comments.tsx
index 44331cc90..21652430d 100644
--- a/quartz/components/Comments.tsx
+++ b/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>