Adding giscus integration

_quarto.yml

@@ -211,6 +211,26 @@ format:
         <script src="/scripts/ai_menu/dist/384.bundle.js" defer></script>
         <script src="/scripts/ai_menu/dist/761.bundle.js" defer></script>
 
+    include-after-body:
+      text: |
+        <div class="giscus">
+          <script src="https://giscus.app/client.js"
+            data-repo="harvard-edge/cs249r_book"
+            data-repo-id="R_kgDOKQSOaw"
+            data-category="Chapter Discussions"
+            data-category-id="DIC_kwDOKQSOa84CgGJJ"
+            data-mapping="pathname"
+            data-strict="1"
+            data-reactions-enabled="1"
+            data-emit-metadata="0"
+            data-input-position="bottom"
+            data-theme="preferred_color_scheme"
+            data-lang="en"
+            data-loading="lazy"
+            crossorigin="anonymous"
+            async>
+          </script>
+        </div>
     citeproc: true
 
   pdf:

style.scss

@@ -156,3 +156,9 @@ div.callout-hint.callout > .callout-header::before {
 .callout-toggle::before {
   background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="rgb(52, 58, 64)" class="bi bi-chevron-down" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/></svg>');
 }
+
+/* styling for giscuss comments */
+.giscus{
+  padding-left: 1em;
+  padding-right: 1em;
+}