Added comment system

docs/arrays/index.md

@@ -1,7 +1,11 @@
+---
+comments: true
+---
+
 # Arrays
 
 ![arrays](../imgs/meme_array.jpg){width=300px}
 
 ## Array Resources
 
-- [[Leetcode Discuss] Solved all two pointers problems in 100 days](https://leetcode.com/discuss/study-guide/1688903/solved-all-two-pointers-problems-in-100-days)
+-   [[Leetcode Discuss] Solved all two pointers problems in 100 days](https://leetcode.com/discuss/study-guide/1688903/solved-all-two-pointers-problems-in-100-days)

mkdocs.yaml

@@ -210,6 +210,7 @@ theme:
             bug: octicons/bug-16
             example: octicons/beaker-16
             quote: octicons/quote-16
+    custom_dir: overrides
 
 markdown_extensions:
     - admonition

overrides/partials/comments.html

@@ -0,0 +1,55 @@
+{% if page.meta.comments %}
+<h2 id="__comments">{{ lang.t("meta.comments") }}</h2>
+<script
+    src="https://giscus.app/client.js"
+    data-repo="russhustle/leetpattern"
+    data-repo-id="R_kgDOMk_SBg"
+    data-category="[ENTER CATEGORY NAME HERE]"
+    data-category-id="[ENTER CATEGORY ID HERE]"
+    data-mapping="pathname"
+    data-strict="0"
+    data-reactions-enabled="1"
+    data-emit-metadata="0"
+    data-input-position="bottom"
+    data-theme="preferred_color_scheme"
+    data-lang="en"
+    crossorigin="anonymous"
+    async
+></script>
+
+<!-- Synchronize Giscus theme with palette -->
+<script>
+    var giscus = document.querySelector("script[src*=giscus]");
+
+    // Set palette on initial load
+    var palette = __md_get("__palette");
+    if (palette && typeof palette.color === "object") {
+        var theme =
+            palette.color.scheme === "slate" ? "transparent_dark" : "light";
+
+        // Instruct Giscus to set theme
+        giscus.setAttribute("data-theme", theme);
+    }
+
+    // Register event handlers after documented loaded
+    document.addEventListener("DOMContentLoaded", function () {
+        var ref = document.querySelector("[data-md-component=palette]");
+        ref.addEventListener("change", function () {
+            var palette = __md_get("__palette");
+            if (palette && typeof palette.color === "object") {
+                var theme =
+                    palette.color.scheme === "slate"
+                        ? "transparent_dark"
+                        : "light";
+
+                // Instruct Giscus to change theme
+                var frame = document.querySelector(".giscus-frame");
+                frame.contentWindow.postMessage(
+                    { giscus: { setConfig: { theme } } },
+                    "https://giscus.app"
+                );
+            }
+        });
+    });
+</script>
+{% endif %}