Giscus (#1368)

mkdocs.yml

@@ -102,6 +102,7 @@ plugins:
       externals_exclude:
         - cdn.jsdelivr.net/npm/mathjax@3/*
         - api.privacyguides.net/*
+        - giscus.app/*
 extra_css:
   - assets/stylesheets/extra.css?v=2.10.0
 markdown_extensions:

theme/overrides/blog.en.html

@@ -2,6 +2,13 @@
 {% block extrahead %}
   <link rel="preload" href="{{ 'assets/brand/WOFF/bagnard/Bagnard.woff' | url }}" as="font" type="font/woff" crossorigin>
   <link rel="stylesheet" href="{{ 'assets/stylesheets/blog.css' | url }}">
+  <meta property="og:title" content='{{ page.meta.title }}' />
+  <meta property="og:type" content='article' />
+  <meta property="og:url" content='{{ page.canonical_url }}' />
+  <meta property="og:image" content='https://www.privacyguides.org/{{ page.meta.image }}' />
+  <meta property="og:site_name" content='Privacy Guides' />
+  <meta name="twitter:creator" content='@privacy_guides' />
+  <meta name="twitter:site" content='@privacy_guides' />
 {% endblock %}
 {% block tabs %}
   {{ super() }}
@@ -31,4 +38,51 @@
     <h1>{{ page.title | d(config.site_name, true)}}</h1>
   {% endif %}
   {{ page.content }}
+
+  <!-- Giscus -->
+  <h2 id="__comments">{{ lang.t("meta.comments") }}</h2>
+  <script src="https://giscus.app/client.js"
+        data-repo="privacyguides/privacyguides.org"
+        data-repo-id="MDEwOlJlcG9zaXRvcnkzMTg0MDE5MDY="
+        data-category="Announcements"
+        data-category-id="DIC_kwDOEvptcs4COX5p"
+        data-mapping="og:title"
+        data-reactions-enabled="1"
+        data-emit-metadata="0"
+        data-input-position="top"
+        data-theme="light"
+        data-lang="en"
+        crossorigin="anonymous"
+        async>
+  </script>
+
+  <!-- Reload on palette change -->
+  <script>
+    var palette = __md_get("__palette")
+    if (palette && typeof palette.color === "object")
+      if (palette.color.scheme === "slate") {
+        var giscus = document.querySelector("script[src*=giscus]")
+        giscus.setAttribute("data-theme", "transparent_dark") 
+
+
+      }
+
+    /* 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>
 {% endblock %}