feat: comment system

mkdocs.yml

@@ -1,10 +1,34 @@
 site_name: SAST Wiki
 theme:
   name: material
+  custom_dir: overrides
   language: zh
   logo: https://aliyun.sastimg.mxte.cc/images/2023/09/27/logode95c3e83201ee69.png
+  icon:
+    repo: fontawesome/brands/github-alt
   palette:
-    primary: cyan
+    # Palette toggle for automatic mode
+    - media: "(prefers-color-scheme)"
+      primary: cyan
+      toggle:
+        icon: material/brightness-auto
+        name: Switch to light mode
+
+    # Palette toggle for light mode
+    - media: "(prefers-color-scheme: light)"
+      scheme: default
+      primary: cyan
+      toggle:
+        icon: material/brightness-7
+        name: Switch to dark mode
+
+    # Palette toggle for dark mode
+    - media: "(prefers-color-scheme: dark)"
+      scheme: slate
+      primary: cyan
+      toggle:
+        icon: material/brightness-4
+        name: Switch to system preference
   features:
     - navigation.instant
     - navigation.instant.prefetch
@@ -19,6 +43,8 @@ theme:
     - header.autohide
     - navigation.footer
     - content.action.edit
+    - content.code.annotate
+    - content.code.copy
 plugins:
   - search
   # - meta
@@ -72,6 +98,18 @@ nav:
 markdown_extensions:
   - pymdownx.arithmatex:
       generic: true
+  - pymdownx.highlight:
+      anchor_linenums: true
+      line_spans: __span
+      pygments_lang_class: true
+  - pymdownx.inlinehilite
+  - pymdownx.snippets
+  - pymdownx.superfences
+  - pymdownx.superfences:
+      custom_fences:
+        - name: mermaid
+          class: mermaid
+          format: !!python/name:pymdownx.superfences.fence_code_format
 
 extra_javascript:
   - assets/js/katex.js 

overrides/partials/comments.html

@@ -0,0 +1,53 @@
+{% if page.meta.comments is not false %}
+<h2 id="__comments">{{ lang.t("meta.comments") }}</h2>
+<script
+  src="https://giscus.app/client.js"
+  data-repo="NJUPT-SAST/sast-wiki-md"
+  data-repo-id="R_kgDOKT4URw"
+  data-category="Announcements"
+  data-category-id="DIC_kwDOKT4UR84Cb05B"
+  data-mapping="title"
+  data-strict="0"
+  data-reactions-enabled="1"
+  data-emit-metadata="1"
+  data-input-position="top"
+  data-theme="preferred_color_scheme"
+  data-lang="zh-CN"
+  data-loading="lazy"
+  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 %}