🚧 feat: add utterances support

config.toml

@@ -177,3 +177,43 @@ allowed_domains = [
 # This avoids a flashing text issue in Firefox.
 # Please see https://welpo.github.io/tabi/blog/custom-font-subset/ to learn how to create this file.
 custom_subset = true
+
+# giscus support for comments. https://giscus.app
+# TODO: make sure giscus / utterances are added to the Custom security headers when enabled
+# TODO: Mention this fact in the docs
+[extra.giscus]
+enabled_for_all_posts = false  # Enables utterances on all posts. You can also do it on a post-per-post basis by setting `utterances = true` in the [extra] section of the post's front matter.
+repo = "yourname/yourrepository"
+
+
+enable_reactions = true
+comment_box_above_comments = true
+lazy_loading = true
+light_theme = "noborder_light"
+dark_theme = "noborder_dark"
+# TODO: Set data-lang to page's language
+
+# <script src="https://giscus.app/client.js"
+#         data-repo-id="[REPOSITORI ID]"
+#         data-category="[NOM CATEGORIA]"
+#         data-category-id="[ID CATEGORIA]"
+#         data-mapping="pathname"
+#         data-strict="0"
+#         data-lang="ca"
+#         crossorigin="anonymous"
+#         async>
+# </script>
+
+
+
+
+
+
+# Utterances support for comments. https://utteranc.es
+[extra.utterances]
+enabled_for_all_posts = false  # Enables utterances on all posts. You can also do it on a post-per-post basis by setting `utterances = true` in the [extra] section of the post's front matter.
+repo = "welpo/test-utterances"  # https://utteranc.es/#heading-repository
+issue_term = "pathname"  # Available: pathname; url; title. More info: https://utteranc.es/#heading-mapping
+label = "💬"  # https://utteranc.es/#heading-issue-label
+theme = "preferred-color-scheme"  # https://utteranc.es/#heading-theme. If you use the theme switcher, it's probably best to use "preferred-color-scheme"
+lazy_loading = true

sass/main.scss

@@ -22,21 +22,22 @@
     font-display: swap;
 }
 
-@import 'parts/_archive.scss';
+@import 'parts/archive.scss';
-@import 'parts/_cards.scss';
+@import 'parts/cards.scss';
-@import 'parts/_code.scss';
+@import 'parts/code.scss';
-@import 'parts/_header.scss';
+@import 'parts/comments.scss';
-@import 'parts/_image.scss';
-@import 'parts/_multilingual_quote.scss';
-@import 'parts/misc.scss';
-@import 'parts/table.scss';
-@import 'parts/home-banner.scss';
 @import 'parts/footer.scss';
-@import 'parts/theme-switch.scss';
+@import 'parts/header-anchor.scss';
-@import 'parts/posts_list.scss';
+@import 'parts/header.scss';
-@import 'parts/tags.scss';
+@import 'parts/home-banner.scss';
+@import 'parts/image.scss';
+@import 'parts/misc.scss';
+@import 'parts/multilingual_quote.scss';
 @import 'parts/pagination.scss';
-@import 'parts/_header-anchor.scss';
+@import 'parts/posts_list.scss';
+@import 'parts/table.scss';
+@import 'parts/tags.scss';
+@import 'parts/theme-switch.scss';
 @import 'syntax/syntax-ayu-dark.scss';
 
 :root {

sass/parts/_comments.scss

@@ -0,0 +1,16 @@
+.utterances-frame {
+    min-height: 18rem;
+    width: 100%;
+}
+
+.comments {
+    padding-top: 5vmin;
+
+    iframe {
+        border: none;
+        width: 100%;
+        margin: 0;
+        max-width: 100%;
+        aspect-ratio: inherit;
+    }
+}

static/js/main.js

@@ -10,6 +10,14 @@ function switchTheme() {
     currentTheme = currentTheme === "dark" ? "light" : "dark";
     document.documentElement.setAttribute("data-theme", currentTheme);
     localStorage.setItem("theme", currentTheme);
+
+    // Send a message to the Utterances iframe to change its theme.
+    document.querySelectorAll(".utterances-frame").forEach((frame) => {
+        frame.contentWindow.postMessage(
+            { type: 'set-theme', theme: `github-${currentTheme}` },
+            '*'
+        );
+    });
 }
 
 // Initialize the theme switcher button.

static/js/main_min.js

@@ -1 +1 @@
-const themeSwitcher=document.querySelector(".theme-switcher");let currentTheme=localStorage.getItem("theme");function switchTheme(){currentTheme="dark"===currentTheme?"light":"dark",document.documentElement.setAttribute("data-theme",currentTheme),localStorage.setItem("theme",currentTheme)}themeSwitcher.addEventListener("click",switchTheme,!1),window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",e=>{localStorage.getItem("theme")||(currentTheme=e.matches?"dark":"light",document.documentElement.setAttribute("data-theme",currentTheme))}),currentTheme||(currentTheme=document.documentElement.getAttribute("data-theme"));
+const themeSwitcher=document.querySelector(".theme-switcher");let currentTheme=localStorage.getItem("theme");function switchTheme(){currentTheme="dark"===currentTheme?"light":"dark",document.documentElement.setAttribute("data-theme",currentTheme),localStorage.setItem("theme",currentTheme),document.querySelectorAll(".utterances-frame").forEach(e=>{e.contentWindow.postMessage({type:"set-theme",theme:`github-${currentTheme}`},"*")})}themeSwitcher.addEventListener("click",switchTheme,!1),window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",e=>{localStorage.getItem("theme")||(currentTheme=e.matches?"dark":"light",document.documentElement.setAttribute("data-theme",currentTheme))}),currentTheme||(currentTheme=document.documentElement.getAttribute("data-theme"));

templates/macros/content.html

@@ -81,6 +81,25 @@
         </section>
 
     </article>
+
+    {# giscus / utterances comments #}
+    {% if config.extra.giscus.enabled_for_all_posts or page.extra.giscus %}
+        {# TODO: HERE GOES GISCUS SUPPORT #}
+    {% elif config.extra.utterances.enabled_for_all_posts or page.extra.utterances %}
+        <div class="comments">
+            <script src="https://utteranc.es/client.js"
+                repo="{{ config.extra.utterances.repo }}"
+                issue-term="{{ config.extra.utterances.issue_term }}"
+                label="{{ config.extra.utterances.label }}"
+                theme="{{ config.extra.utterances.theme }}"
+                {%- if config.extra.utterances.lazy_loading -%}
+                    data-loading="lazy"
+                {%- endif -%}
+                crossorigin="anonymous"
+                async>
+            </script>
+        </div>
+    {% endif %}
 </main>
 
 {% endmacro content %}

templates/partials/header.html

@@ -63,6 +63,13 @@
     ; 
         {%- for domain in config.extra.allowed_domains -%}
             {{ domain.directive }} {{ domain.domains | join(sep=' ') }}
+
+            {# Automatically allow giscus/utterances, if enabled #}
+            {%- if domain.directive == "script-src" or domain.directive == "frame-src" or domain.directive == "style-src" -%}
+                {%- if config.extra.giscus.enabled_for_all_posts or page.extra.giscus %} giscus.app
+                {%- elif config.extra.utterances.enabled_for_all_posts or page.extra.utterances%} utteranc.es
+                {%- endif %}
+            {%- endif -%}
             {%- if not loop.last -%}
             ;
             {%- endif -%}